@luzmo/lucero 0.0.32 → 0.0.34
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/options/index.cjs +21 -21
- package/components/options/index.js +135 -134
- package/components/select/index.cjs +10 -10
- package/components/select/index.js +94 -93
- package/package.json +1 -1
|
@@ -19,16 +19,16 @@
|
|
|
19
19
|
* @license
|
|
20
20
|
* Copyright 2017 Google LLC
|
|
21
21
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
22
|
-
*/let ot;function et(s){return(t,o)=>Q.e(t,o,{get(){return(this.renderRoot??ot??(ot=document.createDocumentFragment())).querySelectorAll(s)}})}const it='#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}';var nt=Object.defineProperty,lt=Object.getOwnPropertyDescriptor,z=(s,t,o,e)=>{for(var i=e>1?void 0:e?lt(t,o):t,n=s.length-1,l;n>=0;n--)(l=s[n])&&(i=(e?l(t,o,i):l(i))||i);return e&&i&&nt(t,o,i),i};const rt=s=>a.x`
|
|
23
|
-
<span class="icon-container icon checkmark ${
|
|
22
|
+
*/let ot;function et(r){return(t,o)=>Q.e(t,o,{get(){return(this.renderRoot??ot??(ot=document.createDocumentFragment())).querySelectorAll(r)}})}const it='#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}';var nt=Object.defineProperty,lt=Object.getOwnPropertyDescriptor,z=(r,t,o,e)=>{for(var i=e>1?void 0:e?lt(t,o):t,n=r.length-1,s;n>=0;n--)(s=r[n])&&(i=(e?s(t,o,i):s(i))||i);return e&&i&&nt(t,o,i),i};const rt=r=>a.x`
|
|
23
|
+
<span class="icon-container icon checkmark ${r.join(" ")}">
|
|
24
24
|
${x.O2(x.F)}
|
|
25
25
|
</span>
|
|
26
|
-
`,st=
|
|
27
|
-
<span class="icon-container icon checkbox ${
|
|
26
|
+
`,st=r=>a.x`
|
|
27
|
+
<span class="icon-container icon checkbox ${r.join(" ")}">
|
|
28
28
|
${x.O2(x.h0)}
|
|
29
29
|
</span>
|
|
30
|
-
`,at=
|
|
31
|
-
<span class="icon-container icon checkbox ${
|
|
30
|
+
`,at=r=>a.x`
|
|
31
|
+
<span class="icon-container icon checkbox ${r.join(" ")}">
|
|
32
32
|
${x.O2(x.C0)}
|
|
33
33
|
</span>
|
|
34
34
|
`;class b extends Z.LikeAnchor(J.ObserveSlotText(G.ObserveSlotPresence(K.Focusable,'[slot="icon"]'))){constructor(){super(),this.active=!1,this.focused=!1,this.selected=!1,this.emphasized=!1,this.variant="checkmarks",this._value="",this.noWrap=!1,this.renderCheckIcon=(t,o)=>{const e=o?["check-icon--with-adjacent-icon"]:[];return this.variant==="checkboxes"?t?at(e):st(e):t&&this.variant!=="highlight"?rt(e):a.x``},this.proxyFocus=()=>{this.focus()},this.willDispatchUpdate=!1,this.addEventListener("click",this.handleClickCapture,{capture:!0}),new W.s(this,{config:{characterData:!0,childList:!0,subtree:!0},callback:()=>{this.breakItemChildrenCache()}})}static get styles(){return[a.r(it)]}get value(){return this._value||this.itemText}set value(t){t!==this._value&&(this._value=t||"",this._value?this.setAttribute("value",this._value):this.removeAttribute("value"))}get itemText(){return this.itemChildren.content.reduce((t,o)=>t+(o.textContent||"").trim(),"")}get focusElement(){return this}get hasIcon(){return this.slotContentIsPresent}get itemChildren(){if(!this.iconSlot||!this.contentSlot)return{icon:[],content:[]};if(this._itemChildren)return this._itemChildren;const t=this.iconSlot.assignedElements().map(e=>{const i=e.cloneNode(!0);return i.removeAttribute("slot"),i.classList.toggle("icon"),i}),o=this.contentSlot.assignedNodes().map(e=>e.cloneNode(!0));return this._itemChildren={icon:t,content:o},this._itemChildren}click(){this.disabled||this.shouldProxyClick()||super.click()}handleClickCapture(t){if(this.disabled)return t.preventDefault(),t.stopImmediatePropagation(),t.stopPropagation(),!1}shouldProxyClick(){let t=!1;return this.anchorElement&&(this.anchorElement.click(),t=!0),t}breakItemChildrenCache(){this._itemChildren=void 0,this.triggerUpdate()}render(){return a.x`
|
|
@@ -42,11 +42,11 @@
|
|
|
42
42
|
<slot name="description"></slot>
|
|
43
43
|
<slot name="value"></slot>
|
|
44
44
|
${this.href&&this.href.length>0?super.renderAnchor({id:"button",ariaHidden:!0,className:"button anchor hidden"}):a.E}
|
|
45
|
-
`}handlePointerdown(){}firstUpdated(t){super.firstUpdated(t),this.setAttribute("tabindex","-1"),this.addEventListener("pointerdown",this.handlePointerdown),this.hasAttribute("id")||(this.id=`luzmo-option-${X.randomID()}`)}updateAriaSelected(){const t=this.getAttribute("role");t==="option"?this.setAttribute("aria-selected",this.selected?"true":"false"):t==="optioncheckbox"&&this.setAttribute("aria-checked",this.selected?"true":"false")}setRole(t){this.setAttribute("role",t),this.updateAriaSelected()}updated(t){super.updated(t),t.has("label")&&(this.label||t.get("label")!==void 0)&&this.setAttribute("aria-label",this.label||""),this.anchorElement&&(this.anchorElement.addEventListener("focus",this.proxyFocus),this.anchorElement.tabIndex=-1),t.has("selected")&&this.updateAriaSelected()}connectedCallback(){super.connectedCallback(),this.triggerUpdate()}async triggerUpdate(){this.willDispatchUpdate||(this.willDispatchUpdate=!0,await new Promise(t=>requestAnimationFrame(t)),this.dispatchUpdate())}dispatchUpdate(){this.isConnected&&(this.willDispatchUpdate=!1)}}z([a.n({type:Boolean,reflect:!0})],b.prototype,"active",2);z([a.n({type:Boolean,reflect:!0})],b.prototype,"focused",2);z([a.n({type:Boolean,reflect:!0})],b.prototype,"selected",2);z([a.n({type:Boolean,reflect:!0})],b.prototype,"emphasized",2);z([a.n({type:String,reflect:!0})],b.prototype,"variant",2);z([a.n({type:String})],b.prototype,"value",1);z([L.e("slot:not([name])")],b.prototype,"contentSlot",2);z([L.e('slot[name="icon"]')],b.prototype,"iconSlot",2);z([a.n({type:Boolean,reflect:!0,attribute:"no-wrap",hasChanged(){return!1}})],b.prototype,"noWrap",2);z([L.e(".anchor")],b.prototype,"anchorElement",2);function S(
|
|
45
|
+
`}handlePointerdown(){}firstUpdated(t){super.firstUpdated(t),this.setAttribute("tabindex","-1"),this.addEventListener("pointerdown",this.handlePointerdown),this.hasAttribute("id")||(this.id=`luzmo-option-${X.randomID()}`)}updateAriaSelected(){const t=this.getAttribute("role");t==="option"?this.setAttribute("aria-selected",this.selected?"true":"false"):t==="optioncheckbox"&&this.setAttribute("aria-checked",this.selected?"true":"false")}setRole(t){this.setAttribute("role",t),this.updateAriaSelected()}updated(t){super.updated(t),t.has("label")&&(this.label||t.get("label")!==void 0)&&this.setAttribute("aria-label",this.label||""),this.anchorElement&&(this.anchorElement.addEventListener("focus",this.proxyFocus),this.anchorElement.tabIndex=-1),t.has("selected")&&this.updateAriaSelected()}connectedCallback(){super.connectedCallback(),this.triggerUpdate()}async triggerUpdate(){this.willDispatchUpdate||(this.willDispatchUpdate=!0,await new Promise(t=>requestAnimationFrame(t)),this.dispatchUpdate())}dispatchUpdate(){this.isConnected&&(this.willDispatchUpdate=!1)}}z([a.n({type:Boolean,reflect:!0})],b.prototype,"active",2);z([a.n({type:Boolean,reflect:!0})],b.prototype,"focused",2);z([a.n({type:Boolean,reflect:!0})],b.prototype,"selected",2);z([a.n({type:Boolean,reflect:!0})],b.prototype,"emphasized",2);z([a.n({type:String,reflect:!0})],b.prototype,"variant",2);z([a.n({type:String})],b.prototype,"value",1);z([L.e("slot:not([name])")],b.prototype,"contentSlot",2);z([L.e('slot[name="icon"]')],b.prototype,"iconSlot",2);z([a.n({type:Boolean,reflect:!0,attribute:"no-wrap",hasChanged(){return!1}})],b.prototype,"noWrap",2);z([L.e(".anchor")],b.prototype,"anchorElement",2);function S(r,t,o,e){var i=arguments.length,n=i<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,o):e,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(r,t,o,e);else for(var l=r.length-1;l>=0;l--)(s=r[l])&&(n=(i<3?s(n):i>3?s(t,o,n):s(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n}/**
|
|
46
46
|
* @license
|
|
47
47
|
* Copyright 2017 Google LLC
|
|
48
48
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
49
|
-
*/const F=(
|
|
49
|
+
*/const F=(r,t,o)=>{const e=new Map;for(let i=t;i<=o;i++)e.set(r[i],i);return e},j=C.e(class extends C.i{constructor(r){if(super(r),r.type!==C.t.CHILD)throw Error("repeat() can only be used in text expressions")}dt(r,t,o){let e;o===void 0?o=t:t!==void 0&&(e=t);const i=[],n=[];let s=0;for(const l of r)i[s]=e?e(l,s):s,n[s]=o(l,s),s++;return{values:n,keys:i}}render(r,t,o){return this.dt(r,t,o).values}update(r,[t,o,e]){const i=g.p(r),{values:n,keys:s}=this.dt(t,o,e);if(!Array.isArray(i))return this.ut=s,n;const l=this.ut??(this.ut=[]),c=[];let h,m,u=0,p=i.length-1,d=0,v=n.length-1;for(;u<=p&&d<=v;)if(i[u]===null)u++;else if(i[p]===null)p--;else if(l[u]===s[d])c[d]=g.v(i[u],n[d]),u++,d++;else if(l[p]===s[v])c[v]=g.v(i[p],n[v]),p--,v--;else if(l[u]===s[v])c[v]=g.v(i[u],n[v]),g.r(r,c[v+1],i[u]),u++,v--;else if(l[p]===s[d])c[d]=g.v(i[p],n[d]),g.r(r,i[u],i[p]),p--,d++;else if(h===void 0&&(h=F(s,d,v),m=F(l,u,p)),h.has(l[u]))if(h.has(l[p])){const f=m.get(s[d]),E=f!==void 0?i[f]:null;if(E===null){const O=g.r(r,i[u]);g.v(O,n[d]),c[d]=O}else c[d]=g.v(E,n[d]),g.r(r,i[u],E),i[f]=null;d++}else g.M(i[p]),p--;else g.M(i[u]),u++;for(;d<=v;){const f=g.r(r,c[v+1]);g.v(f,n[d]),c[d++]=f}for(;u<=p;){const f=i[u++];f!==null&&g.M(f)}return this.ut=s,g.m(r,c),a.T}});/**
|
|
50
50
|
* @license
|
|
51
51
|
* Copyright 2021 Google LLC
|
|
52
52
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
@@ -54,15 +54,15 @@
|
|
|
54
54
|
* @license
|
|
55
55
|
* Copyright 2021 Google LLC
|
|
56
56
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
57
|
-
*/class ct{constructor(t){this._element=null;const o=t??window;this._node=o,t&&(this._element=t)}get element(){return this._element||document.scrollingElement||document.documentElement}get scrollTop(){return this.element.scrollTop||window.scrollY}get scrollLeft(){return this.element.scrollLeft||window.scrollX}get scrollHeight(){return this.element.scrollHeight}get scrollWidth(){return this.element.scrollWidth}get viewportHeight(){return this._element?this._element.getBoundingClientRect().height:window.innerHeight}get viewportWidth(){return this._element?this._element.getBoundingClientRect().width:window.innerWidth}get maxScrollTop(){return this.scrollHeight-this.viewportHeight}get maxScrollLeft(){return this.scrollWidth-this.viewportWidth}}class ht extends ct{constructor(t,o){super(o),this._clients=new Set,this._retarget=null,this._end=null,this.__destination=null,this.correctingScrollError=!1,this._checkForArrival=this._checkForArrival.bind(this),this._updateManagedScrollTo=this._updateManagedScrollTo.bind(this),this.scrollTo=this.scrollTo.bind(this),this.scrollBy=this.scrollBy.bind(this);const e=this._node;this._originalScrollTo=e.scrollTo,this._originalScrollBy=e.scrollBy,this._originalScroll=e.scroll,this._attach(t)}get _destination(){return this.__destination}get scrolling(){return this._destination!==null}scrollTo(t,o){const e=typeof t=="number"&&typeof o=="number"?{left:t,top:o}:t;this._scrollTo(e)}scrollBy(t,o){const e=typeof t=="number"&&typeof o=="number"?{left:t,top:o}:t;e.top!==void 0&&(e.top+=this.scrollTop),e.left!==void 0&&(e.left+=this.scrollLeft),this._scrollTo(e)}_nativeScrollTo(t){this._originalScrollTo.bind(this._element||window)(t)}_scrollTo(t,o=null,e=null){this._end!==null&&this._end(),t.behavior==="smooth"?(this._setDestination(t),this._retarget=o,this._end=e):this._resetScrollState(),this._nativeScrollTo(t)}_setDestination(t){let{top:o,left:e}=t;return o=o===void 0?void 0:Math.max(0,Math.min(o,this.maxScrollTop)),e=e===void 0?void 0:Math.max(0,Math.min(e,this.maxScrollLeft)),this._destination!==null&&e===this._destination.left&&o===this._destination.top?!1:(this.__destination={top:o,left:e,behavior:"smooth"},!0)}_resetScrollState(){this.__destination=null,this._retarget=null,this._end=null}_updateManagedScrollTo(t){this._destination&&this._setDestination(t)&&this._nativeScrollTo(this._destination)}managedScrollTo(t,o,e){return this._scrollTo(t,o,e),this._updateManagedScrollTo}correctScrollError(t){this.correctingScrollError=!0,requestAnimationFrame(()=>requestAnimationFrame(()=>this.correctingScrollError=!1)),this._nativeScrollTo(t),this._retarget&&this._setDestination(this._retarget()),this._destination&&this._nativeScrollTo(this._destination)}_checkForArrival(){if(this._destination!==null){const{scrollTop:t,scrollLeft:o}=this;let{top:e,left:i}=this._destination;e=Math.min(e||0,this.maxScrollTop),i=Math.min(i||0,this.maxScrollLeft);const n=Math.abs(e-t),
|
|
57
|
+
*/class ct{constructor(t){this._element=null;const o=t??window;this._node=o,t&&(this._element=t)}get element(){return this._element||document.scrollingElement||document.documentElement}get scrollTop(){return this.element.scrollTop||window.scrollY}get scrollLeft(){return this.element.scrollLeft||window.scrollX}get scrollHeight(){return this.element.scrollHeight}get scrollWidth(){return this.element.scrollWidth}get viewportHeight(){return this._element?this._element.getBoundingClientRect().height:window.innerHeight}get viewportWidth(){return this._element?this._element.getBoundingClientRect().width:window.innerWidth}get maxScrollTop(){return this.scrollHeight-this.viewportHeight}get maxScrollLeft(){return this.scrollWidth-this.viewportWidth}}class ht extends ct{constructor(t,o){super(o),this._clients=new Set,this._retarget=null,this._end=null,this.__destination=null,this.correctingScrollError=!1,this._checkForArrival=this._checkForArrival.bind(this),this._updateManagedScrollTo=this._updateManagedScrollTo.bind(this),this.scrollTo=this.scrollTo.bind(this),this.scrollBy=this.scrollBy.bind(this);const e=this._node;this._originalScrollTo=e.scrollTo,this._originalScrollBy=e.scrollBy,this._originalScroll=e.scroll,this._attach(t)}get _destination(){return this.__destination}get scrolling(){return this._destination!==null}scrollTo(t,o){const e=typeof t=="number"&&typeof o=="number"?{left:t,top:o}:t;this._scrollTo(e)}scrollBy(t,o){const e=typeof t=="number"&&typeof o=="number"?{left:t,top:o}:t;e.top!==void 0&&(e.top+=this.scrollTop),e.left!==void 0&&(e.left+=this.scrollLeft),this._scrollTo(e)}_nativeScrollTo(t){this._originalScrollTo.bind(this._element||window)(t)}_scrollTo(t,o=null,e=null){this._end!==null&&this._end(),t.behavior==="smooth"?(this._setDestination(t),this._retarget=o,this._end=e):this._resetScrollState(),this._nativeScrollTo(t)}_setDestination(t){let{top:o,left:e}=t;return o=o===void 0?void 0:Math.max(0,Math.min(o,this.maxScrollTop)),e=e===void 0?void 0:Math.max(0,Math.min(e,this.maxScrollLeft)),this._destination!==null&&e===this._destination.left&&o===this._destination.top?!1:(this.__destination={top:o,left:e,behavior:"smooth"},!0)}_resetScrollState(){this.__destination=null,this._retarget=null,this._end=null}_updateManagedScrollTo(t){this._destination&&this._setDestination(t)&&this._nativeScrollTo(this._destination)}managedScrollTo(t,o,e){return this._scrollTo(t,o,e),this._updateManagedScrollTo}correctScrollError(t){this.correctingScrollError=!0,requestAnimationFrame(()=>requestAnimationFrame(()=>this.correctingScrollError=!1)),this._nativeScrollTo(t),this._retarget&&this._setDestination(this._retarget()),this._destination&&this._nativeScrollTo(this._destination)}_checkForArrival(){if(this._destination!==null){const{scrollTop:t,scrollLeft:o}=this;let{top:e,left:i}=this._destination;e=Math.min(e||0,this.maxScrollTop),i=Math.min(i||0,this.maxScrollLeft);const n=Math.abs(e-t),s=Math.abs(i-o);n<1&&s<1&&(this._end&&this._end(),this._resetScrollState())}}detach(t){return this._clients.delete(t),this._clients.size===0&&(this._node.scrollTo=this._originalScrollTo,this._node.scrollBy=this._originalScrollBy,this._node.scroll=this._originalScroll,this._node.removeEventListener("scroll",this._checkForArrival)),null}_attach(t){this._clients.add(t),this._clients.size===1&&(this._node.scrollTo=this.scrollTo,this._node.scrollBy=this.scrollBy,this._node.scroll=this.scrollTo,this._node.addEventListener("scroll",this._checkForArrival))}}/**
|
|
58
58
|
* @license
|
|
59
59
|
* Copyright 2021 Google LLC
|
|
60
60
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
61
|
-
*/let $=typeof window<"u"?window.ResizeObserver:void 0;const R=Symbol("virtualizerRef"),I="virtualizer-sizer";let P;class dt{constructor(t){if(this._benchmarkStart=null,this._layout=null,this._clippingAncestors=[],this._scrollSize=null,this._scrollError=null,this._childrenPos=null,this._childMeasurements=null,this._toBeMeasured=new Map,this._rangeChanged=!0,this._itemsChanged=!0,this._visibilityChanged=!0,this._scrollerController=null,this._isScroller=!1,this._sizer=null,this._hostElementRO=null,this._childrenRO=null,this._mutationObserver=null,this._scrollEventListeners=[],this._scrollEventListenerOptions={passive:!0},this._loadListener=this._childLoaded.bind(this),this._scrollIntoViewTarget=null,this._updateScrollIntoViewCoordinates=null,this._items=[],this._first=-1,this._last=-1,this._firstVisible=-1,this._lastVisible=-1,this._scheduled=new WeakSet,this._measureCallback=null,this._measureChildOverride=null,this._layoutCompletePromise=null,this._layoutCompleteResolver=null,this._layoutCompleteRejecter=null,this._pendingLayoutComplete=null,this._layoutInitialized=null,this._connected=!1,!t)throw new Error("Virtualizer constructor requires a configuration object");if(t.hostElement)this._init(t);else throw new Error('Virtualizer configuration requires the "hostElement" property')}set items(t){Array.isArray(t)&&t!==this._items&&(this._itemsChanged=!0,this._items=t,this._schedule(this._updateLayout))}_init(t){this._isScroller=!!t.scroller,this._initHostElement(t);const o=t.layout||{};this._layoutInitialized=this._initLayout(o)}_initObservers(){this._mutationObserver=new MutationObserver(this._finishDOMUpdate.bind(this)),this._hostElementRO=new $(()=>this._hostElementSizeChanged()),this._childrenRO=new $(this._childrenSizeChanged.bind(this))}_initHostElement(t){const o=this._hostElement=t.hostElement;this._applyVirtualizerStyles(),o[R]=this}connected(){this._initObservers();const t=this._isScroller;this._clippingAncestors=vt(this._hostElement,t),this._scrollerController=new ht(this,this._clippingAncestors[0]),this._schedule(this._updateLayout),this._observeAndListen(),this._connected=!0}_observeAndListen(){this._mutationObserver.observe(this._hostElement,{childList:!0}),this._hostElementRO.observe(this._hostElement),this._scrollEventListeners.push(window),window.addEventListener("scroll",this,this._scrollEventListenerOptions),this._clippingAncestors.forEach(t=>{t.addEventListener("scroll",this,this._scrollEventListenerOptions),this._scrollEventListeners.push(t),this._hostElementRO.observe(t)}),this._hostElementRO.observe(this._scrollerController.element),this._children.forEach(t=>this._childrenRO.observe(t)),this._scrollEventListeners.forEach(t=>t.addEventListener("scroll",this,this._scrollEventListenerOptions))}disconnected(){var t,o,e,i;this._scrollEventListeners.forEach(n=>n.removeEventListener("scroll",this,this._scrollEventListenerOptions)),this._scrollEventListeners=[],this._clippingAncestors=[],(t=this._scrollerController)==null||t.detach(this),this._scrollerController=null,(o=this._mutationObserver)==null||o.disconnect(),this._mutationObserver=null,(e=this._hostElementRO)==null||e.disconnect(),this._hostElementRO=null,(i=this._childrenRO)==null||i.disconnect(),this._childrenRO=null,this._rejectLayoutCompletePromise("disconnected"),this._connected=!1}_applyVirtualizerStyles(){const o=this._hostElement.style;o.display=o.display||"block",o.position=o.position||"relative",o.contain=o.contain||"size layout",this._isScroller&&(o.overflow=o.overflow||"auto",o.minHeight=o.minHeight||"150px")}_getSizer(){const t=this._hostElement;if(!this._sizer){let o=t.querySelector(`[${I}]`);o||(o=document.createElement("div"),o.setAttribute(I,""),t.appendChild(o)),Object.assign(o.style,{position:"absolute",margin:"-2px 0 0 0",padding:0,visibility:"hidden",fontSize:"2px"}),o.textContent=" ",o.setAttribute(I,""),this._sizer=o}return this._sizer}async updateLayoutConfig(t){await this._layoutInitialized;const o=t.type||P;if(typeof o=="function"&&this._layout instanceof o){const e={...t};return delete e.type,this._layout.config=e,!0}return!1}async _initLayout(t){let o,e;if(typeof t.type=="function"){e=t.type;const i={...t};delete i.type,o=i}else o=t;e===void 0&&(P=e=(await Promise.resolve().then(()=>require("../flow-DM3dNAKs.cjs"))).FlowLayout),this._layout=new e(i=>this._handleLayoutMessage(i),o),this._layout.measureChildren&&typeof this._layout.updateItemSizes=="function"&&(typeof this._layout.measureChildren=="function"&&(this._measureChildOverride=this._layout.measureChildren),this._measureCallback=this._layout.updateItemSizes.bind(this._layout)),this._layout.listenForChildLoadEvents&&this._hostElement.addEventListener("load",this._loadListener,!0),this._schedule(this._updateLayout)}startBenchmarking(){this._benchmarkStart===null&&(this._benchmarkStart=window.performance.now())}stopBenchmarking(){if(this._benchmarkStart!==null){const t=window.performance.now(),o=t-this._benchmarkStart,i=performance.getEntriesByName("uv-virtualizing","measure").filter(n=>n.startTime>=this._benchmarkStart&&n.startTime<t).reduce((n,l)=>n+l.duration,0);return this._benchmarkStart=null,{timeElapsed:o,virtualizationTime:i}}return null}_measureChildren(){const t={},o=this._children,e=this._measureChildOverride||this._measureChild;for(let i=0;i<o.length;i++){const n=o[i],l=this._first+i;(this._itemsChanged||this._toBeMeasured.has(n))&&(t[l]=e.call(this,n,this._items[l]))}this._childMeasurements=t,this._schedule(this._updateLayout),this._toBeMeasured.clear()}_measureChild(t){const{width:o,height:e}=t.getBoundingClientRect();return Object.assign({width:o,height:e},ut(t))}async _schedule(t){this._scheduled.has(t)||(this._scheduled.add(t),await Promise.resolve(),this._scheduled.delete(t),t.call(this))}async _updateDOM(t){this._scrollSize=t.scrollSize,this._adjustRange(t.range),this._childrenPos=t.childPositions,this._scrollError=t.scrollError||null;const{_rangeChanged:o,_itemsChanged:e}=this;this._visibilityChanged&&(this._notifyVisibility(),this._visibilityChanged=!1),(o||e)&&(this._notifyRange(),this._rangeChanged=!1),this._finishDOMUpdate()}_finishDOMUpdate(){this._connected&&(this._children.forEach(t=>this._childrenRO.observe(t)),this._checkScrollIntoViewTarget(this._childrenPos),this._positionChildren(this._childrenPos),this._sizeHostElement(this._scrollSize),this._correctScrollError(),this._benchmarkStart&&"mark"in window.performance&&window.performance.mark("uv-end"))}_updateLayout(){this._layout&&this._connected&&(this._layout.items=this._items,this._updateView(),this._childMeasurements!==null&&(this._measureCallback&&this._measureCallback(this._childMeasurements),this._childMeasurements=null),this._layout.reflowIfNeeded(),this._benchmarkStart&&"mark"in window.performance&&window.performance.mark("uv-end"))}_handleScrollEvent(){var t;if(this._benchmarkStart&&"mark"in window.performance){try{window.performance.measure("uv-virtualizing","uv-start","uv-end")}catch(o){console.warn("Error measuring performance data: ",o)}window.performance.mark("uv-start")}this._scrollerController.correctingScrollError===!1&&((t=this._layout)==null||t.unpin()),this._schedule(this._updateLayout)}handleEvent(t){switch(t.type){case"scroll":(t.currentTarget===window||this._clippingAncestors.includes(t.currentTarget))&&this._handleScrollEvent();break;default:console.warn("event not handled",t)}}_handleLayoutMessage(t){t.type==="stateChanged"?this._updateDOM(t):t.type==="visibilityChanged"?(this._firstVisible=t.firstVisible,this._lastVisible=t.lastVisible,this._notifyVisibility()):t.type==="unpinned"&&this._hostElement.dispatchEvent(new M)}get _children(){const t=[];let o=this._hostElement.firstElementChild;for(;o;)o.hasAttribute(I)||t.push(o),o=o.nextElementSibling;return t}_updateView(){var i;const t=this._hostElement,o=(i=this._scrollerController)==null?void 0:i.element,e=this._layout;if(t&&o&&e){let n,l,r,c;const h=t.getBoundingClientRect();n=0,l=0,r=window.innerHeight,c=window.innerWidth;const f=this._clippingAncestors.map(y=>y.getBoundingClientRect());f.unshift(h);for(const y of f)n=Math.max(n,y.top),l=Math.max(l,y.left),r=Math.min(r,y.bottom),c=Math.min(c,y.right);const u=o.getBoundingClientRect(),p={left:h.left-u.left,top:h.top-u.top},d={width:o.scrollWidth,height:o.scrollHeight},v=n-h.top+t.scrollTop,m=l-h.left+t.scrollLeft,E=Math.max(0,r-n),O=Math.max(0,c-l);e.viewportSize={width:O,height:E},e.viewportScroll={top:v,left:m},e.totalScrollSize=d,e.offsetWithinScroller=p}}_sizeHostElement(t){const e=t&&t.width!==null?Math.min(82e5,t.width):0,i=t&&t.height!==null?Math.min(82e5,t.height):0;if(this._isScroller)this._getSizer().style.transform=`translate(${e}px, ${i}px)`;else{const n=this._hostElement.style;n.minWidth=e?`${e}px`:"100%",n.minHeight=i?`${i}px`:"100%"}}_positionChildren(t){t&&t.forEach(({top:o,left:e,width:i,height:n,xOffset:l,yOffset:r},c)=>{const h=this._children[c-this._first];h&&(h.style.position="absolute",h.style.boxSizing="border-box",h.style.transform=`translate(${e}px, ${o}px)`,i!==void 0&&(h.style.width=i+"px"),n!==void 0&&(h.style.height=n+"px"),h.style.left=l===void 0?null:l+"px",h.style.top=r===void 0?null:r+"px")})}async _adjustRange(t){const{_first:o,_last:e,_firstVisible:i,_lastVisible:n}=this;this._first=t.first,this._last=t.last,this._firstVisible=t.firstVisible,this._lastVisible=t.lastVisible,this._rangeChanged=this._rangeChanged||this._first!==o||this._last!==e,this._visibilityChanged=this._visibilityChanged||this._firstVisible!==i||this._lastVisible!==n}_correctScrollError(){if(this._scrollError){const{scrollTop:t,scrollLeft:o}=this._scrollerController,{top:e,left:i}=this._scrollError;this._scrollError=null,this._scrollerController.correctScrollError({top:t-e,left:o-i})}}element(t){var o;return t===1/0&&(t=this._items.length-1),((o=this._items)==null?void 0:o[t])===void 0?void 0:{scrollIntoView:(e={})=>this._scrollElementIntoView({...e,index:t})}}_scrollElementIntoView(t){if(t.index>=this._first&&t.index<=this._last)this._children[t.index-this._first].scrollIntoView(t);else if(t.index=Math.min(t.index,this._items.length-1),t.behavior==="smooth"){const o=this._layout.getScrollIntoViewCoordinates(t),{behavior:e}=t;this._updateScrollIntoViewCoordinates=this._scrollerController.managedScrollTo(Object.assign(o,{behavior:e}),()=>this._layout.getScrollIntoViewCoordinates(t),()=>this._scrollIntoViewTarget=null),this._scrollIntoViewTarget=t}else this._layout.pin=t}_checkScrollIntoViewTarget(t){const{index:o}=this._scrollIntoViewTarget||{};o&&(t!=null&&t.has(o))&&this._updateScrollIntoViewCoordinates(this._layout.getScrollIntoViewCoordinates(this._scrollIntoViewTarget))}_notifyRange(){this._hostElement.dispatchEvent(new T({first:this._first,last:this._last}))}_notifyVisibility(){this._hostElement.dispatchEvent(new V({first:this._firstVisible,last:this._lastVisible}))}get layoutComplete(){return this._layoutCompletePromise||(this._layoutCompletePromise=new Promise((t,o)=>{this._layoutCompleteResolver=t,this._layoutCompleteRejecter=o})),this._layoutCompletePromise}_rejectLayoutCompletePromise(t){this._layoutCompleteRejecter!==null&&this._layoutCompleteRejecter(t),this._resetLayoutCompleteState()}_scheduleLayoutComplete(){this._layoutCompletePromise&&this._pendingLayoutComplete===null&&(this._pendingLayoutComplete=requestAnimationFrame(()=>requestAnimationFrame(()=>this._resolveLayoutCompletePromise())))}_resolveLayoutCompletePromise(){this._layoutCompleteResolver!==null&&this._layoutCompleteResolver(),this._resetLayoutCompleteState()}_resetLayoutCompleteState(){this._layoutCompletePromise=null,this._layoutCompleteResolver=null,this._layoutCompleteRejecter=null,this._pendingLayoutComplete=null}_hostElementSizeChanged(){this._schedule(this._updateLayout)}_childLoaded(){}_childrenSizeChanged(t){var o;if((o=this._layout)!=null&&o.measureChildren){for(const e of t)this._toBeMeasured.set(e.target,e.contentRect);this._measureChildren()}this._scheduleLayoutComplete(),this._itemsChanged=!1,this._rangeChanged=!1}}function ut(s){const t=window.getComputedStyle(s);return{marginTop:A(t.marginTop),marginRight:A(t.marginRight),marginBottom:A(t.marginBottom),marginLeft:A(t.marginLeft)}}function A(s){const t=s?parseFloat(s):NaN;return Number.isNaN(t)?0:t}function B(s){if(s.assignedSlot!==null)return s.assignedSlot;if(s.parentElement!==null)return s.parentElement;const t=s.parentNode;return t&&t.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&t.host||null}function pt(s,t=!1){const o=[];let e=t?s:B(s);for(;e!==null;)o.push(e),e=B(e);return o}function vt(s,t=!1){let o=!1;return pt(s,t).filter(e=>{if(o)return!1;const i=getComputedStyle(e);return o=i.position==="fixed",i.overflow!=="visible"})}/**
|
|
61
|
+
*/let $=typeof window<"u"?window.ResizeObserver:void 0;const R=Symbol("virtualizerRef"),I="virtualizer-sizer";let P;class dt{constructor(t){if(this._benchmarkStart=null,this._layout=null,this._clippingAncestors=[],this._scrollSize=null,this._scrollError=null,this._childrenPos=null,this._childMeasurements=null,this._toBeMeasured=new Map,this._rangeChanged=!0,this._itemsChanged=!0,this._visibilityChanged=!0,this._scrollerController=null,this._isScroller=!1,this._sizer=null,this._hostElementRO=null,this._childrenRO=null,this._mutationObserver=null,this._scrollEventListeners=[],this._scrollEventListenerOptions={passive:!0},this._loadListener=this._childLoaded.bind(this),this._scrollIntoViewTarget=null,this._updateScrollIntoViewCoordinates=null,this._items=[],this._first=-1,this._last=-1,this._firstVisible=-1,this._lastVisible=-1,this._scheduled=new WeakSet,this._measureCallback=null,this._measureChildOverride=null,this._layoutCompletePromise=null,this._layoutCompleteResolver=null,this._layoutCompleteRejecter=null,this._pendingLayoutComplete=null,this._layoutInitialized=null,this._connected=!1,!t)throw new Error("Virtualizer constructor requires a configuration object");if(t.hostElement)this._init(t);else throw new Error('Virtualizer configuration requires the "hostElement" property')}set items(t){Array.isArray(t)&&t!==this._items&&(this._itemsChanged=!0,this._items=t,this._schedule(this._updateLayout))}_init(t){this._isScroller=!!t.scroller,this._initHostElement(t);const o=t.layout||{};this._layoutInitialized=this._initLayout(o)}_initObservers(){this._mutationObserver=new MutationObserver(this._finishDOMUpdate.bind(this)),this._hostElementRO=new $(()=>this._hostElementSizeChanged()),this._childrenRO=new $(this._childrenSizeChanged.bind(this))}_initHostElement(t){const o=this._hostElement=t.hostElement;this._applyVirtualizerStyles(),o[R]=this}connected(){this._initObservers();const t=this._isScroller;this._clippingAncestors=vt(this._hostElement,t),this._scrollerController=new ht(this,this._clippingAncestors[0]),this._schedule(this._updateLayout),this._observeAndListen(),this._connected=!0}_observeAndListen(){this._mutationObserver.observe(this._hostElement,{childList:!0}),this._hostElementRO.observe(this._hostElement),this._scrollEventListeners.push(window),window.addEventListener("scroll",this,this._scrollEventListenerOptions),this._clippingAncestors.forEach(t=>{t.addEventListener("scroll",this,this._scrollEventListenerOptions),this._scrollEventListeners.push(t),this._hostElementRO.observe(t)}),this._hostElementRO.observe(this._scrollerController.element),this._children.forEach(t=>this._childrenRO.observe(t)),this._scrollEventListeners.forEach(t=>t.addEventListener("scroll",this,this._scrollEventListenerOptions))}disconnected(){var t,o,e,i;this._scrollEventListeners.forEach(n=>n.removeEventListener("scroll",this,this._scrollEventListenerOptions)),this._scrollEventListeners=[],this._clippingAncestors=[],(t=this._scrollerController)==null||t.detach(this),this._scrollerController=null,(o=this._mutationObserver)==null||o.disconnect(),this._mutationObserver=null,(e=this._hostElementRO)==null||e.disconnect(),this._hostElementRO=null,(i=this._childrenRO)==null||i.disconnect(),this._childrenRO=null,this._rejectLayoutCompletePromise("disconnected"),this._connected=!1}_applyVirtualizerStyles(){const o=this._hostElement.style;o.display=o.display||"block",o.position=o.position||"relative",o.contain=o.contain||"size layout",this._isScroller&&(o.overflow=o.overflow||"auto",o.minHeight=o.minHeight||"150px")}_getSizer(){const t=this._hostElement;if(!this._sizer){let o=t.querySelector(`[${I}]`);o||(o=document.createElement("div"),o.setAttribute(I,""),t.appendChild(o)),Object.assign(o.style,{position:"absolute",margin:"-2px 0 0 0",padding:0,visibility:"hidden",fontSize:"2px"}),o.textContent=" ",o.setAttribute(I,""),this._sizer=o}return this._sizer}async updateLayoutConfig(t){await this._layoutInitialized;const o=t.type||P;if(typeof o=="function"&&this._layout instanceof o){const e={...t};return delete e.type,this._layout.config=e,!0}return!1}async _initLayout(t){let o,e;if(typeof t.type=="function"){e=t.type;const i={...t};delete i.type,o=i}else o=t;e===void 0&&(P=e=(await Promise.resolve().then(()=>require("../flow-DM3dNAKs.cjs"))).FlowLayout),this._layout=new e(i=>this._handleLayoutMessage(i),o),this._layout.measureChildren&&typeof this._layout.updateItemSizes=="function"&&(typeof this._layout.measureChildren=="function"&&(this._measureChildOverride=this._layout.measureChildren),this._measureCallback=this._layout.updateItemSizes.bind(this._layout)),this._layout.listenForChildLoadEvents&&this._hostElement.addEventListener("load",this._loadListener,!0),this._schedule(this._updateLayout)}startBenchmarking(){this._benchmarkStart===null&&(this._benchmarkStart=window.performance.now())}stopBenchmarking(){if(this._benchmarkStart!==null){const t=window.performance.now(),o=t-this._benchmarkStart,i=performance.getEntriesByName("uv-virtualizing","measure").filter(n=>n.startTime>=this._benchmarkStart&&n.startTime<t).reduce((n,s)=>n+s.duration,0);return this._benchmarkStart=null,{timeElapsed:o,virtualizationTime:i}}return null}_measureChildren(){const t={},o=this._children,e=this._measureChildOverride||this._measureChild;for(let i=0;i<o.length;i++){const n=o[i],s=this._first+i;(this._itemsChanged||this._toBeMeasured.has(n))&&(t[s]=e.call(this,n,this._items[s]))}this._childMeasurements=t,this._schedule(this._updateLayout),this._toBeMeasured.clear()}_measureChild(t){const{width:o,height:e}=t.getBoundingClientRect();return Object.assign({width:o,height:e},ut(t))}async _schedule(t){this._scheduled.has(t)||(this._scheduled.add(t),await Promise.resolve(),this._scheduled.delete(t),t.call(this))}async _updateDOM(t){this._scrollSize=t.scrollSize,this._adjustRange(t.range),this._childrenPos=t.childPositions,this._scrollError=t.scrollError||null;const{_rangeChanged:o,_itemsChanged:e}=this;this._visibilityChanged&&(this._notifyVisibility(),this._visibilityChanged=!1),(o||e)&&(this._notifyRange(),this._rangeChanged=!1),this._finishDOMUpdate()}_finishDOMUpdate(){this._connected&&(this._children.forEach(t=>this._childrenRO.observe(t)),this._checkScrollIntoViewTarget(this._childrenPos),this._positionChildren(this._childrenPos),this._sizeHostElement(this._scrollSize),this._correctScrollError(),this._benchmarkStart&&"mark"in window.performance&&window.performance.mark("uv-end"))}_updateLayout(){this._layout&&this._connected&&(this._layout.items=this._items,this._updateView(),this._childMeasurements!==null&&(this._measureCallback&&this._measureCallback(this._childMeasurements),this._childMeasurements=null),this._layout.reflowIfNeeded(),this._benchmarkStart&&"mark"in window.performance&&window.performance.mark("uv-end"))}_handleScrollEvent(){var t;if(this._benchmarkStart&&"mark"in window.performance){try{window.performance.measure("uv-virtualizing","uv-start","uv-end")}catch(o){console.warn("Error measuring performance data: ",o)}window.performance.mark("uv-start")}this._scrollerController.correctingScrollError===!1&&((t=this._layout)==null||t.unpin()),this._schedule(this._updateLayout)}handleEvent(t){switch(t.type){case"scroll":(t.currentTarget===window||this._clippingAncestors.includes(t.currentTarget))&&this._handleScrollEvent();break;default:console.warn("event not handled",t)}}_handleLayoutMessage(t){t.type==="stateChanged"?this._updateDOM(t):t.type==="visibilityChanged"?(this._firstVisible=t.firstVisible,this._lastVisible=t.lastVisible,this._notifyVisibility()):t.type==="unpinned"&&this._hostElement.dispatchEvent(new M)}get _children(){const t=[];let o=this._hostElement.firstElementChild;for(;o;)o.hasAttribute(I)||t.push(o),o=o.nextElementSibling;return t}_updateView(){var i;const t=this._hostElement,o=(i=this._scrollerController)==null?void 0:i.element,e=this._layout;if(t&&o&&e){let n,s,l,c;const h=t.getBoundingClientRect();n=0,s=0,l=window.innerHeight,c=window.innerWidth;const m=this._clippingAncestors.map(k=>k.getBoundingClientRect());m.unshift(h);for(const k of m)n=Math.max(n,k.top),s=Math.max(s,k.left),l=Math.min(l,k.bottom),c=Math.min(c,k.right);const u=o.getBoundingClientRect(),p={left:h.left-u.left,top:h.top-u.top},d={width:o.scrollWidth,height:o.scrollHeight},v=n-h.top+t.scrollTop,f=s-h.left+t.scrollLeft,E=Math.max(0,l-n),O=Math.max(0,c-s);e.viewportSize={width:O,height:E},e.viewportScroll={top:v,left:f},e.totalScrollSize=d,e.offsetWithinScroller=p}}_sizeHostElement(t){const e=t&&t.width!==null?Math.min(82e5,t.width):0,i=t&&t.height!==null?Math.min(82e5,t.height):0;if(this._isScroller)this._getSizer().style.transform=`translate(${e}px, ${i}px)`;else{const n=this._hostElement.style;n.minWidth=e?`${e}px`:"100%",n.minHeight=i?`${i}px`:"100%"}}_positionChildren(t){t&&t.forEach(({top:o,left:e,width:i,height:n,xOffset:s,yOffset:l},c)=>{const h=this._children[c-this._first];h&&(h.style.position="absolute",h.style.boxSizing="border-box",h.style.transform=`translate(${e}px, ${o}px)`,i!==void 0&&(h.style.width=i+"px"),n!==void 0&&(h.style.height=n+"px"),h.style.left=s===void 0?null:s+"px",h.style.top=l===void 0?null:l+"px")})}async _adjustRange(t){const{_first:o,_last:e,_firstVisible:i,_lastVisible:n}=this;this._first=t.first,this._last=t.last,this._firstVisible=t.firstVisible,this._lastVisible=t.lastVisible,this._rangeChanged=this._rangeChanged||this._first!==o||this._last!==e,this._visibilityChanged=this._visibilityChanged||this._firstVisible!==i||this._lastVisible!==n}_correctScrollError(){if(this._scrollError){const{scrollTop:t,scrollLeft:o}=this._scrollerController,{top:e,left:i}=this._scrollError;this._scrollError=null,this._scrollerController.correctScrollError({top:t-e,left:o-i})}}element(t){var o;return t===1/0&&(t=this._items.length-1),((o=this._items)==null?void 0:o[t])===void 0?void 0:{scrollIntoView:(e={})=>this._scrollElementIntoView({...e,index:t})}}_scrollElementIntoView(t){if(t.index>=this._first&&t.index<=this._last)this._children[t.index-this._first].scrollIntoView(t);else if(t.index=Math.min(t.index,this._items.length-1),t.behavior==="smooth"){const o=this._layout.getScrollIntoViewCoordinates(t),{behavior:e}=t;this._updateScrollIntoViewCoordinates=this._scrollerController.managedScrollTo(Object.assign(o,{behavior:e}),()=>this._layout.getScrollIntoViewCoordinates(t),()=>this._scrollIntoViewTarget=null),this._scrollIntoViewTarget=t}else this._layout.pin=t}_checkScrollIntoViewTarget(t){const{index:o}=this._scrollIntoViewTarget||{};o&&(t!=null&&t.has(o))&&this._updateScrollIntoViewCoordinates(this._layout.getScrollIntoViewCoordinates(this._scrollIntoViewTarget))}_notifyRange(){this._hostElement.dispatchEvent(new T({first:this._first,last:this._last}))}_notifyVisibility(){this._hostElement.dispatchEvent(new V({first:this._firstVisible,last:this._lastVisible}))}get layoutComplete(){return this._layoutCompletePromise||(this._layoutCompletePromise=new Promise((t,o)=>{this._layoutCompleteResolver=t,this._layoutCompleteRejecter=o})),this._layoutCompletePromise}_rejectLayoutCompletePromise(t){this._layoutCompleteRejecter!==null&&this._layoutCompleteRejecter(t),this._resetLayoutCompleteState()}_scheduleLayoutComplete(){this._layoutCompletePromise&&this._pendingLayoutComplete===null&&(this._pendingLayoutComplete=requestAnimationFrame(()=>requestAnimationFrame(()=>this._resolveLayoutCompletePromise())))}_resolveLayoutCompletePromise(){this._layoutCompleteResolver!==null&&this._layoutCompleteResolver(),this._resetLayoutCompleteState()}_resetLayoutCompleteState(){this._layoutCompletePromise=null,this._layoutCompleteResolver=null,this._layoutCompleteRejecter=null,this._pendingLayoutComplete=null}_hostElementSizeChanged(){this._schedule(this._updateLayout)}_childLoaded(){}_childrenSizeChanged(t){var o;if((o=this._layout)!=null&&o.measureChildren){for(const e of t)this._toBeMeasured.set(e.target,e.contentRect);this._measureChildren()}this._scheduleLayoutComplete(),this._itemsChanged=!1,this._rangeChanged=!1}}function ut(r){const t=window.getComputedStyle(r);return{marginTop:A(t.marginTop),marginRight:A(t.marginRight),marginBottom:A(t.marginBottom),marginLeft:A(t.marginLeft)}}function A(r){const t=r?parseFloat(r):NaN;return Number.isNaN(t)?0:t}function B(r){if(r.assignedSlot!==null)return r.assignedSlot;if(r.parentElement!==null)return r.parentElement;const t=r.parentNode;return t&&t.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&t.host||null}function pt(r,t=!1){const o=[];let e=t?r:B(r);for(;e!==null;)o.push(e),e=B(e);return o}function vt(r,t=!1){let o=!1;return pt(r,t).filter(e=>{if(o)return!1;const i=getComputedStyle(e);return o=i.position==="fixed",i.overflow!=="visible"})}/**
|
|
62
62
|
* @license
|
|
63
63
|
* Copyright 2021 Google LLC
|
|
64
64
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
65
|
-
*/const U=
|
|
65
|
+
*/const U=r=>r,q=(r,t)=>a.x`${t}: ${JSON.stringify(r,null,2)}`;class mt extends Y.f{constructor(t){if(super(t),this._virtualizer=null,this._first=0,this._last=-1,this._renderItem=(o,e)=>q(o,e+this._first),this._keyFunction=(o,e)=>U(o,e+this._first),this._items=[],t.type!==C.t.CHILD)throw new Error("The virtualize directive can only be used in child expressions")}render(t){t&&this._setFunctions(t);const o=[];if(this._first>=0&&this._last>=this._first)for(let e=this._first;e<=this._last;e++)o.push(this._items[e]);return j(o,this._keyFunction,this._renderItem)}update(t,[o]){this._setFunctions(o);const e=this._items!==o.items;return this._items=o.items||[],this._virtualizer?this._updateVirtualizerConfig(t,o):this._initialize(t,o),e?a.T:this.render()}async _updateVirtualizerConfig(t,o){if(!await this._virtualizer.updateLayoutConfig(o.layout||{})){const i=t.parentNode;this._makeVirtualizer(i,o)}this._virtualizer.items=this._items}_setFunctions(t){const{renderItem:o,keyFunction:e}=t;o&&(this._renderItem=(i,n)=>o(i,n+this._first)),e&&(this._keyFunction=(i,n)=>e(i,n+this._first))}_makeVirtualizer(t,o){this._virtualizer&&this._virtualizer.disconnected();const{layout:e,scroller:i,items:n}=o;this._virtualizer=new dt({hostElement:t,layout:e,scroller:i}),this._virtualizer.items=n,this._virtualizer.connected()}_initialize(t,o){const e=t.parentNode;e&&e.nodeType===1&&(e.addEventListener("rangeChanged",i=>{this._first=i.first,this._last=i.last,this.setValue(this.render())}),this._makeVirtualizer(e,o))}disconnected(){var t;(t=this._virtualizer)==null||t.disconnected()}reconnected(){var t;(t=this._virtualizer)==null||t.connected()}}const ft=C.e(mt);/**
|
|
66
66
|
* @license
|
|
67
67
|
* Copyright 2021 Google LLC
|
|
68
68
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
@@ -70,35 +70,35 @@
|
|
|
70
70
|
* @license
|
|
71
71
|
* Copyright 2021 Google LLC
|
|
72
72
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
73
|
-
*/customElements.define("lit-virtualizer",w);const gt=":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}";class N extends D.SizedMixin(a.LuzmoElement,{validSizes:["s","m","l"]}){static get styles(){return[a.r(tt.dividerStyles),a.r(gt)]}firstUpdated(t){super.firstUpdated(t),this.setAttribute("role","separator")}}const bt=":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;--pending-height: var(--option-min-height);--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;align-items:center;height:var(--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}";var _t=Object.defineProperty,k=(s,t,o,e)=>{for(var i=void 0,n=s.length-1,l;n>=0;n--)(l=s[n])&&(i=l(t,o,i)||i);return i&&_t(t,o,i),i};const H=25;function zt(s,t){return!!t&&(s===t||s.contains(t))}class _ extends D.SizedMixin(a.LuzmoElement,{noDefaultSize:!0}){constructor(){super(),this.label="",this.variant="highlight",this.selects="single",this.emphasized=!1,this.pending=!1,this.options=[],this.value=[],this.focusedOptionIndex=0,this._selectedOptions=[],this._firstVisibleIndex=0,this.addEventListener("focusin",this.handleFocusin),this.addEventListener("blur",this.handleBlur)}static get styles(){return[a.r(bt)]}get _virtualizeActive(){return this.options.length>H}firstUpdated(t){super.firstUpdated(t),this.hasAttribute("tabindex")||(this.tabIndex=0);const o=[new Promise(e=>requestAnimationFrame(()=>e(!0)))];[...this.children].forEach(e=>{e.localName==="luzmo-option"&&o.push(e.updateComplete)}),this.optionElementsUpdated=Promise.all(o)}willUpdate(t){var e;t.has("selects")&&this.selects==="single"&&((e=this.value)==null?void 0:e.length)>1&&(this.value=this.value.slice(0,1))}updated(t){super.updated(t),t.has("label")&&(this.label||t.get("label")!==void 0)&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}async getUpdateComplete(){const t=await super.getUpdateComplete();return await this.optionElementsUpdated,t}focus({preventScroll:t}={}){super.focus({preventScroll:t}),this.focusOptionByOffset(0)}_removeFocusedPropertyOnOptions(){requestAnimationFrame(()=>{this.visibleOptionElements.forEach(t=>{t.focused=!1})})}scrollToTop(){this.scrollTop=0}handleFocusin(){this.startListeningToKeyboard()}handleBlur(t){zt(this,t.relatedTarget)||(this.stopListeningToKeyboard(),this._removeFocusedPropertyOnOptions(),this.removeAttribute("aria-activedescendant"))}startListeningToKeyboard(){this.addEventListener("keydown",this.handleKeydown)}stopListeningToKeyboard(){this.removeEventListener("keydown",this.handleKeydown)}handleKeydown(t){var n;if(t.defaultPrevented)return;const o=this.focusedOptionIndex,e=[...this.visibleOptionElements].find(l=>{var r,c,h,f;return((r=l.value)==null?void 0:r.toString())===((f=(h=(c=this.options)==null?void 0:c[o])==null?void 0:h.value)==null?void 0:f.toString())}),{key:i}=t;if(i==="Tab"){this.prepareToCleanUp();return}if(i===" "||i==="Enter"){t.preventDefault(),e&&this.toggleOption(t,(n=this.options)==null?void 0:n[o]);return}if(i==="ArrowDown"||i==="ArrowUp"){t.preventDefault(),this.navigateWithinOptions(t,e);return}}navigateWithinOptions(t,o){const{key:e}=t,i=e==="ArrowDown"?1:-1;t.preventDefault(),t.stopPropagation();const n=this.focusOptionByOffset(i,o,!0);n!==o&&(this._virtualizeActive||n==null||n.scrollIntoView({block:"nearest"}))}focusOptionByOffset(t,o,e){var u;const i=t||1;o&&(o.focused=!1);const n=this.focusedOptionIndex;this.focusedOptionIndex=this.options.length>0?(this.options.length+this.focusedOptionIndex+t)%this.options.length:0;let l=this.options[this.focusedOptionIndex],r=this.options.length;for(;(l!=null&&l.disabled||l!=null&&l.divider)&&r;)r-=1,this.focusedOptionIndex=(this.options.length+this.focusedOptionIndex+i)%this.options.length,l=this.options[this.focusedOptionIndex];const c=n<this.focusedOptionIndex&&t===-1,h=n>this.focusedOptionIndex&&t===1;(c||h)&&(this.focusedOptionIndex=n,this.dispatchEvent(new Event(`luzmo-exceeded-${c?"top":"bottom"}`,{bubbles:!0,composed:!0,cancelable:!0})));let f;return e&&this._virtualizeActive&&(f=[...this.visibleOptionElements].find(p=>{var d,v,m;return((d=p.value)==null?void 0:d.toString())===((m=(v=this.options[this.focusedOptionIndex])==null?void 0:v.value)==null?void 0:m.toString())}),f||(this.focusedOptionIndex=this._firstVisibleIndex)),this._virtualizeActive&&e&&((u=this.virtualizer.element(this.focusedOptionIndex))==null||u.scrollIntoView({behavior:"smooth",block:"nearest"})),f=f??[...this.visibleOptionElements].find(p=>{var d,v,m;return((d=p.value)==null?void 0:d.toString())===((m=(v=this.options[this.focusedOptionIndex])==null?void 0:v.value)==null?void 0:m.toString())}),l!=null&&l.disabled||this.setFocusedAndActiveDescendant(f),f}updateSelectedItemIndex(){this.focusedOptionIndex=this._virtualizeActive?this._firstVisibleIndex:0}setSelectedOptionsFromValue(){this._selectedOptions=this.options.filter(t=>{var o;return typeof(t==null?void 0:t.value)=="string"&&((o=this.value)==null?void 0:o.includes(t==null?void 0:t.value))})}visibilityChanged(t){this._firstVisibleIndex=(t==null?void 0:t.first)??0}rangeChange(t){t.stopPropagation(),t.preventDefault(),(t==null?void 0:t.first)!==-1&&(t==null?void 0:t.last)!==-1&&this.dispatchEvent(new CustomEvent("luzmo-scrolled",{bubbles:!0,composed:!0,cancelable:!0,detail:{first:t.first,last:t.last}}))}async toggleOption(t,o){const e=t instanceof KeyboardEvent,i=this.options.findIndex(l=>(l==null?void 0:l.value)===(o==null?void 0:o.value));this.focusedOptionIndex=i,this.visibleOptionElements.forEach(l=>{var r,c;if(e){const h=((r=l.value)==null?void 0:r.toString())===((c=o==null?void 0:o.value)==null?void 0:c.toString());l.focused=h,h&&this.setFocusedAndActiveDescendant(l)}else l.focused=!1});const n=(this.value??[]).includes(o==null?void 0:o.value);this.selects==="single"?(this.value=[o==null?void 0:o.value],this._selectedOptions=[o]):(this.value=n?this.value.filter(l=>l!==(o==null?void 0:o.value)):[...this.value??[],o==null?void 0:o.value],this._selectedOptions=n?this._selectedOptions.filter(l=>l.value!==o.value):[...this._selectedOptions,o]),await this.updateComplete,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0,detail:{value:this.value??[]}})),this.prepareToCleanUp()}handleOptionClick(t,o){this.toggleOption(o,t)}render(){const t=r=>a.x`<luzmo-icon
|
|
73
|
+
*/customElements.define("lit-virtualizer",w);const gt=":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}";class N extends D.SizedMixin(a.LuzmoElement,{validSizes:["s","m","l"]}){static get styles(){return[a.r(tt.dividerStyles),a.r(gt)]}firstUpdated(t){super.firstUpdated(t),this.setAttribute("role","separator")}}const bt=":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;--pending-height: var(--option-min-height);--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;align-items:center;height:var(--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}";var _t=Object.defineProperty,y=(r,t,o,e)=>{for(var i=void 0,n=r.length-1,s;n>=0;n--)(s=r[n])&&(i=s(t,o,i)||i);return i&&_t(t,o,i),i};const H=25;function zt(r,t){return!!t&&(r===t||r.contains(t))}class _ extends D.SizedMixin(a.LuzmoElement,{noDefaultSize:!0}){constructor(){super(),this.label="",this.variant="highlight",this.selects="single",this.emphasized=!1,this.pending=!1,this.options=[],this.value=[],this.focusedOptionIndex=0,this._selectedOptions=[],this._firstVisibleIndex=0,this.addEventListener("focusin",this.handleFocusin),this.addEventListener("blur",this.handleBlur)}static get styles(){return[a.r(bt)]}get _virtualizeActive(){return this.options.length>H}firstUpdated(t){super.firstUpdated(t),this.hasAttribute("tabindex")||(this.tabIndex=0);const o=[new Promise(e=>requestAnimationFrame(()=>e(!0)))];[...this.children].forEach(e=>{e.localName==="luzmo-option"&&o.push(e.updateComplete)}),this.optionElementsUpdated=Promise.all(o)}willUpdate(t){var e;t.has("selects")&&this.selects==="single"&&((e=this.value)==null?void 0:e.length)>1&&(this.value=this.value.slice(0,1))}updated(t){super.updated(t),t.has("label")&&(this.label||t.get("label")!==void 0)&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}async getUpdateComplete(){const t=await super.getUpdateComplete();return await this.optionElementsUpdated,t}focus({preventScroll:t}={}){super.focus({preventScroll:t}),this.focusOptionByOffset(0)}_removeFocusedPropertyOnOptions(){requestAnimationFrame(()=>{this.visibleOptionElements.forEach(t=>{t.focused=!1})})}scrollToTop(){this.scrollTop=0}handleFocusin(){this.startListeningToKeyboard()}handleBlur(t){zt(this,t.relatedTarget)||(this.stopListeningToKeyboard(),this._removeFocusedPropertyOnOptions(),this.removeAttribute("aria-activedescendant"))}startListeningToKeyboard(){this.addEventListener("keydown",this.handleKeydown)}stopListeningToKeyboard(){this.removeEventListener("keydown",this.handleKeydown)}handleKeydown(t){var n;if(t.defaultPrevented)return;const o=this.focusedOptionIndex,e=[...this.visibleOptionElements].find(s=>{var l,c,h,m;return((l=s.value)==null?void 0:l.toString())===((m=(h=(c=this.options)==null?void 0:c[o])==null?void 0:h.value)==null?void 0:m.toString())}),{key:i}=t;if(i==="Tab"){this.prepareToCleanUp();return}if(i===" "||i==="Enter"){t.preventDefault(),e&&this.toggleOption(t,(n=this.options)==null?void 0:n[o]);return}if(i==="ArrowDown"||i==="ArrowUp"){t.preventDefault(),this.navigateWithinOptions(t,e);return}}navigateWithinOptions(t,o){const{key:e}=t,i=e==="ArrowDown"?1:-1;t.preventDefault(),t.stopPropagation();const n=this.focusOptionByOffset(i,o,!0);n!==o&&(this._virtualizeActive||n==null||n.scrollIntoView({block:"nearest"}))}focusOptionByOffset(t,o,e){var u;const i=t||1;o&&(o.focused=!1);const n=this.focusedOptionIndex;this.focusedOptionIndex=this.options.length>0?(this.options.length+this.focusedOptionIndex+t)%this.options.length:0;let s=this.options[this.focusedOptionIndex],l=this.options.length;for(;(s!=null&&s.disabled||s!=null&&s.divider)&&l;)l-=1,this.focusedOptionIndex=(this.options.length+this.focusedOptionIndex+i)%this.options.length,s=this.options[this.focusedOptionIndex];const c=n<this.focusedOptionIndex&&t===-1,h=n>this.focusedOptionIndex&&t===1;(c||h)&&(this.focusedOptionIndex=n,this.dispatchEvent(new Event(`luzmo-exceeded-${c?"top":"bottom"}`,{bubbles:!0,composed:!0,cancelable:!0})));let m;return e&&this._virtualizeActive&&(m=[...this.visibleOptionElements].find(p=>{var d,v,f;return((d=p.value)==null?void 0:d.toString())===((f=(v=this.options[this.focusedOptionIndex])==null?void 0:v.value)==null?void 0:f.toString())}),m||(this.focusedOptionIndex=this._firstVisibleIndex)),this._virtualizeActive&&e&&((u=this.virtualizer.element(this.focusedOptionIndex))==null||u.scrollIntoView({behavior:"smooth",block:"nearest"})),m=m??[...this.visibleOptionElements].find(p=>{var d,v,f;return((d=p.value)==null?void 0:d.toString())===((f=(v=this.options[this.focusedOptionIndex])==null?void 0:v.value)==null?void 0:f.toString())}),s!=null&&s.disabled||this.setFocusedAndActiveDescendant(m),m}updateSelectedItemIndex(){this.focusedOptionIndex=this._virtualizeActive?this._firstVisibleIndex:0}setSelectedOptionsFromValue(){this._selectedOptions=this.options.filter(t=>{var o;return typeof(t==null?void 0:t.value)=="string"&&Array.isArray(this.value)&&((o=this.value)==null?void 0:o.includes(t==null?void 0:t.value))})}visibilityChanged(t){this._firstVisibleIndex=(t==null?void 0:t.first)??0}rangeChange(t){t.stopPropagation(),t.preventDefault(),(t==null?void 0:t.first)!==-1&&(t==null?void 0:t.last)!==-1&&this.dispatchEvent(new CustomEvent("luzmo-scrolled",{bubbles:!0,composed:!0,cancelable:!0,detail:{first:t.first,last:t.last}}))}async toggleOption(t,o){var s;const e=t instanceof KeyboardEvent,i=this.options.findIndex(l=>(l==null?void 0:l.value)===(o==null?void 0:o.value));this.focusedOptionIndex=i,this.visibleOptionElements.forEach(l=>{var c,h;if(e){const m=((c=l.value)==null?void 0:c.toString())===((h=o==null?void 0:o.value)==null?void 0:h.toString());l.focused=m,m&&this.setFocusedAndActiveDescendant(l)}else l.focused=!1});const n=Array.isArray(this.value)&&((s=this.value)==null?void 0:s.includes(o==null?void 0:o.value));this.selects==="single"?(this.value=[o==null?void 0:o.value],this._selectedOptions=[o]):(this.value=n?this.value.filter(l=>l!==(o==null?void 0:o.value)):[...this.value??[],o==null?void 0:o.value],this._selectedOptions=n?this._selectedOptions.filter(l=>l.value!==o.value):[...this._selectedOptions,o]),await this.updateComplete,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0,detail:{value:this.value??[]}})),this.prepareToCleanUp()}handleOptionClick(t,o){this.toggleOption(o,t)}render(){const t=l=>a.x`<luzmo-icon
|
|
74
74
|
slot="icon"
|
|
75
|
-
.icon=${
|
|
75
|
+
.icon=${l}
|
|
76
76
|
.size=${this.size}
|
|
77
|
-
></luzmo-icon>`,o=
|
|
77
|
+
></luzmo-icon>`,o=l=>a.x`<span slot="description">${l}</span>`,e=l=>a.x`<luzmo-icon
|
|
78
78
|
slot="icon"
|
|
79
|
-
.src=${
|
|
79
|
+
.src=${l}
|
|
80
80
|
.size=${this.size}
|
|
81
|
-
></luzmo-icon>`,i=
|
|
81
|
+
></luzmo-icon>`,i=l=>{var f;const c=(l==null?void 0:l.value)??(l==null?void 0:l.label),h=(l==null?void 0:l.label)??(l==null?void 0:l.value),m=l==null?void 0:l.description,u=l==null?void 0:l.icon,p=l==null?void 0:l.imgSrc,d=l==null?void 0:l.divider,v=typeof l=="string"||l==null?void 0:l.disabled;return d?a.x`<luzmo-options-divider></luzmo-options-divider>`:a.x`<luzmo-option
|
|
82
82
|
.value=${c}
|
|
83
83
|
.size=${this.size}
|
|
84
84
|
.variant=${this.variant}
|
|
85
85
|
?emphasized=${this.emphasized}
|
|
86
86
|
?no-wrap=${this.noWrap}
|
|
87
87
|
?disabled=${v}
|
|
88
|
-
.selected=${Array.isArray(this.value)?(
|
|
88
|
+
.selected=${Array.isArray(this.value)?(f=this.value)==null?void 0:f.includes(c):!1}
|
|
89
89
|
.role=${this.selects==="single"?"option":"optioncheckbox"}
|
|
90
|
-
@click=${this.handleOptionClick.bind(this,
|
|
90
|
+
@click=${this.handleOptionClick.bind(this,l)}
|
|
91
91
|
>
|
|
92
92
|
${u?t(u):p?e(p):a.E}
|
|
93
|
-
${h} ${
|
|
93
|
+
${h} ${m?o(m):a.E}
|
|
94
94
|
</luzmo-option>`},n=this._virtualizeActive?a.x`<lit-virtualizer
|
|
95
95
|
.items=${this.options}
|
|
96
96
|
.renderItem=${i}
|
|
97
97
|
@rangeChanged=${this.rangeChange}
|
|
98
98
|
@visibilityChanged=${this.visibilityChanged}
|
|
99
|
-
></lit-virtualizer>`:j(this.options,i),
|
|
99
|
+
></lit-virtualizer>`:j(this.options,i),s=this.pending?a.x`<div id="pending">
|
|
100
100
|
<luzmo-progress-circle
|
|
101
101
|
indeterminate
|
|
102
102
|
.size=${this.size}
|
|
103
103
|
></luzmo-progress-circle>
|
|
104
|
-
</div>`:a.E;return a.x`${n} ${
|
|
104
|
+
</div>`:a.E;return a.x`${n} ${s}`}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listbox"),this.updateComplete.then(()=>this.updateItemFocus())}disconnectedCallback(){super.disconnectedCallback()}prepareToCleanUp(){document.addEventListener("focusout",()=>{requestAnimationFrame(()=>{this.updateSelectedItemIndex()})},{once:!0})}updateItemFocus(){if(this.visibleOptionElements.length===0)return;const t=this.focusedOptionIndex,o=[...this.visibleOptionElements].find(e=>{var i,n,s,l;return((i=e.value)==null?void 0:i.toString())===((l=(s=(n=this.options)==null?void 0:n[t])==null?void 0:s.value)==null?void 0:l.toString())});this.setFocusedAndActiveDescendant(o)}setFocusedAndActiveDescendant(t){var e,i;if(!t)return;const o=this.hasVisibleFocusInTree()||!!((e=this.visibleOptionElements)!=null&&e.some&&((i=this.visibleOptionElements)!=null&&i.some(n=>n.hasVisibleFocusInTree())));t.focused=o,o&&this.setAttribute("aria-activedescendant",t.id)}}y([a.n({type:String,reflect:!0})],_.prototype,"label");y([a.n({type:String,reflect:!0})],_.prototype,"variant");y([a.n({type:String,reflect:!0})],_.prototype,"selects");y([a.n({type:Boolean,reflect:!0})],_.prototype,"emphasized");y([a.n({type:Boolean,reflect:!0})],_.prototype,"pending");y([a.n({type:Array})],_.prototype,"options");y([a.n({type:Boolean,reflect:!0,attribute:"no-wrap"})],_.prototype,"noWrap");y([a.n({type:Array})],_.prototype,"value");y([L.e("lit-virtualizer")],_.prototype,"virtualizer");y([et("luzmo-option")],_.prototype,"visibleOptionElements");customElements.get("luzmo-options")||customElements.define("luzmo-options",_);customElements.get("luzmo-options-divider")||customElements.define("luzmo-options-divider",N);customElements.get("luzmo-option")||customElements.define("luzmo-option",b);exports.LuzmoOption=b;exports.LuzmoOptions=_;exports.LuzmoOptionsDivider=N;exports.VIRTUALIZE_AS_OF_NUM_ITEMS=H;
|