@luzmo/lucero 1.0.1-alpha.22 → 1.0.1-alpha.23
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/accordion/index.cjs +2 -2
- package/components/accordion/index.js +1 -1
- 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 +1 -1
- package/components/action-group/index.cjs +1 -1
- package/components/action-group/index.js +1 -1
- package/components/{action-group-DS7x8jfJ.js → action-group-Bwt9w8Vh.js} +1 -1
- package/components/action-group-D917z7XF.cjs +20 -0
- package/components/action-menu/index.cjs +1 -1
- package/components/action-menu/index.js +2 -2
- package/components/button/index.cjs +1 -1
- package/components/button/index.js +3 -3
- package/components/{button-base-BGAqeDTT.js → button-base-B5uul3tZ.js} +1 -1
- package/components/{button-base-CShsEDFM.cjs → button-base-C7or8-FB.cjs} +1 -1
- package/components/{clear-button-CMhq1QsA.js → clear-button-BFtJVPzm.js} +1 -1
- package/components/{clear-button-BWJrTbkk.cjs → clear-button-_a8GjtJC.cjs} +1 -1
- package/components/{close-button-BiJwFZyW.js → close-button-D9qjjy2w.js} +1 -1
- package/components/{close-button-DrMdfzPW.cjs → close-button-TZ08VFmi.cjs} +1 -1
- package/components/color-area/index.cjs +1 -1
- package/components/color-area/index.js +1 -1
- package/components/color-palette-group/index.cjs +1 -1
- package/components/color-palette-group/index.js +1 -1
- package/components/color-slider/index.cjs +1 -1
- package/components/color-slider/index.js +1 -1
- package/components/date-time-picker/index.cjs +3 -3
- package/components/date-time-picker/index.js +1 -1
- package/components/index.cjs +1 -1
- package/components/index.js +4 -4
- package/components/infield-button/index.cjs +1 -1
- package/components/infield-button/index.js +1 -1
- package/components/menu/index.cjs +3 -3
- package/components/menu/index.js +7 -7
- package/components/number-field/index.cjs +1 -1
- package/components/number-field/index.js +1 -1
- package/components/observe-slot-presence-CNltc0C0.cjs +18 -0
- package/components/{observe-slot-presence-CmVi0zTc.js → observe-slot-presence-DFi6GE3H.js} +1 -1
- package/components/observe-slot-text-CBMHpuIK.cjs +18 -0
- package/components/{observe-slot-text-CugmOzNZ.js → observe-slot-text-DorVpCL4.js} +11 -11
- package/components/options/index.cjs +26 -30
- package/components/options/index.js +198 -252
- package/components/overlay/index.cjs +2 -2
- package/components/overlay/index.js +24 -25
- package/components/picker-button/index.cjs +1 -1
- package/components/picker-button/index.js +2 -2
- package/components/{streaming-listener-BgU36S1Z.js → streaming-listener-BlWm-XZU.js} +4 -5
- package/components/streaming-listener-D9Wc7skA.cjs +18 -0
- package/components/swatch/index.cjs +6 -6
- package/components/swatch/index.js +2 -2
- package/components/tabs/index.cjs +18 -34
- package/components/tabs/index.js +192 -527
- package/components/tags/index.cjs +1 -1
- package/components/tags/index.js +1 -1
- package/components/toast/index.cjs +1 -1
- package/components/toast/index.js +1 -1
- package/components/utils.cjs +1 -1
- package/components/utils.js +1 -1
- package/package.json +1 -1
- package/components/action-group-D6rV7sfq.cjs +0 -20
- package/components/async-directive-CDQoI4mS.js +0 -81
- package/components/async-directive-CddlkYlZ.cjs +0 -22
- package/components/directive-DrvvqO47.cjs +0 -32
- package/components/directive-OK_Jd_xx.js +0 -314
- package/components/mutation-controller-DH7YOCyj.js +0 -52
- package/components/mutation-controller-DkOMCW-c.cjs +0 -22
- package/components/observe-slot-presence-bc9chhsi.cjs +0 -18
- package/components/observe-slot-text-ByPG1Lqw.cjs +0 -18
- package/components/streaming-listener-CfUtuELp.cjs +0 -18
- package/components/when-CDK1Tt5Y.js +0 -28
- package/components/when-CDZyJPvd.cjs +0 -22
|
@@ -15,59 +15,59 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
import {
|
|
19
|
-
import { html as
|
|
20
|
-
import { property as
|
|
21
|
-
import { F as
|
|
22
|
-
import { L as
|
|
23
|
-
import { O as
|
|
24
|
-
import { O as
|
|
25
|
-
import { r as
|
|
26
|
-
import { luzmoIcon as
|
|
18
|
+
import { MutationController as $ } from "@lit-labs/observers/mutation-controller.js";
|
|
19
|
+
import { html as u, unsafeCSS as w, nothing as y } from "lit";
|
|
20
|
+
import { property as s, query as O, queryAll as U } from "lit/decorators.js";
|
|
21
|
+
import { F as L } from "../focusable-BjvsvVam.js";
|
|
22
|
+
import { L as F } from "../like-anchor-CgqCU210.js";
|
|
23
|
+
import { O as D } from "../observe-slot-presence-DFi6GE3H.js";
|
|
24
|
+
import { O as P } from "../observe-slot-text-DorVpCL4.js";
|
|
25
|
+
import { r as j } from "../random-id-ByCz1xaq.js";
|
|
26
|
+
import { luzmoIcon as A, luzmoCheckboxChecked as T, luzmoCheckbox as B, luzmoCheck as H } from "@luzmo/icons";
|
|
27
27
|
import "@lit-labs/virtualizer";
|
|
28
|
-
import {
|
|
29
|
-
import { a as
|
|
30
|
-
import { S as
|
|
28
|
+
import { repeat as V } from "lit/directives/repeat.js";
|
|
29
|
+
import { a as S } from "../base-CdYjmV_8.js";
|
|
30
|
+
import { S as E } from "../sized-mixin-cJbo3PKR.js";
|
|
31
31
|
import "../progress-circle/index.js";
|
|
32
|
-
import { d as
|
|
33
|
-
const
|
|
32
|
+
import { d as K } from "../divider.module-DoQWQEIJ.js";
|
|
33
|
+
const _ = () => {
|
|
34
34
|
if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
|
|
35
35
|
const a = document.createElement("style");
|
|
36
36
|
a.setAttribute("data-luzmo-vars", ""), a.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(a);
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
|
-
|
|
40
|
-
const X = '#icon{grid-area:iconArea;align-self:start;height:var(--luzmo-option-icon-container-height, var(--option-icon-container-height));display:flex;align-items:center;justify-content:center;color:var(--highcontrast-option-color-default, var(--luzmo-option-label-icon-color-default, var(--option-label-icon-color-default)))}::slotted([slot=icon]){fill:var(--highcontrast-option-color-default, var(--luzmo-option-label-icon-color-default, var(--option-label-icon-color-default)));margin-inline-end:var(--luzmo-option-label-text-to-visual, var(--option-label-text-to-visual));block-size:var(--luzmo-option-icon-size, var(--option-icon-height));inline-size:var(--luzmo-option-icon-width, var(--option-icon-height));font-size:var(--luzmo-option-icon-size, var(--option-icon-height));text-align:center;--luzmo-icon-vertical-align: 0}:host{cursor:pointer;box-sizing:border-box;background-color:var(--highcontrast-option-background-color-default, var(--luzmo-option-background-color-default, var(--option-background-color-default)));line-height:var(--luzmo-option-label-line-height, var(--option-label-line-height));min-block-size:var(--luzmo-option-min-height, var(--option-min-height));padding-block-start:var(--luzmo-option-top-edge-to-text, var(--option-top-edge-to-text));padding-block-end:var(--luzmo-option-bottom-edge-to-text, var(--option-bottom-edge-to-text));padding-inline:var(--luzmo-option-label-inline-edge-to-content, var(--option-label-inline-edge-to-content));grid-template:". . headingIconArea sectionHeadingArea . ." "selectedArea checkArea iconArea labelArea valueArea actionsArea" 1fr ". . . descriptionArea . ." ". . . . . ."/auto auto auto 1fr auto auto;justify-content:start;margin:0;-webkit-text-decoration:none;text-decoration:none;display:grid;outline:none;align-items:center;position:relative;flex-shrink:0}:host:focus-visible{outline:none}#label{grid-area:submenuItemLabelArea}.checkmark,.checkbox{opacity:1;grid-area:checkArea;align-self:start;display:block}.checkmark{font-size:var(--luzmo-option-checkmark-size, var(--option-checkmark-size));fill:var(--highcontrast-options-checkmark-icon-color-default, var(--luzmo-options-checkmark-icon-color-default, var(--options-checkmark-icon-color-default)));color:var(--highcontrast-options-checkmark-icon-color-default, var(--luzmo-options-checkmark-icon-color-default, var(--options-checkmark-icon-color-default)));margin-block-start:calc(var(--luzmo-option-top-to-checkmark, var(--option-top-to-checkmark)) - var(--luzmo-option-top-edge-to-text, var(--option-top-edge-to-text)));margin-inline-end:var(--luzmo-option-text-to-control, var(--option-label-text-to-control))}.checkbox{font-size:var(--luzmo-option-checkbox-size, var(--option-checkbox-size));fill:var(--highcontrast-options-checkbox-icon-color-default, var(--luzmo-options-checkbox-icon-color-default, var(--options-checkbox-icon-color-default)));color:var(--highcontrast-options-checkbox-icon-color-default, var(--luzmo-options-checkbox-icon-color-default, var(--options-checkbox-icon-color-default)));margin-block-start:calc(var(--luzmo-option-top-to-checkbox, var(--option-top-to-checkbox)) - var(--luzmo-option-top-edge-to-text, var(--option-top-edge-to-text)));margin-inline-end:var(--luzmo-option-text-to-control, var(--option-label-text-to-control))}::slotted([slot=value]){grid-area:submenuItemValueArea}:host([focused]){background-color:var(--highcontrast-option-background-color-focus, var(--luzmo-option-background-color-key-focus, var(--option-background-color-key-focus)));outline:none}:host([focused])>#label,:host(:focus)>#label{color:var(--highcontrast-option-color-focus, var(--luzmo-option-label-content-color-focus, var(--option-label-content-color-focus)))}:host([focused])>[name=description]::slotted(*),:host(:focus)>[name=description]::slotted(*){color:var(--highcontrast-option-color-focus, var(--luzmo-option-description-color-focus, var(--option-description-color-focus)))}:host([focused])>::slotted([slot=value]),:host(:focus)>::slotted([slot=value]){color:var(--highcontrast-option-color-focus, var(--luzmo-option-value-color-focus, var(--option-value-color-focus)))}:host([focused])>.icon:not(.checkmark,.checkbox),:host(:focus)>.icon:not(.checkmark,.checkbox){fill:var(--highcontrast-option-color-focus, var(--luzmo-option-label-icon-color-focus, var(--option-label-icon-color-focus)));color:var(--highcontrast-option-color-focus, var(--luzmo-option-label-icon-color-focus, var(--option-label-icon-color-focus)))}:host([focused])>.checkmark,:host(:focus)>.checkmark{fill:var(--highcontrast-option-color-focus, var(--luzmo-options-checkmark-icon-color-focus, var(--options-checkmark-icon-color-focus)));color:var(--highcontrast-option-color-focus, var(--luzmo-options-checkmark-icon-color-focus, var(--options-checkmark-icon-color-focus)))}:host([focused])>.checkbox,:host(:focus)>.checkbox{fill:var(--highcontrast-option-color-focus, var(--luzmo-options-checkbox-icon-color-focus, var(--options-checkbox-icon-color-focus)));color:var(--highcontrast-option-color-focus, var(--luzmo-options-checkbox-icon-color-focus, var(--options-checkbox-icon-color-focus)))}:host:dir(rtl),:host([dir=rtl]){--option-focus-indicator-direction-scalar: -1}:host(:is(:active,[active])){background-color:var(--highcontrast-option-background-color-focus, var(--luzmo-option-background-color-down, var(--option-background-color-down)))}:host(:is(:active,[active]))>#label{color:var(--highcontrast-option-color-focus, var(--luzmo-option-label-content-color-down, var(--option-label-content-color-down)))}:host(:is(:active,[active]))>[name=description]::slotted(*){color:var(--highcontrast-option-color-focus, var(--luzmo-option-description-color-down, var(--option-description-color-down)))}:host(:is(:active,[active]))>::slotted([slot=value]){color:var(--highcontrast-option-color-focus, var(--luzmo-option-value-color-down, var(--option-value-color-down)))}:host(:is(:active,[active]))>.icon:not(.checkmark,.checkbox){fill:var(--highcontrast-option-color-focus, var(--luzmo-option-label-icon-color-down, var(--option-label-icon-color-down)));color:var(--highcontrast-option-color-focus, var(--luzmo-option-label-icon-color-down, var(--option-label-icon-color-down)))}:host(:is(:active,[active]))>.checkmark{fill:var(--highcontrast-option-color-focus, var(--luzmo-options-checkmark-icon-color-down, var(--options-checkmark-icon-color-down)));color:var(--highcontrast-option-color-focus, var(--luzmo-options-checkmark-icon-color-down, var(--options-checkmark-icon-color-down)))}:host(:is(:active,[active]))>.checkbox{fill:var(--highcontrast-option-color-focus, var(--luzmo-options-checkbox-icon-color-down, var(--options-checkbox-icon-color-down)));color:var(--highcontrast-option-color-focus, var(--luzmo-options-checkbox-icon-color-down, var(--options-checkbox-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-option-color-disabled, var(--luzmo-option-label-content-color-disabled, var(--option-label-content-color-disabled)))}:host([disabled]) [name=description]::slotted(*),:host([aria-disabled=true]) [name=description]::slotted(*){color:var(--highcontrast-option-color-disabled, var(--luzmo-option-description-color-disabled, var(--option-description-color-disabled)))}:host([disabled]) ::slotted([slot=icon]),:host([aria-disabled=true]) ::slotted([slot=icon]){color:var(--highcontrast-option-color-disabled, var(--luzmo-option-label-icon-color-disabled, var(--option-label-icon-color-disabled)));fill:var(--highcontrast-option-color-disabled, var(--luzmo-option-label-icon-color-disabled, var(--option-label-icon-color-disabled)))}:host([focused]){box-shadow:inset calc(var(--luzmo-option-focus-indicator-width, var(--option-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-option-focus-indicator-color, var(--luzmo-option-focus-indicator-color, var(--option-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-option-focus-indicator-width, var(--option-focus-indicator-width)) * var(--option-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-option-focus-indicator-color, var(--luzmo-option-focus-indicator-color, var(--option-focus-indicator-color)))}#label{font-size:var(--luzmo-option-label-font-size, var(--option-label-font-size));color:var(--highcontrast-option-color-default, var(--luzmo-option-label-content-color-default, var(--option-label-content-color-default)));-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;grid-area:labelArea}:host([variant=highlight][selected]){background-color:var(--luzmo-option-highlight-selected-label-background-color, var(--option-highlight-selected-label-background-color))}:host([variant=highlight][selected]) #label{color:var(--luzmo-option-highlight-selected-label-content-color, var(--option-highlight-selected-label-content-color))}:host([variant=highlight][selected]):hover #label{color:var(--luzmo-option-highlight-selected-label-content-color-hover, var(--option-highlight-selected-label-content-color-hover))}:host([variant=highlight][selected]):active #label{color:var(--luzmo-option-highlight-selected-label-content-color-down, var(--option-highlight-selected-label-content-color-down))}:host([variant=highlight][selected]):focus #label{color:var(--luzmo-option-highlight-selected-label-content-color-focus, var(--option-highlight-selected-label-content-color-focus))}:host([variant=highlight][selected]) ::slotted([slot=icon]){color:var(--highcontrast-option-color-disabled, var(--luzmo-option-highlight-selected-label-content-color, var(--option-highlight-selected-label-content-color)));fill:var(--highcontrast-option-color-disabled, var(--luzmo-option-highlight-selected-label-content-color, var(--option-highlight-selected-label-content-color)))}::slotted([slot=value]){color:var(--highcontrast-option-color-default, var(--luzmo-option-value-color-default, var(--option-value-color-default)));font-size:var(--luzmo-option-label-font-size, var(--option-label-font-size));grid-area:valueArea;justify-self:end}[name=description]::slotted(*){color:var(--highcontrast-option-color-default, var(--luzmo-option-description-color-default, var(--option-description-color-default)));font-size:var(--luzmo-option-description-font-size, var(--option-description-font-size));-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;line-height:var(--luzmo-option-description-line-height, var(--option-description-line-height));grid-area:descriptionArea;margin-block-start:var(--luzmo-option-label-to-description-spacing, var(--option-label-to-description-spacing))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (hover: hover){:host(:hover){background-color:var(--highcontrast-option-background-color-focus, var(--luzmo-option-background-color-hover, var(--option-background-color-hover)))}:host(:hover)>#label{color:var(--highcontrast-option-color-focus, var(--luzmo-option-label-content-color-hover, var(--option-label-content-color-hover)))}:host([variant=highlight][selected]:hover)>#label{color:var(--luzmo-option-highlight-selected-label-content-color-hover, var(--option-highlight-selected-label-content-color-hover))}:host(:hover)>[name=description]::slotted(*){color:var(--highcontrast-option-color-focus, var(--luzmo-option-description-color-hover, var(--option-description-color-hover)))}:host(:hover)>::slotted([slot=value]){color:var(--highcontrast-option-color-focus, var(--luzmo-option-value-color-hover, var(--option-value-color-hover)))}:host(:hover)>.icon:not(.checkmark,.checkbox){fill:var(--highcontrast-option-color-focus, var(--luzmo-option-label-icon-color-hover, var(--option-label-icon-color-hover)));color:var(--highcontrast-option-color-focus, var(--luzmo-option-label-icon-color-hover, var(--option-label-icon-color-hover)))}:host([variant=highlight][selected]:hover)>.icon:not(.checkmark,.checkbox){fill:var(--luzmo-option-highlight-selected-label-icon-color-hover, var(--option-highlight-selected-label-icon-color-hover))}:host(:hover)>.checkmark{fill:var(--highcontrast-option-color-focus, var(--luzmo-options-checkmark-icon-color-hover, var(--options-checkmark-icon-color-hover)));color:var(--highcontrast-option-color-focus, var(--luzmo-options-checkmark-icon-color-hover, var(--options-checkmark-icon-color-hover)))}:host(:hover)>.checkbox{fill:var(--highcontrast-option-color-focus, var(--luzmo-options-checkbox-icon-color-hover, var(--options-checkbox-icon-color-hover)));color:var(--highcontrast-option-color-focus, var(--luzmo-options-checkbox-icon-color-hover, var(--options-checkbox-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-option-color-disabled, var(--luzmo-option-label-content-color-disabled, var(--option-label-content-color-disabled)))}:host([disabled]:hover) [name=description]::slotted(*),:host([aria-disabled=true]:hover) [name=description]::slotted(*){color:var(--highcontrast-option-color-disabled, var(--luzmo-option-description-color-disabled, var(--option-description-color-disabled)))}:host([disabled]:hover) ::slotted([slot=icon]),:host([aria-disabled=true]:hover) ::slotted([slot=icon]){color:var(--highcontrast-option-color-disabled, var(--luzmo-option-label-icon-color-disabled, var(--option-label-icon-color-disabled)));fill:var(--highcontrast-option-color-disabled, var(--luzmo-option-label-icon-color-disabled, var(--option-label-icon-color-disabled)))}}:host([emphasized]){--options-checkmark-icon-color-default: var(--luzmo-primary);--options-checkmark-icon-color-hover: var(--luzmo-primary-hover);--options-checkmark-icon-color-down: var(--luzmo-primary-down);--options-checkmark-icon-color-focus: var(--luzmo-primary-focus);--options-checkbox-icon-color-default: var(--luzmo-primary);--options-checkbox-icon-color-hover: var(--luzmo-primary-hover);--options-checkbox-icon-color-down: var(--luzmo-primary-down);--options-checkbox-icon-color-focus: var(--luzmo-primary-focus)}:host{text-align:initial;font-family:var(--luzmo-option-font-family, var(--luzmo-font-family))}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([disabled]) [name=value]::slotted(*){color:var(--luzmo-option-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}}:host([no-wrap]) #label{display:block}';
|
|
41
|
-
var
|
|
42
|
-
for (var
|
|
43
|
-
(
|
|
44
|
-
return
|
|
39
|
+
_();
|
|
40
|
+
const q = '#icon{grid-area:iconArea;align-self:start;height:var(--luzmo-option-icon-container-height, var(--option-icon-container-height));display:flex;align-items:center;justify-content:center;color:var(--highcontrast-option-color-default, var(--luzmo-option-label-icon-color-default, var(--option-label-icon-color-default)))}::slotted([slot=icon]){fill:var(--highcontrast-option-color-default, var(--luzmo-option-label-icon-color-default, var(--option-label-icon-color-default)));margin-inline-end:var(--luzmo-option-label-text-to-visual, var(--option-label-text-to-visual));block-size:var(--luzmo-option-icon-size, var(--option-icon-height));inline-size:var(--luzmo-option-icon-width, var(--option-icon-height));font-size:var(--luzmo-option-icon-size, var(--option-icon-height));text-align:center;--luzmo-icon-vertical-align: 0}:host{cursor:pointer;box-sizing:border-box;background-color:var(--highcontrast-option-background-color-default, var(--luzmo-option-background-color-default, var(--option-background-color-default)));line-height:var(--luzmo-option-label-line-height, var(--option-label-line-height));min-block-size:var(--luzmo-option-min-height, var(--option-min-height));padding-block-start:var(--luzmo-option-top-edge-to-text, var(--option-top-edge-to-text));padding-block-end:var(--luzmo-option-bottom-edge-to-text, var(--option-bottom-edge-to-text));padding-inline:var(--luzmo-option-label-inline-edge-to-content, var(--option-label-inline-edge-to-content));grid-template:". . headingIconArea sectionHeadingArea . ." "selectedArea checkArea iconArea labelArea valueArea actionsArea" 1fr ". . . descriptionArea . ." ". . . . . ."/auto auto auto 1fr auto auto;justify-content:start;margin:0;-webkit-text-decoration:none;text-decoration:none;display:grid;outline:none;align-items:center;position:relative;flex-shrink:0}:host:focus-visible{outline:none}#label{grid-area:submenuItemLabelArea}.checkmark,.checkbox{opacity:1;grid-area:checkArea;align-self:start;display:block}.checkmark{font-size:var(--luzmo-option-checkmark-size, var(--option-checkmark-size));fill:var(--highcontrast-options-checkmark-icon-color-default, var(--luzmo-options-checkmark-icon-color-default, var(--options-checkmark-icon-color-default)));color:var(--highcontrast-options-checkmark-icon-color-default, var(--luzmo-options-checkmark-icon-color-default, var(--options-checkmark-icon-color-default)));margin-block-start:calc(var(--luzmo-option-top-to-checkmark, var(--option-top-to-checkmark)) - var(--luzmo-option-top-edge-to-text, var(--option-top-edge-to-text)));margin-inline-end:var(--luzmo-option-text-to-control, var(--option-label-text-to-control))}.checkbox{font-size:var(--luzmo-option-checkbox-size, var(--option-checkbox-size));fill:var(--highcontrast-options-checkbox-icon-color-default, var(--luzmo-options-checkbox-icon-color-default, var(--options-checkbox-icon-color-default)));color:var(--highcontrast-options-checkbox-icon-color-default, var(--luzmo-options-checkbox-icon-color-default, var(--options-checkbox-icon-color-default)));margin-block-start:calc(var(--luzmo-option-top-to-checkbox, var(--option-top-to-checkbox)) - var(--luzmo-option-top-edge-to-text, var(--option-top-edge-to-text)));margin-inline-end:var(--luzmo-option-text-to-control, var(--option-label-text-to-control))}::slotted([slot=value]){grid-area:submenuItemValueArea}:host([focused]){background-color:var(--highcontrast-option-background-color-focus, var(--luzmo-option-background-color-key-focus, var(--option-background-color-key-focus)));outline:none}:host([focused])>#label,:host(:focus)>#label{color:var(--highcontrast-option-color-focus, var(--luzmo-option-label-content-color-focus, var(--option-label-content-color-focus)))}:host([focused])>[name=description]::slotted(*),:host(:focus)>[name=description]::slotted(*){color:var(--highcontrast-option-color-focus, var(--luzmo-option-description-color-focus, var(--option-description-color-focus)))}:host([focused])>::slotted([slot=value]),:host(:focus)>::slotted([slot=value]){color:var(--highcontrast-option-color-focus, var(--luzmo-option-value-color-focus, var(--option-value-color-focus)))}:host([focused])>.icon:not(.checkmark,.checkbox),:host(:focus)>.icon:not(.checkmark,.checkbox){fill:var(--highcontrast-option-color-focus, var(--luzmo-option-label-icon-color-focus, var(--option-label-icon-color-focus)));color:var(--highcontrast-option-color-focus, var(--luzmo-option-label-icon-color-focus, var(--option-label-icon-color-focus)))}:host([focused])>.checkmark,:host(:focus)>.checkmark{fill:var(--highcontrast-option-color-focus, var(--luzmo-options-checkmark-icon-color-focus, var(--options-checkmark-icon-color-focus)));color:var(--highcontrast-option-color-focus, var(--luzmo-options-checkmark-icon-color-focus, var(--options-checkmark-icon-color-focus)))}:host([focused])>.checkbox,:host(:focus)>.checkbox{fill:var(--highcontrast-option-color-focus, var(--luzmo-options-checkbox-icon-color-focus, var(--options-checkbox-icon-color-focus)));color:var(--highcontrast-option-color-focus, var(--luzmo-options-checkbox-icon-color-focus, var(--options-checkbox-icon-color-focus)))}:host:dir(rtl),:host([dir=rtl]){--option-focus-indicator-direction-scalar: -1}:host(:is(:active,[active])){background-color:var(--highcontrast-option-background-color-focus, var(--luzmo-option-background-color-down, var(--option-background-color-down)))}:host(:is(:active,[active]))>#label{color:var(--highcontrast-option-color-focus, var(--luzmo-option-label-content-color-down, var(--option-label-content-color-down)))}:host(:is(:active,[active]))>[name=description]::slotted(*){color:var(--highcontrast-option-color-focus, var(--luzmo-option-description-color-down, var(--option-description-color-down)))}:host(:is(:active,[active]))>::slotted([slot=value]){color:var(--highcontrast-option-color-focus, var(--luzmo-option-value-color-down, var(--option-value-color-down)))}:host(:is(:active,[active]))>.icon:not(.checkmark,.checkbox){fill:var(--highcontrast-option-color-focus, var(--luzmo-option-label-icon-color-down, var(--option-label-icon-color-down)));color:var(--highcontrast-option-color-focus, var(--luzmo-option-label-icon-color-down, var(--option-label-icon-color-down)))}:host(:is(:active,[active]))>.checkmark{fill:var(--highcontrast-option-color-focus, var(--luzmo-options-checkmark-icon-color-down, var(--options-checkmark-icon-color-down)));color:var(--highcontrast-option-color-focus, var(--luzmo-options-checkmark-icon-color-down, var(--options-checkmark-icon-color-down)))}:host(:is(:active,[active]))>.checkbox{fill:var(--highcontrast-option-color-focus, var(--luzmo-options-checkbox-icon-color-down, var(--options-checkbox-icon-color-down)));color:var(--highcontrast-option-color-focus, var(--luzmo-options-checkbox-icon-color-down, var(--options-checkbox-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-option-color-disabled, var(--luzmo-option-label-content-color-disabled, var(--option-label-content-color-disabled)))}:host([disabled]) [name=description]::slotted(*),:host([aria-disabled=true]) [name=description]::slotted(*){color:var(--highcontrast-option-color-disabled, var(--luzmo-option-description-color-disabled, var(--option-description-color-disabled)))}:host([disabled]) ::slotted([slot=icon]),:host([aria-disabled=true]) ::slotted([slot=icon]){color:var(--highcontrast-option-color-disabled, var(--luzmo-option-label-icon-color-disabled, var(--option-label-icon-color-disabled)));fill:var(--highcontrast-option-color-disabled, var(--luzmo-option-label-icon-color-disabled, var(--option-label-icon-color-disabled)))}:host([focused]){box-shadow:inset calc(var(--luzmo-option-focus-indicator-width, var(--option-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-option-focus-indicator-color, var(--luzmo-option-focus-indicator-color, var(--option-focus-indicator-color)));box-shadow:inset calc(var(--luzmo-option-focus-indicator-width, var(--option-focus-indicator-width)) * var(--option-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-option-focus-indicator-color, var(--luzmo-option-focus-indicator-color, var(--option-focus-indicator-color)))}#label{font-size:var(--luzmo-option-label-font-size, var(--option-label-font-size));color:var(--highcontrast-option-color-default, var(--luzmo-option-label-content-color-default, var(--option-label-content-color-default)));-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;grid-area:labelArea}:host([variant=highlight][selected]){background-color:var(--luzmo-option-highlight-selected-label-background-color, var(--option-highlight-selected-label-background-color))}:host([variant=highlight][selected]) #label{color:var(--luzmo-option-highlight-selected-label-content-color, var(--option-highlight-selected-label-content-color))}:host([variant=highlight][selected]):hover #label{color:var(--luzmo-option-highlight-selected-label-content-color-hover, var(--option-highlight-selected-label-content-color-hover))}:host([variant=highlight][selected]):active #label{color:var(--luzmo-option-highlight-selected-label-content-color-down, var(--option-highlight-selected-label-content-color-down))}:host([variant=highlight][selected]):focus #label{color:var(--luzmo-option-highlight-selected-label-content-color-focus, var(--option-highlight-selected-label-content-color-focus))}:host([variant=highlight][selected]) ::slotted([slot=icon]){color:var(--highcontrast-option-color-disabled, var(--luzmo-option-highlight-selected-label-content-color, var(--option-highlight-selected-label-content-color)));fill:var(--highcontrast-option-color-disabled, var(--luzmo-option-highlight-selected-label-content-color, var(--option-highlight-selected-label-content-color)))}::slotted([slot=value]){color:var(--highcontrast-option-color-default, var(--luzmo-option-value-color-default, var(--option-value-color-default)));font-size:var(--luzmo-option-label-font-size, var(--option-label-font-size));grid-area:valueArea;justify-self:end}[name=description]::slotted(*){color:var(--highcontrast-option-color-default, var(--luzmo-option-description-color-default, var(--option-description-color-default)));font-size:var(--luzmo-option-description-font-size, var(--option-description-font-size));-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;line-height:var(--luzmo-option-description-line-height, var(--option-description-line-height));grid-area:descriptionArea;margin-block-start:var(--luzmo-option-label-to-description-spacing, var(--option-label-to-description-spacing))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (hover: hover){:host(:hover){background-color:var(--highcontrast-option-background-color-focus, var(--luzmo-option-background-color-hover, var(--option-background-color-hover)))}:host(:hover)>#label{color:var(--highcontrast-option-color-focus, var(--luzmo-option-label-content-color-hover, var(--option-label-content-color-hover)))}:host([variant=highlight][selected]:hover)>#label{color:var(--luzmo-option-highlight-selected-label-content-color-hover, var(--option-highlight-selected-label-content-color-hover))}:host(:hover)>[name=description]::slotted(*){color:var(--highcontrast-option-color-focus, var(--luzmo-option-description-color-hover, var(--option-description-color-hover)))}:host(:hover)>::slotted([slot=value]){color:var(--highcontrast-option-color-focus, var(--luzmo-option-value-color-hover, var(--option-value-color-hover)))}:host(:hover)>.icon:not(.checkmark,.checkbox){fill:var(--highcontrast-option-color-focus, var(--luzmo-option-label-icon-color-hover, var(--option-label-icon-color-hover)));color:var(--highcontrast-option-color-focus, var(--luzmo-option-label-icon-color-hover, var(--option-label-icon-color-hover)))}:host([variant=highlight][selected]:hover)>.icon:not(.checkmark,.checkbox){fill:var(--luzmo-option-highlight-selected-label-icon-color-hover, var(--option-highlight-selected-label-icon-color-hover))}:host(:hover)>.checkmark{fill:var(--highcontrast-option-color-focus, var(--luzmo-options-checkmark-icon-color-hover, var(--options-checkmark-icon-color-hover)));color:var(--highcontrast-option-color-focus, var(--luzmo-options-checkmark-icon-color-hover, var(--options-checkmark-icon-color-hover)))}:host(:hover)>.checkbox{fill:var(--highcontrast-option-color-focus, var(--luzmo-options-checkbox-icon-color-hover, var(--options-checkbox-icon-color-hover)));color:var(--highcontrast-option-color-focus, var(--luzmo-options-checkbox-icon-color-hover, var(--options-checkbox-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-option-color-disabled, var(--luzmo-option-label-content-color-disabled, var(--option-label-content-color-disabled)))}:host([disabled]:hover) [name=description]::slotted(*),:host([aria-disabled=true]:hover) [name=description]::slotted(*){color:var(--highcontrast-option-color-disabled, var(--luzmo-option-description-color-disabled, var(--option-description-color-disabled)))}:host([disabled]:hover) ::slotted([slot=icon]),:host([aria-disabled=true]:hover) ::slotted([slot=icon]){color:var(--highcontrast-option-color-disabled, var(--luzmo-option-label-icon-color-disabled, var(--option-label-icon-color-disabled)));fill:var(--highcontrast-option-color-disabled, var(--luzmo-option-label-icon-color-disabled, var(--option-label-icon-color-disabled)))}}:host([emphasized]){--options-checkmark-icon-color-default: var(--luzmo-primary);--options-checkmark-icon-color-hover: var(--luzmo-primary-hover);--options-checkmark-icon-color-down: var(--luzmo-primary-down);--options-checkmark-icon-color-focus: var(--luzmo-primary-focus);--options-checkbox-icon-color-default: var(--luzmo-primary);--options-checkbox-icon-color-hover: var(--luzmo-primary-hover);--options-checkbox-icon-color-down: var(--luzmo-primary-down);--options-checkbox-icon-color-focus: var(--luzmo-primary-focus)}:host{text-align:initial;font-family:var(--luzmo-option-font-family, var(--luzmo-font-family))}:host([hidden]){display:none}:host([disabled]){pointer-events:none}:host([disabled]) [name=value]::slotted(*){color:var(--luzmo-option-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}}:host([no-wrap]) #label{display:block}';
|
|
41
|
+
var N = Object.defineProperty, W = Object.getOwnPropertyDescriptor, m = (a, o, t, i) => {
|
|
42
|
+
for (var l = i > 1 ? void 0 : i ? W(o, t) : o, r = a.length - 1, n; r >= 0; r--)
|
|
43
|
+
(n = a[r]) && (l = (i ? n(o, t, l) : n(l)) || l);
|
|
44
|
+
return i && l && N(o, t, l), l;
|
|
45
45
|
};
|
|
46
|
-
const
|
|
46
|
+
const M = (a) => u`
|
|
47
47
|
<span class="icon-container icon checkmark ${a.join(" ")}">
|
|
48
|
-
${
|
|
48
|
+
${A(H)}
|
|
49
49
|
</span>
|
|
50
|
-
`,
|
|
50
|
+
`, R = (a) => u`
|
|
51
51
|
<span class="icon-container icon checkbox ${a.join(" ")}">
|
|
52
|
-
${
|
|
52
|
+
${A(B)}
|
|
53
53
|
</span>
|
|
54
|
-
`,
|
|
54
|
+
`, G = (a) => u`
|
|
55
55
|
<span class="icon-container icon checkbox ${a.join(" ")}">
|
|
56
|
-
${
|
|
56
|
+
${A(T)}
|
|
57
57
|
</span>
|
|
58
58
|
`;
|
|
59
|
-
class
|
|
60
|
-
|
|
59
|
+
class p extends F(
|
|
60
|
+
P(D(L, '[slot="icon"]'))
|
|
61
61
|
) {
|
|
62
62
|
constructor() {
|
|
63
63
|
super(), this.active = !1, this.focused = !1, this.selected = !1, this.emphasized = !1, this.variant = "checkmarks", this._value = "", this.noWrap = !1, this.renderCheckIcon = (o, t) => {
|
|
64
|
-
const
|
|
65
|
-
return this.variant === "checkboxes" ? o ?
|
|
64
|
+
const i = t ? ["check-icon--with-adjacent-icon"] : [];
|
|
65
|
+
return this.variant === "checkboxes" ? o ? G(i) : R(i) : o && this.variant !== "highlight" ? M(i) : u``;
|
|
66
66
|
}, this.proxyFocus = () => {
|
|
67
67
|
this.focus();
|
|
68
68
|
}, this.willDispatchUpdate = !1, this.addEventListener("click", this.handleClickCapture, {
|
|
69
69
|
capture: !0
|
|
70
|
-
}), new
|
|
70
|
+
}), new $(this, {
|
|
71
71
|
config: {
|
|
72
72
|
characterData: !0,
|
|
73
73
|
childList: !0,
|
|
@@ -79,7 +79,7 @@ class b extends T(
|
|
|
79
79
|
});
|
|
80
80
|
}
|
|
81
81
|
static get styles() {
|
|
82
|
-
return [
|
|
82
|
+
return [w(q)];
|
|
83
83
|
}
|
|
84
84
|
get value() {
|
|
85
85
|
return this._value || this.itemText;
|
|
@@ -110,10 +110,10 @@ class b extends T(
|
|
|
110
110
|
};
|
|
111
111
|
if (this._itemChildren)
|
|
112
112
|
return this._itemChildren;
|
|
113
|
-
const o = this.iconSlot.assignedElements().map((
|
|
114
|
-
const
|
|
115
|
-
return
|
|
116
|
-
}), t = this.contentSlot.assignedNodes().map((
|
|
113
|
+
const o = this.iconSlot.assignedElements().map((i) => {
|
|
114
|
+
const l = i.cloneNode(!0);
|
|
115
|
+
return l.removeAttribute("slot"), l.classList.toggle("icon"), l;
|
|
116
|
+
}), t = this.contentSlot.assignedNodes().map((i) => i.cloneNode(!0));
|
|
117
117
|
return this._itemChildren = { icon: o, content: t }, this._itemChildren;
|
|
118
118
|
}
|
|
119
119
|
click() {
|
|
@@ -131,7 +131,7 @@ class b extends T(
|
|
|
131
131
|
this._itemChildren = void 0, this.triggerUpdate();
|
|
132
132
|
}
|
|
133
133
|
render() {
|
|
134
|
-
return
|
|
134
|
+
return u`
|
|
135
135
|
${this.renderCheckIcon(this.selected, this.hasIcon)}
|
|
136
136
|
<div id="icon">
|
|
137
137
|
<slot name="icon"></slot>
|
|
@@ -145,13 +145,13 @@ class b extends T(
|
|
|
145
145
|
id: "button",
|
|
146
146
|
ariaHidden: !0,
|
|
147
147
|
className: "button anchor hidden"
|
|
148
|
-
}) :
|
|
148
|
+
}) : y}
|
|
149
149
|
`;
|
|
150
150
|
}
|
|
151
151
|
handlePointerdown() {
|
|
152
152
|
}
|
|
153
153
|
firstUpdated(o) {
|
|
154
|
-
super.firstUpdated(o), this.setAttribute("tabindex", "-1"), this.addEventListener("pointerdown", this.handlePointerdown), this.hasAttribute("id") || (this.id = `luzmo-option-${
|
|
154
|
+
super.firstUpdated(o), this.setAttribute("tabindex", "-1"), this.addEventListener("pointerdown", this.handlePointerdown), this.hasAttribute("id") || (this.id = `luzmo-option-${j()}`);
|
|
155
155
|
}
|
|
156
156
|
updateAriaSelected() {
|
|
157
157
|
const o = this.getAttribute("role");
|
|
@@ -173,32 +173,32 @@ class b extends T(
|
|
|
173
173
|
this.isConnected && (this.willDispatchUpdate = !1);
|
|
174
174
|
}
|
|
175
175
|
}
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
],
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
],
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
],
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
],
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
],
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
],
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
],
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
],
|
|
200
|
-
|
|
201
|
-
|
|
176
|
+
m([
|
|
177
|
+
s({ type: Boolean, reflect: !0 })
|
|
178
|
+
], p.prototype, "active", 2);
|
|
179
|
+
m([
|
|
180
|
+
s({ type: Boolean, reflect: !0 })
|
|
181
|
+
], p.prototype, "focused", 2);
|
|
182
|
+
m([
|
|
183
|
+
s({ type: Boolean, reflect: !0 })
|
|
184
|
+
], p.prototype, "selected", 2);
|
|
185
|
+
m([
|
|
186
|
+
s({ type: Boolean, reflect: !0 })
|
|
187
|
+
], p.prototype, "emphasized", 2);
|
|
188
|
+
m([
|
|
189
|
+
s({ type: String, reflect: !0 })
|
|
190
|
+
], p.prototype, "variant", 2);
|
|
191
|
+
m([
|
|
192
|
+
s({ type: String })
|
|
193
|
+
], p.prototype, "value", 1);
|
|
194
|
+
m([
|
|
195
|
+
O("slot:not([name])")
|
|
196
|
+
], p.prototype, "contentSlot", 2);
|
|
197
|
+
m([
|
|
198
|
+
O('slot[name="icon"]')
|
|
199
|
+
], p.prototype, "iconSlot", 2);
|
|
200
|
+
m([
|
|
201
|
+
s({
|
|
202
202
|
type: Boolean,
|
|
203
203
|
reflect: !0,
|
|
204
204
|
attribute: "no-wrap",
|
|
@@ -206,86 +206,32 @@ k([
|
|
|
206
206
|
return !1;
|
|
207
207
|
}
|
|
208
208
|
})
|
|
209
|
-
],
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
],
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
* Copyright 2017 Google LLC
|
|
216
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
217
|
-
*/
|
|
218
|
-
const $ = (a, o, t) => {
|
|
219
|
-
const l = /* @__PURE__ */ new Map();
|
|
220
|
-
for (let e = o; e <= t; e++) l.set(a[e], e);
|
|
221
|
-
return l;
|
|
222
|
-
}, lo = M(class extends W {
|
|
223
|
-
constructor(a) {
|
|
224
|
-
if (super(a), a.type !== R.CHILD) throw Error("repeat() can only be used in text expressions");
|
|
225
|
-
}
|
|
226
|
-
dt(a, o, t) {
|
|
227
|
-
let l;
|
|
228
|
-
t === void 0 ? t = o : o !== void 0 && (l = o);
|
|
229
|
-
const e = [], n = [];
|
|
230
|
-
let r = 0;
|
|
231
|
-
for (const i of a) e[r] = l ? l(i, r) : r, n[r] = t(i, r), r++;
|
|
232
|
-
return { values: n, keys: e };
|
|
233
|
-
}
|
|
234
|
-
render(a, o, t) {
|
|
235
|
-
return this.dt(a, o, t).values;
|
|
236
|
-
}
|
|
237
|
-
update(a, [o, t, l]) {
|
|
238
|
-
const e = G(a), { values: n, keys: r } = this.dt(o, t, l);
|
|
239
|
-
if (!Array.isArray(e)) return this.ut = r, n;
|
|
240
|
-
const i = this.ut ?? (this.ut = []), s = [];
|
|
241
|
-
let m, p, h = 0, u = e.length - 1, c = 0, d = n.length - 1;
|
|
242
|
-
for (; h <= u && c <= d; ) if (e[h] === null) h++;
|
|
243
|
-
else if (e[u] === null) u--;
|
|
244
|
-
else if (i[h] === r[c]) s[c] = y(e[h], n[c]), h++, c++;
|
|
245
|
-
else if (i[u] === r[d]) s[d] = y(e[u], n[d]), u--, d--;
|
|
246
|
-
else if (i[h] === r[d]) s[d] = y(e[h], n[d]), O(a, s[d + 1], e[h]), h++, d--;
|
|
247
|
-
else if (i[u] === r[c]) s[c] = y(e[u], n[c]), O(a, e[h], e[u]), u--, c++;
|
|
248
|
-
else if (m === void 0 && (m = $(r, c, d), p = $(i, h, u)), m.has(i[h])) if (m.has(i[u])) {
|
|
249
|
-
const v = p.get(r[c]), w = v !== void 0 ? e[v] : null;
|
|
250
|
-
if (w === null) {
|
|
251
|
-
const A = O(a, e[h]);
|
|
252
|
-
y(A, n[c]), s[c] = A;
|
|
253
|
-
} else s[c] = y(w, n[c]), O(a, e[h], w), e[v] = null;
|
|
254
|
-
c++;
|
|
255
|
-
} else E(e[u]), u--;
|
|
256
|
-
else E(e[h]), h++;
|
|
257
|
-
for (; c <= d; ) {
|
|
258
|
-
const v = O(a, s[d + 1]);
|
|
259
|
-
y(v, n[c]), s[c++] = v;
|
|
260
|
-
}
|
|
261
|
-
for (; h <= u; ) {
|
|
262
|
-
const v = e[h++];
|
|
263
|
-
v !== null && E(v);
|
|
264
|
-
}
|
|
265
|
-
return this.ut = r, J(a, s), Z;
|
|
266
|
-
}
|
|
267
|
-
}), ro = ":host{--options-divider-thickness: var( --divider-thickness-medium, var(--luzmo-border-width) );inline-size:auto;margin-block:var(--luzmo-options-section-divider-margin-block, max(0px, (var(--option-section-divider-height) - var(--options-divider-thickness)) / 2));margin-inline:var(--luzmo-option-label-inline-edge-to-content, var(--option-label-inline-edge-to-content));overflow:visible}:host{display:block;flex-shrink:0}";
|
|
268
|
-
class no extends L(U, {
|
|
209
|
+
], p.prototype, "noWrap", 2);
|
|
210
|
+
m([
|
|
211
|
+
O(".anchor")
|
|
212
|
+
], p.prototype, "anchorElement", 2);
|
|
213
|
+
const Z = ":host{--options-divider-thickness: var( --divider-thickness-medium, var(--luzmo-border-width) );inline-size:auto;margin-block:var(--luzmo-options-section-divider-margin-block, max(0px, (var(--option-section-divider-height) - var(--options-divider-thickness)) / 2));margin-inline:var(--luzmo-option-label-inline-edge-to-content, var(--option-label-inline-edge-to-content));overflow:visible}:host{display:block;flex-shrink:0}";
|
|
214
|
+
class J extends E(S, {
|
|
269
215
|
validSizes: ["s", "m", "l"]
|
|
270
216
|
}) {
|
|
271
217
|
static get styles() {
|
|
272
|
-
return [
|
|
218
|
+
return [w(K), w(Z)];
|
|
273
219
|
}
|
|
274
220
|
firstUpdated(o) {
|
|
275
221
|
super.firstUpdated(o), this.setAttribute("role", "separator");
|
|
276
222
|
}
|
|
277
223
|
}
|
|
278
|
-
const
|
|
279
|
-
var
|
|
280
|
-
for (var
|
|
281
|
-
(
|
|
282
|
-
return
|
|
224
|
+
const Q = ":host{--option-top-to-action: var(--luzmo-spacing-1);--option-top-to-checkbox: var(--luzmo-spacing-1);--option-label-line-height: var(--luzmo-line-height);--option-label-line-height-cjk: 1.5;--option-label-to-description-spacing: 1px;--option-focus-indicator-width: var(--luzmo-indicator-width);--option-focus-indicator-color: var(--luzmo-indicator-color);--option-label-to-value-area-min-spacing: var(--luzmo-spacing-3);--option-label-content-color-default: var(--luzmo-font-color);--option-label-content-color-hover: var(--luzmo-font-color-hover);--option-label-content-color-down: var(--luzmo-font-color-down);--option-label-content-color-focus: var(--luzmo-font-color-focus);--option-label-icon-color-default: var(--luzmo-font-color);--option-label-icon-color-hover: var(--luzmo-font-color-hover);--option-label-icon-color-down: var(--luzmo-font-color-down);--option-label-icon-color-focus: var(--luzmo-font-color-focus);--option-highlight-selected-label-background-color: var(--luzmo-primary);--option-highlight-selected-label-content-color: var( --luzmo-primary-inverse-color );--option-highlight-selected-label-content-color-hover: var( --luzmo-primary-inverse-color );--option-highlight-selected-label-content-color-down: var( --luzmo-primary-inverse-color );--option-highlight-selected-label-content-color-focus: var( --luzmo-primary-inverse-color );--option-label-content-color-disabled: var(--luzmo-font-color-disabled);--option-label-icon-color-disabled: var(--luzmo-font-color-disabled);--option-description-line-height: var(--luzmo-line-height);--option-description-line-height-cjk: 1.5;--option-description-color-default: var(--luzmo-font-color);--option-description-color-hover: var(--luzmo-font-color-hover);--option-description-color-down: var(--luzmo-font-color-down);--option-description-color-focus: var(--luzmo-font-color-focus);--option-description-color-disabled: var(--luzmo-disabled-color);--options-section-header-line-height: var(--luzmo-line-height);--options-section-header-line-height-cjk: 1.5;--options-section-header-font-weight: bold;--options-section-header-color: var(--luzmo-font-color-hard);--options-collapsible-icon-color: var(--luzmo-font-color-hard);--options-checkmark-icon-color-default: var(--luzmo-font-color);--options-checkmark-icon-color-hover: var(--luzmo-font-color-hover);--options-checkmark-icon-color-down: var(--luzmo-font-color-down);--options-checkmark-icon-color-focus: var(--luzmo-font-color-focus);--options-checkbox-icon-color-default: var(--luzmo-font-color);--options-checkbox-icon-color-hover: var(--luzmo-font-color-hover);--options-checkbox-icon-color-down: var(--luzmo-font-color-down);--options-checkbox-icon-color-focus: var(--luzmo-font-color-focus);--options-drillin-icon-color-default: var(--luzmo-font-color);--options-drillin-icon-color-hover: var(--luzmo-font-color-hover);--options-drillin-icon-color-down: var(--luzmo-font-color-down);--options-drillin-icon-color-focus: var(--luzmo-font-color-focus);--option-value-color-default: var(--luzmo-font-color);--option-value-color-hover: var(--luzmo-font-color-hover);--option-value-color-down: var(--luzmo-font-color-down);--option-value-color-focus: var(--luzmo-font-color-focus);--option-collapsible-no-icon-suboption-padding-x-start: 28px;--option-background-color-selected: var(--luzmo-background-color);--option-background-color-default: var(--luzmo-background-color);--option-background-color-hover: var(--luzmo-background-color-hover);--option-background-color-down: var(--luzmo-background-color-down);--option-background-color-key-focus: var(--luzmo-background-color-focus)}:host{--option-min-height: var(--luzmo-component-height);--option-icon-container-height: 18px;--options-pending-height: var(--option-min-height);--progress-circle-size: calc( var(--options-pending-height) - var(--option-top-edge-to-text) - var( --option-bottom-edge-to-text ) );--option-icon-height: var(--luzmo-font-size-l);--option-icon-width: var(--luzmo-font-size-l);--option-label-font-size: var(--luzmo-font-size);--option-label-text-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--option-label-text-to-control: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--option-label-inline-edge-to-content: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--pending-inline-edge-to-content: var(--option-label-inline-edge-to-content);--option-top-edge-to-text: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--option-bottom-edge-to-text: var(--luzmo-spacing-3);--option-description-font-size: var(--luzmo-font-size-xs);--options-section-header-font-size: var(--luzmo-font-size);--options-section-header-min-width: var(--luzmo-component-height);--option-selectable-edge-to-text-not-selected: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--option-checkmark-size: var(--luzmo-font-size-xs);--option-checkbox-size: var(--luzmo-font-size-xs);--option-top-to-checkmark: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--option-top-to-checkbox: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=s]){--option-min-height: var(--luzmo-component-height-s);--option-icon-container-height: 17px;--option-icon-height: var(--luzmo-font-size);--option-icon-width: var(--luzmo-font-size);--option-label-font-size: var(--luzmo-font-size-s);--option-label-text-to-visual: var(--luzmo-spacing-3);--option-label-text-to-control: var(--luzmo-spacing-3);--option-label-inline-edge-to-content: var(--luzmo-spacing-3);--option-top-edge-to-text: calc( var(--luzmo-spacing-1) + var(--luzmo-spacing-2) );--option-bottom-edge-to-text: var(--luzmo-spacing-2);--option-description-font-size: var(--luzmo-font-size-xs);--options-section-header-font-size: var(--luzmo-font-size-s);--options-section-header-min-width: var(--luzmo-component-height-s);--option-selectable-edge-to-text-not-selected: var(--luzmo-spacing-3);--option-checkmark-size: var(--luzmo-font-size-xs);--option-checkbox-size: var(--luzmo-font-size-xs);--option-top-to-checkmark: var(--luzmo-spacing-3);--option-top-to-checkbox: var(--luzmo-spacing-3)}:host([size=l]){--option-min-height: var(--luzmo-component-height-l);--option-icon-container-height: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--option-icon-height: var(--luzmo-font-size-l);--option-icon-width: var(--luzmo-font-size-l);--option-label-font-size: var(--luzmo-font-size-l);--option-label-text-to-visual: var(--luzmo-spacing-4);--option-label-text-to-control: var(--luzmo-spacing-4);--option-label-inline-edge-to-content: var(--luzmo-spacing-4);--option-top-edge-to-text: var(--luzmo-spacing-4);--option-bottom-edge-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--option-description-font-size: var(--luzmo-font-size-s);--options-section-header-font-size: var(--luzmo-font-size-l);--options-section-header-min-width: var(--luzmo-component-height-l);--option-selectable-edge-to-text-not-selected: var(--luzmo-spacing-4);--option-checkmark-size: var(--luzmo-font-size-s);--option-checkbox-size: var(--luzmo-font-size-s);--option-top-to-checkmark: var(--luzmo-spacing-4);--option-top-to-checkbox: var(--luzmo-spacing-4)}:host([size=xl]){--option-min-height: var(--luzmo-component-height-xl);--option-icon-container-height: 26px;--option-icon-height: var(--luzmo-font-size-xl);--option-icon-width: var(--luzmo-font-size-xl);--option-label-font-size: var(--luzmo-font-size-xl);--option-label-text-to-visual: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--option-label-text-to-control: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--option-label-inline-edge-to-content: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--option-top-edge-to-text: var(--luzmo-spacing-4);--option-bottom-edge-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--option-description-font-size: var(--luzmo-font-size);--options-section-header-font-size: var(--luzmo-font-size-xl);--options-section-header-min-width: var(--luzmo-component-height-xl);--option-selectable-edge-to-text-not-selected: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--option-checkmark-size: var(--luzmo-font-size);--option-checkbox-size: var(--luzmo-font-size);--option-top-to-checkmark: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--option-top-to-checkbox: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}@media (forced-colors: active){:host{--highcontrast-option-background-color-default: ButtonFace;--highcontrast-option-color-default: ButtonText;--highcontrast-option-background-color-focus: Highlight;--highcontrast-option-color-focus: HighlightText;--highcontrast-options-checkmark-icon-color-default: Highlight;--highcontrast-options-checkbox-icon-color-default: Highlight;--highcontrast-option-color-disabled: GrayText;--highcontrast-option-focus-indicator-color: Highlight;--highcontrast-option-selected-background-color: Highlight;--highcontrast-option-selected-color: HighlightText}@supports (color: SelectedItem){:host{--highcontrast-option-selected-background-color: SelectedItem;--highcontrast-option-selected-color: SelectedItemText}}}:host{inline-size:auto;inline-size:var(--luzmo-options-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){--option-label-line-height: var( --luzmo-option-label-line-height-cjk, var(--option-label-line-height-cjk) );--option-description-line-height: var( --luzmo-option-description-line-height-cjk, var(--option-description-line-height-cjk) );--options-section-header-line-height: var( --luzmo-options-section-header-line-height-cjk, var(--options-section-header-line-height-cjk) )}luzmo-option{width:100%}#pending{display:flex;flex-shrink:0;align-items:center;height:var(--options-pending-height);padding-inline:var(--pending-inline-edge-to-content)}:host{display:inline-flex;flex-direction:column;width:100%}:host(:focus){outline:none}::slotted(*){flex-shrink:0}";
|
|
225
|
+
var X = Object.defineProperty, g = (a, o, t, i) => {
|
|
226
|
+
for (var l = void 0, r = a.length - 1, n; r >= 0; r--)
|
|
227
|
+
(n = a[r]) && (l = n(o, t, l) || l);
|
|
228
|
+
return l && X(o, t, l), l;
|
|
283
229
|
};
|
|
284
|
-
const
|
|
285
|
-
function
|
|
230
|
+
const Y = 25;
|
|
231
|
+
function oo(a, o) {
|
|
286
232
|
return !!o && (a === o || a.contains(o));
|
|
287
233
|
}
|
|
288
|
-
class
|
|
234
|
+
class v extends E(S, {
|
|
289
235
|
noDefaultSize: !0
|
|
290
236
|
}) {
|
|
291
237
|
constructor() {
|
|
@@ -295,26 +241,26 @@ class z extends L(U, {
|
|
|
295
241
|
* @internal
|
|
296
242
|
*/
|
|
297
243
|
static get styles() {
|
|
298
|
-
return [
|
|
244
|
+
return [w(Q)];
|
|
299
245
|
}
|
|
300
246
|
/**
|
|
301
247
|
* @internal
|
|
302
248
|
*/
|
|
303
249
|
get _virtualizeActive() {
|
|
304
|
-
return this.options.length >
|
|
250
|
+
return this.options.length > Y;
|
|
305
251
|
}
|
|
306
252
|
firstUpdated(o) {
|
|
307
253
|
super.firstUpdated(o), this.hasAttribute("tabindex") || (this.tabIndex = 0);
|
|
308
254
|
const t = [
|
|
309
|
-
new Promise((
|
|
255
|
+
new Promise((i) => requestAnimationFrame(() => i(!0)))
|
|
310
256
|
];
|
|
311
|
-
[...this.children].forEach((
|
|
312
|
-
|
|
257
|
+
[...this.children].forEach((i) => {
|
|
258
|
+
i.localName === "luzmo-option" && t.push(i.updateComplete);
|
|
313
259
|
}), this.optionElementsUpdated = Promise.all(t);
|
|
314
260
|
}
|
|
315
261
|
willUpdate(o) {
|
|
316
|
-
var
|
|
317
|
-
o.has("selects") && this.selects === "single" && ((
|
|
262
|
+
var i;
|
|
263
|
+
o.has("selects") && this.selects === "single" && ((i = this.value) == null ? void 0 : i.length) > 1 && (this.value = this.value.slice(0, 1));
|
|
318
264
|
}
|
|
319
265
|
updated(o) {
|
|
320
266
|
super.updated(o), o.has("label") && (this.label || o.get("label") !== void 0) && (this.label ? this.setAttribute("aria-label", this.label) : this.removeAttribute("aria-label"));
|
|
@@ -341,7 +287,7 @@ class z extends L(U, {
|
|
|
341
287
|
}
|
|
342
288
|
// when the focus is lost in the options menu, we need to remove the focus from the item, stop listening to keyboard events and clean up the aria-activedescendant
|
|
343
289
|
handleBlur(o) {
|
|
344
|
-
|
|
290
|
+
oo(this, o.relatedTarget) || (this.stopListeningToKeyboard(), this._removeFocusedPropertyOnOptions(), this.removeAttribute("aria-activedescendant"));
|
|
345
291
|
}
|
|
346
292
|
startListeningToKeyboard() {
|
|
347
293
|
this.addEventListener("keydown", this.handleKeydown);
|
|
@@ -350,70 +296,70 @@ class z extends L(U, {
|
|
|
350
296
|
this.removeEventListener("keydown", this.handleKeydown);
|
|
351
297
|
}
|
|
352
298
|
handleKeydown(o) {
|
|
353
|
-
var
|
|
299
|
+
var r;
|
|
354
300
|
if (o.defaultPrevented)
|
|
355
301
|
return;
|
|
356
|
-
const t = this.focusedOptionIndex,
|
|
357
|
-
(
|
|
358
|
-
var
|
|
359
|
-
return ((
|
|
302
|
+
const t = this.focusedOptionIndex, i = [...this.visibleOptionElements].find(
|
|
303
|
+
(n) => {
|
|
304
|
+
var e, h, d, c;
|
|
305
|
+
return ((e = n.value) == null ? void 0 : e.toString()) === ((c = (d = (h = this.options) == null ? void 0 : h[t]) == null ? void 0 : d.value) == null ? void 0 : c.toString());
|
|
360
306
|
}
|
|
361
|
-
), { key:
|
|
362
|
-
if (
|
|
307
|
+
), { key: l } = o;
|
|
308
|
+
if (l === "Tab") {
|
|
363
309
|
this.prepareToCleanUp();
|
|
364
310
|
return;
|
|
365
311
|
}
|
|
366
|
-
if (
|
|
367
|
-
o.preventDefault(),
|
|
312
|
+
if (l === " " || l === "Enter") {
|
|
313
|
+
o.preventDefault(), i && this.toggleOption(o, (r = this.options) == null ? void 0 : r[t]);
|
|
368
314
|
return;
|
|
369
315
|
}
|
|
370
|
-
if (
|
|
371
|
-
o.preventDefault(), this.navigateWithinOptions(o,
|
|
316
|
+
if (l === "ArrowDown" || l === "ArrowUp") {
|
|
317
|
+
o.preventDefault(), this.navigateWithinOptions(o, i);
|
|
372
318
|
return;
|
|
373
319
|
}
|
|
374
320
|
}
|
|
375
321
|
navigateWithinOptions(o, t) {
|
|
376
|
-
const { key:
|
|
322
|
+
const { key: i } = o, l = i === "ArrowDown" ? 1 : -1;
|
|
377
323
|
o.preventDefault(), o.stopPropagation();
|
|
378
|
-
const
|
|
379
|
-
|
|
324
|
+
const r = this.focusOptionByOffset(
|
|
325
|
+
l,
|
|
380
326
|
t,
|
|
381
327
|
!0
|
|
382
328
|
);
|
|
383
|
-
|
|
329
|
+
r !== t && (this._virtualizeActive || r == null || r.scrollIntoView({ block: "nearest" }));
|
|
384
330
|
}
|
|
385
|
-
focusOptionByOffset(o, t,
|
|
386
|
-
var
|
|
387
|
-
const
|
|
331
|
+
focusOptionByOffset(o, t, i) {
|
|
332
|
+
var x;
|
|
333
|
+
const l = o || 1;
|
|
388
334
|
t && (t.focused = !1);
|
|
389
|
-
const
|
|
335
|
+
const r = this.focusedOptionIndex;
|
|
390
336
|
this.focusedOptionIndex = this.options.length > 0 ? (this.options.length + this.focusedOptionIndex + o) % this.options.length : 0;
|
|
391
|
-
let
|
|
392
|
-
for (; (
|
|
393
|
-
|
|
394
|
-
const
|
|
395
|
-
(
|
|
396
|
-
new Event(`luzmo-exceeded-${
|
|
337
|
+
let n = this.options[this.focusedOptionIndex], e = this.options.length;
|
|
338
|
+
for (; (n != null && n.disabled || n != null && n.divider) && e; )
|
|
339
|
+
e -= 1, this.focusedOptionIndex = (this.options.length + this.focusedOptionIndex + l) % this.options.length, n = this.options[this.focusedOptionIndex];
|
|
340
|
+
const h = r < this.focusedOptionIndex && o === -1, d = r > this.focusedOptionIndex && o === 1;
|
|
341
|
+
(h || d) && (this.focusedOptionIndex = r, this.dispatchEvent(
|
|
342
|
+
new Event(`luzmo-exceeded-${h ? "top" : "bottom"}`, {
|
|
397
343
|
bubbles: !0,
|
|
398
344
|
composed: !0,
|
|
399
345
|
cancelable: !0
|
|
400
346
|
})
|
|
401
347
|
));
|
|
402
|
-
let
|
|
403
|
-
return
|
|
404
|
-
(
|
|
405
|
-
var
|
|
406
|
-
return ((
|
|
348
|
+
let c;
|
|
349
|
+
return i && this._virtualizeActive && (c = [...this.visibleOptionElements].find(
|
|
350
|
+
(b) => {
|
|
351
|
+
var z, k, f;
|
|
352
|
+
return ((z = b.value) == null ? void 0 : z.toString()) === ((f = (k = this.options[this.focusedOptionIndex]) == null ? void 0 : k.value) == null ? void 0 : f.toString());
|
|
407
353
|
}
|
|
408
|
-
),
|
|
354
|
+
), c || (this.focusedOptionIndex = this._firstVisibleIndex)), this._virtualizeActive && i && ((x = this.virtualizer.element(this.focusedOptionIndex)) == null || x.scrollIntoView({
|
|
409
355
|
behavior: "smooth",
|
|
410
356
|
block: "nearest"
|
|
411
|
-
})),
|
|
412
|
-
(
|
|
413
|
-
var
|
|
414
|
-
return (
|
|
357
|
+
})), c = c ?? [...this.visibleOptionElements].find(
|
|
358
|
+
(b) => {
|
|
359
|
+
var z, k, f, I, C;
|
|
360
|
+
return (b.value === null ? null : (z = b.value) == null ? void 0 : z.toString()) === (((k = this.options[this.focusedOptionIndex]) == null ? void 0 : k.value) === null ? (f = this.options[this.focusedOptionIndex]) == null ? void 0 : f.value : (C = (I = this.options[this.focusedOptionIndex]) == null ? void 0 : I.value) == null ? void 0 : C.toString());
|
|
415
361
|
}
|
|
416
|
-
),
|
|
362
|
+
), n != null && n.disabled || this.setFocusedAndActiveDescendant(c), c;
|
|
417
363
|
}
|
|
418
364
|
updateSelectedItemIndex() {
|
|
419
365
|
this.focusedOptionIndex = this._virtualizeActive ? this._firstVisibleIndex : 0;
|
|
@@ -443,21 +389,21 @@ class z extends L(U, {
|
|
|
443
389
|
);
|
|
444
390
|
}
|
|
445
391
|
async toggleOption(o, t) {
|
|
446
|
-
var
|
|
447
|
-
const
|
|
448
|
-
(
|
|
392
|
+
var n;
|
|
393
|
+
const i = o instanceof KeyboardEvent, l = this.options.findIndex(
|
|
394
|
+
(e) => (e == null ? void 0 : e.value) === (t == null ? void 0 : t.value)
|
|
449
395
|
);
|
|
450
|
-
this.focusedOptionIndex =
|
|
451
|
-
var
|
|
452
|
-
if (
|
|
453
|
-
const
|
|
454
|
-
|
|
396
|
+
this.focusedOptionIndex = l, this.visibleOptionElements.forEach((e) => {
|
|
397
|
+
var h, d;
|
|
398
|
+
if (i) {
|
|
399
|
+
const c = ((e == null ? void 0 : e.value) === null ? null : (h = e.value) == null ? void 0 : h.toString()) === ((t == null ? void 0 : t.value) === null ? null : (d = t == null ? void 0 : t.value) == null ? void 0 : d.toString());
|
|
400
|
+
e.focused = c, c && this.setFocusedAndActiveDescendant(e);
|
|
455
401
|
} else
|
|
456
|
-
|
|
402
|
+
e.focused = !1;
|
|
457
403
|
});
|
|
458
|
-
const
|
|
459
|
-
this.selects === "single" ? (this.value = [t == null ? void 0 : t.value], this._selectedOptions = [t]) : (this.value =
|
|
460
|
-
(
|
|
404
|
+
const r = Array.isArray(this.value) && ((n = this.value) == null ? void 0 : n.includes((t == null ? void 0 : t.value) ?? null));
|
|
405
|
+
this.selects === "single" ? (this.value = [t == null ? void 0 : t.value], this._selectedOptions = [t]) : (this.value = r ? this.value.filter((e) => e !== (t == null ? void 0 : t.value)) : [...this.value ?? [], t == null ? void 0 : t.value], this._selectedOptions = r ? this._selectedOptions.filter(
|
|
406
|
+
(e) => e.value !== t.value
|
|
461
407
|
) : [...this._selectedOptions, t]), await this.updateComplete, this.dispatchEvent(
|
|
462
408
|
new CustomEvent("change", {
|
|
463
409
|
bubbles: !0,
|
|
@@ -473,40 +419,40 @@ class z extends L(U, {
|
|
|
473
419
|
this.toggleOption(t, o);
|
|
474
420
|
}
|
|
475
421
|
render() {
|
|
476
|
-
const o = (
|
|
422
|
+
const o = (e) => u`<luzmo-icon
|
|
477
423
|
slot="icon"
|
|
478
|
-
.icon=${
|
|
424
|
+
.icon=${e}
|
|
479
425
|
.size=${this.size}
|
|
480
|
-
></luzmo-icon>`, t = (
|
|
426
|
+
></luzmo-icon>`, t = (e) => u`<span slot="description">${e}</span>`, i = (e) => u`<luzmo-icon
|
|
481
427
|
slot="icon"
|
|
482
|
-
.src=${
|
|
428
|
+
.src=${e}
|
|
483
429
|
.size=${this.size}
|
|
484
|
-
></luzmo-icon>`,
|
|
485
|
-
var
|
|
486
|
-
const
|
|
487
|
-
return
|
|
488
|
-
.value=${
|
|
430
|
+
></luzmo-icon>`, l = (e) => {
|
|
431
|
+
var f;
|
|
432
|
+
const h = e == null ? void 0 : e.value, d = e == null ? void 0 : e.label, c = e == null ? void 0 : e.description, x = e == null ? void 0 : e.icon, b = e == null ? void 0 : e.imgSrc, z = e == null ? void 0 : e.divider, k = typeof e == "string" || e == null ? void 0 : e.disabled;
|
|
433
|
+
return z ? u`<luzmo-options-divider></luzmo-options-divider>` : u`<luzmo-option
|
|
434
|
+
.value=${h}
|
|
489
435
|
.size=${this.size}
|
|
490
436
|
.variant=${this.variant}
|
|
491
437
|
?emphasized=${this.emphasized}
|
|
492
438
|
?no-wrap=${this.noWrap}
|
|
493
|
-
?disabled=${
|
|
494
|
-
.selected=${Array.isArray(this.value) ? (
|
|
439
|
+
?disabled=${k}
|
|
440
|
+
.selected=${Array.isArray(this.value) ? (f = this.value) == null ? void 0 : f.includes(h) : !1}
|
|
495
441
|
.role=${this.selects === "single" ? "option" : "optioncheckbox"}
|
|
496
|
-
@click=${this.handleOptionClick.bind(this,
|
|
442
|
+
@click=${this.handleOptionClick.bind(this, e)}
|
|
497
443
|
>
|
|
498
|
-
${
|
|
499
|
-
${
|
|
444
|
+
${x ? o(x) : b ? i(b) : y}
|
|
445
|
+
${d} ${c ? t(c) : y}
|
|
500
446
|
</luzmo-option>`;
|
|
501
|
-
},
|
|
447
|
+
}, r = this._virtualizeActive ? u`<lit-virtualizer
|
|
502
448
|
.items=${this.options}
|
|
503
|
-
.renderItem=${
|
|
449
|
+
.renderItem=${l}
|
|
504
450
|
@rangeChanged=${this.rangeChange}
|
|
505
451
|
@visibilityChanged=${this.visibilityChanged}
|
|
506
|
-
></lit-virtualizer>` :
|
|
452
|
+
></lit-virtualizer>` : V(this.options, l), n = this.pending ? u`<div id="pending">
|
|
507
453
|
<luzmo-progress-circle indeterminate></luzmo-progress-circle>
|
|
508
|
-
</div>` :
|
|
509
|
-
return
|
|
454
|
+
</div>` : y;
|
|
455
|
+
return u`${r} ${n}`;
|
|
510
456
|
}
|
|
511
457
|
connectedCallback() {
|
|
512
458
|
super.connectedCallback(), this.setAttribute("role", "listbox"), this.updateComplete.then(() => this.updateItemFocus());
|
|
@@ -529,59 +475,59 @@ class z extends L(U, {
|
|
|
529
475
|
if (this.visibleOptionElements.length === 0)
|
|
530
476
|
return;
|
|
531
477
|
const o = this.focusedOptionIndex, t = [...this.visibleOptionElements].find(
|
|
532
|
-
(
|
|
533
|
-
var
|
|
534
|
-
return (
|
|
478
|
+
(i) => {
|
|
479
|
+
var l, r, n, e, h, d;
|
|
480
|
+
return (i.value === null ? null : (l = i.value) == null ? void 0 : l.toString()) === (((n = (r = this.options) == null ? void 0 : r[o]) == null ? void 0 : n.value) === null ? null : (d = (h = (e = this.options) == null ? void 0 : e[o]) == null ? void 0 : h.value) == null ? void 0 : d.toString());
|
|
535
481
|
}
|
|
536
482
|
);
|
|
537
483
|
this.setFocusedAndActiveDescendant(t);
|
|
538
484
|
}
|
|
539
485
|
setFocusedAndActiveDescendant(o) {
|
|
540
|
-
var
|
|
486
|
+
var i, l;
|
|
541
487
|
if (!o)
|
|
542
488
|
return;
|
|
543
|
-
const t = this.hasVisibleFocusInTree() || !!((
|
|
544
|
-
(
|
|
489
|
+
const t = this.hasVisibleFocusInTree() || !!((i = this.visibleOptionElements) != null && i.some && ((l = this.visibleOptionElements) != null && l.some(
|
|
490
|
+
(r) => r.hasVisibleFocusInTree()
|
|
545
491
|
)));
|
|
546
492
|
o.focused = t, t && this.setAttribute("aria-activedescendant", o.id);
|
|
547
493
|
}
|
|
548
494
|
}
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
],
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
],
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
],
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
],
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
],
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
],
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
],
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
],
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
],
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
],
|
|
579
|
-
customElements.get("luzmo-options") || customElements.define("luzmo-options",
|
|
580
|
-
customElements.get("luzmo-options-divider") || customElements.define("luzmo-options-divider",
|
|
581
|
-
customElements.get("luzmo-option") || customElements.define("luzmo-option",
|
|
495
|
+
g([
|
|
496
|
+
s({ type: String, reflect: !0 })
|
|
497
|
+
], v.prototype, "label");
|
|
498
|
+
g([
|
|
499
|
+
s({ type: String, reflect: !0 })
|
|
500
|
+
], v.prototype, "variant");
|
|
501
|
+
g([
|
|
502
|
+
s({ type: String, reflect: !0 })
|
|
503
|
+
], v.prototype, "selects");
|
|
504
|
+
g([
|
|
505
|
+
s({ type: Boolean, reflect: !0 })
|
|
506
|
+
], v.prototype, "emphasized");
|
|
507
|
+
g([
|
|
508
|
+
s({ type: Boolean, reflect: !0 })
|
|
509
|
+
], v.prototype, "pending");
|
|
510
|
+
g([
|
|
511
|
+
s({ type: Array })
|
|
512
|
+
], v.prototype, "options");
|
|
513
|
+
g([
|
|
514
|
+
s({ type: Boolean, reflect: !0, attribute: "no-wrap" })
|
|
515
|
+
], v.prototype, "noWrap");
|
|
516
|
+
g([
|
|
517
|
+
s({ type: Array })
|
|
518
|
+
], v.prototype, "value");
|
|
519
|
+
g([
|
|
520
|
+
O("lit-virtualizer")
|
|
521
|
+
], v.prototype, "virtualizer");
|
|
522
|
+
g([
|
|
523
|
+
U("luzmo-option")
|
|
524
|
+
], v.prototype, "visibleOptionElements");
|
|
525
|
+
customElements.get("luzmo-options") || customElements.define("luzmo-options", v);
|
|
526
|
+
customElements.get("luzmo-options-divider") || customElements.define("luzmo-options-divider", J);
|
|
527
|
+
customElements.get("luzmo-option") || customElements.define("luzmo-option", p);
|
|
582
528
|
export {
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
529
|
+
p as LuzmoOption,
|
|
530
|
+
v as LuzmoOptions,
|
|
531
|
+
J as LuzmoOptionsDivider,
|
|
532
|
+
Y as VIRTUALIZE_AS_OF_NUM_ITEMS
|
|
587
533
|
};
|