<style include="cr-shared-style cr-hidden-style">
:host {
--cr-url-list-item-padding: 0;
--product-selector-width: 220px;
text-align: start;
}
cr-action-menu {
--cr-action-menu-padding: 0;
--cr-menu-border-radius: 10px;
}
cr-expand-button {
padding: 6px 16px;
}
hr {
background: var(--color-product-specifications-divider);
border: none;
height: 1px;
margin: 0;
}
.dropdown-item {
padding: 0 16px;
}
.dropdown-spacer {
height: 10px;
}
.expand-icon {
padding: var(--iron-icon-padding);
}
.section-title {
line-height: 16px;
font-size: 12px;
font-weight: 500;
}
#selectionContainer {
box-sizing: border-box;
overflow: clip;
width: var(--product-selector-width);
}
#empty {
font-weight: 500;
line-height: 20px;
padding: 12px;
width: var(--product-selector-width);
}
#remove {
--icon-size: 16px;
--iron-icon-height: var(--icon-size);
--iron-icon-width: var(--icon-size);
color: var(--cr-secondary-text-color);
font-weight: 400;
font-size: 12px;
gap: 8px;
padding: 16px;
}
</style>
<cr-lazy-render id="menu">
<template>
<cr-action-menu on-close="onClose_">
<div id="selectionContainer">
<template is="dom-repeat" items="[[sections]]" as="section">
<cr-expand-button expanded="{{section.expanded}}" no-hover
expand-icon="cr:arrow-drop-down"
collapse-icon="cr:arrow-drop-up">
<div class="section-title">[[section.title]]</div>
</cr-expand-button>
<cr-collapse opened="[[section.expanded]]">
<template is="dom-repeat" items="[[section.entries]]">
<cr-url-list-item class="dropdown-item" size="medium"
url="[[item.url]]" title="[[item.title]]"
data-url-section="[[section.sectionType]]"
description="[[getUrl_(item)]]" no-hover
on-click="onSelect_">
</cr-url-list-item>
</template>
<!-- Add spacer instead of adding margin or padding to the -->
<!-- parent for smooth expand/collapse transitions. -->
<div class="dropdown-spacer"></div>
</cr-collapse>
</template>
<div id="empty" hidden="[[sections]]">$i18n{emptyMenu}</div>
</div>
<template is="dom-if" if="[[selectedUrl.length]]">
<hr>
<button id="remove" class="dropdown-item" role="menuitem"
on-click="onRemoveClick_">
<cr-icon icon="product-specifications:remove"></cr-icon>
$i18n{removeColumn}
</button>
</template>
</cr-action-menu>
</template>
</cr-lazy-render>