<style include="cr-icons">
:host {
display: flex;
flex-direction: column;
margin: 16px;
}
#titleContainer {
align-items: center;
display: flex;
height: 22px;
}
.icon-background {
align-items: center;
border-radius: 50%;
display: flex;
height: 18px;
justify-content: center;
margin-inline-end: 8px;
width: 18px;
}
.module-icon {
-webkit-mask-size: 20px 20px;
background-color: var(--color-new-tab-page-primary-foreground);
height: var(--cr-icon-size);
width: var(--cr-icon-size);
}
#title {
color: var(--color-new-tab-page-primary-foreground);
font-size: 15px;
font-weight: normal;
}
#chip {
background-color: var(--color-new-tab-page-chip-background);
border-radius: 4px;
color: var(--color-new-tab-page-chip-foreground);
font-size: 10px;
height: 12px;
margin-inline-start: 10px;
padding: 2px 6px;
}
#headerSpacer {
flex-grow: 1;
}
cr-action-menu {
--cr-menu-shadow: var(--ntp-menu-shadow);
}
cr-icon-button {
--cr-icon-button-icon-size: 16px;
--cr-icon-button-fill-color: var(--color-new-tab-page-primary-foreground);
--cr-icon-button-hover-background-color:
var(--color-new-tab-page-control-background-hovered);
margin-inline-end: -4px;
margin-inline-start: 0;
}
#infoButton {
--cr-icon-image: url(./icons/info.svg);
}
#menuButton {
margin-inline-end: -10px;
}
:host([modules-redesigned-enabled_]) #menuButton {
background-color: var(--color-new-tab-page-module-scroll-button);
height: 18px;
margin: 0;
width: 18px;
}
:host([modules-redesigned-enabled_]) #menuButton:hover {
background-color: var(--color-new-tab-page-module-scroll-button-hover);
}
#description {
color: var(--color-new-tab-page-secondary-foreground);
font-size: 12px;
height: 12px;
margin-top: 3px;
}
</style>
<div id="titleContainer">
<template is="dom-if" if="[[showIcon_]]">
<div class="icon-background">
<div class="module-icon" style$="[[iconStyle_]]">
</div>
</div>
</template>
<h2 id="title"><slot></slot></h2>
<template is="dom-if" if="[[chipText]]">
<div id="chip">[[chipText]]</div>
</template>
<div id="headerSpacer"></div>
<slot name="title-actions"></slot>
<template is="dom-if" if="[[showInfoButton]]">
<cr-icon-button id="infoButton" title="$i18n{moduleInfoButtonTitle}"
on-click="onInfoButtonClick_">
</cr-icon-button>
</template>
<template is="dom-if" if="[[!hideMenuButton]]" restamp>
<cr-icon-button id="menuButton" title="[[moreActionsText]]"
class="icon-more-vert" on-click="onMenuButtonClick_">
</cr-icon-button>
</template>
</div>
<template is="dom-if" if="[[descriptionText]]">
<span id="description">[[descriptionText]]</span>
</template>
<cr-action-menu id="actionMenu">
<slot name="action-menu-items"></slot>
<template is="dom-if" if="[[showDismissButton]]">
<button id="dismissButton" class="dropdown-item"
on-click="onDismissButtonClick_">
[[dismissText]]
</button>
</template>
<button id="disableButton" class="dropdown-item"
on-click="onDisableButtonClick_">
[[disableText]]
</button>
<button id="customizeButton" class="dropdown-item"
on-click="onCustomizeButtonClick_">
$i18n{modulesCustomizeButtonText}
</button>
<template is="dom-if" if="[[showInfoButtonDropdown]]">
<button id="infoButton" class="dropdown-item"
on-click="onInfoButtonClick_">
$i18n{moduleInfoButtonTitle}
</button>
</template>
</cr-action-menu>