@luzmo/lucero 0.0.15 → 0.0.17
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/components/NumberFormatter-DewVDY5w.cjs +18 -0
- package/components/NumberFormatter-DgOUVrge.js +136 -0
- package/components/NumberParser-Dik4a0h-.cjs +18 -0
- package/components/NumberParser-ci9J5EKv.js +173 -0
- package/components/accordion/index.cjs +1 -1
- package/components/accordion/index.js +2 -2
- package/components/action-bar/index.cjs +1 -1
- package/components/action-bar/index.js +2 -2
- package/components/action-button/index.cjs +1 -1
- package/components/action-button/index.js +3 -3
- package/components/action-group/index.js +1 -1
- package/components/action-menu/index.cjs +1 -1
- package/components/action-menu/index.js +3 -3
- package/components/avatar/index.js +1 -1
- package/components/button/index.cjs +1 -1
- package/components/button/index.js +5 -5
- package/components/{button-base-DmjYs2s9.cjs → button-base-Cfb8QBjx.cjs} +1 -1
- package/components/{button-base-B7v4eeRh.js → button-base-DSHx7XO8.js} +27 -27
- package/components/button-group/index.js +1 -1
- package/components/calendar/calendar.d.ts +218 -0
- package/components/calendar/index.cjs +18 -0
- package/components/calendar/index.d.ts +7 -0
- package/components/calendar/index.js +28 -0
- package/components/checkbox/index.cjs +1 -1
- package/components/checkbox/index.js +2 -2
- package/components/class-map-Buyb1CLm.cjs +22 -0
- package/components/class-map-CJko4aXp.js +51 -0
- package/components/{clear-button-KdrF2jaV.cjs → clear-button-CyzA8riE.cjs} +1 -1
- package/components/{clear-button-DgZmX5RX.js → clear-button-DB34Vybj.js} +1 -1
- package/components/{close-button-DVGUppyd.cjs → close-button-BQJ2wHkM.cjs} +1 -1
- package/components/{close-button-CFHQnbsK.js → close-button-DN2cjFRq.js} +2 -2
- package/components/color-area/index.js +1 -1
- package/components/color-field/index.cjs +1 -1
- package/components/color-field/index.js +2 -2
- package/components/color-handle/index.js +1 -1
- package/components/color-loupe/index.js +1 -1
- package/components/color-menu/index.js +1 -1
- package/components/color-picker/index.js +1 -1
- package/components/color-slider/index.js +1 -1
- package/components/date-time-picker/date-time-picker.d.ts +269 -0
- package/components/date-time-picker/helpers.d.ts +10 -0
- package/components/date-time-picker/index.cjs +105 -0
- package/components/date-time-picker/index.d.ts +7 -0
- package/components/date-time-picker/index.js +1126 -0
- package/components/date-time-picker/segments/date/day-segment.d.ts +9 -0
- package/components/date-time-picker/segments/date/month-segment.d.ts +9 -0
- package/components/date-time-picker/segments/date/year-segment.d.ts +12 -0
- package/components/date-time-picker/segments/date-time-segments.d.ts +35 -0
- package/components/date-time-picker/segments/editable-segment.d.ts +21 -0
- package/components/date-time-picker/segments/literal-segment.d.ts +6 -0
- package/components/date-time-picker/segments/modifiers/clear-modifier.d.ts +5 -0
- package/components/date-time-picker/segments/modifiers/decrement-modifier.d.ts +5 -0
- package/components/date-time-picker/segments/modifiers/increment-modifier.d.ts +5 -0
- package/components/date-time-picker/segments/modifiers/input-modifier.d.ts +13 -0
- package/components/date-time-picker/segments/modifiers/segments-modifier.d.ts +18 -0
- package/components/date-time-picker/segments/segments-factory.d.ts +16 -0
- package/components/date-time-picker/segments/segments-formatter.d.ts +17 -0
- package/components/date-time-picker/segments/time/day-period-segment.d.ts +18 -0
- package/components/date-time-picker/segments/time/hour-segment.d.ts +19 -0
- package/components/date-time-picker/segments/time/millisecond-segment.d.ts +7 -0
- package/components/date-time-picker/segments/time/minute-segment.d.ts +7 -0
- package/components/date-time-picker/segments/time/second-segment.d.ts +7 -0
- package/components/date-time-picker/types.d.ts +41 -0
- package/components/divider/index.js +1 -1
- package/components/field-group/index.js +1 -1
- package/components/field-label/index.js +1 -1
- package/components/icon/index.cjs +1 -1
- package/components/icon/index.js +24 -24
- package/components/index-BziWAe4P.cjs +113 -0
- package/components/index-vWdA-LXe.js +1490 -0
- package/components/index.cjs +1 -1
- package/components/index.js +135 -129
- package/components/infield-button/index.cjs +1 -1
- package/components/infield-button/index.js +3 -3
- package/components/label/index.js +1 -1
- package/components/menu/index.cjs +66 -1
- package/components/menu/index.js +874 -10
- package/components/menu/menu.d.ts +1 -0
- package/components/multi-language-field/index.js +1 -1
- package/components/number-field/index.cjs +6 -6
- package/components/number-field/index.js +128 -394
- package/components/observe-slot-presence-CmVi0zTc.js +68 -0
- package/components/observe-slot-presence-bc9chhsi.cjs +18 -0
- package/components/overlay/index.js +1 -1
- package/components/picker/index.cjs +1 -1
- package/components/picker/index.js +3 -3
- package/components/picker/picker.d.ts +2 -1
- package/components/picker-BxEG2NdV.js +628 -0
- package/components/picker-DROquiIZ.cjs +123 -0
- package/components/picker-button/index.cjs +37 -0
- package/components/picker-button/index.d.ts +7 -0
- package/components/picker-button/index.js +87 -0
- package/components/picker-button/picker-button.d.ts +21 -0
- package/components/popover/index.js +1 -1
- package/components/progress-circle/index.js +1 -1
- package/components/radio/index.cjs +1 -1
- package/components/radio/index.js +2 -2
- package/components/search/index.cjs +1 -1
- package/components/search/index.js +3 -3
- package/components/slider/index.js +1 -1
- package/components/swatch/index.cjs +1 -1
- package/components/swatch/index.js +2 -2
- package/components/switch/index.cjs +1 -1
- package/components/switch/index.js +2 -2
- package/components/tags/index.cjs +1 -1
- package/components/tags/index.js +3 -3
- package/components/text-field/index.cjs +1 -1
- package/components/text-field/index.js +3 -3
- package/components/text-field-BTnBJoP9.js +314 -0
- package/components/text-field-mxJCYues.cjs +85 -0
- package/components/text-field.module-ColtFhf_.js +21 -0
- package/components/text-field.module-p_VF2tC_.cjs +18 -0
- package/components/toast/index.cjs +1 -1
- package/components/toast/index.js +3 -3
- package/components/tooltip/index.js +1 -1
- package/components/unit-input/index.cjs +1 -1
- package/components/unit-input/index.js +2 -2
- package/custom-elements.json +1 -1
- package/index.d.ts +3 -0
- package/package.json +16 -1
- package/components/index-BH9W0QLt.js +0 -927
- package/components/index-C2bkoP5q.cjs +0 -77
- package/components/picker-BBchB7nM.cjs +0 -127
- package/components/picker-C_coD2KL.js +0 -655
- package/components/text-field-5_ev9way.cjs +0 -85
- package/components/text-field-CvKSS59x.js +0 -313
|
@@ -1,927 +0,0 @@
|
|
|
1
|
-
/*! * Lucero - The design system for Luzmo.
|
|
2
|
-
*
|
|
3
|
-
* Copyright © 2025 Luzmo
|
|
4
|
-
* All rights reserved.
|
|
5
|
-
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
|
6
|
-
* This license allows users with a current active Luzmo account to use Lucero.
|
|
7
|
-
* This license terminates automatically if a user no longer has an active Luzmo account.
|
|
8
|
-
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
|
9
|
-
*
|
|
10
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
11
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
13
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
14
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
15
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
|
-
* SOFTWARE.
|
|
17
|
-
* */
|
|
18
|
-
import { a as x, r as g, x as h, n as r, E as w } from "./base-CawdqE7p.js";
|
|
19
|
-
import { e as b } from "./query-D_KR_GUc.js";
|
|
20
|
-
import { S as y } from "./sized-mixin-BxMraZLS.js";
|
|
21
|
-
import { s as A } from "./divider.module-DwOuLGU3.js";
|
|
22
|
-
import { r as P } from "./state-CYxk12SV.js";
|
|
23
|
-
import { n as O } from "./query-assigned-nodes-C76XVPWY.js";
|
|
24
|
-
import { r as S } from "./random-id-ByCz1xaq.js";
|
|
25
|
-
import { s as E } from "./mutation-controller-DH7YOCyj.js";
|
|
26
|
-
import { F as D } from "./focusable-cj2QhwDT.js";
|
|
27
|
-
import { L as R } from "./like-anchor-QBlvwFfT.js";
|
|
28
|
-
import { O as L } from "./observe-slot-text-ggb4kKgY.js";
|
|
29
|
-
import { D as U } from "./dependency-manger-CEXvGQUV.js";
|
|
30
|
-
import { luzmoIcon as M, luzmoAngleRight as T, luzmoCheck as _ } from "@luzmo/icons";
|
|
31
|
-
import { S as $ } from "./slottable-request-event-DggLA4Rx.js";
|
|
32
|
-
const p = Symbol("slotContentIsPresent");
|
|
33
|
-
function B(a, e) {
|
|
34
|
-
var t, o;
|
|
35
|
-
const i = Array.isArray(e) ? e : [e];
|
|
36
|
-
class n extends (o = a, t = p, o) {
|
|
37
|
-
constructor(...c) {
|
|
38
|
-
super(c), this[t] = /* @__PURE__ */ new Map(), this.managePresenceObservedSlot = () => {
|
|
39
|
-
let z = !1;
|
|
40
|
-
i.forEach((m) => {
|
|
41
|
-
const k = !!this.querySelector(`:scope > ${m}`), f = this[p].get(m) || !1;
|
|
42
|
-
z = z || f !== k, this[p].set(
|
|
43
|
-
m,
|
|
44
|
-
!!this.querySelector(`:scope > ${m}`)
|
|
45
|
-
);
|
|
46
|
-
}), z && this.updateComplete.then(() => {
|
|
47
|
-
this.requestUpdate();
|
|
48
|
-
});
|
|
49
|
-
}, new E(this, {
|
|
50
|
-
config: {
|
|
51
|
-
childList: !0,
|
|
52
|
-
subtree: !0
|
|
53
|
-
},
|
|
54
|
-
callback: () => {
|
|
55
|
-
this.managePresenceObservedSlot();
|
|
56
|
-
}
|
|
57
|
-
}), this.managePresenceObservedSlot();
|
|
58
|
-
}
|
|
59
|
-
/**
|
|
60
|
-
* @private
|
|
61
|
-
*/
|
|
62
|
-
get slotContentIsPresent() {
|
|
63
|
-
if (i.length === 1)
|
|
64
|
-
return this[p].get(i[0]) || !1;
|
|
65
|
-
throw new Error(
|
|
66
|
-
"Multiple selectors provided to `ObserveSlotPresence` use `getSlotContentPresence(selector: string)` instead."
|
|
67
|
-
);
|
|
68
|
-
}
|
|
69
|
-
getSlotContentPresence(c) {
|
|
70
|
-
if (this[p].has(c))
|
|
71
|
-
return this[p].get(c) || !1;
|
|
72
|
-
throw new Error(
|
|
73
|
-
`The provided selector \`${c}\` is not being observed.`
|
|
74
|
-
);
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
return n;
|
|
78
|
-
}
|
|
79
|
-
const F = ":host{--menu-item-top-to-action: var(--luzmo-spacing-1);--menu-item-top-to-checkbox: var(--luzmo-spacing-1);--menu-item-label-line-height: var(--luzmo-line-height);--menu-item-label-line-height-cjk: 1.5;--menu-item-label-to-description-spacing: 1px;--menu-item-focus-indicator-width: var(--luzmo-indicator-width);--menu-item-focus-indicator-color: var(--luzmo-indicator-color);--menu-item-label-to-value-area-min-spacing: var(--luzmo-spacing-3);--menu-item-label-content-color-default: var(--luzmo-font-color);--menu-item-label-content-color-hover: var(--luzmo-font-color-hover);--menu-item-label-content-color-down: var(--luzmo-font-color-down);--menu-item-label-content-color-focus: var(--luzmo-font-color-focus);--menu-item-highlight-label-background-color: var(--luzmo-primary);--menu-item-highlight-label-content-color: var(--luzmo-font-color);--menu-item-highlight-label-content-color-hover: var( --luzmo-font-color-hover );--menu-item-highlight-label-content-color-down: var(--luzmo-font-color-down);--menu-item-highlight-label-content-color-focus: var( --luzmo-font-color-focus );--menu-item-label-icon-color-default: var(--luzmo-font-color);--menu-item-label-icon-color-hover: var(--luzmo-font-color-hover);--menu-item-label-icon-color-down: var(--luzmo-font-color-down);--menu-item-label-icon-color-focus: var(--luzmo-font-color-focus);--menu-item-label-content-color-disabled: var(--luzmo-font-color-disabled);--menu-item-label-icon-color-disabled: var(--luzmo-font-color-disabled);--menu-item-description-line-height: var(--luzmo-line-height);--menu-item-description-line-height-cjk: 1.5;--menu-item-description-color-default: var(--luzmo-font-color);--menu-item-description-color-hover: var(--luzmo-font-color-hover);--menu-item-description-color-down: var(--luzmo-font-color-down);--menu-item-description-color-focus: var(--luzmo-font-color-focus);--menu-item-description-color-disabled: var(--luzmo-color-disabled);--menu-section-header-line-height: var(--luzmo-line-height);--menu-section-header-line-height-cjk: 1.5;--menu-section-header-font-weight: bold;--menu-section-header-color: var(--luzmo-font-color-hard);--menu-collapsible-icon-color: var(--luzmo-font-color-hard);--menu-checkmark-icon-color-default: var(--luzmo-primary);--menu-checkmark-icon-color-hover: var(--luzmo-primary-hover);--menu-checkmark-icon-color-down: var(--luzmo-primary-down);--menu-checkmark-icon-color-focus: var(--luzmo-primary-focus);--menu-drillin-icon-color-default: var(--luzmo-font-color);--menu-drillin-icon-color-hover: var(--luzmo-font-color-hover);--menu-drillin-icon-color-down: var(--luzmo-font-color-down);--menu-drillin-icon-color-focus: var(--luzmo-font-color-focus);--menu-item-value-color-default: var(--luzmo-font-color);--menu-item-value-color-hover: var(--luzmo-font-color-hover);--menu-item-value-color-down: var(--luzmo-font-color-down);--menu-item-value-color-focus: var(--luzmo-font-color-focus);--menu-checkmark-display-hidden: none;--menu-checkmark-display-shown: block;--menu-checkmark-display: block;--menu-item-collapsible-no-icon-submenu-item-padding-x-start: 28px;--menu-item-background-color-selected: var(--luzmo-background-color);--menu-item-background-color-default: var(--luzmo-background-color);--menu-item-background-color-hover: var(--luzmo-background-color-hover);--menu-item-background-color-down: var(--luzmo-background-color-down);--menu-item-background-color-key-focus: var(--luzmo-background-color-focus)}:host{--menu-item-min-height: var(--luzmo-component-height);--menu-item-icon-height: var(--luzmo-font-size);--menu-item-icon-width: var(--luzmo-font-size);--menu-item-label-font-size: var(--luzmo-font-size);--menu-item-label-text-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-item-label-inline-edge-to-content: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-item-top-edge-to-text: var(--luzmo-spacing-1);--menu-item-bottom-edge-to-text: var(--luzmo-spacing-1);--menu-item-text-to-control: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-item-description-font-size: var(--luzmo-font-size-xs);--menu-section-header-font-size: var(--luzmo-font-size);--menu-section-header-min-width: var(--luzmo-component-height);--menu-item-selectable-edge-to-text-not-selected: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-item-checkmark-size: var(--luzmo-font-size-xs);--menu-item-angle-size: var(--luzmo-font-size);--menu-item-top-to-checkmark: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--menu-back-icon-margin: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=s]){--menu-item-min-height: var(--luzmo-component-height-s);--menu-item-icon-height: var(--luzmo-font-size-s);--menu-item-icon-width: var(--luzmo-font-size-s);--menu-item-label-font-size: var(--luzmo-font-size-s);--menu-item-label-text-to-visual: var(--luzmo-spacing-3);--menu-item-label-inline-edge-to-content: var(--luzmo-spacing-3);--menu-item-top-edge-to-text: var(--luzmo-spacing-1);--menu-item-bottom-edge-to-text: var(--luzmo-spacing-1);--menu-item-text-to-control: var(--luzmo-spacing-2);--menu-item-description-font-size: var(--luzmo-font-size-xs);--menu-section-header-font-size: var(--luzmo-font-size-s);--menu-section-header-min-width: var(--luzmo-component-height-s);--menu-item-selectable-edge-to-text-not-selected: var(--luzmo-spacing-3);--menu-item-checkmark-size: var(--luzmo-font-size-xs);--menu-item-angle-size: var(--luzmo-font-size-s);--menu-item-top-to-checkmark: var(--luzmo-spacing-3);--menu-back-icon-margin: var(--luzmo-spacing-3)}:host([size=l]){--menu-item-min-height: var(--luzmo-component-height-l);--menu-item-icon-height: var(--luzmo-font-size-l);--menu-item-icon-width: var(--luzmo-font-size-l);--menu-item-label-font-size: var(--luzmo-font-size-l);--menu-item-label-text-to-visual: var(--luzmo-spacing-4);--menu-item-label-inline-edge-to-content: var(--luzmo-spacing-4);--menu-item-top-edge-to-text: var(--luzmo-spacing-2);--menu-item-bottom-edge-to-text: var(--luzmo-spacing-2);--menu-item-text-to-control: var(--luzmo-spacing-3);--menu-item-description-font-size: var(--luzmo-font-size-s);--menu-section-header-font-size: var(--luzmo-font-size-l);--menu-section-header-min-width: var(--luzmo-component-height-l);--menu-item-selectable-edge-to-text-not-selected: var(--luzmo-spacing-4);--menu-item-checkmark-size: var(--luzmo-font-size-s);--menu-item-angle-size: var(--luzmo-font-size-l);--menu-item-top-to-checkmark: var(--luzmo-spacing-4);--menu-back-icon-margin: var(--luzmo-spacing-4)}:host([size=xl]){--menu-item-min-height: var(--luzmo-component-height-xl);--menu-item-icon-height: var(--font-size-xl);--menu-item-icon-width: var(--font-size-xl);--menu-item-label-font-size: var(--font-size-xl);--menu-item-label-text-to-visual: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--menu-item-label-inline-edge-to-content: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--menu-item-top-edge-to-text: var(--luzmo-spacing-2);--menu-item-bottom-edge-to-text: var(--luzmo-spacing-2);--menu-item-text-to-control: var(--luzmo-spacing-4);--menu-item-description-font-size: var(--luzmo-font-size);--menu-section-header-font-size: var(--font-size-xl);--menu-section-header-min-width: var(--luzmo-component-height-xl);--menu-item-selectable-edge-to-text-not-selected: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--menu-item-checkmark-size: var(--font-size);--menu-item-angle-size: var(--luzmo-font-size-xl);--menu-item-top-to-checkmark: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--menu-back-icon-margin: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([variant=highlight]){--menu-item-highlight-label-content-color: var(--luzmo-primary-inverse-color);--menu-item-highlight-label-content-color-hover: var( --luzmo-primary-inverse-color );--menu-item-highlight-label-content-color-down: var( --luzmo-primary-inverse-color );--menu-item-highlight-label-content-color-focus: var( --luzmo-primary-inverse-color )}@media (forced-colors: active){:host{--highcontrast-menu-item-background-color-default: ButtonFace;--highcontrast-menu-item-color-default: ButtonText;--highcontrast-menu-item-background-color-focus: Highlight;--highcontrast-menu-item-color-focus: HighlightText;--highcontrast-menu-checkmark-icon-color-default: Highlight;--highcontrast-menu-item-color-disabled: GrayText;--highcontrast-menu-item-focus-indicator-color: Highlight;--highcontrast-menu-item-selected-background-color: Highlight;--highcontrast-menu-item-selected-color: HighlightText}@supports (color: SelectedItem){:host{--highcontrast-menu-item-selected-background-color: SelectedItem;--highcontrast-menu-item-selected-color: SelectedItemText}}}:host{inline-size:auto;inline-size:var(--luzmo-menu-inline-size, auto);box-sizing:border-box;margin:0;padding:0;list-style-type:none;display:inline-block;overflow:auto}:host:lang(ja),:host:lang(ko),:host:lang(zh){--menu-item-label-line-height: var( --luzmo-menu-item-label-line-height-cjk, var(--menu-item-label-line-height-cjk) );--menu-item-description-line-height: var( --luzmo-menu-item-description-line-height-cjk, var(--menu-item-description-line-height-cjk) );--menu-section-header-line-height: var( --luzmo-menu-section-header-line-height-cjk, var(--menu-section-header-line-height-cjk) )}:host([selects]) ::slotted(luzmo-menu-item){--menu-checkmark-display: var(--menu-checkmark-display-hidden);padding-inline-start:var(--luzmo-menu-item-selectable-edge-to-text-not-selected, var(--menu-item-selectable-edge-to-text-not-selected))}:host([selects]) ::slotted(luzmo-menu-item[selected]){--menu-checkmark-display: var(--menu-checkmark-display-shown);padding-inline-start:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content))}.luzmo-Menu-backIcon{margin-block:var(--luzmo-menu-back-icon-margin-block, var(--menu-back-icon-margin));margin-inline:var(--luzmo-menu-back-icon-margin-inline, var(--menu-back-icon-margin));fill:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-icon-color-default, var(--menu-section-header-color)));color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-icon-color-default, var(--menu-section-header-color)))}.luzmo-Menu-back:focus-visible{box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}.luzmo-Menu-sectionHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-section-header-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));min-inline-size:var(--luzmo-menu-section-header-min-width, var(--menu-section-header-min-width));padding-block-start:var(--luzmo-menu-section-header-top-edge-to-text, var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text)));padding-block-end:var(--luzmo-menu-section-header-bottom-edge-to-text, var(--luzmo-menu-item-bottom-edge-to-text, var(--menu-item-bottom-edge-to-text)));padding-inline:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));grid-area:sectionHeadingArea/1/sectionHeadingArea/-1;display:block}.luzmo-Menu-back{padding-inline:0 var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-inline:var(--luzmo-menu-back-padding-inline-start, 0) var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-block:0;padding-block:var(--luzmo-menu-back-padding-block-start, 0) var(--luzmo-menu-back-padding-block-end, 0);flex-flow:wrap;align-items:center;display:flex}.luzmo-Menu-back .luzmo-Menu-sectionHeading{padding:0}.luzmo-Menu-backButton{cursor:pointer;background:none;border:0;margin:0;padding:0;display:inline-flex}.luzmo-Menu-backButton:focus-visible{outline:var(--luzmo-indicator-width) solid var(--luzmo-indicator-color);outline-offset:calc((var(--luzmo-indicator-width) + 1px) * -1)}.luzmo-Menu-backHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-heading-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));display:block}:host{display:inline-flex;flex-direction:column;width:100%}:host(:focus){outline:none}::slotted(*){flex-shrink:0}";
|
|
80
|
-
var j = Object.defineProperty, H = Object.getOwnPropertyDescriptor, v = (a, e, t, o) => {
|
|
81
|
-
for (var i = o > 1 ? void 0 : o ? H(e, t) : e, n = a.length - 1, l; n >= 0; n--)
|
|
82
|
-
(l = a[n]) && (i = (o ? l(e, t, i) : l(i)) || i);
|
|
83
|
-
return o && i && j(e, t, i), i;
|
|
84
|
-
};
|
|
85
|
-
function q(a, e) {
|
|
86
|
-
return !!e && (a === e || a.contains(e));
|
|
87
|
-
}
|
|
88
|
-
class d extends y(x, {
|
|
89
|
-
noDefaultSize: !0
|
|
90
|
-
}) {
|
|
91
|
-
constructor() {
|
|
92
|
-
super(), this.label = "", this.ignore = !1, this.value = "", this.valueSeparator = ",", this.selectedItems = [], this.focusedItemIndex = 0, this.focusInItemIndex = 0, this._selected = [], this.cacheUpdated = Promise.resolve(), this.childItemSet = /* @__PURE__ */ new Set(), this.selectedItemsMap = /* @__PURE__ */ new Map(), this._hasUpdatedSelectedItemIndex = !1, this._willUpdateItems = !1, this.pointerUpTarget = null, this.descendentOverlays = /* @__PURE__ */ new Map(), this.handleSubmenuClosed = (e) => {
|
|
93
|
-
e.stopPropagation(), e.composedPath()[0].dispatchEvent(
|
|
94
|
-
new Event("luzmo-menu-submenu-closed", {
|
|
95
|
-
bubbles: !0,
|
|
96
|
-
composed: !0
|
|
97
|
-
})
|
|
98
|
-
);
|
|
99
|
-
}, this.handleSubmenuOpened = (e) => {
|
|
100
|
-
e.stopPropagation(), e.composedPath()[0].dispatchEvent(
|
|
101
|
-
new Event("luzmo-menu-submenu-opened", {
|
|
102
|
-
bubbles: !0,
|
|
103
|
-
composed: !0
|
|
104
|
-
})
|
|
105
|
-
);
|
|
106
|
-
const o = this.childItems[this.focusedItemIndex];
|
|
107
|
-
o && (o.focused = !1);
|
|
108
|
-
const i = e.composedPath().find((l) => this.childItemSet.has(l));
|
|
109
|
-
if (!i)
|
|
110
|
-
return;
|
|
111
|
-
const n = this.childItems.indexOf(
|
|
112
|
-
i
|
|
113
|
-
);
|
|
114
|
-
this.focusedItemIndex = n, this.focusInItemIndex = n;
|
|
115
|
-
}, this.resolveCacheUpdated = () => {
|
|
116
|
-
}, this.addEventListener(
|
|
117
|
-
"luzmo-menu-item-added-or-updated",
|
|
118
|
-
this.onSelectableItemAddedOrUpdated
|
|
119
|
-
), this.addEventListener(
|
|
120
|
-
"luzmo-menu-item-added-or-updated",
|
|
121
|
-
this.onFocusableItemAddedOrUpdated,
|
|
122
|
-
{
|
|
123
|
-
capture: !0
|
|
124
|
-
}
|
|
125
|
-
), this.addEventListener("click", this.handleClick), this.addEventListener("pointerup", this.handlePointerup), this.addEventListener("focusin", this.handleFocusin), this.addEventListener("blur", this.handleBlur), this.addEventListener("luzmo-opened", this.handleSubmenuOpened), this.addEventListener("luzmo-closed", this.handleSubmenuClosed);
|
|
126
|
-
}
|
|
127
|
-
static get styles() {
|
|
128
|
-
return [g(F)];
|
|
129
|
-
}
|
|
130
|
-
get isSubmenu() {
|
|
131
|
-
return this.slot === "submenu";
|
|
132
|
-
}
|
|
133
|
-
get selected() {
|
|
134
|
-
return this._selected;
|
|
135
|
-
}
|
|
136
|
-
set selected(e) {
|
|
137
|
-
if (e === this.selected)
|
|
138
|
-
return;
|
|
139
|
-
const t = this.selected;
|
|
140
|
-
this._selected = e, this.selectedItems = [], this.selectedItemsMap.clear(), this.childItems.forEach((o) => {
|
|
141
|
-
this === o.menuData.selectionRoot && (o.selected = this.selected.includes(o.value), o.selected && (this.selectedItems.push(o), this.selectedItemsMap.set(o, !0)));
|
|
142
|
-
}), this.requestUpdate("selected", t);
|
|
143
|
-
}
|
|
144
|
-
get childItems() {
|
|
145
|
-
return this.cachedChildItems || (this.cachedChildItems = this.updateCachedMenuItems()), this.cachedChildItems;
|
|
146
|
-
}
|
|
147
|
-
/**
|
|
148
|
-
* Hide this getter from web-component-analyzer until
|
|
149
|
-
* https://github.com/runem/web-component-analyzer/issues/131
|
|
150
|
-
* has been addressed.
|
|
151
|
-
*
|
|
152
|
-
* @private
|
|
153
|
-
*/
|
|
154
|
-
get childRole() {
|
|
155
|
-
if (this.resolvedRole === "listbox")
|
|
156
|
-
return "option";
|
|
157
|
-
switch (this.resolvedSelects) {
|
|
158
|
-
case "single":
|
|
159
|
-
return "menuitemradio";
|
|
160
|
-
case "multiple":
|
|
161
|
-
return "menuitemcheckbox";
|
|
162
|
-
default:
|
|
163
|
-
return "menuitem";
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
get ownRole() {
|
|
167
|
-
return "menu";
|
|
168
|
-
}
|
|
169
|
-
focus({ preventScroll: e } = {}) {
|
|
170
|
-
if (this.childItems.every((o) => o.disabled))
|
|
171
|
-
return;
|
|
172
|
-
if (this.childItems.some((o) => o.menuData.focusRoot !== this)) {
|
|
173
|
-
super.focus({ preventScroll: e });
|
|
174
|
-
return;
|
|
175
|
-
}
|
|
176
|
-
this.focusMenuItemByOffset(0), super.focus({ preventScroll: e });
|
|
177
|
-
const t = this.selectedItems[0];
|
|
178
|
-
t && !e && t.scrollIntoView({ block: "nearest" });
|
|
179
|
-
}
|
|
180
|
-
handleFocusin(e) {
|
|
181
|
-
var i;
|
|
182
|
-
if (this.childItems.some((n) => n.menuData.focusRoot !== this))
|
|
183
|
-
return;
|
|
184
|
-
const t = this.getRootNode().activeElement, o = ((i = this.childItems[this.focusedItemIndex]) == null ? void 0 : i.menuData.selectionRoot) || this;
|
|
185
|
-
if ((t !== o || e.target !== this) && (o.focus({ preventScroll: !0 }), t && this.focusedItemIndex === 0)) {
|
|
186
|
-
const n = this.childItems.indexOf(t);
|
|
187
|
-
this.focusMenuItemByOffset(Math.max(n, 0));
|
|
188
|
-
}
|
|
189
|
-
this.startListeningToKeyboard();
|
|
190
|
-
}
|
|
191
|
-
startListeningToKeyboard() {
|
|
192
|
-
this.addEventListener("keydown", this.handleKeydown);
|
|
193
|
-
}
|
|
194
|
-
handleBlur(e) {
|
|
195
|
-
q(this, e.relatedTarget) || (this.stopListeningToKeyboard(), this.childItems.forEach((t) => t.focused = !1), this.removeAttribute("aria-activedescendant"));
|
|
196
|
-
}
|
|
197
|
-
stopListeningToKeyboard() {
|
|
198
|
-
this.removeEventListener("keydown", this.handleKeydown);
|
|
199
|
-
}
|
|
200
|
-
selectOrToggleItem(e) {
|
|
201
|
-
const t = this.resolvedSelects, o = new Map(this.selectedItemsMap), i = [...this.selected], n = [...this.selectedItems], l = this.value, c = this.childItems[this.focusedItemIndex];
|
|
202
|
-
if (c && (c.focused = !1, c.active = !1), this.focusedItemIndex = this.childItems.indexOf(e), this.forwardFocusVisibleToItem(e), t === "multiple") {
|
|
203
|
-
this.selectedItemsMap.has(e) ? this.selectedItemsMap.delete(e) : this.selectedItemsMap.set(e, !0);
|
|
204
|
-
const m = [], k = [];
|
|
205
|
-
this.childItemSet.forEach((f) => {
|
|
206
|
-
f.menuData.selectionRoot === this && this.selectedItemsMap.has(f) && (m.push(f.value), k.push(f));
|
|
207
|
-
}), this._selected = m, this.selectedItems = k, this.value = this.selected.join(this.valueSeparator);
|
|
208
|
-
} else
|
|
209
|
-
this.selectedItemsMap.clear(), this.selectedItemsMap.set(e, !0), this.value = e.value, this._selected = [e.value], this.selectedItems = [e];
|
|
210
|
-
if (!this.dispatchEvent(
|
|
211
|
-
new Event("change", {
|
|
212
|
-
cancelable: !0,
|
|
213
|
-
bubbles: !0,
|
|
214
|
-
composed: !0
|
|
215
|
-
})
|
|
216
|
-
)) {
|
|
217
|
-
this._selected = i, this.selectedItems = n, this.selectedItemsMap = o, this.value = l;
|
|
218
|
-
return;
|
|
219
|
-
}
|
|
220
|
-
if (t === "single") {
|
|
221
|
-
for (const m of o.keys())
|
|
222
|
-
m !== e && (m.selected = !1);
|
|
223
|
-
e.selected = !0;
|
|
224
|
-
} else t === "multiple" && (e.selected = !e.selected);
|
|
225
|
-
}
|
|
226
|
-
handleKeydown(e) {
|
|
227
|
-
if (e.defaultPrevented)
|
|
228
|
-
return;
|
|
229
|
-
const t = this.childItems[this.focusedItemIndex];
|
|
230
|
-
t && (t.focused = !0);
|
|
231
|
-
const { key: o } = e;
|
|
232
|
-
if (e.shiftKey && e.target !== this && this.hasAttribute("tabindex")) {
|
|
233
|
-
this.removeAttribute("tabindex");
|
|
234
|
-
const i = (n) => {
|
|
235
|
-
!n.shiftKey && !this.hasAttribute("tabindex") && (this.tabIndex = 0, document.removeEventListener("keyup", i), this.removeEventListener("focusout", i));
|
|
236
|
-
};
|
|
237
|
-
document.addEventListener("keyup", i), this.addEventListener("focusout", i);
|
|
238
|
-
}
|
|
239
|
-
if (o === "Tab") {
|
|
240
|
-
this.prepareToCleanUp();
|
|
241
|
-
return;
|
|
242
|
-
}
|
|
243
|
-
if (o === " " && (t != null && t.hasSubmenu)) {
|
|
244
|
-
t.openOverlay();
|
|
245
|
-
return;
|
|
246
|
-
}
|
|
247
|
-
if (o === " " || o === "Enter") {
|
|
248
|
-
const i = this.childItems[this.focusedItemIndex];
|
|
249
|
-
i && i.menuData.selectionRoot === e.target && (e.preventDefault(), i.click());
|
|
250
|
-
return;
|
|
251
|
-
}
|
|
252
|
-
if (o === "ArrowDown" || o === "ArrowUp") {
|
|
253
|
-
const i = this.childItems[this.focusedItemIndex];
|
|
254
|
-
i && i.menuData.selectionRoot === e.target && this.navigateWithinMenu(e);
|
|
255
|
-
return;
|
|
256
|
-
}
|
|
257
|
-
this.navigateBetweenRelatedMenus(e);
|
|
258
|
-
}
|
|
259
|
-
focusMenuItemByOffset(e) {
|
|
260
|
-
const t = e || 1, o = this.childItems[this.focusedItemIndex];
|
|
261
|
-
o && (o.focused = !1, o.active = o.open), this.focusedItemIndex = (this.childItems.length + this.focusedItemIndex + e) % this.childItems.length;
|
|
262
|
-
let i = this.childItems[this.focusedItemIndex], n = this.childItems.length;
|
|
263
|
-
for (; i != null && i.disabled && n; )
|
|
264
|
-
n -= 1, this.focusedItemIndex = (this.childItems.length + this.focusedItemIndex + t) % this.childItems.length, i = this.childItems[this.focusedItemIndex];
|
|
265
|
-
return i != null && i.disabled || this.forwardFocusVisibleToItem(i), i;
|
|
266
|
-
}
|
|
267
|
-
updateSelectedItemIndex() {
|
|
268
|
-
let e = 0;
|
|
269
|
-
const t = /* @__PURE__ */ new Map(), o = [], i = [];
|
|
270
|
-
let n = this.childItems.length;
|
|
271
|
-
for (; n; ) {
|
|
272
|
-
n -= 1;
|
|
273
|
-
const l = this.childItems[n];
|
|
274
|
-
l.menuData.selectionRoot === this && ((l.selected || !this._hasUpdatedSelectedItemIndex && this.selected.includes(l.value)) && (e = n, t.set(l, !0), o.unshift(l.value), i.unshift(l)), n !== e && (l.focused = !1));
|
|
275
|
-
}
|
|
276
|
-
i.map((l, c) => {
|
|
277
|
-
c > 0 && (l.focused = !1);
|
|
278
|
-
}), this.selectedItemsMap = t, this._selected = o, this.selectedItems = i, this.value = this.selected.join(this.valueSeparator), this.focusedItemIndex = e, this.focusInItemIndex = e;
|
|
279
|
-
}
|
|
280
|
-
closeDescendentOverlays() {
|
|
281
|
-
this.descendentOverlays.forEach((e) => {
|
|
282
|
-
e.open = !1;
|
|
283
|
-
}), this.descendentOverlays = /* @__PURE__ */ new Map();
|
|
284
|
-
}
|
|
285
|
-
render() {
|
|
286
|
-
return this.renderMenuItemSlot();
|
|
287
|
-
}
|
|
288
|
-
connectedCallback() {
|
|
289
|
-
super.connectedCallback(), !this.hasAttribute("role") && !this.ignore && this.setAttribute("role", this.ownRole), this.updateComplete.then(() => this.updateItemFocus());
|
|
290
|
-
}
|
|
291
|
-
disconnectedCallback() {
|
|
292
|
-
this.cachedChildItems = void 0, this.selectedItems = [], this.selectedItemsMap.clear(), this.childItemSet.clear(), this.descendentOverlays = /* @__PURE__ */ new Map(), super.disconnectedCallback();
|
|
293
|
-
}
|
|
294
|
-
handleDescendentOverlayOpened(e) {
|
|
295
|
-
const t = e.composedPath()[0];
|
|
296
|
-
t.overlayElement && this.descendentOverlays.set(t.overlayElement, t.overlayElement);
|
|
297
|
-
}
|
|
298
|
-
handleDescendentOverlayClosed(e) {
|
|
299
|
-
const t = e.composedPath()[0];
|
|
300
|
-
t.overlayElement && this.descendentOverlays.delete(t.overlayElement);
|
|
301
|
-
}
|
|
302
|
-
navigateWithinMenu(e) {
|
|
303
|
-
const { key: t } = e, o = this.childItems[this.focusedItemIndex], i = t === "ArrowDown" ? 1 : -1, n = this.focusMenuItemByOffset(i);
|
|
304
|
-
n !== o && (e.preventDefault(), e.stopPropagation(), n.scrollIntoView({ block: "nearest" }));
|
|
305
|
-
}
|
|
306
|
-
navigateBetweenRelatedMenus(e) {
|
|
307
|
-
const { key: t } = e;
|
|
308
|
-
e.stopPropagation();
|
|
309
|
-
const o = this.isLTR && t === "ArrowRight" || !this.isLTR && t === "ArrowLeft", i = this.isLTR && t === "ArrowLeft" || !this.isLTR && t === "ArrowRight";
|
|
310
|
-
if (o) {
|
|
311
|
-
const n = this.childItems[this.focusedItemIndex];
|
|
312
|
-
n != null && n.hasSubmenu && n.openOverlay();
|
|
313
|
-
} else i && this.isSubmenu && (this.dispatchEvent(new Event("close", { bubbles: !0 })), this.updateSelectedItemIndex());
|
|
314
|
-
}
|
|
315
|
-
renderMenuItemSlot() {
|
|
316
|
-
return h`
|
|
317
|
-
<slot
|
|
318
|
-
@luzmo-menu-submenu-opened=${this.handleDescendentOverlayOpened}
|
|
319
|
-
@luzmo-menu-submenu-closed=${this.handleDescendentOverlayClosed}
|
|
320
|
-
@slotchange=${this.handleSlotchange}
|
|
321
|
-
></slot>
|
|
322
|
-
`;
|
|
323
|
-
}
|
|
324
|
-
firstUpdated(e) {
|
|
325
|
-
if (super.firstUpdated(e), !this.hasAttribute("tabindex") && !this.ignore) {
|
|
326
|
-
const o = this.getAttribute("role");
|
|
327
|
-
this.tabIndex = o === "group" ? -1 : 0;
|
|
328
|
-
}
|
|
329
|
-
const t = [
|
|
330
|
-
new Promise((o) => requestAnimationFrame(() => o(!0)))
|
|
331
|
-
];
|
|
332
|
-
[...this.children].forEach((o) => {
|
|
333
|
-
o.localName === "luzmo-menu-item" && t.push(o.updateComplete);
|
|
334
|
-
}), this.childItemsUpdated = Promise.all(t);
|
|
335
|
-
}
|
|
336
|
-
updated(e) {
|
|
337
|
-
super.updated(e), e.has("selects") && this.hasUpdated && this.selectsChanged(), e.has("label") && (this.label || e.get("label") !== void 0) && (this.label ? this.setAttribute("aria-label", this.label) : this.removeAttribute("aria-label"));
|
|
338
|
-
}
|
|
339
|
-
selectsChanged() {
|
|
340
|
-
const e = [
|
|
341
|
-
new Promise((t) => requestAnimationFrame(() => t(!0)))
|
|
342
|
-
];
|
|
343
|
-
this.childItemSet.forEach((t) => {
|
|
344
|
-
e.push(t.triggerUpdate());
|
|
345
|
-
}), this.childItemsUpdated = Promise.all(e);
|
|
346
|
-
}
|
|
347
|
-
async getUpdateComplete() {
|
|
348
|
-
const e = await super.getUpdateComplete();
|
|
349
|
-
return await this.childItemsUpdated, await this.cacheUpdated, e;
|
|
350
|
-
}
|
|
351
|
-
updateCachedMenuItems() {
|
|
352
|
-
if (this.cachedChildItems = [], !this.menuSlot)
|
|
353
|
-
return [];
|
|
354
|
-
const e = this.menuSlot.assignedElements({
|
|
355
|
-
flatten: !0
|
|
356
|
-
});
|
|
357
|
-
for (const [t, o] of e.entries()) {
|
|
358
|
-
if (this.childItemSet.has(o)) {
|
|
359
|
-
this.cachedChildItems.push(o);
|
|
360
|
-
continue;
|
|
361
|
-
}
|
|
362
|
-
const n = o.localName === "slot" ? o.assignedElements({
|
|
363
|
-
flatten: !0
|
|
364
|
-
}) : [...o.querySelectorAll(":scope > *")];
|
|
365
|
-
e.splice(
|
|
366
|
-
t,
|
|
367
|
-
1,
|
|
368
|
-
o,
|
|
369
|
-
...n
|
|
370
|
-
);
|
|
371
|
-
}
|
|
372
|
-
return this.cachedChildItems;
|
|
373
|
-
}
|
|
374
|
-
/**
|
|
375
|
-
* When a descendant `<luzmo-menu-item>` element is added or updated it will dispatch
|
|
376
|
-
* this event to announce its presence in the DOM. During the CAPTURE phase the first
|
|
377
|
-
* Menu based element that the event encounters will manage the focus state of the
|
|
378
|
-
* dispatching `<luzmo-menu-item>` element.
|
|
379
|
-
* @param event
|
|
380
|
-
*/
|
|
381
|
-
onFocusableItemAddedOrUpdated(e) {
|
|
382
|
-
e.menuCascade.set(this, {
|
|
383
|
-
hadFocusRoot: !!e.item.menuData.focusRoot,
|
|
384
|
-
ancestorWithSelects: e.currentAncestorWithSelects
|
|
385
|
-
}), this.selects && (e.currentAncestorWithSelects = this), e.item.menuData.focusRoot = e.item.menuData.focusRoot || this;
|
|
386
|
-
}
|
|
387
|
-
/**
|
|
388
|
-
* When a descendant `<luzmo-menu-item>` element is added or updated it will dispatch
|
|
389
|
-
* this event to announce its presence in the DOM. During the BUBBLE phase the first
|
|
390
|
-
* Menu based element that the event encounters that does not inherit selection will
|
|
391
|
-
* manage the selection state of the dispatching `<luzmo-menu-item>` element.
|
|
392
|
-
* @param event
|
|
393
|
-
*/
|
|
394
|
-
onSelectableItemAddedOrUpdated(e) {
|
|
395
|
-
var i, n;
|
|
396
|
-
const t = e.menuCascade.get(this);
|
|
397
|
-
if (!t)
|
|
398
|
-
return;
|
|
399
|
-
if (e.item.menuData.parentMenu = e.item.menuData.parentMenu || this, t.hadFocusRoot && !this.ignore && (this.tabIndex = -1), this.addChildItem(e.item), this.selects === "inherit") {
|
|
400
|
-
this.resolvedSelects = "inherit";
|
|
401
|
-
const l = (i = e.currentAncestorWithSelects) == null ? void 0 : i.ignore;
|
|
402
|
-
this.resolvedRole = l ? "none" : ((n = e.currentAncestorWithSelects) == null ? void 0 : n.getAttribute("role")) || this.getAttribute("role") || void 0;
|
|
403
|
-
} else this.selects ? (this.resolvedRole = this.ignore ? "none" : this.getAttribute("role") || void 0, this.resolvedSelects = this.selects) : (this.resolvedRole = this.ignore ? "none" : this.getAttribute("role") || void 0, this.resolvedSelects = this.resolvedRole === "none" ? "ignore" : "none");
|
|
404
|
-
const o = this.resolvedSelects === "single" || this.resolvedSelects === "multiple";
|
|
405
|
-
e.item.menuData.cleanupSteps.push(
|
|
406
|
-
(l) => this.removeChildItem(l)
|
|
407
|
-
), (o || !this.selects && this.resolvedSelects !== "ignore") && !e.item.menuData.selectionRoot && (e.item.setRole(this.childRole), e.item.menuData.selectionRoot = e.item.menuData.selectionRoot || this, e.item.selected && (this.selectedItemsMap.set(e.item, !0), this.selectedItems = [...this.selectedItems, e.item], this._selected = [...this.selected, e.item.value], this.value = this.selected.join(this.valueSeparator)));
|
|
408
|
-
}
|
|
409
|
-
addChildItem(e) {
|
|
410
|
-
this.childItemSet.add(e), this.handleItemsChanged();
|
|
411
|
-
}
|
|
412
|
-
async removeChildItem(e) {
|
|
413
|
-
this.childItemSet.delete(e), this.cachedChildItems = void 0, e.focused && (this.handleItemsChanged(), await this.updateComplete, this.focus());
|
|
414
|
-
}
|
|
415
|
-
handleClick(e) {
|
|
416
|
-
if (this.pointerUpTarget === e.target) {
|
|
417
|
-
this.pointerUpTarget = null;
|
|
418
|
-
return;
|
|
419
|
-
}
|
|
420
|
-
this.handlePointerBasedSelection(e);
|
|
421
|
-
}
|
|
422
|
-
handlePointerup(e) {
|
|
423
|
-
this.pointerUpTarget = e.target, this.handlePointerBasedSelection(e);
|
|
424
|
-
}
|
|
425
|
-
handlePointerBasedSelection(e) {
|
|
426
|
-
var i, n;
|
|
427
|
-
if (e instanceof MouseEvent && e.button !== 0)
|
|
428
|
-
return;
|
|
429
|
-
const o = e.composedPath().find((l) => l instanceof Element ? l.getAttribute("role") === this.childRole : !1);
|
|
430
|
-
if (e.defaultPrevented) {
|
|
431
|
-
const l = this.childItems.indexOf(o);
|
|
432
|
-
((i = o == null ? void 0 : o.menuData) == null ? void 0 : i.focusRoot) === this && l !== -1 && (this.focusedItemIndex = l);
|
|
433
|
-
return;
|
|
434
|
-
}
|
|
435
|
-
if (o != null && o.href && o.href.length > 0) {
|
|
436
|
-
this.dispatchEvent(
|
|
437
|
-
new Event("change", {
|
|
438
|
-
bubbles: !0,
|
|
439
|
-
composed: !0
|
|
440
|
-
})
|
|
441
|
-
);
|
|
442
|
-
return;
|
|
443
|
-
} else if (((n = o == null ? void 0 : o.menuData) == null ? void 0 : n.selectionRoot) === this && this.childItems.length > 0) {
|
|
444
|
-
if (e.preventDefault(), o.hasSubmenu || o.open)
|
|
445
|
-
return;
|
|
446
|
-
this.selectOrToggleItem(o);
|
|
447
|
-
} else
|
|
448
|
-
return;
|
|
449
|
-
this.prepareToCleanUp();
|
|
450
|
-
}
|
|
451
|
-
prepareToCleanUp() {
|
|
452
|
-
document.addEventListener(
|
|
453
|
-
"focusout",
|
|
454
|
-
() => {
|
|
455
|
-
requestAnimationFrame(() => {
|
|
456
|
-
const e = this.childItems[this.focusedItemIndex];
|
|
457
|
-
e && (e.focused = !1, this.updateSelectedItemIndex());
|
|
458
|
-
});
|
|
459
|
-
},
|
|
460
|
-
{ once: !0 }
|
|
461
|
-
);
|
|
462
|
-
}
|
|
463
|
-
handleItemsChanged() {
|
|
464
|
-
this.cachedChildItems = void 0, this._willUpdateItems || (this._willUpdateItems = !0, this.cacheUpdated = this.updateCache());
|
|
465
|
-
}
|
|
466
|
-
async updateCache() {
|
|
467
|
-
await (this.hasUpdated ? new Promise((e) => requestAnimationFrame(() => e(!0))) : Promise.all([
|
|
468
|
-
new Promise((e) => requestAnimationFrame(() => e(!0))),
|
|
469
|
-
this.updateComplete
|
|
470
|
-
])), this.cachedChildItems === void 0 && (this.updateSelectedItemIndex(), this.updateItemFocus()), this._willUpdateItems = !1;
|
|
471
|
-
}
|
|
472
|
-
updateItemFocus() {
|
|
473
|
-
if (this.childItems.length === 0)
|
|
474
|
-
return;
|
|
475
|
-
const e = this.childItems[this.focusInItemIndex];
|
|
476
|
-
this.getRootNode().activeElement === e.menuData.focusRoot && this.forwardFocusVisibleToItem(e);
|
|
477
|
-
}
|
|
478
|
-
forwardFocusVisibleToItem(e) {
|
|
479
|
-
if (!e || e.menuData.focusRoot !== this)
|
|
480
|
-
return;
|
|
481
|
-
this.closeDescendentOverlays();
|
|
482
|
-
const t = this.hasVisibleFocusInTree() || !!this.childItems.some((o) => o.hasVisibleFocusInTree());
|
|
483
|
-
e.focused = t, this.setAttribute("aria-activedescendant", e.id), e.menuData.selectionRoot && e.menuData.selectionRoot !== this && e.menuData.selectionRoot.focus();
|
|
484
|
-
}
|
|
485
|
-
handleSlotchange({
|
|
486
|
-
target: e
|
|
487
|
-
}) {
|
|
488
|
-
const t = e.assignedElements({
|
|
489
|
-
flatten: !0
|
|
490
|
-
});
|
|
491
|
-
this.childItems.length !== t.length && t.forEach((o) => {
|
|
492
|
-
o.triggerUpdate !== void 0 ? o.triggerUpdate() : o.childItems !== void 0 && o.childItems.forEach((i) => {
|
|
493
|
-
i.triggerUpdate();
|
|
494
|
-
});
|
|
495
|
-
});
|
|
496
|
-
}
|
|
497
|
-
}
|
|
498
|
-
v([
|
|
499
|
-
r({ type: String, reflect: !0 })
|
|
500
|
-
], d.prototype, "label", 2);
|
|
501
|
-
v([
|
|
502
|
-
r({ type: Boolean, reflect: !0 })
|
|
503
|
-
], d.prototype, "ignore", 2);
|
|
504
|
-
v([
|
|
505
|
-
r({ type: String, reflect: !0 })
|
|
506
|
-
], d.prototype, "selects", 2);
|
|
507
|
-
v([
|
|
508
|
-
r({ type: String })
|
|
509
|
-
], d.prototype, "value", 2);
|
|
510
|
-
v([
|
|
511
|
-
r({ type: String, attribute: "value-separator" })
|
|
512
|
-
], d.prototype, "valueSeparator", 2);
|
|
513
|
-
v([
|
|
514
|
-
r({ attribute: !1 })
|
|
515
|
-
], d.prototype, "selected", 1);
|
|
516
|
-
v([
|
|
517
|
-
r({ attribute: !1 })
|
|
518
|
-
], d.prototype, "selectedItems", 2);
|
|
519
|
-
v([
|
|
520
|
-
b("slot:not([name])")
|
|
521
|
-
], d.prototype, "menuSlot", 2);
|
|
522
|
-
const V = ":host{--menu-divider-thickness: var( --divider-thickness-medium, var(--luzmo-border-width) );inline-size:auto;margin-block:var(--luzmo-menu-section-divider-margin-block, max(0px, (var(--menu-item-section-divider-height) - var(--menu-divider-thickness)) / 2));margin-inline:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));overflow:visible}.luzmo-Menu-back:focus-visible{box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}.luzmo-Menu-back{padding-inline:0 var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-inline:var(--luzmo-menu-back-padding-inline-start, 0) var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-block:0;padding-block:var(--luzmo-menu-back-padding-block-start, 0) var(--luzmo-menu-back-padding-block-end, 0);flex-flow:wrap;align-items:center;display:flex}.luzmo-Menu-backButton{cursor:pointer;background:none;border:0;margin:0;padding:0;display:inline-flex}.luzmo-Menu-backButton:focus-visible{outline:var(--focus-indicator-thickness) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-thickness) + 1px) * -1)}.luzmo-Menu-backHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-heading-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));display:block}:host{display:block;flex-shrink:0}";
|
|
523
|
-
class W extends y(x, {
|
|
524
|
-
validSizes: ["s", "m", "l"]
|
|
525
|
-
}) {
|
|
526
|
-
static get styles() {
|
|
527
|
-
return [g(A), g(V)];
|
|
528
|
-
}
|
|
529
|
-
firstUpdated(e) {
|
|
530
|
-
super.firstUpdated(e), this.setAttribute("role", "separator");
|
|
531
|
-
}
|
|
532
|
-
}
|
|
533
|
-
const N = ".luzmo-Menu-back:focus-visible{box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}.header{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-section-header-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));min-inline-size:var(--luzmo-menu-section-header-min-width, var(--menu-section-header-min-width));padding-block-start:var(--luzmo-menu-section-header-top-edge-to-text, var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text)));padding-block-end:var(--luzmo-menu-section-header-bottom-edge-to-text, var(--luzmo-menu-item-bottom-edge-to-text, var(--menu-item-bottom-edge-to-text)));padding-inline:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));grid-area:sectionHeadingArea/1/sectionHeadingArea/-1;display:block}.luzmo-Menu-back{padding-inline:0 var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-inline:var(--luzmo-menu-back-padding-inline-start, 0) var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-block:0;padding-block:var(--luzmo-menu-back-padding-block-start, 0) var(--luzmo-menu-back-padding-block-end, 0);flex-flow:wrap;align-items:center;display:flex}.luzmo-Menu-back .header{padding:0}.luzmo-Menu-backButton{cursor:pointer;background:none;border:0;margin:0;padding:0;display:inline-flex}.luzmo-Menu-backButton:focus-visible{outline:var(--focus-indicator-thickness) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-thickness) + 1px) * -1)}.luzmo-Menu-backHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-heading-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));display:block}:host{margin:0;display:inline-flex;overflow:visible;flex-direction:column}[hidden]{display:none!important}";
|
|
534
|
-
var K = Object.defineProperty, C = (a, e, t, o) => {
|
|
535
|
-
for (var i = void 0, n = a.length - 1, l; n >= 0; n--)
|
|
536
|
-
(l = a[n]) && (i = l(e, t, i) || i);
|
|
537
|
-
return i && K(e, t, i), i;
|
|
538
|
-
};
|
|
539
|
-
class I extends d {
|
|
540
|
-
constructor() {
|
|
541
|
-
super(...arguments), this.headerId = "";
|
|
542
|
-
}
|
|
543
|
-
static get styles() {
|
|
544
|
-
return [...super.styles, g(N)];
|
|
545
|
-
}
|
|
546
|
-
render() {
|
|
547
|
-
return h`
|
|
548
|
-
<span class="header" ?hidden=${!this.headerElement}>
|
|
549
|
-
<slot name="header" @slotchange=${this.updateLabel}></slot>
|
|
550
|
-
</span>
|
|
551
|
-
<luzmo-menu ignore>${this.renderMenuItemSlot()}</luzmo-menu>
|
|
552
|
-
`;
|
|
553
|
-
}
|
|
554
|
-
get ownRole() {
|
|
555
|
-
switch (this.selects) {
|
|
556
|
-
case "multiple":
|
|
557
|
-
case "single":
|
|
558
|
-
case "inherit":
|
|
559
|
-
return "group";
|
|
560
|
-
default:
|
|
561
|
-
return "menu";
|
|
562
|
-
}
|
|
563
|
-
}
|
|
564
|
-
updateLabel() {
|
|
565
|
-
const e = this.headerElements.length > 0 ? this.headerElements[0] : void 0;
|
|
566
|
-
if (e !== this.headerElement)
|
|
567
|
-
if (this.headerElement && this.headerElement.id === this.headerId && this.headerElement.removeAttribute("id"), e) {
|
|
568
|
-
this.headerId = this.headerId || `luzmo-menu-group-label-${S()}`;
|
|
569
|
-
const t = e.id || this.headerId;
|
|
570
|
-
e.id || (e.id = t), this.setAttribute("aria-labelledby", t);
|
|
571
|
-
} else
|
|
572
|
-
this.removeAttribute("aria-labelledby");
|
|
573
|
-
this.headerElement = e;
|
|
574
|
-
}
|
|
575
|
-
}
|
|
576
|
-
C([
|
|
577
|
-
O({
|
|
578
|
-
slot: "header",
|
|
579
|
-
flatten: !0
|
|
580
|
-
})
|
|
581
|
-
], I.prototype, "headerElements");
|
|
582
|
-
C([
|
|
583
|
-
P()
|
|
584
|
-
], I.prototype, "headerElement");
|
|
585
|
-
const G = '.checkmark{display:var(--luzmo-menu-checkmark-display, var(--menu-checkmark-display));font-size:var(--luzmo-menu-item-checkmark-size, var(--menu-item-checkmark-size));fill:var(--highcontrast-menu-checkmark-icon-color-default, var(--luzmo-menu-checkmark-icon-color-default, var(--menu-checkmark-icon-color-default)));color:var(--highcontrast-menu-checkmark-icon-color-default, var(--luzmo-menu-checkmark-icon-color-default, var(--menu-checkmark-icon-color-default)));opacity:1;grid-area:checkmarkArea;align-self:start;margin-block-start:calc(var(--luzmo-menu-item-top-to-checkmark, var(--menu-item-top-to-checkmark)) - var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text)));margin-inline-end:var(--luzmo-menu-item-text-to-control, var(--menu-item-text-to-control))}.angle{font-size:var(--menu-item-angle-size);grid-area:angleArea;align-self:center;margin-inline-end:var(--luzmo-menu-item-text-to-control, var(--menu-item-text-to-control))}.luzmo-Menu-back:focus-visible{box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}.luzmo-Menu-backButton:focus-visible{outline:var(--focus-indicator-thickness) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-thickness) + 1px) * -1)}::slotted([slot=icon]){fill:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-label-icon-color-default, var(--menu-item-label-icon-color-default)));color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-label-icon-color-default, var(--menu-item-label-icon-color-default)));grid-area:iconArea;align-self:start}::slotted([slot=icon]){margin-inline-end:var(--luzmo-menu-item-label-text-to-visual, var(--menu-item-label-text-to-visual))}:host{cursor:pointer;box-sizing:border-box;background-color:var(--highcontrast-menu-item-background-color-default, var(--luzmo-menu-item-background-color-default, var(--menu-item-background-color-default)));line-height:var(--luzmo-menu-item-label-line-height, var(--menu-item-label-line-height));min-block-size:var(--luzmo-menu-item-min-height, var(--menu-item-min-height));padding-block-start:var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text));padding-block-end:var(--luzmo-menu-item-bottom-edge-to-text, var(--menu-item-bottom-edge-to-text));padding-inline:var(--luzmo-menu-item-label-inline-edge-to-content, var(--menu-item-label-inline-edge-to-content));grid-template:". angleAreaCollapsible . headingIconArea sectionHeadingArea . . ." "selectedArea angleAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea angleAreaDrillIn" 1fr ". . . . descriptionArea . . ." ". . . . submenuArea . . ." ". . . . . . . ."/auto auto auto auto 1fr auto auto auto;justify-content:start;margin:0;-webkit-text-decoration:none;text-decoration:none;display:grid;align-items:center;position:relative}.luzmo-Menu-itemCheckbox{--luzmo-checkbox-top-to-text: 0;--luzmo-checkbox-text-to-control: 0;min-block-size:0}.luzmo-Menu-itemCheckbox .luzmo-Checkbox-box{margin-block-start:var(--luzmo-menu-item-top-to-checkbox, var(--menu-item-top-to-checkbox));margin-block-end:0;margin-inline-end:var(--luzmo-menu-item-text-to-control, var(--menu-item-text-to-control))}.luzmo-Menu-itemSwitch{min-block-size:0}.luzmo-Menu-itemSwitch .luzmo-Switch-switch{margin-block-start:var(--luzmo-menu-item-top-to-action, var(--menu-item-top-to-action));margin-block-end:0}#label{grid-area:submenuItemLabelArea}::slotted([slot=value]){grid-area:submenuItemValueArea}:host([focused]),:host(:focus){background-color:var(--highcontrast-menu-item-background-color-focus, var(--luzmo-menu-item-background-color-key-focus, var(--menu-item-background-color-key-focus)));outline:none}:host([focused])>#label,:host(:focus)>#label{color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-content-color-focus, var(--menu-item-label-content-color-focus)))}:host([focused])>[name=description]::slotted(*),:host(:focus)>[name=description]::slotted(*){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-description-color-focus, var(--menu-item-description-color-focus)))}:host([focused])>::slotted([slot=value]),:host(:focus)>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-value-color-focus, var(--menu-item-value-color-focus)))}:host([focused])>.icon:not(.angle,.checkmark),:host(:focus)>.icon:not(.angle,.checkmark){fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-focus, var(--menu-item-label-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-focus, var(--menu-item-label-icon-color-focus)))}:host([focused])>.angle,:host(:focus)>.angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)))}:host([focused])>.checkmark,:host(:focus)>.checkmark{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-focus, var(--menu-checkmark-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-focus, var(--menu-checkmark-icon-color-focus)))}:host:dir(rtl),:host([dir=rtl]){--menu-item-focus-indicator-direction-scalar: -1}:host(:is(:active,[active])){background-color:var(--highcontrast-menu-item-background-color-focus, var(--luzmo-menu-item-background-color-down, var(--menu-item-background-color-down)))}:host(:is(:active,[active]))>#label{color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-content-color-down, var(--menu-item-label-content-color-down)))}:host(:is(:active,[active]))>[name=description]::slotted(*){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-description-color-down, var(--menu-item-description-color-down)))}:host(:is(:active,[active]))>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-value-color-down, var(--menu-item-value-color-down)))}:host(:is(:active,[active]))>.icon:not(.angle,.checkmark){fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-down, var(--menu-item-label-icon-color-down)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-down, var(--menu-item-label-icon-color-down)))}:host(:is(:active,[active]))>.angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)))}:host(:is(:active,[active]))>.checkmark{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-down, var(--menu-checkmark-icon-color-down)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-down, var(--menu-checkmark-icon-color-down)))}:host([disabled]),:host([aria-disabled=true]){background-color:initial}:host([disabled]) #label,:host([disabled]) ::slotted([slot=value]),:host([aria-disabled=true]) #label,:host([aria-disabled=true]) ::slotted([slot=value]){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-content-color-disabled, var(--menu-item-label-content-color-disabled)))}:host([disabled]) [name=description]::slotted(*),:host([aria-disabled=true]) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-description-color-disabled, var(--menu-item-description-color-disabled)))}:host([disabled]) ::slotted([slot=icon]),:host([aria-disabled=true]) ::slotted([slot=icon]){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-icon-color-disabled, var(--menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-icon-color-disabled, var(--menu-item-label-icon-color-disabled)))}:host([focused]) .luzmo-Menu-back,:host([focused]){box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-menu-item-focus-indicator-width, var(--menu-item-focus-indicator-width)) * var(--menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--luzmo-menu-item-focus-indicator-color, var(--menu-item-focus-indicator-color)))}:host .is-selectableMultiple{align-items:start}.is-selectableMultiple .luzmo-Menu-itemCheckbox{grid-area:checkmarkArea}.luzmo-Menu-itemSelection{grid-area:selectedArea}#label{--luzmo-switch-control-label-spacing: 0;--luzmo-switch-spacing-top-to-label: 0;font-size:var(--luzmo-menu-item-label-font-size, var(--menu-item-label-font-size));color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-label-content-color-default, var(--menu-item-label-content-color-default)));-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;grid-area:labelArea}:host([selected]) #label{color:var(--menu-item-highlight-label-content-color)}::slotted([slot=value]){color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-value-color-default, var(--menu-item-value-color-default)));font-size:var(--luzmo-menu-item-label-font-size, var(--menu-item-label-font-size));grid-area:valueArea;justify-self:end}.luzmo-Menu-itemActions,::slotted([slot=value]){align-self:start;margin-inline-start:var(--luzmo-menu-item-label-to-value-area-min-spacing, var(--menu-item-label-to-value-area-min-spacing))}.luzmo-Menu-itemActions{grid-area:actionsArea}[name=description]::slotted(*){color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-item-description-color-default, var(--menu-item-description-color-default)));font-size:var(--luzmo-menu-item-description-font-size, var(--menu-item-description-font-size));-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;line-height:var(--luzmo-menu-item-description-line-height, var(--menu-item-description-line-height));grid-area:descriptionArea;margin-block-start:var(--luzmo-menu-item-label-to-description-spacing, var(--menu-item-label-to-description-spacing))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.luzmo-Menu-item--collapsible.is-open{padding-block-end:0}.luzmo-Menu-item--collapsible.is-open .angle{transform:rotate(90deg)}:host([focused]) .luzmo-Menu-item--collapsible.is-open,:host(:is(:active,[active])) .luzmo-Menu-item--collapsible.is-open,.luzmo-Menu-item--collapsible.is-open:focus{background-color:var(--highcontrast-menu-item-background-color-default, var(--luzmo-menu-item-background-color-default, var(--menu-item-background-color-default)))}.luzmo-Menu-item--collapsible ::slotted([slot=icon]){grid-area:headingIconArea}.luzmo-Menu-item--collapsible>::slotted([slot=icon]){padding-block-start:var(--luzmo-menu-section-header-top-edge-to-text, var(--luzmo-menu-item-top-edge-to-text, var(--menu-item-top-edge-to-text)));padding-block-end:var(--luzmo-menu-section-header-bottom-edge-to-text, var(--luzmo-menu-item-bottom-edge-to-text, var(--menu-item-bottom-edge-to-text)))}.luzmo-Menu-item--collapsible .angle{grid-area:angleAreaCollapsible}:host([has-submenu]) .angle{fill:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-drillin-icon-color-default, var(--menu-drillin-icon-color-default)));color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-drillin-icon-color-default, var(--menu-drillin-icon-color-default)));grid-area:angleAreaDrillIn;margin-inline-start:var(--luzmo-menu-item-label-to-value-area-min-spacing, var(--menu-item-label-to-value-area-min-spacing));margin-inline-end:0}:host([has-submenu]) .is-open{--menu-item-background-color-default: var( --highcontrast-menu-item-selected-background-color, var( --luzmo-menu-item-background-color-hover, var(--menu-item-background-color-hover) ) )}:host([has-submenu]) .is-open .icon:not(.angle,.checkmark){fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-hover, var(--menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-hover, var(--menu-item-label-icon-color-hover)))}:host([has-submenu]) .is-open .angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-hover, var(--menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-hover, var(--menu-drillin-icon-color-hover)))}:host([has-submenu]) .is-open .checkmark{fill:var(--highcontrast-menu-checkmark-icon-color-default, var(--luzmo-menu-checkmark-icon-color-hover, var(--menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-checkmark-icon-color-default, var(--luzmo-menu-checkmark-icon-color-hover, var(--menu-checkmark-icon-color-hover)))}@media (hover: hover){:host(:hover){background-color:var(--highcontrast-menu-item-background-color-focus, var(--luzmo-menu-item-background-color-hover, var(--menu-item-background-color-hover)))}:host(:hover)>#label{color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-content-color-hover, var(--menu-item-label-content-color-hover)))}:host([selected]:hover)>#label{color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-highlight-label-content-color, var(--menu-item-highlight-label-content-color)))}:host(:hover)>[name=description]::slotted(*){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-description-color-hover, var(--menu-item-description-color-hover)))}:host(:hover)>::slotted([slot=value]){color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-value-color-hover, var(--menu-item-value-color-hover)))}:host(:hover)>.icon:not(.angle,.checkmark){fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-hover, var(--menu-item-label-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-item-label-icon-color-hover, var(--menu-item-label-icon-color-hover)))}:host(:hover)>.angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-collapsible-icon-color, var(--menu-collapsible-icon-color)))}:host(:hover)>.checkmark{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-hover, var(--menu-checkmark-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-checkmark-icon-color-hover, var(--menu-checkmark-icon-color-hover)))}:host([disabled]:hover),:host([aria-disabled=true]:hover){cursor:default;background-color:initial}:host([disabled]:hover) #label,:host([disabled]:hover) ::slotted([slot=value]),:host([aria-disabled=true]:hover) #label,:host([aria-disabled=true]:hover) ::slotted([slot=value]){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-content-color-disabled, var(--menu-item-label-content-color-disabled)))}:host([disabled]:hover) [name=description]::slotted(*),:host([aria-disabled=true]:hover) [name=description]::slotted(*){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-description-color-disabled, var(--menu-item-description-color-disabled)))}:host([disabled]:hover) ::slotted([slot=icon]),:host([aria-disabled=true]:hover) ::slotted([slot=icon]){color:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-icon-color-disabled, var(--menu-item-label-icon-color-disabled)));fill:var(--highcontrast-menu-item-color-disabled, var(--luzmo-menu-item-label-icon-color-disabled, var(--menu-item-label-icon-color-disabled)))}.luzmo-Menu-item--collapsible.is-open:hover{background-color:var(--highcontrast-menu-item-background-color-default, var(--luzmo-menu-item-background-color-default, var(--menu-item-background-color-default)))}:host([has-submenu]:hover) .angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-hover, var(--menu-drillin-icon-color-hover)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-hover, var(--menu-drillin-icon-color-hover)))}}:host([has-submenu][focused]) .angle,:host([has-submenu]:focus) .angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-focus, var(--menu-drillin-icon-color-focus)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-focus, var(--menu-drillin-icon-color-focus)))}:host([has-submenu]:is(:active,[active])) .angle{fill:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-down, var(--menu-drillin-icon-color-down)));color:var(--highcontrast-menu-item-color-focus, var(--luzmo-menu-drillin-icon-color-down, var(--menu-drillin-icon-color-down)))}.luzmo-Menu-back{padding-inline:0 var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-inline:var(--luzmo-menu-back-padding-inline-start, 0) var(--luzmo-menu-back-padding-inline-end, var(--menu-item-label-inline-edge-to-content));padding-block:0;padding-block:var(--luzmo-menu-back-padding-block-start, 0) var(--luzmo-menu-back-padding-block-end, 0);flex-flow:wrap;align-items:center;display:flex}.luzmo-Menu-backButton{cursor:pointer;background:none;border:0;margin:0;padding:0;display:inline-flex}:host([focused]) .luzmo-Menu-backButton{outline:var(--focus-indicator-thickness) solid var(--focus-indicator-color);outline-offset:calc((var(--focus-indicator-thickness) + 1px) * -1)}.luzmo-Menu-backHeading{color:var(--highcontrast-menu-item-color-default, var(--luzmo-menu-back-heading-color, var(--menu-section-header-color)));font-size:var(--luzmo-menu-section-header-font-size, var(--menu-section-header-font-size));font-weight:var(--luzmo-menu-section-header-font-weight, var(--menu-section-header-font-weight));line-height:var(--luzmo-menu-section-header-line-height, var(--menu-section-header-line-height));display:block}:host{text-align:initial;font-family:var(--luzmo-menu-item-font-family, var(--luzmo-font-family))}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([disabled]) [name=value]::slotted(*){color:var(--luzmo-menu-item-label-icon-color-disabled, var(--luzmo-disabled-color))}:host([has-submenu][disabled]) .angle{color:var(--luzmo-menu-item-label-icon-color-disabled, var(--luzmo-disabled-color))}#button{position:absolute;top:0;right:0;bottom:0;left:0}.icon-container>svg{vertical-align:top}:host([dir=ltr]) [icon-only]::slotted(:last-of-type){margin-right:auto}:host([dir=rtl]) [icon-only]::slotted(:last-of-type){margin-left:auto}@media (forced-colors: active){:host{forced-color-adjust:none}}::slotted([slot=submenu]){width:max-content;max-width:100%}:host([no-wrap]) #label{display:block}';
|
|
586
|
-
var J = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, u = (a, e, t, o) => {
|
|
587
|
-
for (var i = o > 1 ? void 0 : o ? Q(e, t) : e, n = a.length - 1, l; n >= 0; n--)
|
|
588
|
-
(l = a[n]) && (i = (o ? l(e, t, i) : l(i)) || i);
|
|
589
|
-
return o && i && J(e, t, i), i;
|
|
590
|
-
};
|
|
591
|
-
const X = 100, Y = (a) => h`
|
|
592
|
-
<span class="icon-container icon checkmark ${a.join(" ")}">
|
|
593
|
-
${M(_)}
|
|
594
|
-
</span>
|
|
595
|
-
`, Z = (a) => h`
|
|
596
|
-
<span class="icon-container icon angle ${a.join(" ")}">
|
|
597
|
-
${M(T, { className: "indicator" })}
|
|
598
|
-
</span>
|
|
599
|
-
`;
|
|
600
|
-
class ee extends Event {
|
|
601
|
-
constructor(e) {
|
|
602
|
-
super("luzmo-menu-item-added-or-updated", {
|
|
603
|
-
bubbles: !0,
|
|
604
|
-
composed: !0
|
|
605
|
-
}), this.menuCascade = /* @__PURE__ */ new WeakMap(), this.clear(e);
|
|
606
|
-
}
|
|
607
|
-
get item() {
|
|
608
|
-
return this._item;
|
|
609
|
-
}
|
|
610
|
-
clear(e) {
|
|
611
|
-
this._item = e, this.currentAncestorWithSelects = void 0, e.menuData = {
|
|
612
|
-
cleanupSteps: [],
|
|
613
|
-
focusRoot: void 0,
|
|
614
|
-
selectionRoot: void 0,
|
|
615
|
-
parentMenu: void 0
|
|
616
|
-
}, this.menuCascade = /* @__PURE__ */ new WeakMap();
|
|
617
|
-
}
|
|
618
|
-
}
|
|
619
|
-
class s extends R(
|
|
620
|
-
L(B(D, '[slot="icon"]'))
|
|
621
|
-
) {
|
|
622
|
-
constructor() {
|
|
623
|
-
super(), this.active = !1, this.dependencyManager = new U(this), this.focused = !1, this.selected = !1, this._value = "", this.hasSubmenu = !1, this.noWrap = !1, this.renderAngleIcon = (e = []) => Z(e), this.renderCheckIcon = (e = []) => Y(e), this.open = !1, this.handleSlottableRequest = (e) => {
|
|
624
|
-
var t;
|
|
625
|
-
(t = this.submenuElement) == null || t.dispatchEvent(
|
|
626
|
-
new $(e.name, e.data)
|
|
627
|
-
);
|
|
628
|
-
}, this.proxyFocus = () => {
|
|
629
|
-
this.focus();
|
|
630
|
-
}, this.handleBeforetoggle = (e) => {
|
|
631
|
-
e.newState === "closed" && (this.open = !0, this.overlayElement.manuallyKeepOpen(), this.overlayElement.removeEventListener(
|
|
632
|
-
"beforetoggle",
|
|
633
|
-
this.handleBeforetoggle
|
|
634
|
-
));
|
|
635
|
-
}, this.recentlyLeftChild = !1, this.willDispatchUpdate = !1, this.menuData = {
|
|
636
|
-
focusRoot: void 0,
|
|
637
|
-
parentMenu: void 0,
|
|
638
|
-
selectionRoot: void 0,
|
|
639
|
-
cleanupSteps: []
|
|
640
|
-
}, this.addEventListener("click", this.handleClickCapture, {
|
|
641
|
-
capture: !0
|
|
642
|
-
}), new E(this, {
|
|
643
|
-
config: {
|
|
644
|
-
characterData: !0,
|
|
645
|
-
childList: !0,
|
|
646
|
-
subtree: !0
|
|
647
|
-
},
|
|
648
|
-
callback: (e) => {
|
|
649
|
-
e.every(
|
|
650
|
-
(o) => o.target.slot === "submenu"
|
|
651
|
-
) || this.breakItemChildrenCache();
|
|
652
|
-
}
|
|
653
|
-
});
|
|
654
|
-
}
|
|
655
|
-
static get styles() {
|
|
656
|
-
return [g(G)];
|
|
657
|
-
}
|
|
658
|
-
get value() {
|
|
659
|
-
return this._value || this.itemText;
|
|
660
|
-
}
|
|
661
|
-
set value(e) {
|
|
662
|
-
e !== this._value && (this._value = e || "", this._value ? this.setAttribute("value", this._value) : this.removeAttribute("value"));
|
|
663
|
-
}
|
|
664
|
-
/**
|
|
665
|
-
* @private
|
|
666
|
-
*/
|
|
667
|
-
get itemText() {
|
|
668
|
-
return this.itemChildren.content.reduce(
|
|
669
|
-
(e, t) => e + (t.textContent || "").trim(),
|
|
670
|
-
""
|
|
671
|
-
);
|
|
672
|
-
}
|
|
673
|
-
get focusElement() {
|
|
674
|
-
return this;
|
|
675
|
-
}
|
|
676
|
-
get hasIcon() {
|
|
677
|
-
return this.slotContentIsPresent;
|
|
678
|
-
}
|
|
679
|
-
get itemChildren() {
|
|
680
|
-
if (!this.iconSlot || !this.contentSlot)
|
|
681
|
-
return {
|
|
682
|
-
icon: [],
|
|
683
|
-
content: []
|
|
684
|
-
};
|
|
685
|
-
if (this._itemChildren)
|
|
686
|
-
return this._itemChildren;
|
|
687
|
-
const e = this.iconSlot.assignedElements().map((o) => {
|
|
688
|
-
const i = o.cloneNode(!0);
|
|
689
|
-
return i.removeAttribute("slot"), i.classList.toggle("icon"), i;
|
|
690
|
-
}), t = this.contentSlot.assignedNodes().map((o) => o.cloneNode(!0));
|
|
691
|
-
return this._itemChildren = { icon: e, content: t }, this._itemChildren;
|
|
692
|
-
}
|
|
693
|
-
click() {
|
|
694
|
-
this.disabled || this.shouldProxyClick() || super.click();
|
|
695
|
-
}
|
|
696
|
-
handleClickCapture(e) {
|
|
697
|
-
if (this.disabled)
|
|
698
|
-
return e.preventDefault(), e.stopImmediatePropagation(), e.stopPropagation(), !1;
|
|
699
|
-
}
|
|
700
|
-
shouldProxyClick() {
|
|
701
|
-
let e = !1;
|
|
702
|
-
return this.anchorElement && (this.anchorElement.click(), e = !0), e;
|
|
703
|
-
}
|
|
704
|
-
breakItemChildrenCache() {
|
|
705
|
-
this._itemChildren = void 0, this.triggerUpdate();
|
|
706
|
-
}
|
|
707
|
-
renderSubmenu() {
|
|
708
|
-
const e = h`
|
|
709
|
-
<slot
|
|
710
|
-
name="submenu"
|
|
711
|
-
@slotchange=${this.manageSubmenu}
|
|
712
|
-
@luzmo-menu-item-added-or-updated=${{
|
|
713
|
-
handleEvent: (t) => {
|
|
714
|
-
t.clear(t.item);
|
|
715
|
-
},
|
|
716
|
-
capture: !0
|
|
717
|
-
}}
|
|
718
|
-
@focusin=${(t) => t.stopPropagation()}
|
|
719
|
-
></slot>
|
|
720
|
-
`;
|
|
721
|
-
return this.hasSubmenu ? (this.dependencyManager.add("luzmo-overlay"), this.dependencyManager.add("luzmo-popover"), import("./overlay-CJ9by37f.js").then((t) => t.f), import("./popover-Bx4ZDHk4.js"), h`
|
|
722
|
-
<luzmo-overlay
|
|
723
|
-
.triggerElement=${this}
|
|
724
|
-
?disabled=${!this.hasSubmenu}
|
|
725
|
-
?open=${this.hasSubmenu && this.open && this.dependencyManager.loaded}
|
|
726
|
-
.placement=${this.isLTR ? "right-start" : "left-start"}
|
|
727
|
-
.offset=${[-10, -5]}
|
|
728
|
-
.type=${"auto"}
|
|
729
|
-
@close=${(t) => t.stopPropagation()}
|
|
730
|
-
@slottable-request=${this.handleSlottableRequest}
|
|
731
|
-
>
|
|
732
|
-
<luzmo-popover
|
|
733
|
-
@change=${(t) => {
|
|
734
|
-
this.handleSubmenuChange(t), this.open = !1;
|
|
735
|
-
}}
|
|
736
|
-
@pointerenter=${this.handleSubmenuPointerenter}
|
|
737
|
-
@pointerleave=${this.handleSubmenuPointerleave}
|
|
738
|
-
@luzmo-menu-item-added-or-updated=${(t) => t.stopPropagation()}
|
|
739
|
-
>
|
|
740
|
-
${e}
|
|
741
|
-
</luzmo-popover>
|
|
742
|
-
</luzmo-overlay>
|
|
743
|
-
${this.renderAngleIcon()}
|
|
744
|
-
`) : e;
|
|
745
|
-
}
|
|
746
|
-
render() {
|
|
747
|
-
return h`
|
|
748
|
-
${this.selected ? h`
|
|
749
|
-
${this.renderCheckIcon(
|
|
750
|
-
this.hasIcon ? ["checkmark--withAdjacentIcon"] : []
|
|
751
|
-
)}
|
|
752
|
-
` : w}
|
|
753
|
-
<slot name="icon"></slot>
|
|
754
|
-
<div id="label">
|
|
755
|
-
<slot id="slot"></slot>
|
|
756
|
-
</div>
|
|
757
|
-
<slot name="description"></slot>
|
|
758
|
-
<slot name="value"></slot>
|
|
759
|
-
${this.href && this.href.length > 0 ? super.renderAnchor({
|
|
760
|
-
id: "button",
|
|
761
|
-
ariaHidden: !0,
|
|
762
|
-
className: "button anchor hidden"
|
|
763
|
-
}) : w}
|
|
764
|
-
${this.renderSubmenu()}
|
|
765
|
-
`;
|
|
766
|
-
}
|
|
767
|
-
manageSubmenu(e) {
|
|
768
|
-
this.submenuElement = e.target.assignedElements({
|
|
769
|
-
flatten: !0
|
|
770
|
-
})[0], this.hasSubmenu = !!this.submenuElement, this.hasSubmenu && this.setAttribute("aria-haspopup", "true");
|
|
771
|
-
}
|
|
772
|
-
handlePointerdown(e) {
|
|
773
|
-
e.target === this && this.hasSubmenu && this.open && (this.addEventListener("focus", this.handleSubmenuFocus, {
|
|
774
|
-
once: !0
|
|
775
|
-
}), this.overlayElement.addEventListener(
|
|
776
|
-
"beforetoggle",
|
|
777
|
-
this.handleBeforetoggle
|
|
778
|
-
));
|
|
779
|
-
}
|
|
780
|
-
firstUpdated(e) {
|
|
781
|
-
super.firstUpdated(e), this.setAttribute("tabindex", "-1"), this.addEventListener("pointerdown", this.handlePointerdown), this.addEventListener("pointerenter", this.closeOverlaysForRoot), this.hasAttribute("id") || (this.id = `luzmo-menu-item-${S()}`);
|
|
782
|
-
}
|
|
783
|
-
closeOverlaysForRoot() {
|
|
784
|
-
var e;
|
|
785
|
-
this.open || (e = this.menuData.parentMenu) == null || e.closeDescendentOverlays();
|
|
786
|
-
}
|
|
787
|
-
handleSubmenuClick(e) {
|
|
788
|
-
e.composedPath().includes(this.overlayElement) || this.openOverlay();
|
|
789
|
-
}
|
|
790
|
-
handleSubmenuFocus() {
|
|
791
|
-
requestAnimationFrame(() => {
|
|
792
|
-
this.overlayElement.open = this.open;
|
|
793
|
-
});
|
|
794
|
-
}
|
|
795
|
-
handlePointerenter() {
|
|
796
|
-
if (this.leaveTimeout) {
|
|
797
|
-
clearTimeout(this.leaveTimeout), delete this.leaveTimeout;
|
|
798
|
-
return;
|
|
799
|
-
}
|
|
800
|
-
this.openOverlay();
|
|
801
|
-
}
|
|
802
|
-
handlePointerleave() {
|
|
803
|
-
this.open && !this.recentlyLeftChild && (this.leaveTimeout = setTimeout(() => {
|
|
804
|
-
delete this.leaveTimeout, this.open = !1;
|
|
805
|
-
}, X));
|
|
806
|
-
}
|
|
807
|
-
/**
|
|
808
|
-
* When there is a `change` event in the submenu for this item
|
|
809
|
-
* then we "click" this item to cascade the selection up the
|
|
810
|
-
* menu tree allowing all submenus between the initial selection
|
|
811
|
-
* and the root of the tree to have their selection changes and
|
|
812
|
-
* be closed.
|
|
813
|
-
*/
|
|
814
|
-
handleSubmenuChange(e) {
|
|
815
|
-
var t;
|
|
816
|
-
e.stopPropagation(), (t = this.menuData.selectionRoot) == null || t.selectOrToggleItem(this);
|
|
817
|
-
}
|
|
818
|
-
handleSubmenuPointerenter() {
|
|
819
|
-
this.recentlyLeftChild = !0;
|
|
820
|
-
}
|
|
821
|
-
handleSubmenuPointerleave() {
|
|
822
|
-
requestAnimationFrame(() => {
|
|
823
|
-
this.recentlyLeftChild = !1;
|
|
824
|
-
});
|
|
825
|
-
}
|
|
826
|
-
handleSubmenuOpen(e) {
|
|
827
|
-
this.focused = !1;
|
|
828
|
-
const t = e.composedPath().find(
|
|
829
|
-
(o) => o !== this.overlayElement && o.localName === "luzmo-overlay"
|
|
830
|
-
);
|
|
831
|
-
this.overlayElement.parentOverlayToForceClose = t;
|
|
832
|
-
}
|
|
833
|
-
cleanup() {
|
|
834
|
-
this.open = !1, this.active = !1;
|
|
835
|
-
}
|
|
836
|
-
openOverlay() {
|
|
837
|
-
!this.hasSubmenu || this.open || this.disabled || (this.open = !0, this.active = !0, this.setAttribute("aria-expanded", "true"), this.addEventListener("luzmo-closed", this.cleanup, {
|
|
838
|
-
once: !0
|
|
839
|
-
}));
|
|
840
|
-
}
|
|
841
|
-
updateAriaSelected() {
|
|
842
|
-
const e = this.getAttribute("role");
|
|
843
|
-
e === "option" ? this.setAttribute("aria-selected", this.selected ? "true" : "false") : (e === "menuitemcheckbox" || e === "menuitemradio") && this.setAttribute("aria-checked", this.selected ? "true" : "false");
|
|
844
|
-
}
|
|
845
|
-
setRole(e) {
|
|
846
|
-
this.setAttribute("role", e), this.updateAriaSelected();
|
|
847
|
-
}
|
|
848
|
-
updated(e) {
|
|
849
|
-
var t, o;
|
|
850
|
-
if (super.updated(e), e.has("label") && (this.label || e.get("label") !== void 0) && this.setAttribute("aria-label", this.label || ""), e.has("active") && (this.active || e.get("active") !== void 0) && this.active && ((t = this.menuData.selectionRoot) == null || t.closeDescendentOverlays()), this.anchorElement && (this.anchorElement.addEventListener("focus", this.proxyFocus), this.anchorElement.tabIndex = -1), e.has("selected") && this.updateAriaSelected(), e.has("hasSubmenu") && (this.hasSubmenu || e.get("hasSubmenu") !== void 0))
|
|
851
|
-
if (this.hasSubmenu) {
|
|
852
|
-
this.abortControllerSubmenu = new AbortController();
|
|
853
|
-
const i = { signal: this.abortControllerSubmenu.signal };
|
|
854
|
-
this.addEventListener("click", this.handleSubmenuClick, i), this.addEventListener("pointerenter", this.handlePointerenter, i), this.addEventListener("pointerleave", this.handlePointerleave, i), this.addEventListener("luzmo-opened", this.handleSubmenuOpen, i);
|
|
855
|
-
} else
|
|
856
|
-
(o = this.abortControllerSubmenu) == null || o.abort();
|
|
857
|
-
}
|
|
858
|
-
connectedCallback() {
|
|
859
|
-
super.connectedCallback(), this.triggerUpdate();
|
|
860
|
-
}
|
|
861
|
-
disconnectedCallback() {
|
|
862
|
-
this.menuData.cleanupSteps.forEach((e) => e(this)), this.menuData = {
|
|
863
|
-
focusRoot: void 0,
|
|
864
|
-
parentMenu: void 0,
|
|
865
|
-
selectionRoot: void 0,
|
|
866
|
-
cleanupSteps: []
|
|
867
|
-
}, super.disconnectedCallback();
|
|
868
|
-
}
|
|
869
|
-
async triggerUpdate() {
|
|
870
|
-
this.willDispatchUpdate || (this.willDispatchUpdate = !0, await new Promise((e) => requestAnimationFrame(e)), this.dispatchUpdate());
|
|
871
|
-
}
|
|
872
|
-
dispatchUpdate() {
|
|
873
|
-
this.isConnected && (this.dispatchEvent(new ee(this)), this.willDispatchUpdate = !1);
|
|
874
|
-
}
|
|
875
|
-
}
|
|
876
|
-
u([
|
|
877
|
-
r({ type: Boolean, reflect: !0 })
|
|
878
|
-
], s.prototype, "active", 2);
|
|
879
|
-
u([
|
|
880
|
-
r({ type: Boolean, reflect: !0 })
|
|
881
|
-
], s.prototype, "focused", 2);
|
|
882
|
-
u([
|
|
883
|
-
r({ type: Boolean, reflect: !0 })
|
|
884
|
-
], s.prototype, "selected", 2);
|
|
885
|
-
u([
|
|
886
|
-
r({ type: String })
|
|
887
|
-
], s.prototype, "value", 1);
|
|
888
|
-
u([
|
|
889
|
-
r({ type: Boolean, reflect: !0, attribute: "has-submenu" })
|
|
890
|
-
], s.prototype, "hasSubmenu", 2);
|
|
891
|
-
u([
|
|
892
|
-
b("slot:not([name])")
|
|
893
|
-
], s.prototype, "contentSlot", 2);
|
|
894
|
-
u([
|
|
895
|
-
b('slot[name="icon"]')
|
|
896
|
-
], s.prototype, "iconSlot", 2);
|
|
897
|
-
u([
|
|
898
|
-
r({
|
|
899
|
-
type: Boolean,
|
|
900
|
-
reflect: !0,
|
|
901
|
-
attribute: "no-wrap",
|
|
902
|
-
hasChanged() {
|
|
903
|
-
return !1;
|
|
904
|
-
}
|
|
905
|
-
})
|
|
906
|
-
], s.prototype, "noWrap", 2);
|
|
907
|
-
u([
|
|
908
|
-
b(".anchor")
|
|
909
|
-
], s.prototype, "anchorElement", 2);
|
|
910
|
-
u([
|
|
911
|
-
b("luzmo-overlay")
|
|
912
|
-
], s.prototype, "overlayElement", 2);
|
|
913
|
-
u([
|
|
914
|
-
r({ type: Boolean, reflect: !0 })
|
|
915
|
-
], s.prototype, "open", 2);
|
|
916
|
-
customElements.get("luzmo-menu") || customElements.define("luzmo-menu", d);
|
|
917
|
-
customElements.get("luzmo-menu-divider") || customElements.define("luzmo-menu-divider", W);
|
|
918
|
-
customElements.get("luzmo-menu-group") || customElements.define("luzmo-menu-group", I);
|
|
919
|
-
customElements.get("luzmo-menu-item") || customElements.define("luzmo-menu-item", s);
|
|
920
|
-
export {
|
|
921
|
-
d as L,
|
|
922
|
-
ee as M,
|
|
923
|
-
B as O,
|
|
924
|
-
W as a,
|
|
925
|
-
I as b,
|
|
926
|
-
s as c
|
|
927
|
-
};
|