@sbb-esta/lyne-elements-dev 4.7.0-dev.1773818683 → 4.7.0-dev.1773821763

package/development/menu-action-common-CE1gySL_.js

@@ -0,0 +1,140 @@
+import { css } from "lit";
+import { SbbDisabledMixin } from "./core/mixins.js";
+import { boxSizingStyles } from "./core/styles.js";
+import { html as html$1 } from "lit/static-html.js";
+import { SbbIconNameMixin } from "./icon.js";
+//#region src/elements/menu/common/menu-action.scss?lit&inline
+var menu_action_default = css`:host {
+  --sbb-menu-action-cursor: var(--sbb-cursor-pointer);
+  outline: none !important;
+  display: block;
+}
+
+@media (any-hover: hover) {
+  :host(:is(:hover:not([disabled], :disabled, [disabled-interactive]), [aria-expanded=true])) {
+    --sbb-menu-background-color: var(--sbb-color-iron);
+    --sbb-menu-background-color: light-dark(var(--sbb-color-iron), var(--sbb-color-milk));
+    --sbb-menu-action-forced-color-border-color: Highlight;
+  }
+}
+
+:host(:is([disabled], :disabled, [disabled-interactive])) {
+  --sbb-menu-action-cursor: var(--sbb-cursor-default);
+  --sbb-menu-action-color: var(--sbb-color-graphite);
+  --sbb-menu-action-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-granite));
+  --sbb-menu-action-forced-color-border-color: GrayText;
+  pointer-events: none;
+  cursor: var(--sbb-cursor-default);
+}
+@media (forced-colors: active) {
+  :host(:is([disabled], :disabled, [disabled-interactive])) {
+    --sbb-menu-action-color: GrayText;
+  }
+}
+
+:host(:is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])) {
+  --sbb-menu-action-cursor: var(--sbb-cursor-default);
+}
+
+@media (forced-colors: active) {
+  :host(:is(:state(button),[state--button])) {
+    --sbb-menu-action-color: ButtonText;
+  }
+}
+
+:host([sbb-badge]:not(:is(:state(has-icon-name),[state--has-icon-name]), :is(:state(slotted-icon),[state--slotted-icon])))::after {
+  inset: 50% calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - 0.5 * var(--sbb-size-icon-ui-small)) auto auto !important;
+  translate: 50% -50%;
+}
+
+:host([sbb-badge]:is(:is(:state(has-icon-name),[state--has-icon-name]), :is(:state(slotted-icon),[state--slotted-icon])))::after {
+  inset: calc(var(--sbb-menu-action-outer-vertical-padding) + var(--sbb-menu-action-content-padding-block) + var(--sbb-badge-position-offset)) calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - var(--sbb-size-icon-ui-small) + var(--sbb-badge-position-offset)) auto auto !important;
+}
+
+:host([aria-controls*=sbb-menu]) {
+  --sbb-menu-action-submenu-icon-display: flex;
+}
+
+:is(.sbb-menu-button, .sbb-menu-link) {
+  text-decoration: none;
+  display: block;
+  width: 100%;
+  color: var(--sbb-menu-action-color);
+  padding: var(--sbb-menu-action-outer-vertical-padding) var(--sbb-menu-action-outer-horizontal-padding);
+  cursor: var(--sbb-menu-action-cursor);
+  outline: none;
+}
+
+.sbb-menu-action__content {
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
+  font-family: var(--sbb-typo-font-family);
+  font-weight: normal;
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  font-size: var(--sbb-text-font-size);
+  display: flex;
+  align-items: center;
+  gap: var(--sbb-menu-action-gap);
+  padding: var(--sbb-menu-action-content-padding-block) var(--sbb-menu-action-content-padding-inline);
+  border-radius: var(--sbb-menu-action-border-radius);
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  background-color: var(--sbb-menu-background-color);
+}
+:host(:focus-visible) .sbb-menu-action__content, :focus-visible .sbb-menu-action__content {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
+}
+@media (forced-colors: active) {
+  .sbb-menu-action__content {
+    border: var(--sbb-border-width-2x) solid var(--sbb-menu-action-forced-color-border-color);
+  }
+}
+
+.sbb-menu-action__icon,
+.sbb-menu-submenu__icon {
+  display: flex;
+  min-width: var(--sbb-size-icon-ui-small);
+  min-height: var(--sbb-size-icon-ui-small);
+}
+
+.sbb-menu-submenu__icon {
+  display: var(--sbb-menu-action-submenu-icon-display, none);
+  margin-inline-start: auto;
+}
+
+.sbb-menu-action__label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+:host(:is([disabled], :disabled, [disabled-interactive])) .sbb-menu-action__label {
+  text-decoration: line-through;
+}`;
+//#endregion
+//#region src/elements/menu/common/menu-action-common.ts
+var SbbMenuActionCommonElementMixin = (superClass) => {
+	class SbbMenuActionCommonElement extends SbbIconNameMixin(SbbDisabledMixin(superClass)) {
+		static {
+			this.styles = [boxSizingStyles, menu_action_default];
+		}
+		renderTemplate() {
+			return html$1`
+        <span class="sbb-menu-action__content">
+          <span class="sbb-menu-action__icon"> ${super.renderIconSlot()} </span>
+          <span class="sbb-menu-action__label">
+            <slot></slot>
+          </span>
+          <span class="sbb-menu-submenu__icon">
+            <sbb-icon name="chevron-small-right-small"></sbb-icon>
+          </span>
+        </span>
+      `;
+		}
+	}
+	return SbbMenuActionCommonElement;
+};
+//#endregion
+export { SbbMenuActionCommonElementMixin as t };
+
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS1hY3Rpb24tY29tbW9uLUNFMWd5U0xfLmpzIiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy9tZW51L2NvbW1vbi9tZW51LWFjdGlvbi5zY3NzP2xpdCZpbmxpbmUiLCIuLi8uLi8uLi9zcmMvZWxlbWVudHMvbWVudS9jb21tb24vbWVudS1hY3Rpb24tY29tbW9uLnRzIl0sInNvdXJjZXNDb250ZW50IjpbIkB1c2UgJy4uLy4uL2NvcmUvc3R5bGVzJyBhcyBzYmI7XG5cbiRkaXNhYmxlZDogJ1tkaXNhYmxlZF0sIDpkaXNhYmxlZCwgW2Rpc2FibGVkLWludGVyYWN0aXZlXSc7XG5cbjpob3N0IHtcbiAgLS1zYmItbWVudS1hY3Rpb24tY3Vyc29yOiB2YXIoLS1zYmItY3Vyc29yLXBvaW50ZXIpO1xuXG4gIC8vIFVzZSAhaW1wb3J0YW50IGhlcmUgdG8gbm90IGludGVyZmVyZSB3aXRoIEZpcmVmb3ggZm9jdXMgcmluZyBkZWZpbml0aW9uXG4gIC8vIHdoaWNoIGFwcGVhcnMgaW4gbm9ybWFsaXplIENTUyBvZiBzZXZlcmFsIGZyYW1ld29ya3MuXG4gIG91dGxpbmU6IG5vbmUgIWltcG9ydGFudDtcbiAgZGlzcGxheTogYmxvY2s7XG59XG5cbjpob3N0KDppcyg6aG92ZXI6bm90KCN7JGRpc2FibGVkfSksIFthcmlhLWV4cGFuZGVkPSd0cnVlJ10pKSB7XG4gIEBpbmNsdWRlIHNiYi5ob3Zlci1tcSgkaG92ZXI6IHRydWUpIHtcbiAgICAtLXNiYi1tZW51LWJhY2tncm91bmQtY29sb3I6IGxpZ2h0LWRhcmsodmFyKC0tc2JiLWNvbG9yLWlyb24pLCB2YXIoLS1zYmItY29sb3ItbWlsaykpO1xuICAgIC0tc2JiLW1lbnUtYWN0aW9uLWZvcmNlZC1jb2xvci1ib3JkZXItY29sb3I6IEhpZ2hsaWdodDtcbiAgfVxufVxuXG46aG9zdCg6aXMoI3skZGlzYWJsZWR9KSkge1xuICAtLXNiYi1tZW51LWFjdGlvbi1jdXJzb3I6IHZhcigtLXNiYi1jdXJzb3ItZGVmYXVsdCk7XG4gIC0tc2JiLW1lbnUtYWN0aW9uLWNvbG9yOiBsaWdodC1kYXJrKHZhcigtLXNiYi1jb2xvci1ncmFwaGl0ZSksIHZhcigtLXNiYi1jb2xvci1ncmFuaXRlKSk7XG4gIC0tc2JiLW1lbnUtYWN0aW9uLWZvcmNlZC1jb2xvci1ib3JkZXItY29sb3I6IEdyYXlUZXh0O1xuXG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICBjdXJzb3I6IHZhcigtLXNiYi1jdXJzb3ItZGVmYXVsdCk7XG5cbiAgQGluY2x1ZGUgc2JiLmlmLWZvcmNlZC1jb2xvcnMge1xuICAgIC0tc2JiLW1lbnUtYWN0aW9uLWNvbG9yOiBHcmF5VGV4dDtcbiAgfVxufVxuXG46aG9zdCg6c3RhdGUoc2JiLW1lbnUtdHJpZ2dlcikpIHtcbiAgLS1zYmItbWVudS1hY3Rpb24tY3Vyc29yOiB2YXIoLS1zYmItY3Vyc29yLWRlZmF1bHQpO1xufVxuXG46aG9zdCg6c3RhdGUoYnV0dG9uKSkge1xuICBAaW5jbHVkZSBzYmIuaWYtZm9yY2VkLWNvbG9ycyB7XG4gICAgLS1zYmItbWVudS1hY3Rpb24tY29sb3I6IEJ1dHRvblRleHQ7XG4gIH1cbn1cblxuOmhvc3QoW3NiYi1iYWRnZV06bm90KDpzdGF0ZShoYXMtaWNvbi1uYW1lKSwgOnN0YXRlKHNsb3R0ZWQtaWNvbikpKTo6YWZ0ZXIge1xuICBpbnNldDogNTAlXG4gICAgY2FsYyhcbiAgICAgIDEwMCUgLSB2YXIoLS1zYmItbWVudS1hY3Rpb24tb3V0ZXItaG9yaXpvbnRhbC1wYWRkaW5nKSAtIHZhcihcbiAgICAgICAgICAtLXNiYi1tZW51LWFjdGlvbi1jb250ZW50LXBhZGRpbmctaW5saW5lXG4gICAgICAgICkgLVxuICAgICAgICAwLjUgKiB2YXIoLS1zYmItc2l6ZS1pY29uLXVpLXNtYWxsKVxuICAgIClcbiAgICBhdXRvIGF1dG8gIWltcG9ydGFudDtcbiAgdHJhbnNsYXRlOiA1MCUgLTUwJTtcbn1cblxuOmhvc3QoW3NiYi1iYWRnZV06aXMoOnN0YXRlKGhhcy1pY29uLW5hbWUpLCA6c3RhdGUoc2xvdHRlZC1pY29uKSkpOjphZnRlciB7XG4gIGluc2V0OiBjYWxjKFxuICAgICAgdmFyKC0tc2JiLW1lbnUtYWN0aW9uLW91dGVyLXZlcnRpY2FsLXBhZGRpbmcpICsgdmFyKC0tc2JiLW1lbnUtYWN0aW9uLWNvbnRlbnQtcGFkZGluZy1ibG9jaykgK1xuICAgICAgICB2YXIoLS1zYmItYmFkZ2UtcG9zaXRpb24tb2Zmc2V0KVxuICAgIClcbiAgICBjYWxjKFxuICAgICAgMTAwJSAtIHZhcigtLXNiYi1tZW51LWFjdGlvbi1vdXRlci1ob3Jpem9udGFsLXBhZGRpbmcpIC0gdmFyKFxuICAgICAgICAgIC0tc2JiLW1lbnUtYWN0aW9uLWNvbnRlbnQtcGFkZGluZy1pbmxpbmVcbiAgICAgICAgKSAtIHZhcigtLXNiYi1zaXplLWljb24tdWktc21hbGwpICtcbiAgICAgICAgdmFyKC0tc2JiLWJhZGdlLXBvc2l0aW9uLW9mZnNldClcbiAgICApXG4gICAgYXV0byBhdXRvICFpbXBvcnRhbnQ7XG59XG5cbjpob3N0KFthcmlhLWNvbnRyb2xzKj0nc2JiLW1lbnUnXSkge1xuICAtLXNiYi1tZW51LWFjdGlvbi1zdWJtZW51LWljb24tZGlzcGxheTogZmxleDtcbn1cblxuOmlzKC5zYmItbWVudS1idXR0b24sIC5zYmItbWVudS1saW5rKSB7XG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgZGlzcGxheTogYmxvY2s7XG4gIHdpZHRoOiAxMDAlO1xuICBjb2xvcjogdmFyKC0tc2JiLW1lbnUtYWN0aW9uLWNvbG9yKTtcbiAgcGFkZGluZzogdmFyKC0tc2JiLW1lbnUtYWN0aW9uLW91dGVyLXZlcnRpY2FsLXBhZGRpbmcpXG4gICAgdmFyKC0tc2JiLW1lbnUtYWN0aW9uLW91dGVyLWhvcml6b250YWwtcGFkZGluZyk7XG4gIGN1cnNvcjogdmFyKC0tc2JiLW1lbnUtYWN0aW9uLWN1cnNvcik7XG4gIG91dGxpbmU6IG5vbmU7XG59XG5cbi5zYmItbWVudS1hY3Rpb25fX2NvbnRlbnQge1xuICBAaW5jbHVkZSBzYmIudGV4dC14cy0tcmVndWxhcjtcblxuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBnYXA6IHZhcigtLXNiYi1tZW51LWFjdGlvbi1nYXApO1xuICBwYWRkaW5nOiB2YXIoLS1zYmItbWVudS1hY3Rpb24tY29udGVudC1wYWRkaW5nLWJsb2NrKVxuICAgIHZhcigtLXNiYi1tZW51LWFjdGlvbi1jb250ZW50LXBhZGRpbmctaW5saW5lKTtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tc2JiLW1lbnUtYWN0aW9uLWJvcmRlci1yYWRpdXMpO1xuICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgLXdlYmtpdC10YXAtaGlnaGxpZ2h0LWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2JiLW1lbnUtYmFja2dyb3VuZC1jb2xvcik7XG5cbiAgLy8gSGFuZGxlIGZvY3VzIG9uIHRoZSBob3N0IChidXR0b24gdmFyaWFudClcbiAgOmhvc3QoOmZvY3VzLXZpc2libGUpICYsXG4gIC8vIEhhbmRsZSBmb2N1cyBvbiB0aGUgYWN0aW9uIChsaW5rIHZhcmlhbnQpXG4gIDpmb2N1cy12aXNpYmxlICYge1xuICAgIEBpbmNsdWRlIHNiYi5mb2N1cy1vdXRsaW5lO1xuICB9XG5cbiAgQGluY2x1ZGUgc2JiLmlmLWZvcmNlZC1jb2xvcnMge1xuICAgIGJvcmRlcjogdmFyKC0tc2JiLWJvcmRlci13aWR0aC0yeCkgc29saWQgdmFyKC0tc2JiLW1lbnUtYWN0aW9uLWZvcmNlZC1jb2xvci1ib3JkZXItY29sb3IpO1xuICB9XG59XG5cbi5zYmItbWVudS1hY3Rpb25fX2ljb24sXG4uc2JiLW1lbnUtc3VibWVudV9faWNvbiB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIG1pbi13aWR0aDogdmFyKC0tc2JiLXNpemUtaWNvbi11aS1zbWFsbCk7XG4gIG1pbi1oZWlnaHQ6IHZhcigtLXNiYi1zaXplLWljb24tdWktc21hbGwpO1xufVxuXG4uc2JiLW1lbnUtc3VibWVudV9faWNvbiB7XG4gIGRpc3BsYXk6IHZhcigtLXNiYi1tZW51LWFjdGlvbi1zdWJtZW51LWljb24tZGlzcGxheSwgbm9uZSk7XG4gIG1hcmdpbi1pbmxpbmUtc3RhcnQ6IGF1dG87XG59XG5cbi5zYmItbWVudS1hY3Rpb25fX2xhYmVsIHtcbiAgQGluY2x1ZGUgc2JiLmVsbGlwc2lzO1xuXG4gIDpob3N0KDppcygjeyRkaXNhYmxlZH0pKSAmIHtcbiAgICB0ZXh0LWRlY29yYXRpb246IGxpbmUtdGhyb3VnaDtcbiAgfVxufVxuIiwiaW1wb3J0IHsgdHlwZSBDU1NSZXN1bHRHcm91cCwgdHlwZSBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBodG1sIH0gZnJvbSAnbGl0L3N0YXRpYy1odG1sLmpzJztcblxuaW1wb3J0IHR5cGUgeyBTYmJBY3Rpb25CYXNlRWxlbWVudCB9IGZyb20gJy4uLy4uL2NvcmUvYmFzZS1lbGVtZW50cy50cyc7XG5pbXBvcnQgeyB0eXBlIEFic3RyYWN0Q29uc3RydWN0b3IsIFNiYkRpc2FibGVkTWl4aW4gfSBmcm9tICcuLi8uLi9jb3JlL21peGlucy50cyc7XG5pbXBvcnQgeyBib3hTaXppbmdTdHlsZXMgfSBmcm9tICcuLi8uLi9jb3JlL3N0eWxlcy50cyc7XG5pbXBvcnQgeyBTYmJJY29uTmFtZU1peGluIH0gZnJvbSAnLi4vLi4vaWNvbi50cyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL21lbnUtYWN0aW9uLnNjc3M/bGl0JmlubGluZSc7XG5cbmV4cG9ydCBkZWNsYXJlIGNsYXNzIFNiYk1lbnVBY3Rpb25Db21tb25FbGVtZW50TWl4aW5UeXBlIGV4dGVuZHMgU2JiSWNvbk5hbWVNaXhpbihcbiAgU2JiRGlzYWJsZWRNaXhpbihTYmJBY3Rpb25CYXNlRWxlbWVudCksXG4pIHt9XG5cbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbmV4cG9ydCBjb25zdCBTYmJNZW51QWN0aW9uQ29tbW9uRWxlbWVudE1peGluID0gPFxuICBUIGV4dGVuZHMgQWJzdHJhY3RDb25zdHJ1Y3RvcjxTYmJBY3Rpb25CYXNlRWxlbWVudD4sXG4+KFxuICBzdXBlckNsYXNzOiBULFxuKTogQWJzdHJhY3RDb25zdHJ1Y3RvcjxTYmJNZW51QWN0aW9uQ29tbW9uRWxlbWVudE1peGluVHlwZT4gJiBUID0+IHtcbiAgYWJzdHJhY3QgY2xhc3MgU2JiTWVudUFjdGlvbkNvbW1vbkVsZW1lbnRcbiAgICBleHRlbmRzIFNiYkljb25OYW1lTWl4aW4oU2JiRGlzYWJsZWRNaXhpbihzdXBlckNsYXNzKSlcbiAgICBpbXBsZW1lbnRzIFNiYk1lbnVBY3Rpb25Db21tb25FbGVtZW50TWl4aW5UeXBlXG4gIHtcbiAgICBwdWJsaWMgc3RhdGljIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBbYm94U2l6aW5nU3R5bGVzLCBzdHlsZV07XG5cbiAgICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyVGVtcGxhdGUoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgICAgcmV0dXJuIGh0bWxgXG4gICAgICAgIDxzcGFuIGNsYXNzPVwic2JiLW1lbnUtYWN0aW9uX19jb250ZW50XCI+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItbWVudS1hY3Rpb25fX2ljb25cIj4gJHtzdXBlci5yZW5kZXJJY29uU2xvdCgpfSA8L3NwYW4+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItbWVudS1hY3Rpb25fX2xhYmVsXCI+XG4gICAgICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwic2JiLW1lbnUtc3VibWVudV9faWNvblwiPlxuICAgICAgICAgICAgPHNiYi1pY29uIG5hbWU9XCJjaGV2cm9uLXNtYWxsLXJpZ2h0LXNtYWxsXCI+PC9zYmItaWNvbj5cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIGA7XG4gICAgfVxuICB9XG4gIHJldHVybiBTYmJNZW51QWN0aW9uQ29tbW9uRWxlbWVudCBhcyB1bmtub3duIGFzIEFic3RyYWN0Q29uc3RydWN0b3I8U2JiTWVudUFjdGlvbkNvbW1vbkVsZW1lbnRNaXhpblR5cGU+ICZcbiAgICBUO1xufTtcbiJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQ2VBLElBQWEsbUNBR1gsZUFDZ0U7Q0FDaEUsTUFBZSxtQ0FDTCxpQkFBaUIsaUJBQWlCLFdBQVcsQ0FBQyxDQUFBOztBQUd4QyxRQUFBLFNBQXlCLENBQUMsaUJBQWlCLG9CQUFNOztFQUU1QyxpQkFBYztBQUMvQixVQUFPLE1BQUk7O2lEQUVnQyxNQUFNLGdCQUFnQixDQUFBOzs7Ozs7Ozs7OztBQVdyRSxRQUFPIn0=