<style>
:host {
display: block;
height: 100%;
width: 100%;
}
ntp-module-header {
margin-bottom: 8px;
}
#files {
display: flex;
flex-direction: column;
margin-bottom: 7px;
}
.file {
box-sizing: border-box;
color: var(--color-new-tab-page-primary-foreground);
display: flex;
flex-shrink: 0;
height: 56px;
outline: none;
padding: 8px 18px;
text-decoration: none;
}
.file:hover {
background-color: var(--color-new-tab-page-control-background-hovered);
}
.file:active,
:host-context(.focus-outline-visible) .file:focus {
background-color: var(--color-new-tab-page-active-background);
}
.file-icon {
height: 19px;
margin-inline-end: 19px;
margin-top: 3px;
object-fit: contain;
width: 19px;
}
.file-info {
display: flex;
flex-direction: column;
flex-grow: 1;
min-width: 0;
}
.file-title,
.file-description {
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-title {
font-size: var(--ntp-module-text-size);
}
.file-description {
color: var(--color-new-tab-page-secondary-foreground);
font-size: var(--ntp-module-secondary-text-size);
}
</style>
<ntp-module-header
dismiss-text="[[i18n('modulesDriveDismissButtonText')]]"
disable-text="[[i18n('modulesDriveDisableButtonText')]]"
more-actions-text="[[i18n('modulesDriveMoreActionsButtonText')]]"
show-info-button on-info-button-click="onInfoButtonClick_"
show-dismiss-button on-dismiss-button-click="onDismissButtonClick_"
on-disable-button-click="onDisableButtonClick_"
icon-src="icons/drive_logo.svg">
$i18n{modulesDriveTitle}
</ntp-module-header>
<div id="files">
<template id="fileRepeat" is="dom-repeat" items="[[files]]">
<a class="file" href="[[item.itemUrl.url]]" on-click="onFileClick_"
on-auxclick="onFileClick_">
<img
is="cr-auto-img"
class="file-icon"
draggable="false"
auto-src="[[getImageSrc_(item)]]">
</img>
<div class="file-info">
<div class="file-title">[[item.title]]</div>
<div class="file-description">[[item.justificationText]]</div>
</div>
</a>
</template>
</div>
<cr-lazy-render id="infoDialogRender">
<template>
<ntp-info-dialog inner-h-t-m-l="[[i18nAdvanced('modulesDriveInfo')]]">
</ntp-info-dialog>
</template>
</cr-lazy-render>