@sbb-esta/lyne-elements-dev 5.10.0-dev.1791787224 → 5.10.0-dev.1791795903
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/custom-elements.json
CHANGED
|
@@ -135112,6 +135112,18 @@
|
|
|
135112
135112
|
"description": "The element that will trigger the menu overlay.\n\nFor attribute usage, provide an id reference.",
|
|
135113
135113
|
"attribute": "trigger"
|
|
135114
135114
|
},
|
|
135115
|
+
{
|
|
135116
|
+
"kind": "field",
|
|
135117
|
+
"name": "hideIconSpace",
|
|
135118
|
+
"type": {
|
|
135119
|
+
"text": "boolean"
|
|
135120
|
+
},
|
|
135121
|
+
"privacy": "public",
|
|
135122
|
+
"default": "false",
|
|
135123
|
+
"description": "Whether the space reserved for the icon should be hidden.",
|
|
135124
|
+
"attribute": "hide-icon-space",
|
|
135125
|
+
"reflects": true
|
|
135126
|
+
},
|
|
135115
135127
|
{
|
|
135116
135128
|
"kind": "field",
|
|
135117
135129
|
"name": "_menu",
|
|
@@ -135879,6 +135891,15 @@
|
|
|
135879
135891
|
"default": "null",
|
|
135880
135892
|
"description": "The element that will trigger the menu overlay.\n\nFor attribute usage, provide an id reference.",
|
|
135881
135893
|
"fieldName": "trigger"
|
|
135894
|
+
},
|
|
135895
|
+
{
|
|
135896
|
+
"name": "hide-icon-space",
|
|
135897
|
+
"type": {
|
|
135898
|
+
"text": "boolean"
|
|
135899
|
+
},
|
|
135900
|
+
"default": "false",
|
|
135901
|
+
"description": "Whether the space reserved for the icon should be hidden.",
|
|
135902
|
+
"fieldName": "hideIconSpace"
|
|
135882
135903
|
}
|
|
135883
135904
|
],
|
|
135884
135905
|
"superclass": {
|
|
@@ -19,6 +19,10 @@ export declare class SbbMenuElement extends SbbOpenCloseBaseElement {
|
|
|
19
19
|
* For attribute usage, provide an id reference.
|
|
20
20
|
*/
|
|
21
21
|
accessor trigger: HTMLElement | null;
|
|
22
|
+
/**
|
|
23
|
+
* Whether the space reserved for the icon should be hidden.
|
|
24
|
+
*/
|
|
25
|
+
accessor hideIconSpace: boolean;
|
|
22
26
|
private _menu;
|
|
23
27
|
private _triggerElement;
|
|
24
28
|
private _triggerAbortController;
|
package/development/menu.pure.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { html, isServer, unsafeCSS } from "lit";
|
|
2
|
-
import { SbbButtonBaseElement, SbbDarkModeController, SbbDisabledInteractiveMixin, SbbDisabledMixin, SbbDisabledTabIndexActionMixin, SbbEscapableOverlayController, SbbFocusTrapController, SbbInertController, SbbLanguageController, SbbLinkBaseElement, SbbMediaMatcherController, SbbMediaQueryBreakpointSmallAndBelow, SbbOpenCloseBaseElement, SbbScrollController, forwardEvent, getElementPosition, getElementPositionHorizontal, getNextElementIndex, i18nGoBack, idReference, interactivityChecker, isArrowKeyOrPageKeysPressed, isEventOnElement, isZeroAnimationDuration, popoverResetStyles, removeAriaOverlayTriggerProperties, scrollbarStyles, setAriaOverlayTriggerProperties, ɵstateController } from "./core.js";
|
|
2
|
+
import { SbbButtonBaseElement, SbbDarkModeController, SbbDisabledInteractiveMixin, SbbDisabledMixin, SbbDisabledTabIndexActionMixin, SbbEscapableOverlayController, SbbFocusTrapController, SbbInertController, SbbLanguageController, SbbLinkBaseElement, SbbMediaMatcherController, SbbMediaQueryBreakpointSmallAndBelow, SbbOpenCloseBaseElement, SbbScrollController, forceType, forwardEvent, getElementPosition, getElementPositionHorizontal, getNextElementIndex, i18nGoBack, idReference, interactivityChecker, isArrowKeyOrPageKeysPressed, isEventOnElement, isZeroAnimationDuration, popoverResetStyles, removeAriaOverlayTriggerProperties, scrollbarStyles, setAriaOverlayTriggerProperties, ɵstateController } from "./core.js";
|
|
3
3
|
import { SbbIconNameMixin } from "./icon.pure.js";
|
|
4
4
|
import { __esDecorate, __runInitializers } from "tslib";
|
|
5
5
|
import { property } from "lit/decorators.js";
|
|
@@ -7,7 +7,7 @@ import { ref } from "lit/directives/ref.js";
|
|
|
7
7
|
import { SbbDividerElement } from "./divider.pure.js";
|
|
8
8
|
|
|
9
9
|
//#region src/elements/menu/common/menu-action.scss?inline
|
|
10
|
-
var menu_action_default = ":host {\n --sbb-menu-action-cursor: var(--sbb-cursor-pointer);\n outline: none !important;\n display: block;\n}\n\n@media (any-hover: hover) {\n :host(:is(:hover:not([disabled], :disabled, [disabled-interactive]), [aria-expanded=true])) {\n --sbb-menu-background-color: var(--sbb-color-iron);\n --sbb-menu-background-color: light-dark(var(--sbb-color-iron), var(--sbb-color-milk));\n --sbb-menu-action-forced-color-border-color: Highlight;\n }\n}\n\n:host(:is([disabled], :disabled, [disabled-interactive])) {\n --sbb-menu-action-cursor: var(--sbb-cursor-default);\n --sbb-menu-action-color: var(--sbb-color-graphite);\n --sbb-menu-action-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-granite));\n --sbb-menu-action-forced-color-border-color: GrayText;\n pointer-events: none;\n cursor: var(--sbb-cursor-default);\n}\n@media (forced-colors: active) {\n :host(:is([disabled], :disabled, [disabled-interactive])) {\n --sbb-menu-action-color: GrayText;\n }\n}\n\n:host(:is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])) {\n --sbb-menu-action-cursor: var(--sbb-cursor-default);\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(button),[state--button])) {\n --sbb-menu-action-color: ButtonText;\n }\n}\n\n:host([sbb-badge]:not(:is(:state(has-icon-name),[state--has-icon-name]), :is(:state(slotted-icon),[state--slotted-icon])))::after {\n 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;\n translate: 50% -50%;\n}\n\n:host([sbb-badge]:is(:is(:state(has-icon-name),[state--has-icon-name]), :is(:state(slotted-icon),[state--slotted-icon])))::after {\n 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;\n}\n\n:host([aria-controls]) {\n --sbb-menu-action-submenu-icon-display: flex;\n}\n\n:is(.sbb-menu-button, .sbb-menu-link) {\n text-decoration: none;\n display: block;\n width: 100%;\n color: var(--sbb-menu-action-color);\n padding: var(--sbb-menu-action-outer-vertical-padding) var(--sbb-menu-action-outer-horizontal-padding);\n cursor: var(--sbb-menu-action-cursor);\n outline: none;\n}\n\n.sbb-menu-action__content {\n display: flex;\n align-items: center;\n gap: var(--sbb-menu-action-gap);\n padding: var(--sbb-menu-action-content-padding-block) var(--sbb-menu-action-content-padding-inline);\n border-radius: var(--sbb-menu-action-border-radius);\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n background-color: var(--sbb-menu-background-color);\n line-height: var(--sbb-typo-line-height-text);\n letter-spacing: var(--sbb-letter-spacing-text);\n font-size: var(--sbb-text-font-size-xs);\n}\n:host(:focus-visible) .sbb-menu-action__content, :focus-visible .sbb-menu-action__content {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n}\n@media (forced-colors: active) {\n .sbb-menu-action__content {\n border: var(--sbb-border-width-2x) solid var(--sbb-menu-action-forced-color-border-color);\n }\n}\n\n.sbb-menu-action__icon,\n.sbb-menu-submenu__icon {\n
|
|
10
|
+
var menu_action_default = ":host {\n --sbb-menu-action-cursor: var(--sbb-cursor-pointer);\n outline: none !important;\n display: block;\n}\n\n@media (any-hover: hover) {\n :host(:is(:hover:not([disabled], :disabled, [disabled-interactive]), [aria-expanded=true])) {\n --sbb-menu-background-color: var(--sbb-color-iron);\n --sbb-menu-background-color: light-dark(var(--sbb-color-iron), var(--sbb-color-milk));\n --sbb-menu-action-forced-color-border-color: Highlight;\n }\n}\n\n:host(:is([disabled], :disabled, [disabled-interactive])) {\n --sbb-menu-action-cursor: var(--sbb-cursor-default);\n --sbb-menu-action-color: var(--sbb-color-graphite);\n --sbb-menu-action-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-granite));\n --sbb-menu-action-forced-color-border-color: GrayText;\n pointer-events: none;\n cursor: var(--sbb-cursor-default);\n}\n@media (forced-colors: active) {\n :host(:is([disabled], :disabled, [disabled-interactive])) {\n --sbb-menu-action-color: GrayText;\n }\n}\n\n:host(:is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])) {\n --sbb-menu-action-cursor: var(--sbb-cursor-default);\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(button),[state--button])) {\n --sbb-menu-action-color: ButtonText;\n }\n}\n\n:host([sbb-badge]:not(:is(:state(has-icon-name),[state--has-icon-name]), :is(:state(slotted-icon),[state--slotted-icon])))::after {\n 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;\n translate: 50% -50%;\n}\n\n:host([sbb-badge]:is(:is(:state(has-icon-name),[state--has-icon-name]), :is(:state(slotted-icon),[state--slotted-icon])))::after {\n 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;\n}\n\n:host([aria-controls]) {\n --sbb-menu-action-submenu-icon-display: flex;\n}\n\n:is(.sbb-menu-button, .sbb-menu-link) {\n text-decoration: none;\n display: block;\n width: 100%;\n color: var(--sbb-menu-action-color);\n padding: var(--sbb-menu-action-outer-vertical-padding) var(--sbb-menu-action-outer-horizontal-padding);\n cursor: var(--sbb-menu-action-cursor);\n outline: none;\n}\n\n.sbb-menu-action__content {\n display: flex;\n align-items: center;\n gap: var(--sbb-menu-action-gap);\n padding: var(--sbb-menu-action-content-padding-block) var(--sbb-menu-action-content-padding-inline);\n border-radius: var(--sbb-menu-action-border-radius);\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n background-color: var(--sbb-menu-background-color);\n line-height: var(--sbb-typo-line-height-text);\n letter-spacing: var(--sbb-letter-spacing-text);\n font-size: var(--sbb-text-font-size-xs);\n}\n:host(:not([sbb-badge], :is(:state(has-icon-name),[state--has-icon-name]), :is(:state(slotted-icon),[state--slotted-icon]))) .sbb-menu-action__content {\n padding: var(--sbb-menu-action-content-padding-block) var(--sbb-menu-item-hide-icon-padding-inline, var(--sbb-menu-action-content-padding-inline));\n}\n:host(:focus-visible) .sbb-menu-action__content, :focus-visible .sbb-menu-action__content {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n}\n@media (forced-colors: active) {\n .sbb-menu-action__content {\n border: var(--sbb-border-width-2x) solid var(--sbb-menu-action-forced-color-border-color);\n }\n}\n\n.sbb-menu-action__icon,\n.sbb-menu-submenu__icon {\n min-width: var(--sbb-size-icon-ui-small);\n min-height: var(--sbb-size-icon-ui-small);\n}\n\n.sbb-menu-action__icon {\n display: flex;\n visibility: visible;\n}\n:host(:not([sbb-badge], :is(:state(has-icon-name),[state--has-icon-name]), :is(:state(slotted-icon),[state--slotted-icon]))) .sbb-menu-action__icon {\n display: var(--sbb-menu-item-hide-icon-display, flex);\n visibility: var(--sbb-menu-item-hide-icon-visibility, visible);\n}\n\n.sbb-menu-submenu__icon {\n display: var(--sbb-menu-action-submenu-icon-display, none);\n margin-inline-start: auto;\n}\n\n.sbb-menu-action__label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n:host(:is([disabled], :disabled, [disabled-interactive])) .sbb-menu-action__label {\n text-decoration: line-through;\n}\n";
|
|
11
11
|
|
|
12
12
|
//#endregion
|
|
13
13
|
//#region src/elements/menu/common/menu-action-common.ts
|
|
@@ -74,7 +74,7 @@ var SbbMenuLinkElement = class extends SbbDisabledInteractiveMixin(SbbMenuAction
|
|
|
74
74
|
|
|
75
75
|
//#endregion
|
|
76
76
|
//#region src/elements/menu/menu/menu.scss?inline
|
|
77
|
-
var menu_default = ":host {\n display: contents;\n --sbb-menu-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-6x)\n );\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n --_sbb-menu-inset: 0 auto auto 0;\n}\n@media (min-width: calc(64rem)) {\n :host {\n --sbb-menu-back-button-display: none;\n }\n}\n\n:host(:is(:is(:state(state-opened),[state--state-opened]), :is(:state(state-opening),[state--state-opening]))) {\n --sbb-menu-visibility: visible;\n --sbb-menu-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 20%, transparent);\n}\n@media (min-width: calc(64rem)) {\n :host(:is(:is(:state(state-opened),[state--state-opened]), :is(:state(state-opening),[state--state-opening]))) {\n --sbb-menu-backdrop-color: transparent;\n }\n}\n\n:host(:not(:is(:state(nested),[state--nested]))) {\n --sbb-menu-back-button-display: none;\n}\n\n:host(:not(:is(:state(state-closed),[state--state-closed]))) {\n --_sbb-menu-inset: 0;\n}\n\n:host(:is(:state(dark),[state--dark])) .sbb-scrollbar-negative {\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);\n --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);\n}\n\n@media (max-width: calc(63.9375rem)) {\n :host(:is(:state(skip-animation),[state--skip-animation])) {\n --sbb-menu-animation-duration: 0ms;\n }\n :host(:is(:state(nested-child),[state--nested-child])) {\n --sbb-menu-transform-x: -100%;\n }\n :host(:is(:state(nested),[state--nested]):is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n --sbb-menu-open-animation-name: open-sideways;\n }\n :host(:is(:state(state-closing),[state--state-closing]):is(:state(nested),[state--nested]):not(:is(:state(close-all),[state--close-all]))) {\n --sbb-menu-close-animation-name: close-sideways;\n }\n}\n::slotted(:not(sbb-menu-button, sbb-menu-link, sbb-divider)) {\n display: block;\n padding-inline: var(--sbb-spacing-fixed-5x);\n}\n\nsbb-divider,\n::slotted(sbb-divider) {\n --sbb-divider-color: var(--sbb-background-color-4-inverted);\n margin-block: var(--sbb-spacing-fixed-2x);\n}\n\nsbb-divider,\n#sbb-menu__back-button {\n display: var(--sbb-menu-back-button-display, block);\n}\n\n.sbb-menu__container {\n position: fixed;\n pointer-events: none;\n inset: var(--_sbb-menu-inset);\n height: var(--sbb-menu-container-height);\n z-index: var(--sbb-menu-z-index, var(--sbb-overlay-default-z-index));\n}\n.sbb-menu__container::before {\n content: \"\";\n visibility: var(--sbb-menu-visibility, hidden);\n pointer-events: all;\n position: fixed;\n inset: var(--_sbb-menu-inset);\n height: var(--sbb-menu-container-height);\n background-color: var(--sbb-menu-backdrop-color, transparent);\n transition-duration: var(--sbb-menu-animation-duration);\n transition-timing-function: var(--sbb-menu-animation-easing);\n transition-property: background-color, visibility;\n}\n:host(:is(:state(nested),[state--nested])) .sbb-menu__container::before {\n display: none;\n}\n\n.sbb-menu {\n display: none;\n opacity: 0;\n pointer-events: none;\n max-width: var(--sbb-menu-max-width);\n min-width: var(--sbb-menu-min-width);\n text-align: start;\n position: absolute;\n inset-inline-start: 0;\n inset-block-start: unset;\n inset-block-end: 0;\n inset-inline-end: unset;\n color: var(--sbb-menu-color);\n border: none;\n border-radius: var(--sbb-menu-border-radius) var(--sbb-menu-border-radius) 0 0;\n background-color: var(--sbb-menu-background-color);\n padding: 0;\n overflow: hidden;\n translate: var(--sbb-menu-transform-x, 0) 0;\n transition: translate var(--sbb-menu-animation-duration);\n}\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) .sbb-menu {\n display: block;\n opacity: 1;\n pointer-events: all;\n animation-name: var(--sbb-menu-open-animation-name, open);\n animation-duration: var(--sbb-menu-animation-duration);\n animation-timing-function: var(--sbb-menu-animation-easing);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-menu {\n pointer-events: none;\n animation-name: var(--sbb-menu-close-animation-name, close);\n}\n@media (forced-colors: active) {\n .sbb-menu {\n outline: var(--sbb-border-width-1x) solid CanvasText;\n }\n}\n@media (min-width: calc(64rem)) {\n .sbb-menu {\n top: 0;\n bottom: unset;\n left: 0;\n right: unset;\n max-height: fit-content;\n border-radius: var(--sbb-menu-border-radius);\n }\n :host(:not(:is(:state(state-closed),[state--state-closed]))) .sbb-menu {\n top: var(--sbb-menu-position-y, 0);\n left: var(--sbb-menu-position-x, 0);\n max-height: var(--sbb-menu-max-height);\n min-height: var(--sbb-menu-min-height);\n }\n}\n\n.sbb-menu__content {\n max-height: var(--sbb-menu-max-height);\n padding-block: var(--sbb-spacing-fixed-1x);\n overflow: auto;\n outline: none;\n}\n.sbb-menu__content::after {\n content: \"\";\n display: block;\n height: var(--sbb-spacing-fixed-8x);\n}\n@media (min-width: calc(64rem)) {\n .sbb-menu__content {\n max-height: fit-content;\n }\n :host(:not(:is(:state(state-closed),[state--state-closed]))) .sbb-menu__content {\n max-height: var(--sbb-menu-max-height);\n min-height: var(--sbb-menu-min-height);\n }\n .sbb-menu__content::after {\n display: none;\n }\n}\n\n::slotted(:is(:is(:state(sbb-link),[state--sbb-link]), :is(:state(sbb-button),[state--sbb-button]))) {\n color-scheme: only light;\n}\n\n@keyframes open {\n from {\n opacity: 0;\n translate: 0 var(--sbb-menu-transform-y, 100%);\n }\n to {\n opacity: 1;\n translate: 0 0;\n }\n}\n@keyframes close {\n from {\n opacity: 1;\n translate: 0 0;\n }\n to {\n opacity: 0;\n translate: 0 var(--sbb-menu-transform-y, 100%);\n }\n}\n@keyframes open-sideways {\n from {\n translate: 100% 0;\n }\n to {\n translate: 0 0;\n }\n}\n@keyframes close-sideways {\n from {\n translate: 0 0;\n }\n to {\n translate: 100% 0;\n }\n}\n";
|
|
77
|
+
var menu_default = ":host {\n display: contents;\n --sbb-menu-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-6x)\n );\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n --_sbb-menu-inset: 0 auto auto 0;\n}\n@media (min-width: calc(64rem)) {\n :host {\n --sbb-menu-back-button-display: none;\n }\n}\n\n:host(:is(:is(:state(state-opened),[state--state-opened]), :is(:state(state-opening),[state--state-opening]))) {\n --sbb-menu-visibility: visible;\n --sbb-menu-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 20%, transparent);\n}\n@media (min-width: calc(64rem)) {\n :host(:is(:is(:state(state-opened),[state--state-opened]), :is(:state(state-opening),[state--state-opening]))) {\n --sbb-menu-backdrop-color: transparent;\n }\n}\n\n:host(:not(:is(:state(nested),[state--nested]))) {\n --sbb-menu-back-button-display: none;\n}\n\n:host(:not(:is(:state(state-closed),[state--state-closed]))) {\n --_sbb-menu-inset: 0;\n}\n\n:host(:is(:state(dark),[state--dark])) .sbb-scrollbar-negative {\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);\n --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);\n}\n\n:host([hide-icon-space]) {\n --sbb-menu-item-hide-icon-visibility: hidden;\n --sbb-menu-item-hide-icon-display: none;\n --sbb-menu-item-hide-icon-padding-inline: var(--sbb-spacing-fixed-3x);\n}\n\n@media (max-width: calc(63.9375rem)) {\n :host(:is(:state(skip-animation),[state--skip-animation])) {\n --sbb-menu-animation-duration: 0ms;\n }\n :host(:is(:state(nested-child),[state--nested-child])) {\n --sbb-menu-transform-x: -100%;\n }\n :host(:is(:state(nested),[state--nested]):is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n --sbb-menu-open-animation-name: open-sideways;\n }\n :host(:is(:state(state-closing),[state--state-closing]):is(:state(nested),[state--nested]):not(:is(:state(close-all),[state--close-all]))) {\n --sbb-menu-close-animation-name: close-sideways;\n }\n}\n::slotted(:not(sbb-menu-button, sbb-menu-link, sbb-divider)) {\n display: block;\n padding-inline: var(--sbb-spacing-fixed-5x);\n}\n\nsbb-divider,\n::slotted(sbb-divider) {\n --sbb-divider-color: var(--sbb-background-color-4-inverted);\n margin-block: var(--sbb-spacing-fixed-2x);\n}\n\nsbb-divider,\n#sbb-menu__back-button {\n display: var(--sbb-menu-back-button-display, block);\n}\n\n.sbb-menu__container {\n position: fixed;\n pointer-events: none;\n inset: var(--_sbb-menu-inset);\n height: var(--sbb-menu-container-height);\n z-index: var(--sbb-menu-z-index, var(--sbb-overlay-default-z-index));\n}\n.sbb-menu__container::before {\n content: \"\";\n visibility: var(--sbb-menu-visibility, hidden);\n pointer-events: all;\n position: fixed;\n inset: var(--_sbb-menu-inset);\n height: var(--sbb-menu-container-height);\n background-color: var(--sbb-menu-backdrop-color, transparent);\n transition-duration: var(--sbb-menu-animation-duration);\n transition-timing-function: var(--sbb-menu-animation-easing);\n transition-property: background-color, visibility;\n}\n:host(:is(:state(nested),[state--nested])) .sbb-menu__container::before {\n display: none;\n}\n\n.sbb-menu {\n display: none;\n opacity: 0;\n pointer-events: none;\n max-width: var(--sbb-menu-max-width);\n min-width: var(--sbb-menu-min-width);\n text-align: start;\n position: absolute;\n inset-inline-start: 0;\n inset-block-start: unset;\n inset-block-end: 0;\n inset-inline-end: unset;\n color: var(--sbb-menu-color);\n border: none;\n border-radius: var(--sbb-menu-border-radius) var(--sbb-menu-border-radius) 0 0;\n background-color: var(--sbb-menu-background-color);\n padding: 0;\n overflow: hidden;\n translate: var(--sbb-menu-transform-x, 0) 0;\n transition: translate var(--sbb-menu-animation-duration);\n}\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) .sbb-menu {\n display: block;\n opacity: 1;\n pointer-events: all;\n animation-name: var(--sbb-menu-open-animation-name, open);\n animation-duration: var(--sbb-menu-animation-duration);\n animation-timing-function: var(--sbb-menu-animation-easing);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-menu {\n pointer-events: none;\n animation-name: var(--sbb-menu-close-animation-name, close);\n}\n@media (forced-colors: active) {\n .sbb-menu {\n outline: var(--sbb-border-width-1x) solid CanvasText;\n }\n}\n@media (min-width: calc(64rem)) {\n .sbb-menu {\n top: 0;\n bottom: unset;\n left: 0;\n right: unset;\n max-height: fit-content;\n border-radius: var(--sbb-menu-border-radius);\n }\n :host(:not(:is(:state(state-closed),[state--state-closed]))) .sbb-menu {\n top: var(--sbb-menu-position-y, 0);\n left: var(--sbb-menu-position-x, 0);\n max-height: var(--sbb-menu-max-height);\n min-height: var(--sbb-menu-min-height);\n }\n}\n\n.sbb-menu__content {\n max-height: var(--sbb-menu-max-height);\n padding-block: var(--sbb-spacing-fixed-1x);\n overflow: auto;\n outline: none;\n}\n.sbb-menu__content::after {\n content: \"\";\n display: block;\n height: var(--sbb-spacing-fixed-8x);\n}\n@media (min-width: calc(64rem)) {\n .sbb-menu__content {\n max-height: fit-content;\n }\n :host(:not(:is(:state(state-closed),[state--state-closed]))) .sbb-menu__content {\n max-height: var(--sbb-menu-max-height);\n min-height: var(--sbb-menu-min-height);\n }\n .sbb-menu__content::after {\n display: none;\n }\n}\n\n::slotted(:is(:is(:state(sbb-link),[state--sbb-link]), :is(:state(sbb-button),[state--sbb-button]))) {\n color-scheme: only light;\n}\n\n@keyframes open {\n from {\n opacity: 0;\n translate: 0 var(--sbb-menu-transform-y, 100%);\n }\n to {\n opacity: 1;\n translate: 0 0;\n }\n}\n@keyframes close {\n from {\n opacity: 1;\n translate: 0 0;\n }\n to {\n opacity: 0;\n translate: 0 var(--sbb-menu-transform-y, 100%);\n }\n}\n@keyframes open-sideways {\n from {\n translate: 100% 0;\n }\n to {\n translate: 0 0;\n }\n}\n@keyframes close-sideways {\n from {\n translate: 0 0;\n }\n to {\n translate: 100% 0;\n }\n}\n";
|
|
78
78
|
|
|
79
79
|
//#endregion
|
|
80
80
|
//#region src/elements/menu/menu/menu.component.ts
|
|
@@ -105,10 +105,18 @@ let SbbMenuElement = (() => {
|
|
|
105
105
|
let _trigger_decorators;
|
|
106
106
|
let _trigger_initializers = [];
|
|
107
107
|
let _trigger_extraInitializers = [];
|
|
108
|
+
let _hideIconSpace_decorators;
|
|
109
|
+
let _hideIconSpace_initializers = [];
|
|
110
|
+
let _hideIconSpace_extraInitializers = [];
|
|
108
111
|
return class SbbMenuElement extends _classSuper {
|
|
109
112
|
static {
|
|
110
113
|
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
111
114
|
_trigger_decorators = [idReference(), property()];
|
|
115
|
+
_hideIconSpace_decorators = [forceType(), property({
|
|
116
|
+
attribute: "hide-icon-space",
|
|
117
|
+
type: Boolean,
|
|
118
|
+
reflect: true
|
|
119
|
+
})];
|
|
112
120
|
__esDecorate(this, null, _trigger_decorators, {
|
|
113
121
|
kind: "accessor",
|
|
114
122
|
name: "trigger",
|
|
@@ -123,6 +131,20 @@ let SbbMenuElement = (() => {
|
|
|
123
131
|
},
|
|
124
132
|
metadata: _metadata
|
|
125
133
|
}, _trigger_initializers, _trigger_extraInitializers);
|
|
134
|
+
__esDecorate(this, null, _hideIconSpace_decorators, {
|
|
135
|
+
kind: "accessor",
|
|
136
|
+
name: "hideIconSpace",
|
|
137
|
+
static: false,
|
|
138
|
+
private: false,
|
|
139
|
+
access: {
|
|
140
|
+
has: (obj) => "hideIconSpace" in obj,
|
|
141
|
+
get: (obj) => obj.hideIconSpace,
|
|
142
|
+
set: (obj, value) => {
|
|
143
|
+
obj.hideIconSpace = value;
|
|
144
|
+
}
|
|
145
|
+
},
|
|
146
|
+
metadata: _metadata
|
|
147
|
+
}, _hideIconSpace_initializers, _hideIconSpace_extraInitializers);
|
|
126
148
|
if (_metadata) Object.defineProperty(this, Symbol.metadata, {
|
|
127
149
|
enumerable: true,
|
|
128
150
|
configurable: true,
|
|
@@ -158,10 +180,21 @@ let SbbMenuElement = (() => {
|
|
|
158
180
|
set trigger(value) {
|
|
159
181
|
this.#trigger_accessor_storage = value;
|
|
160
182
|
}
|
|
183
|
+
#hideIconSpace_accessor_storage;
|
|
184
|
+
/**
|
|
185
|
+
* Whether the space reserved for the icon should be hidden.
|
|
186
|
+
*/
|
|
187
|
+
get hideIconSpace() {
|
|
188
|
+
return this.#hideIconSpace_accessor_storage;
|
|
189
|
+
}
|
|
190
|
+
set hideIconSpace(value) {
|
|
191
|
+
this.#hideIconSpace_accessor_storage = value;
|
|
192
|
+
}
|
|
161
193
|
constructor() {
|
|
162
194
|
super();
|
|
163
195
|
this.#trigger_accessor_storage = __runInitializers(this, _trigger_initializers, null);
|
|
164
|
-
this
|
|
196
|
+
this.#hideIconSpace_accessor_storage = (__runInitializers(this, _trigger_extraInitializers), __runInitializers(this, _hideIconSpace_initializers, false));
|
|
197
|
+
this._menu = __runInitializers(this, _hideIconSpace_extraInitializers);
|
|
165
198
|
this._triggerElement = null;
|
|
166
199
|
this._isPointerDownEventOnMenu = false;
|
|
167
200
|
this._escapableOverlayController = new SbbEscapableOverlayController(this);
|
package/menu.pure.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElement as r,SbbDarkModeController as i,SbbDisabledInteractiveMixin as a,SbbDisabledMixin as o,SbbDisabledTabIndexActionMixin as s,SbbEscapableOverlayController as c,SbbFocusTrapController as l,SbbInertController as u,SbbLanguageController as d,SbbLinkBaseElement as f,SbbMediaMatcherController as p,SbbMediaQueryBreakpointSmallAndBelow as m,SbbOpenCloseBaseElement as h,SbbScrollController as g,
|
|
2
|
-
`;const
|
|
1
|
+
import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElement as r,SbbDarkModeController as i,SbbDisabledInteractiveMixin as a,SbbDisabledMixin as o,SbbDisabledTabIndexActionMixin as s,SbbEscapableOverlayController as c,SbbFocusTrapController as l,SbbInertController as u,SbbLanguageController as d,SbbLinkBaseElement as f,SbbMediaMatcherController as p,SbbMediaQueryBreakpointSmallAndBelow as m,SbbOpenCloseBaseElement as h,SbbScrollController as g,forceType as _,forwardEvent as v,getElementPosition as y,getElementPositionHorizontal as b,getNextElementIndex as x,i18nGoBack as S,idReference as C,interactivityChecker as w,isArrowKeyOrPageKeysPressed as T,isEventOnElement as E,isZeroAnimationDuration as D,popoverResetStyles as O,removeAriaOverlayTriggerProperties as k,scrollbarStyles as A,setAriaOverlayTriggerProperties as j,ɵstateController as M}from"./core.js";import{SbbIconNameMixin as N}from"./icon.pure.js";import{__esDecorate as P,__runInitializers as F}from"tslib";import{property as I}from"lit/decorators.js";import{ref as L}from"lit/directives/ref.js";import{SbbDividerElement as R}from"./divider.pure.js";var z=`:host{--sbb-menu-action-cursor:var(--sbb-cursor-pointer);display:block;outline:none!important}@media (any-hover:hover){:host(:is(:hover:not([disabled],:disabled,[disabled-interactive]),[aria-expanded=true])){--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: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{translate:50% -50%;inset:50% calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - .5 * var(--sbb-size-icon-ui-small)) auto auto!important}: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-action-submenu-icon-display:flex}:is(.sbb-menu-button,.sbb-menu-link){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;text-decoration:none;display:block}.sbb-menu-action__content{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);line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-letter-spacing-text);font-size:var(--sbb-text-font-size-xs);display:flex}:host(:not([sbb-badge],:is(:state(has-icon-name),[state--has-icon-name]),:is(:state(slotted-icon),[state--slotted-icon]))) .sbb-menu-action__content{padding:var(--sbb-menu-action-content-padding-block) var(--sbb-menu-item-hide-icon-padding-inline,var(--sbb-menu-action-content-padding-inline))}: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{min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small)}.sbb-menu-action__icon{visibility:visible;display:flex}:host(:not([sbb-badge],:is(:state(has-icon-name),[state--has-icon-name]),:is(:state(slotted-icon),[state--slotted-icon]))) .sbb-menu-action__icon{display:var(--sbb-menu-item-hide-icon-display,flex);visibility:var(--sbb-menu-item-hide-icon-visibility,visible)}.sbb-menu-submenu__icon{display:var(--sbb-menu-action-submenu-icon-display,none);margin-inline-start:auto}.sbb-menu-action__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(:is([disabled],:disabled,[disabled-interactive])) .sbb-menu-action__label{text-decoration:line-through}
|
|
2
|
+
`;const B=t=>{class r extends N(o(t)){static{this.styles=[n(z)]}renderTemplate(){return e`
|
|
3
3
|
<span class="sbb-menu-action__content">
|
|
4
4
|
<span class="sbb-menu-action__icon"> ${super.renderIconSlot()} </span>
|
|
5
5
|
<span class="sbb-menu-action__label">
|
|
@@ -9,18 +9,18 @@ import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElem
|
|
|
9
9
|
<sbb-icon name="chevron-small-right-small"></sbb-icon>
|
|
10
10
|
</span>
|
|
11
11
|
</span>
|
|
12
|
-
`}}return r};var
|
|
13
|
-
`;const
|
|
12
|
+
`}}return r};var V=class extends s(B(r)){static{this.elementName=`sbb-menu-button`}static{this.role=`menuitem`}},H=class extends a(B(f)){constructor(){super(...arguments),this.anchorRole=`menuitem`}static{this.elementName=`sbb-menu-link`}},U=`:host{--sbb-menu-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);--_sbb-menu-inset:0 auto auto 0;display:contents}@media (width>=64rem){:host{--sbb-menu-back-button-display:none}}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))){--sbb-menu-visibility:visible;--sbb-menu-backdrop-color:color-mix(in srgb, var(--sbb-color-black) 20%, transparent)}@media (width>=64rem){:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))){--sbb-menu-backdrop-color:transparent}}:host(:not(:is(:state(nested),[state--nested]))){--sbb-menu-back-button-display:none}:host(:not(:is(:state(state-closed),[state--state-closed]))){--_sbb-menu-inset:0}:host(:is(:state(dark),[state--dark])) .sbb-scrollbar-negative{--sbb-focus-outline-color:var(--sbb-focus-outline-color-default);--sbb-scrollbar-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color-hover:color-mix(in srgb, var(--sbb-color-black) 60%, transparent)}:host([hide-icon-space]){--sbb-menu-item-hide-icon-visibility:hidden;--sbb-menu-item-hide-icon-display:none;--sbb-menu-item-hide-icon-padding-inline:var(--sbb-spacing-fixed-3x)}@media (width<=63.9375rem){:host(:is(:state(skip-animation),[state--skip-animation])){--sbb-menu-animation-duration:0s}:host(:is(:state(nested-child),[state--nested-child])){--sbb-menu-transform-x:-100%}:host(:is(:state(nested),[state--nested]):is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-menu-open-animation-name:open-sideways}:host(:is(:state(state-closing),[state--state-closing]):is(:state(nested),[state--nested]):not(:is(:state(close-all),[state--close-all]))){--sbb-menu-close-animation-name:close-sideways}}::slotted(:not(sbb-menu-button,sbb-menu-link,sbb-divider)){padding-inline:var(--sbb-spacing-fixed-5x);display:block}sbb-divider,::slotted(sbb-divider){--sbb-divider-color:var(--sbb-background-color-4-inverted);margin-block:var(--sbb-spacing-fixed-2x)}sbb-divider,#sbb-menu__back-button{display:var(--sbb-menu-back-button-display,block)}.sbb-menu__container{pointer-events:none;inset:var(--_sbb-menu-inset);height:var(--sbb-menu-container-height);z-index:var(--sbb-menu-z-index,var(--sbb-overlay-default-z-index));position:fixed}.sbb-menu__container:before{content:"";visibility:var(--sbb-menu-visibility,hidden);pointer-events:all;inset:var(--_sbb-menu-inset);height:var(--sbb-menu-container-height);background-color:var(--sbb-menu-backdrop-color,transparent);transition-duration:var(--sbb-menu-animation-duration);transition-timing-function:var(--sbb-menu-animation-easing);transition-property:background-color,visibility;position:fixed}:host(:is(:state(nested),[state--nested])) .sbb-menu__container:before{display:none}.sbb-menu{opacity:0;pointer-events:none;max-width:var(--sbb-menu-max-width);min-width:var(--sbb-menu-min-width);text-align:start;color:var(--sbb-menu-color);border-radius:var(--sbb-menu-border-radius) var(--sbb-menu-border-radius) 0 0;background-color:var(--sbb-menu-background-color);translate:var(--sbb-menu-transform-x,0) 0;transition:translate var(--sbb-menu-animation-duration);border:none;padding:0;display:none;position:absolute;inset-block-start:unset;inset-block-end:0;inset-inline-start:0;inset-inline-end:unset;overflow:hidden}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-menu{opacity:1;pointer-events:all;animation-name:var(--sbb-menu-open-animation-name,open);animation-duration:var(--sbb-menu-animation-duration);animation-timing-function:var(--sbb-menu-animation-easing);display:block}:host(:is(:state(state-closing),[state--state-closing])) .sbb-menu{pointer-events:none;animation-name:var(--sbb-menu-close-animation-name,close)}@media (forced-colors:active){.sbb-menu{outline:var(--sbb-border-width-1x) solid CanvasText}}@media (width>=64rem){.sbb-menu{top:0;bottom:unset;left:0;right:unset;border-radius:var(--sbb-menu-border-radius);max-height:fit-content}:host(:not(:is(:state(state-closed),[state--state-closed]))) .sbb-menu{top:var(--sbb-menu-position-y,0);left:var(--sbb-menu-position-x,0);max-height:var(--sbb-menu-max-height);min-height:var(--sbb-menu-min-height)}}.sbb-menu__content{max-height:var(--sbb-menu-max-height);padding-block:var(--sbb-spacing-fixed-1x);outline:none;overflow:auto}.sbb-menu__content:after{content:"";height:var(--sbb-spacing-fixed-8x);display:block}@media (width>=64rem){.sbb-menu__content{max-height:fit-content}:host(:not(:is(:state(state-closed),[state--state-closed]))) .sbb-menu__content{max-height:var(--sbb-menu-max-height);min-height:var(--sbb-menu-min-height)}.sbb-menu__content:after{display:none}}::slotted(:is(:is(:state(sbb-link),[state--sbb-link]),:is(:state(sbb-button),[state--sbb-button]))){color-scheme:light only}@keyframes open{0%{opacity:0;translate:0 var(--sbb-menu-transform-y,100%)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:0 var(--sbb-menu-transform-y,100%)}}@keyframes open-sideways{0%{translate:100%}to{translate:0}}@keyframes close-sideways{0%{translate:0}to{translate:100%}}
|
|
13
|
+
`;const W=[`A`,`BUTTON`,`SBB-BUTTON`,`SBB-BUTTON-LINK`,`SBB-LINK`,`SBB-BLOCK-LINK`,`SBB-LINK-BUTTON`,`SBB-BLOCK-LINK-BUTTON`,`SBB-MENU-BUTTON`,`SBB-MENU-LINK`];let G=(()=>{let r=h,a,o=[],s=[],f,N=[],z=[];return class extends r{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;a=[C(),I()],f=[_(),I({attribute:`hide-icon-space`,type:Boolean,reflect:!0})],P(this,null,a,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:e},o,s),P(this,null,f,{kind:`accessor`,name:`hideIconSpace`,static:!1,private:!1,access:{has:e=>`hideIconSpace`in e,get:e=>e.hideIconSpace,set:(e,t)=>{e.hideIconSpace=t}},metadata:e},N,z),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-menu`}static{this.elementDependencies=[R,V]}static{this.styles=[O,A,n(U)]}static{this.role=`menu`}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}#t;get hideIconSpace(){return this.#t}set hideIconSpace(e){this.#t=e}constructor(){super(),this.#e=F(this,o,null),this.#t=(F(this,s),F(this,N,!1)),this._menu=F(this,z),this._triggerElement=null,this._isPointerDownEventOnMenu=!1,this._escapableOverlayController=new c(this),this._focusTrapController=new l(this),this._scrollHandler=new g(this),this._inertController=new u(this),this._mobileBreakpoint=m,this._mediaMatcher=new p(this,{[this._mobileBreakpoint]:e=>{e&&(this.state===`opening`||this.state===`opened`)?this._scrollHandler.disableScroll():this._scrollHandler.enableScroll()}}),this._darkModeController=new i(this,()=>this._syncNegative()),this._language=new d(this),this._nestedMenu=null,this._pointerDownListener=e=>{let t=e.target.closest(`sbb-menu`);this._isPointerDownEventOnMenu=E(this._menu,e)||this._nestedMenus().some(e=>t===e)},this._closeOnBackdropClick=e=>{let t=e.target;!this._isPointerDownEventOnMenu&&!E(this._menu,e)&&!this._nestedMenus().some(e=>e===t)&&this.closeAll()},this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e))}firstUpdated(e){super.firstUpdated(e),this._configureTrigger()}escapeStrategy(){this.closeAll()}open(){if(this.state!==`closing`&&this.state!==`opened`&&this._menu&&this.dispatchBeforeOpenEvent()){if(this._isNested()){let e=this._parentMenu();e.internals.states.add(`nested-child`),e._nestedMenu!==this&&e._nestedMenu?.close(),e._nestedMenu=this}this.showPopover?.(),this.state=`opening`,this._setMenuPosition(),this._triggerElement&&(this._triggerElement.ariaExpanded=`true`),this._isMobile()&&this._scrollHandler.disableScroll(),this._isZeroAnimationDuration()&&this._handleOpening()}}close(){this._close()}closeAll(){this._mainMenu()._close(!0)}_close(e=!1){if((this.state!==`opening`||this._isNested())&&this.dispatchBeforeCloseEvent()){if(this._nestedMenu?._close(e),this._isNested()){let t=this._parentMenu();e?(this.internals.states.add(`close-all`),t.internals.states.add(`skip-animation`)):(this.internals.states.delete(`close-all`),t.internals.states.delete(`skip-animation`)),t.internals.states.delete(`nested-child`),t._nestedMenu=null}this.state=`closing`,this._triggerElement&&(this._triggerElement.ariaExpanded=`false`),this._isZeroAnimationDuration()&&this._handleClosing()}}_isZeroAnimationDuration(){return D(this,`--sbb-menu-animation-duration`)}_handleOpening(){this.state=`opened`,this._isNested()?this._updateNestedInert():this._inertController.activate(),this._escapableOverlayController.connect(),this._focusTrapController.focusInitialElement(),this._focusTrapController.enabled=!0,this._attachWindowEvents(),this.dispatchOpenEvent()}_handleClosing(){this.state=`closed`,this.internals.states.delete(`skip-animation`),this.internals.states.delete(`close-all`),this.hidePopover?.(),this._menu?.firstElementChild?.scrollTo(0,0),this._isNested()?this._updateNestedInert():this._inertController.deactivate(),this._triggerElement?.focus({preventScroll:[`sbb-header-button`,`sbb-header-link`].includes(this._triggerElement.localName)}),this._escapableOverlayController.disconnect(),this.dispatchCloseEvent(),this._windowEventsController?.abort(),this._focusTrapController.enabled=!1,this._scrollHandler.enableScroll()}_handleKeyDown(e){if(!T(e))return;e.preventDefault();let t=Array.from(this.querySelectorAll(`sbb-menu-button, sbb-menu-link`)).concat(this.shadowRoot.querySelector(`sbb-menu-button`)).filter(e=>(!e.disabled||e.disabledInteractive)&&w.isVisible(e)),n=t.findIndex(t=>t===e.target),r;switch(e.key){case`ArrowUp`:case`ArrowDown`:r=x(e,n,t.length);break;case`ArrowLeft`:this._isNested()&&this.close();break;case`ArrowRight`:e.target.matches(`:is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])`)&&e.target.click();break;case`PageUp`:case`Home`:r=0;break;case`End`:case`PageDown`:r=t.length-1}r!==void 0&&t[r].focus()}createRenderRoot(){let e=super.createRenderRoot();return this.shadowRoot?.addEventListener(`slotchange`,()=>this._syncNegative(),{capture:!0}),e}connectedCallback(){this.popover=`manual`,super.connectedCallback(),this.hasUpdated&&this._configureTrigger()}disconnectedCallback(){super.disconnectedCallback(),this._triggerElement=null,this._triggerAbortController?.abort(),this._windowEventsController?.abort(),this._scrollHandler.enableScroll()}requestUpdate(e,n,r){super.requestUpdate(e,n,r),!t&&(!e||e===`trigger`)&&this.hasUpdated&&this._configureTrigger()}_configureTrigger(){this.trigger!==this._triggerElement&&(this._triggerAbortController?.abort(),k(this._triggerElement),this._triggerElement=this.trigger,this._triggerElement&&(j(this,this._triggerElement,`menu`,this.state),this._triggerAbortController=new AbortController,this._triggerElement.addEventListener(`click`,()=>this.open(),{signal:this._triggerAbortController.signal}),this.toggleState(`nested`,[`sbb-menu-button`,`sbb-menu-link`].includes(this._triggerElement.localName)),M(this._triggerElement).add(`sbb-menu-trigger`)))}_attachWindowEvents(){this._windowEventsController=new AbortController,document.addEventListener(`scroll`,()=>this._setMenuPosition(),{passive:!0,signal:this._windowEventsController.signal,capture:!0}),window.addEventListener(`resize`,()=>this._setMenuPosition(),{passive:!0,signal:this._windowEventsController.signal}),this._isNested()||(window.addEventListener(`pointerdown`,this._pointerDownListener,{signal:this._windowEventsController.signal}),window.addEventListener(`pointerup`,this._closeOnBackdropClick,{signal:this._windowEventsController.signal}))}_interactiveElementClick(e){let t=e.target;W.includes(t.nodeName)&&!t.hasAttribute(`disabled`)&&!t.matches(`:is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])`)&&t.id!==`sbb-menu__back-button`&&this.closeAll()}_nestedMenus(){let e=[],t=this._nestedMenu;for(;t;)e.push(t),t=t._nestedMenu;return e}_parentMenu(){return this._triggerElement?.closest(`sbb-menu`)??null}_mainMenu(){return this._isNested()?this._parentMenu()?._mainMenu()??this:this}_isNested(){return!!this._parentMenu()}_updateNestedInert(){this._inertController.restoreAllExempted(),this._mainMenu()._nestedMenus().forEach(e=>this._inertController.exempt(e))}_handleMouseOver(e){let t=e.target,n=this._isMobile();!n&&this._nestedMenu&&!t.classList.contains(`sbb-menu__content`)&&t.ariaExpanded!==`true`&&this._nestedMenu.close(),t.matches(`:is(:state(sbb-menu-trigger),[state--sbb-menu-trigger])`)&&!n&&t.click()}_onMenuAnimationEnd(e){(e.animationName===`open`||e.animationName===`open-sideways`)&&this.state===`opening`?this._handleOpening():(e.animationName===`close`||e.animationName===`close-sideways`)&&this.state===`closing`&&this._handleClosing()}_setMenuPosition(){if(this._isMobile()||!this._menu||!this._triggerElement||this.state===`closing`)return;let e=this._isNested()?b(this.shadowRoot.querySelector(`.sbb-menu__content`),this._triggerElement,this.shadowRoot.querySelector(`.sbb-menu__container`),{horizontalOffset:8,verticalOffset:-4,contentSelector:`.sbb-menu__content`}):y(this.shadowRoot.querySelector(`.sbb-menu__content`),this._triggerElement,this.shadowRoot.querySelector(`.sbb-menu__container`),{verticalOffset:8});this.style.setProperty(`--sbb-menu-position-x`,`${e.left}px`),this.style.setProperty(`--sbb-menu-position-y`,`${e.top}px`),this.style.setProperty(`--sbb-menu-max-height`,e.maxHeight)}_syncNegative(){this.querySelectorAll(`:is(:state(sbb-link),[state--sbb-link]), :is(:state(sbb-button),[state--sbb-button])`)?.forEach(e=>{customElements.upgrade(e),e.negative=!this._darkModeController.matches()})}_isMobile(){return this._mediaMatcher.matches(this._mobileBreakpoint)??!0}render(){return e`
|
|
14
14
|
<div class="sbb-menu__container">
|
|
15
15
|
<div
|
|
16
16
|
@animationend=${this._onMenuAnimationEnd}
|
|
17
17
|
@mouseover=${e=>this._handleMouseOver(e)}
|
|
18
18
|
class="sbb-menu"
|
|
19
|
-
${
|
|
19
|
+
${L(e=>this._menu=e)}
|
|
20
20
|
>
|
|
21
21
|
<div
|
|
22
22
|
@click=${e=>this._interactiveElementClick(e)}
|
|
23
|
-
@scroll=${e=>
|
|
23
|
+
@scroll=${e=>v(e,document)}
|
|
24
24
|
class="sbb-menu__content sbb-scrollbar-negative"
|
|
25
25
|
>
|
|
26
26
|
<slot></slot>
|
|
@@ -30,9 +30,9 @@ import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElem
|
|
|
30
30
|
@click=${()=>this.close()}
|
|
31
31
|
icon-name="chevron-small-left-small"
|
|
32
32
|
>
|
|
33
|
-
${
|
|
33
|
+
${S[this._language.current]}
|
|
34
34
|
</sbb-menu-button>
|
|
35
35
|
</div>
|
|
36
36
|
</div>
|
|
37
37
|
</div>
|
|
38
|
-
`}}})();export{
|
|
38
|
+
`}}})();export{B as SbbMenuActionCommonElementMixin,V as SbbMenuButtonElement,G as SbbMenuElement,H as SbbMenuLinkElement};
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.10.0-dev.
|
|
3
|
+
"version": "5.10.0-dev.1791795903",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
9
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/39af53cd83f16faf5dd2084e3a1d9c96e6dc592c"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|