@luzmo/lucero 1.0.1-alpha.47 → 1.0.1-alpha.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/accordion/index.cjs +1 -1
- package/components/accordion/index.js +1 -1
- package/components/action-bar/index.cjs +1 -1
- package/components/action-bar/index.js +2 -2
- package/components/chat-message/index.cjs +1 -1
- package/components/chat-message/index.js +1 -1
- package/components/chat-message-group/index.cjs +2 -2
- package/components/chat-message-group/index.js +10 -10
- package/components/checkbox/index.cjs +1 -1
- package/components/checkbox/index.js +1 -1
- package/components/color-field/index.cjs +1 -1
- package/components/color-field/index.js +1 -1
- package/components/date-time-picker/index.cjs +1 -1
- package/components/date-time-picker/index.js +1 -1
- package/components/index.cjs +1 -1
- package/components/index.js +2 -2
- package/components/menu/index.cjs +1 -1
- package/components/menu/index.js +1 -1
- package/components/number-field/index.cjs +1 -1
- package/components/number-field/index.js +1 -1
- package/components/popover/index.cjs +1 -1
- package/components/popover/index.js +1 -1
- package/components/{popover-UFgI7b75.js → popover-9RrCrbbh.js} +1 -1
- package/components/{popover-CPZ51K_z.cjs → popover-DoH42mv2.cjs} +1 -1
- package/components/search/index.cjs +1 -1
- package/components/search/index.js +2 -2
- package/components/select/index.cjs +1 -1
- package/components/select/index.js +44 -44
- package/components/tags/index.cjs +1 -1
- package/components/tags/index.js +1 -1
- package/components/text-field/index.cjs +1 -1
- package/components/text-field/index.js +1 -1
- package/components/{text-field-BKFCIyzQ.js → text-field-Czie2Tyh.js} +1 -1
- package/components/{text-field-Cccbbja7.cjs → text-field-DL5Qe8rI.cjs} +1 -1
- package/components/{text-field.module-D0JJfBCr.cjs → text-field.module-BuB2wcWe.cjs} +1 -1
- package/components/{text-field.module-CQNW-UdO.js → text-field.module-CTNU1d1S.js} +1 -1
- package/components/toast/index.cjs +1 -1
- package/components/toast/index.js +4 -4
- package/package.json +1 -1
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
import "@lit-labs/virtualizer";
|
|
19
19
|
import { luzmoIcon as f, luzmoClose14 as D, luzmoAngleDown as F, luzmoAlert as V, luzmoSearch as N } from "@luzmo/icons";
|
|
20
20
|
import { unsafeCSS as R, nothing as m, html as n, render as K } from "lit";
|
|
21
|
-
import { query as z, property as
|
|
21
|
+
import { query as z, property as i, state as w } from "lit/decorators.js";
|
|
22
22
|
import { classMap as U } from "lit/directives/class-map.js";
|
|
23
23
|
import { ifDefined as y } from "lit/directives/if-defined.js";
|
|
24
24
|
import { M as W, I as H, s as j } from "../strategies-Bk97oVn1.js";
|
|
@@ -44,10 +44,10 @@ const Y = (u, e) => {
|
|
|
44
44
|
for (; !o && u.parentElement; )
|
|
45
45
|
u = u.parentElement, o = getComputedStyle(u).getPropertyValue(e);
|
|
46
46
|
return o.trim();
|
|
47
|
-
}, ee = ':host{font-family:var(--luzmo-select-font-family, var(--select-font-family));font-size:var(--luzmo-select-font-size, var(--select-font-size))}#button{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--luzmo-button-font-family, var(--luzmo-font-family));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--luzmo-button-line-height, var(--luzmo-line-height, 1.3));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,border-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,box-shadow var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;position:relative;overflow:visible}#button::-moz-focus-inner{border-style:none;padding:0}#button:focus{outline:none}#icon{margin-inline-end:var(--luzmo-select-spacing-text-to-icon, var(--select-spacing-text-to-icon));font-size:var(--luzmo-select-font-size, var(--select-font-size))}@media (forced-colors: active){:host{--highcontrast-select-focus-indicator-color: Highlight;--highcontrast-select-border-color-default: ButtonBorder;--highcontrast-select-border-color-hover: Highlight;--highcontrast-select-border-color-disabled: GrayText;--highcontrast-select-content-color-default: ButtonText;--highcontrast-select-content-color-disabled: GrayText;--highcontrast-select-background-color: ButtonFace}#button:focus-visible{--highcontrast-select-border-color-hover: ButtonText}#button .label,#button:after{forced-color-adjust:none}}#button{box-sizing:border-box;max-inline-size:100%;min-inline-size:calc(var(--select-minimum-width-multiplier) * var(--luzmo-select-button-block-size, var(--select-button-block-size)));block-size:var(--luzmo-select-button-block-size, var(--select-button-block-size));border-width:var(--luzmo-select-button-border-width, var(--select-button-border-width));border-radius:var(--luzmo-select-button-border-radius, var(--select-button-border-radius));box-shadow:var(--luzmo-select-button-box-shadow, var(--select-button-box-shadow));transition:background-color var(--luzmo-select-animation-duration, var(--select-animation-duration)),box-shadow var(--luzmo-select-animation-duration, var(--select-animation-duration)),border-color var(--luzmo-select-animation-duration, var(--select-animation-duration)) ease-in-out;color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-default, var(--select-font-color-default)));background-color:var(--highcontrast-select-background-color, var(--luzmo-select-background-color-default, var(--select-background-color-default)));border-style:solid;border-color:var(--highcontrast-select-border-color-default, var(--luzmo-select-border-color-default, var(--select-border-color-default)));margin-block-start:var(--luzmo-select-spacing-label-to-select, var(--select-spacing-label-to-select));padding-block:0;padding-inline-start:var(--luzmo-select-inline-edge-to-content, var(--select-inline-edge-to-content));padding-inline-end:var(--luzmo-select-spacing-edge-to-disclosure-icon, var(--select-spacing-edge-to-disclosure-icon));display:flex}#button:after{pointer-events:none;content:"";block-size:calc(100% + var(--luzmo-select-focus-indicator-gap, var(--select-focus-indicator-gap)) * 2 + var(--luzmo-select-button-border-width, var(--select-button-border-width)) * 2);inline-size:calc(100% + var(--luzmo-select-focus-indicator-gap, var(--select-focus-indicator-gap)) * 2 + var(--luzmo-select-button-border-width, var(--select-button-border-width)) * 2);border-style:solid;border-width:var(--luzmo-select-focus-indicator-width, var(--select-focus-indicator-width));border-radius:calc(var(--luzmo-select-button-border-radius, var(--select-button-border-radius)) + var(--luzmo-select-focus-indicator-gap, var(--select-focus-indicator-gap)) + var(--luzmo-select-button-border-width, var(--select-button-border-width)));border-color:#0000;margin-block-start:calc((var(--luzmo-select-focus-indicator-gap, var(--select-focus-indicator-gap)) + var(--luzmo-select-focus-indicator-width, var(--select-focus-indicator-width)) + var(--luzmo-select-button-border-width, var(--select-button-border-width))) * -1);margin-inline-start:calc((var(--luzmo-select-focus-indicator-gap, var(--select-focus-indicator-gap)) + var(--luzmo-select-focus-indicator-width, var(--select-focus-indicator-width)) + var(--luzmo-select-button-border-width, var(--select-button-border-width))) * -1);position:absolute;inset-block:0;inset-inline:0}#button:active{background-color:var(--highcontrast-select-background-color, var(--luzmo-select-background-color-active, var(--select-background-color-active)));border-color:var(--highcontrast-select-border-color-default, var(--luzmo-select-border-active, var(--select-border-color-active)))}#button:active:after{border-color:#0000}#button.placeholder:active .label{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-active, var(--select-font-color-active)))}#button:focus-visible{background-color:var(--highcontrast-select-background-color, var(--luzmo-select-background-color-key-focus, var(--select-background-color-key-focus)));border-color:var(--highcontrast-select-border-color-default, var(--luzmo-select-border-color-key-focus, var(--select-border-color-key-focus)));color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-key-focus, var(--select-font-color-key-focus)));outline:none}#button:focus-visible:after{border-color:var(--highcontrast-select-focus-indicator-color, var(--luzmo-select-focus-indicator-color, var(--select-focus-indicator-color)))}#button.placeholder:focus-visible{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-key-focus, var(--select-font-color-key-focus)))}#button:focus-visible .disclosure-icon,#button:focus-visible .clear-icon{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-icon-color-key-focus, var(--select-icon-color-key-focus)))}:host([open]) #button:not(:disabled,.is-disabled){color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-default-open, var(--select-font-color-default-open)));background-color:var(--highcontrast-select-background-color, var(--luzmo-select-background-color-default-open, var(--select-background-color-default-open)));border-color:var(--highcontrast-select-border-color-default, var(--luzmo-select-border-default-open, var(--select-border-color-default-open)))}:host([open]) #button:not(:disabled,.is-disabled) .disclosure-icon,:host([open]) #button:not(:disabled,.is-disabled) .clear-icon{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-icon-color-default-open, var(--select-icon-color-default-open)))}:host([invalid]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-select-border-color-default, var(--luzmo-select-border-color-error-default, var(--select-border-color-error-default)))}:host([invalid]) #button:not(:disabled,.is-disabled) .validation-icon{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-icon-color-error, var(--select-icon-color-error)))}:host([invalid]) #button:not(:disabled,.is-disabled):active{border-color:var(--highcontrast-select-border-color-default, var(--luzmo-select-border-color-error-active, var(--select-border-color-error-active)))}:host([invalid][open]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-select-border-color-default, var(--luzmo-select-border-color-error-default-open, var(--select-border-color-error-default-open)))}:host([invalid]) #button:not(:disabled,.is-disabled):focus-visible{border-color:var(--highcontrast-select-border-color-default, var(--luzmo-select-border-color-error-key-focus, var(--select-border-color-error-key-focus)))}:host([pending]) #button .disclosure-icon,:host([pending]) #button .clear-icon{color:var(--highcontrast-select-content-color-disabled, var(--luzmo-select-icon-color-disabled, var(--select-icon-color-disabled)))}.icon{flex-shrink:0}.label{white-space:nowrap;font-size:var(--luzmo-select-font-size, var(--select-font-size));line-height:var(--luzmo-select-button-line-height, var(--select-button-line-height));font-weight:var(--luzmo-select-font-weight, var(--select-font-weight));text-overflow:ellipsis;text-align:start;flex:auto;overflow:hidden}.label.placeholder{font-weight:var(--luzmo-select-placeholder-font-weight, var(--select-font-weight));font-style:var(--luzmo-select-placeholder-font-style, var(--select-placeholder-font-style));transition:color var(--luzmo-select-animation-duration, var(--select-animation-duration)) ease-in-out;color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-default, var(--select-font-color-default)))}.label.placeholder:active{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-active, var(--select-font-color-active)))}.clear-icon,.disclosure-icon{vertical-align:top;transition:color var(--luzmo-select-animation-duration, var(--select-animation-duration)) ease-out;color:var(--highcontrast-select-content-color-default, var(--luzmo-select-icon-color-default, var(--select-icon-color-default)));flex-shrink:0;display:inline-block;position:relative}.disclosure-icon{margin-inline-start:var(--luzmo-select-spacing-icon-to-disclosure-icon, var(--select-spacing-icon-to-disclosure-icon))}.clear-icon{margin-inline-start:var(--luzmo-select-spacing-icon-to-clear-icon, var(--select-spacing-icon-to-clear-icon))}.disclosure-icon:active{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-icon-color-active, var(--select-icon-color-active)))}luzmo-progress-circle,.validation-icon{margin-inline-start:var(--luzmo-select-spacing-text-to-icon, var(--select-spacing-text-to-icon))}.icon-container{display:flex;position:relative;height:100%;align-items:center;font-size:var(--luzmo-select-disclosure-icon-size, var(--select-disclosure-icon-size))}.icon-container.disclosure-icon{margin-inline-end:0}.label~.disclosure-icon,.label~.clear-icon{margin-inline-start:var(--luzmo-select-spacing-text-to-icon, var(--select-spacing-text-to-icon))}:host([quiet]) #button{inline-size:auto;min-inline-size:0;padding-inline:var(--luzmo-select-inline-edge-to-content-quiet, var(--select-inline-edge-to-content-quiet));color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-default, var(--select-font-color-default)));background-color:initial;background-color:var(--highcontrast-select-background-color, transparent);border:none;border-radius:0;box-shadow:none;margin-block-start:calc(var(--luzmo-select-spacing-label-to-select-quiet, var(--select-spacing-label-to-select-quiet)) + 1px)}:host([quiet]) #button.label-inline{margin-block-start:0}:host([quiet]) #button .disclosure-icon{margin-inline-end:var(--luzmo-select-spacing-edge-to-disclosure-icon-quiet, var(--select-spacing-edge-to-disclosure-icon-quiet))}:host([quiet]) #button:after{block-size:auto;inline-size:auto;border:none}@media (hover: hover){#button:hover{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-hover, var(--select-font-color-hover)));background-color:var(--highcontrast-select-background-color, var(--luzmo-select-background-color-hover, var(--select-background-color-hover)));border-color:var(--highcontrast-select-border-color-hover, var(--luzmo-select-border-color-hover, var(--select-border-color-hover)))}#button:hover .disclosure-icon,#button:hover .clear-icon{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-icon-color-hover, var(--select-icon-color-hover)))}#button:hover .clear-icon:hover{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-clear-icon-color-hover, var(--select-icon-color-focus)))}:host([open]):not([quiet]) #button:not(:disabled,.is-disabled):hover{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-hover-open, var(--select-font-color-hover-open)));background-color:var(--highcontrast-select-background-color, var(--luzmo-select-background-color-hover-open, var(--select-background-color-hover-open)));border-color:var(--highcontrast-select-border-color-hover, var(--luzmo-select-border-color-hover-open, var(--select-border-color-hover-open)))}:host([open]) #button:not(:disabled,.is-disabled):hover .disclosure-icon,:host([open]) #button:not(:disabled,.is-disabled):hover .clear-icon{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-icon-color-hover-open, var(--select-icon-color-hover-open)))}:host([invalid]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-select-border-color-hover, var(--luzmo-select-border-color-error-hover, var(--select-border-color-error-hover)))}:host([invalid][open]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-select-border-color-hover, var(--luzmo-select-border-color-error-hover-open, var(--select-border-color-error-hover-open)))}.label.placeholder:hover{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-hover, var(--select-font-color-hover)))}:host([quiet]) #button:hover{background-color:initial;background-color:var(--highcontrast-select-background-color, transparent)!important}}:host([quiet]) #button:focus-visible{background-color:initial;background-color:var(--highcontrast-select-background-color, transparent)}:host([quiet]) #button:focus-visible:after{box-shadow:0 var(--luzmo-select-focus-indicator-width, var(--select-focus-indicator-width)) 0 0 var(--highcontrast-select-focus-indicator-color, var(--luzmo-select-focus-indicator-color, var(--select-focus-indicator-color)));margin:calc((var(--luzmo-select-focus-indicator-gap, var(--select-focus-indicator-gap)) + var(--luzmo-select-button-border-width, var(--select-button-border-width))) * -1) 0;border:none;border-radius:0}:host([quiet][open]) #button,:host([quiet][disabled]) #button#button,:host([quiet]) #button#button:disabled,:host([quiet]) #button:active{background-color:initial;background-color:var(--highcontrast-select-background-color, transparent)}.label-inline{vertical-align:top;display:inline-flex}:host([disabled]) #button,#button:disabled{cursor:default;background-color:var(--highcontrast-select-background-color, var(--luzmo-select-background-color-disabled, var(--select-background-color-disabled)));border-color:#0000;border-color:var(--highcontrast-select-border-color-disabled, transparent);color:var(--highcontrast-select-content-color-disabled, var(--luzmo-select-font-color-disabled, var(--select-font-color-disabled)))}:host([disabled]) #button .icon,:host([disabled]) #button .disclosure-icon,:host([disabled]) #button .clear-icon,:host([disabled]) #button .validation-icon,#button:disabled .icon,#button:disabled .disclosure-icon,#button:disabled .clear-icon,#button:disabled .validation-icon{color:var(--highcontrast-select-content-color-disabled, var(--luzmo-select-icon-color-disabled, var(--select-icon-color-disabled)))}:host([disabled]) #button .label.placeholder,#button:disabled .label.placeholder{color:var(--highcontrast-select-content-color-disabled, var(--luzmo-select-font-color-disabled, var(--select-font-color-disabled)))}#popover{max-width:var(--luzmo-select-popover-max-width, var(--select-popover-max-width));min-width:var(--luzmo-select-popover-min-width, var(--select-popover-min-width));width:var(--luzmo-select-popover-width, var(--select-popover-width))}#popover.search-on{padding:0 0 var(--luzmo-popover-content-area-spacing-vertical, var(--popover-content-area-spacing-vertical)) 0!important}#search-container{flex:0 0 auto;display:flex;position:relative;border-bottom:var(--luzmo-select-search-container-border-bottom-width, var(--select-search-container-border-bottom-width)) solid var(--luzmo-select-search-container-border-bottom-color, var(--select-search-container-border-bottom-color))}#search-icon{position:absolute;left:var(--luzmo-select-inline-edge-to-content, var(--select-inline-edge-to-content));color:var(--luzmo-select-search-icon-color, var(--select-search-icon-color));font-size:var(--luzmo-select-search-icon-height, var(--select-search-icon-height));width:var(--luzmo-select-search-icon-width, var(--select-search-icon-width));text-align:center;display:flex;align-items:center;justify-content:center;top:0;bottom:0;pointer-events:none}#search:focus-within+#search-icon,#search:focus+#search-icon{color:var(--luzmo-select-search-icon-color-focus, var(--select-search-icon-color-focus))}#search{width:100%;box-sizing:border-box;border-top-left-radius:var(--luzmo-popover-corner-radius, var(--popover-corner-radius));border-top-right-radius:var(--luzmo-popover-corner-radius, var(--popover-corner-radius));background-color:var(--luzmo-select-search-background-color, var(--select-search-background-color));color:var(--luzmo-select-search-color, var(--select-search-color));height:var(--luzmo-select-button-block-size, var(--select-button-block-size));line-height:var(--luzmo-select-button-block-size, var(--select-button-block-size));padding-left:calc(var(--luzmo-select-inline-edge-to-content, var(--select-inline-edge-to-content)) + var(--luzmo-select-spacing-search-icon-to-text, var(--select-spacing-search-icon-to-text)) + var(--luzmo-select-search-icon-width, var(--select-search-icon-width)));padding-right:var(--luzmo-select-inline-edge-to-content, var(--select-inline-edge-to-content));font-size:var(--luzmo-select-font-size, var(--select-font-size));font-family:var(--luzmo-select-font-family, var(--select-font-family));line-height:var(--luzmo-select-button-line-height, var(--select-button-line-height));font-weight:var(--luzmo-select-font-weight, var(--select-font-weight));border:var(--luzmo-select-search-input-border-bottom-width, var(--select-search-input-border-bottom-width)) solid var(--luzmo-select-search-input-border-bottom-color, var(--select-search-input-border-bottom-color));outline:none}#no-results{color:var(--luzmo-select-no-results-color, var(--select-no-results-color));font-style:var(--luzmo-select-no-results-font-style, var(--select-no-results-font-style));height:var(--luzmo-select-no-results-height, var(--select-no-results-height));padding-inline:var(--luzmo-select-no-results-spacing-edge-to-text, var(--select-no-results-spacing-edge-to-text));display:flex;align-items:center}:host{--select-popover-max-width: 300px;--select-popover-min-width: 160px;--select-font-family: var(--luzmo-font-family);--select-font-size: var(--luzmo-font-size);--select-font-weight: var(--luzmo-font-weight);--select-spacing-search-icon-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--select-search-icon-height: var(--luzmo-font-size);--select-search-icon-width: var(--luzmo-font-size);--select-search-icon-color: var(--luzmo-disabled-color);--select-search-icon-color-focus: var(--luzmo-font-color);--select-search-color: var(--luzmo-font-color);--select-search-background-color: var(--luzmo-background-color);--select-search-container-border-bottom-width: var(--luzmo-border-width);--select-search-container-border-bottom-color: var(--luzmo-border-color);--select-search-input-border-bottom-width: var(--luzmo-border-width);--select-search-input-border-bottom-color: transparent;--select-background-color-default: var(--luzmo-background-color);--select-background-color-default-open: var(--luzmo-background-color-hover);--select-background-color-active: var(--luzmo-background-color-down);--select-background-color-hover: var(--luzmo-background-color-hover);--select-background-color-hover-open: var(--luzmo-background-color-down);--select-background-color-key-focus: var(--luzmo-background-color-down);--select-border-color-default: var(--luzmo-border-color);--select-border-color-default-open: var(--luzmo-border-color-hover);--select-border-color-hover: var(--luzmo-border-color);--select-border-color-hover-open: var(--luzmo-border-color-hover);--select-border-color-active: var(--luzmo-border-color);--select-border-color-key-focus: var(--luzmo-border-color);--select-button-border-width: var(--luzmo-border-width);--select-placeholder-font-style: var(--luzmo-font-style);--select-button-line-height: var(--luzmo-line-height);--select-button-box-shadow: 0px 1px 3px 0px rgba(var(--luzmo-border-color-rgb), .06);--select-button-block-size: var(--luzmo-component-height);--select-button-border-radius: var(--luzmo-border-radius);--select-button-border-radius-reset: 0;--select-inline-edge-to-content: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--select-spacing-text-to-icon: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--select-spacing-text-to-icon-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--select-spacing-icon-to-disclosure-icon: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--select-spacing-icon-to-clear-icon: var( --select-spacing-icon-to-disclosure-icon );--select-inline-edge-to-content-quiet: 0px;--select-spacing-label-to-select: 0px;--select-spacing-label-to-select-quiet: calc( -1 * var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--select-spacing-edge-to-disclosure-icon: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--select-spacing-edge-to-disclosure-icon-quiet: 0px;--select-animation-duration: var(--luzmo-animation-duration);--select-font-color-default: var(--luzmo-font-color);--select-font-color-default-open: var(--luzmo-font-color-hover);--select-font-color-hover: var(--luzmo-font-color-hover);--select-font-color-hover-open: var(--luzmo-font-color-down);--select-font-color-active: var(--luzmo-font-color-focus);--select-font-color-key-focus: var(--luzmo-font-color-focus);--select-icon-color-default: var(--luzmo-font-color);--select-icon-color-default-open: var(--luzmo-font-color-hover);--select-icon-color-hover: var(--luzmo-font-color-hover);--select-icon-color-hover-open: var(--luzmo-font-color-hover);--select-icon-color-active: var(--luzmo-font-color-focus);--select-icon-color-key-focus: var(--luzmo-font-color-focus);--select-border-color-error-default: var(--luzmo-negative-color);--select-border-color-error-default-open: var(--luzmo-negative-color-down);--select-border-color-error-hover: var(--luzmo-negative-color-hover);--select-border-color-error-hover-open: var(--luzmo-negative-color-down);--select-border-color-error-active: var(--luzmo-negative-color-down);--select-border-color-error-key-focus: var(--luzmo-negative-color-focus);--select-icon-color-error: var(--luzmo-negative-color);--select-background-color-disabled: var(--luzmo-background-color-disabled);--select-font-color-disabled: var(--luzmo-disabled-color);--select-icon-color-disabled: var(--luzmo-disabled-color);--select-focus-indicator-gap: var(--luzmo-indicator-gap);--select-focus-indicator-width: var(--luzmo-indicator-width);--select-focus-indicator-color: var(--luzmo-indicator-color);--select-disclosure-icon-size: var(--luzmo-font-size-s);--select-no-results-height: var(--select-button-block-size);--select-no-results-color: var(--select-font-color-disabled);--select-no-results-font-style: italic;--select-no-results-spacing-edge-to-text: var( --select-inline-edge-to-content )}:host([size=s]){--select-button-block-size: var(--luzmo-component-height-s);--select-font-size: var(--luzmo-font-size-s);--select-search-icon-height: var(--luzmo-font-size-s);--select-search-icon-width: var(--luzmo-font-size-s);--select-popover-max-width: 280px;--select-popover-min-width: 140px;--select-spacing-search-icon-to-text: var(--luzmo-spacing-3);--select-inline-edge-to-content: var(--luzmo-spacing-3);--select-spacing-text-to-icon: var(--luzmo-spacing-3);--select-spacing-text-to-icon-inline-end: var(--luzmo-spacing-3);--select-spacing-icon-to-disclosure-icon: var(--luzmo-spacing-3);--select-spacing-label-to-select-quiet: calc(-1 * var(--luzmo-spacing-3));--select-spacing-edge-to-disclosure-icon: var(--luzmo-spacing-3);--select-disclosure-icon-size: var(--luzmo-font-size-s)}:host([size=l]){--select-button-block-size: var(--luzmo-component-height-l);--select-font-size: var(--luzmo-font-size-l);--select-search-icon-height: var(--luzmo-font-size-l);--select-search-icon-width: var(--luzmo-font-size-l);--select-popover-max-width: 360px;--select-popover-min-width: 220px;--select-spacing-search-icon-to-text: var(--luzmo-spacing-4);--select-inline-edge-to-content: var(--luzmo-spacing-4);--select-spacing-text-to-icon: var(--luzmo-spacing-4);--select-spacing-text-to-icon-inline-end: var(--luzmo-spacing-4);--select-spacing-icon-to-disclosure-icon: var(--luzmo-spacing-4);--select-spacing-label-to-select-quiet: calc(-1 * var(--luzmo-spacing-4));--select-spacing-edge-to-disclosure-icon: var(--luzmo-spacing-4);--select-disclosure-icon-size: var(--luzmo-font-size)}:host([size=xl]){--select-button-block-size: var(--luzmo-component-height-xl);--select-font-size: var(--luzmo-font-size-xl);--select-search-icon-height: var(--luzmo-font-size-xl);--select-search-icon-width: var(--luzmo-font-size-xl);--select-popover-max-width: 400px;--select-popover-min-width: 260px;--select-spacing-search-icon-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--select-inline-edge-to-content: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--select-spacing-text-to-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--select-spacing-text-to-icon-inline-end: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--select-spacing-icon-to-disclosure-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--select-spacing-label-to-select-quiet: calc( -1 * var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--select-spacing-edge-to-disclosure-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--select-disclosure-icon-size: var(--luzmo-font-size-l)}:host([variant=highlight]) ::slotted(luzmo-option[selected]){--option-highlight-label-content-color: var(--luzmo-primary-inverse-color);--option-label-icon-color-default: var(--luzmo-primary-inverse-color);--menu-checkmark-display: var(--menu-checkmark-display-hidden);padding-inline-start:var(--luzmo-option-label-inline-edge-to-content, var(--option-label-inline-edge-to-content));background-color:var(--luzmo-option-highlight-label-background-color, var(--option-highlight-label-background-color, var(--luzmo-border-color)))}:host{display:inline-flex;vertical-align:top;max-inline-size:100%;inline-size:var(--luzmo-select-inline-size, var(--select-inline-size));min-inline-size:calc(var(--select-minimum-width-multiplier) * var(--luzmo-select-block-size, var(--select-block-size)))}:host([quiet]){width:auto;min-width:0}:host([disabled]){pointer-events:none}#button{width:100%;min-width:100%;max-width:100%}#icon:not([hidden]){display:inline-flex}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}.validation-icon{flex-shrink:0}luzmo-overlay{pointer-events:none}luzmo-options{pointer-events:initial}:host>#no-results,:host>luzmo-options{display:none}:host([focused]:not([quiet])) #button #label.placeholder{color:var(--select-placeholder-text-color-key-focus, var(--alias-placeholder-text-color-hover))}.visually-hidden{border:0;clip:rect(0,0,0,0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}luzmo-overlay:not(:defined){display:none}#button.remove-focus-ring-safari-hack:focus-visible{background-color:var(--highcontrast-select-background-color, var(--luzmo-select-background-color-default, var(--select-background-color-default)));border-color:var(--highcontrast-select-border-color-default, var(--luzmo-select-border-color-default, var(--select-border-color-default)));color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-default, var(--select-font-color-default)))}#button.remove-focus-ring-safari-hack:after{border:none}#button.remove-focus-ring-safari-hack:focus-visible:after{box-shadow:none}#button.remove-focus-ring-safari-hack:active{background-color:var(--highcontrast-select-background-color, var(--luzmo-select-background-color-default, var(--select-background-color-default)));border-color:var(--highcontrast-select-border-color-default, var(--luzmo-select-border-color-default, var(--select-border-color-default)));color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-default, var(--select-font-color-default)))}';
|
|
47
|
+
}, ee = ':host{font-family:var(--luzmo-select-font-family, var(--select-font-family));font-size:var(--luzmo-select-font-size, var(--select-font-size))}#button{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--luzmo-button-font-family, var(--luzmo-font-family));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--luzmo-button-line-height, var(--luzmo-line-height, 1.3));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,border-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out,box-shadow var(--luzmo-button-animation-duration, var(--luzmo-animation-duration)) ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;position:relative;overflow:visible}#button::-moz-focus-inner{border-style:none;padding:0}#button:focus{outline:none}#icon{margin-inline-end:var(--luzmo-select-spacing-text-to-icon, var(--select-spacing-text-to-icon));font-size:var(--luzmo-select-font-size, var(--select-font-size))}@media (forced-colors: active){:host{--highcontrast-select-focus-indicator-color: Highlight;--highcontrast-select-border-color-default: ButtonBorder;--highcontrast-select-border-color-hover: Highlight;--highcontrast-select-border-color-disabled: GrayText;--highcontrast-select-content-color-default: ButtonText;--highcontrast-select-content-color-disabled: GrayText;--highcontrast-select-background-color: ButtonFace}#button:focus-visible{--highcontrast-select-border-color-hover: ButtonText}#button .label,#button:after{forced-color-adjust:none}}#button{box-sizing:border-box;max-inline-size:100%;min-inline-size:calc(var(--select-minimum-width-multiplier) * var(--luzmo-select-button-block-size, var(--select-button-block-size)));block-size:var(--luzmo-select-button-block-size, var(--select-button-block-size));border-width:var(--luzmo-select-button-border-width, var(--select-button-border-width));border-radius:var(--luzmo-select-button-border-radius, var(--select-button-border-radius));box-shadow:var(--luzmo-select-button-box-shadow, var(--select-button-box-shadow));transition:background-color var(--luzmo-select-animation-duration, var(--select-animation-duration)),box-shadow var(--luzmo-select-animation-duration, var(--select-animation-duration)),border-color var(--luzmo-select-animation-duration, var(--select-animation-duration)) ease-in-out;color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-default, var(--select-font-color-default)));background-color:var(--highcontrast-select-background-color, var(--luzmo-select-background-color-default, var(--select-background-color-default)));border-style:solid;border-color:var(--highcontrast-select-border-color-default, var(--luzmo-select-border-color-default, var(--select-border-color-default)));margin-block-start:var(--luzmo-select-spacing-label-to-select, var(--select-spacing-label-to-select));padding-block:0;padding-inline-start:var(--luzmo-select-inline-edge-to-content, var(--select-inline-edge-to-content));padding-inline-end:var(--luzmo-select-spacing-edge-to-disclosure-icon, var(--select-spacing-edge-to-disclosure-icon));display:flex}#button:after{pointer-events:none;content:"";block-size:calc(100% + var(--luzmo-select-focus-indicator-gap, var(--select-focus-indicator-gap)) * 2 + var(--luzmo-select-button-border-width, var(--select-button-border-width)) * 2);inline-size:calc(100% + var(--luzmo-select-focus-indicator-gap, var(--select-focus-indicator-gap)) * 2 + var(--luzmo-select-button-border-width, var(--select-button-border-width)) * 2);border-style:solid;border-width:var(--luzmo-select-focus-indicator-width, var(--select-focus-indicator-width));border-radius:calc(var(--luzmo-select-button-border-radius, var(--select-button-border-radius)) + var(--luzmo-select-focus-indicator-gap, var(--select-focus-indicator-gap)) + var(--luzmo-select-button-border-width, var(--select-button-border-width)));border-color:#0000;margin-block-start:calc((var(--luzmo-select-focus-indicator-gap, var(--select-focus-indicator-gap)) + var(--luzmo-select-focus-indicator-width, var(--select-focus-indicator-width)) + var(--luzmo-select-button-border-width, var(--select-button-border-width))) * -1);margin-inline-start:calc((var(--luzmo-select-focus-indicator-gap, var(--select-focus-indicator-gap)) + var(--luzmo-select-focus-indicator-width, var(--select-focus-indicator-width)) + var(--luzmo-select-button-border-width, var(--select-button-border-width))) * -1);position:absolute;inset-block:0;inset-inline:0}#button:active{background-color:var(--highcontrast-select-background-color, var(--luzmo-select-background-color-active, var(--select-background-color-active)));border-color:var(--highcontrast-select-border-color-default, var(--luzmo-select-border-active, var(--select-border-color-active)))}#button:active:after{border-color:#0000}#button.placeholder:active .label{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-active, var(--select-font-color-active)))}#button:focus-visible{background-color:var(--highcontrast-select-background-color, var(--luzmo-select-background-color-key-focus, var(--select-background-color-key-focus)));border-color:var(--highcontrast-select-border-color-default, var(--luzmo-select-border-color-key-focus, var(--select-border-color-key-focus)));color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-key-focus, var(--select-font-color-key-focus)));outline:none}#button:focus-visible:after{border-color:var(--highcontrast-select-focus-indicator-color, var(--luzmo-select-focus-indicator-color, var(--select-focus-indicator-color)))}#button.placeholder:focus-visible{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-key-focus, var(--select-font-color-key-focus)))}#button:focus-visible .disclosure-icon,#button:focus-visible .clear-icon{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-icon-color-key-focus, var(--select-icon-color-key-focus)))}:host([open]) #button:not(:disabled,.is-disabled){color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-default-open, var(--select-font-color-default-open)));background-color:var(--highcontrast-select-background-color, var(--luzmo-select-background-color-default-open, var(--select-background-color-default-open)));border-color:var(--highcontrast-select-border-color-default, var(--luzmo-select-border-default-open, var(--select-border-color-default-open)))}:host([open]) #button:not(:disabled,.is-disabled) .disclosure-icon,:host([open]) #button:not(:disabled,.is-disabled) .clear-icon{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-icon-color-default-open, var(--select-icon-color-default-open)))}:host([invalid]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-select-border-color-default, var(--luzmo-select-border-color-error-default, var(--select-border-color-error-default)))}:host([invalid]) #button:not(:disabled,.is-disabled) .validation-icon{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-icon-color-error, var(--select-icon-color-error)))}:host([invalid]) #button:not(:disabled,.is-disabled):active{border-color:var(--highcontrast-select-border-color-default, var(--luzmo-select-border-color-error-active, var(--select-border-color-error-active)))}:host([invalid][open]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-select-border-color-default, var(--luzmo-select-border-color-error-default-open, var(--select-border-color-error-default-open)))}:host([invalid]) #button:not(:disabled,.is-disabled):focus-visible{border-color:var(--highcontrast-select-border-color-default, var(--luzmo-select-border-color-error-key-focus, var(--select-border-color-error-key-focus)))}:host([pending]) #button .disclosure-icon,:host([pending]) #button .clear-icon{color:var(--highcontrast-select-content-color-disabled, var(--luzmo-select-icon-color-disabled, var(--select-icon-color-disabled)))}.icon{flex-shrink:0}.label{white-space:nowrap;font-size:var(--luzmo-select-font-size, var(--select-font-size));line-height:var(--luzmo-select-button-line-height, var(--select-button-line-height));font-weight:var(--luzmo-select-font-weight, var(--select-font-weight));text-overflow:ellipsis;text-align:start;flex:auto;overflow:hidden}.label.placeholder{font-weight:var(--luzmo-select-placeholder-font-weight, var(--select-font-weight));font-style:var(--luzmo-select-placeholder-font-style, var(--select-placeholder-font-style));transition:color var(--luzmo-select-animation-duration, var(--select-animation-duration)) ease-in-out;color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-default, var(--select-font-color-default)))}.label.placeholder:active{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-active, var(--select-font-color-active)))}.clear-icon,.disclosure-icon{vertical-align:top;transition:color var(--luzmo-select-animation-duration, var(--select-animation-duration)) ease-out;color:var(--highcontrast-select-content-color-default, var(--luzmo-select-icon-color-default, var(--select-icon-color-default)));flex-shrink:0;display:inline-block;position:relative}.disclosure-icon{margin-inline-start:var(--luzmo-select-spacing-icon-to-disclosure-icon, var(--select-spacing-icon-to-disclosure-icon))}.clear-icon{margin-inline-start:var(--luzmo-select-spacing-icon-to-clear-icon, var(--select-spacing-icon-to-clear-icon))}.disclosure-icon:active{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-icon-color-active, var(--select-icon-color-active)))}luzmo-progress-circle,.validation-icon{margin-inline-start:var(--luzmo-select-spacing-text-to-icon, var(--select-spacing-text-to-icon))}.icon-container{display:flex;position:relative;height:100%;align-items:center;font-size:var(--luzmo-select-disclosure-icon-size, var(--select-disclosure-icon-size))}.icon-container.disclosure-icon{margin-inline-end:0}.label~.disclosure-icon,.label~.clear-icon{margin-inline-start:var(--luzmo-select-spacing-text-to-icon, var(--select-spacing-text-to-icon))}:host([quiet]) #button{inline-size:auto;min-inline-size:0;padding-inline:var(--luzmo-select-inline-edge-to-content-quiet, var(--select-inline-edge-to-content-quiet));color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-default, var(--select-font-color-default)));background-color:initial;background-color:var(--highcontrast-select-background-color, transparent);border:none;border-radius:0;box-shadow:none;margin-block-start:calc(var(--luzmo-select-spacing-label-to-select-quiet, var(--select-spacing-label-to-select-quiet)) + 1px)}:host([quiet]) #button.label-inline{margin-block-start:0}:host([quiet]) #button .disclosure-icon{margin-inline-end:var(--luzmo-select-spacing-edge-to-disclosure-icon-quiet, var(--select-spacing-edge-to-disclosure-icon-quiet))}:host([quiet]) #button:after{block-size:auto;inline-size:auto;border:none}@media (hover: hover){#button:hover{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-hover, var(--select-font-color-hover)));background-color:var(--highcontrast-select-background-color, var(--luzmo-select-background-color-hover, var(--select-background-color-hover)));border-color:var(--highcontrast-select-border-color-hover, var(--luzmo-select-border-color-hover, var(--select-border-color-hover)))}#button:hover .disclosure-icon,#button:hover .clear-icon{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-icon-color-hover, var(--select-icon-color-hover)))}#button:hover .clear-icon:hover{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-clear-icon-color-hover, var(--select-icon-color-focus)))}:host([open]):not([quiet]) #button:not(:disabled,.is-disabled):hover{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-hover-open, var(--select-font-color-hover-open)));background-color:var(--highcontrast-select-background-color, var(--luzmo-select-background-color-hover-open, var(--select-background-color-hover-open)));border-color:var(--highcontrast-select-border-color-hover, var(--luzmo-select-border-color-hover-open, var(--select-border-color-hover-open)))}:host([open]) #button:not(:disabled,.is-disabled):hover .disclosure-icon,:host([open]) #button:not(:disabled,.is-disabled):hover .clear-icon{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-icon-color-hover-open, var(--select-icon-color-hover-open)))}:host([invalid]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-select-border-color-hover, var(--luzmo-select-border-color-error-hover, var(--select-border-color-error-hover)))}:host([invalid][open]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-select-border-color-hover, var(--luzmo-select-border-color-error-hover-open, var(--select-border-color-error-hover-open)))}.label.placeholder:hover{color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-hover, var(--select-font-color-hover)))}:host([quiet]) #button:hover{background-color:initial;background-color:var(--highcontrast-select-background-color, transparent)!important}}:host([quiet]) #button:focus-visible{background-color:initial;background-color:var(--highcontrast-select-background-color, transparent)}:host([quiet]) #button:focus-visible:after{box-shadow:0 var(--luzmo-select-focus-indicator-width, var(--select-focus-indicator-width)) 0 0 var(--highcontrast-select-focus-indicator-color, var(--luzmo-select-focus-indicator-color, var(--select-focus-indicator-color)));margin:calc((var(--luzmo-select-focus-indicator-gap, var(--select-focus-indicator-gap)) + var(--luzmo-select-button-border-width, var(--select-button-border-width))) * -1) 0;border:none;border-radius:0}:host([quiet][open]) #button,:host([quiet][disabled]) #button#button,:host([quiet]) #button#button:disabled,:host([quiet]) #button:active{background-color:initial;background-color:var(--highcontrast-select-background-color, transparent)}.label-inline{vertical-align:top;display:inline-flex}:host([disabled]) #button,#button:disabled{cursor:default;background-color:var(--highcontrast-select-background-color, var(--luzmo-select-background-color-disabled, var(--select-background-color-disabled)));border-color:#0000;border-color:var(--highcontrast-select-border-color-disabled, transparent);color:var(--highcontrast-select-content-color-disabled, var(--luzmo-select-font-color-disabled, var(--select-font-color-disabled)))}:host([disabled]) #button .icon,:host([disabled]) #button .disclosure-icon,:host([disabled]) #button .clear-icon,:host([disabled]) #button .validation-icon,#button:disabled .icon,#button:disabled .disclosure-icon,#button:disabled .clear-icon,#button:disabled .validation-icon{color:var(--highcontrast-select-content-color-disabled, var(--luzmo-select-icon-color-disabled, var(--select-icon-color-disabled)))}:host([disabled]) #button .label.placeholder,#button:disabled .label.placeholder{color:var(--highcontrast-select-content-color-disabled, var(--luzmo-select-font-color-disabled, var(--select-font-color-disabled)))}#popover{max-width:var(--luzmo-select-popover-max-width, var(--select-popover-max-width));min-width:var(--luzmo-select-popover-min-width, var(--select-popover-min-width));width:var(--luzmo-select-popover-width, var(--select-popover-width))}#popover.search-on{padding:0 0 var(--luzmo-popover-content-area-spacing-vertical, var(--popover-content-area-spacing-vertical)) 0!important}#search-container{flex:0 0 auto;display:flex;position:relative;border-bottom:var(--luzmo-select-search-container-border-bottom-width, var(--select-search-container-border-bottom-width)) solid var(--luzmo-select-search-container-border-bottom-color, var(--select-search-container-border-bottom-color))}#search-icon{position:absolute;left:var(--luzmo-select-inline-edge-to-content, var(--select-inline-edge-to-content));color:var(--luzmo-select-search-icon-color, var(--select-search-icon-color));font-size:var(--luzmo-select-search-icon-height, var(--select-search-icon-height));width:var(--luzmo-select-search-icon-width, var(--select-search-icon-width));text-align:center;display:flex;align-items:center;justify-content:center;top:0;bottom:0;pointer-events:none}#search:focus-within+#search-icon,#search:focus+#search-icon{color:var(--luzmo-select-search-icon-color-focus, var(--select-search-icon-color-focus))}#search{width:100%;box-sizing:border-box;border-top-left-radius:var(--luzmo-popover-border-radius, var(--popover-border-radius));border-top-right-radius:var(--luzmo-popover-border-radius, var(--popover-border-radius));background-color:var(--luzmo-select-search-background-color, var(--select-search-background-color));color:var(--luzmo-select-search-color, var(--select-search-color));height:var(--luzmo-select-button-block-size, var(--select-button-block-size));line-height:var(--luzmo-select-button-block-size, var(--select-button-block-size));padding-left:calc(var(--luzmo-select-inline-edge-to-content, var(--select-inline-edge-to-content)) + var(--luzmo-select-spacing-search-icon-to-text, var(--select-spacing-search-icon-to-text)) + var(--luzmo-select-search-icon-width, var(--select-search-icon-width)));padding-right:var(--luzmo-select-inline-edge-to-content, var(--select-inline-edge-to-content));font-size:var(--luzmo-select-font-size, var(--select-font-size));font-family:var(--luzmo-select-font-family, var(--select-font-family));line-height:var(--luzmo-select-button-line-height, var(--select-button-line-height));font-weight:var(--luzmo-select-font-weight, var(--select-font-weight));border:var(--luzmo-select-search-input-border-bottom-width, var(--select-search-input-border-bottom-width)) solid var(--luzmo-select-search-input-border-bottom-color, var(--select-search-input-border-bottom-color));outline:none}#no-results{color:var(--luzmo-select-no-results-color, var(--select-no-results-color));font-style:var(--luzmo-select-no-results-font-style, var(--select-no-results-font-style));height:var(--luzmo-select-no-results-height, var(--select-no-results-height));padding-inline:var(--luzmo-select-no-results-spacing-edge-to-text, var(--select-no-results-spacing-edge-to-text));display:flex;align-items:center}:host{--select-popover-max-width: 300px;--select-popover-min-width: 160px;--select-font-family: var(--luzmo-font-family);--select-font-size: var(--luzmo-font-size);--select-font-weight: var(--luzmo-font-weight);--select-spacing-search-icon-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--select-search-icon-height: var(--luzmo-font-size);--select-search-icon-width: var(--luzmo-font-size);--select-search-icon-color: var(--luzmo-disabled-color);--select-search-icon-color-focus: var(--luzmo-font-color);--select-search-color: var(--luzmo-font-color);--select-search-background-color: var(--luzmo-background-color);--select-search-container-border-bottom-width: var(--luzmo-border-width);--select-search-container-border-bottom-color: var(--luzmo-border-color);--select-search-input-border-bottom-width: var(--luzmo-border-width);--select-search-input-border-bottom-color: transparent;--select-background-color-default: var(--luzmo-background-color);--select-background-color-default-open: var(--luzmo-background-color-hover);--select-background-color-active: var(--luzmo-background-color-down);--select-background-color-hover: var(--luzmo-background-color-hover);--select-background-color-hover-open: var(--luzmo-background-color-down);--select-background-color-key-focus: var(--luzmo-background-color-down);--select-border-color-default: var(--luzmo-border-color);--select-border-color-default-open: var(--luzmo-border-color-hover);--select-border-color-hover: var(--luzmo-border-color);--select-border-color-hover-open: var(--luzmo-border-color-hover);--select-border-color-active: var(--luzmo-border-color);--select-border-color-key-focus: var(--luzmo-border-color);--select-button-border-width: var(--luzmo-border-width);--select-placeholder-font-style: var(--luzmo-font-style);--select-button-line-height: var(--luzmo-line-height);--select-button-box-shadow: 0px 1px 3px 0px rgba(var(--luzmo-border-color-rgb), .06);--select-button-block-size: var(--luzmo-component-height);--select-button-border-radius: var(--luzmo-border-radius);--select-button-border-radius-reset: 0;--select-inline-edge-to-content: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--select-spacing-text-to-icon: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--select-spacing-text-to-icon-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--select-spacing-icon-to-disclosure-icon: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--select-spacing-icon-to-clear-icon: var( --select-spacing-icon-to-disclosure-icon );--select-inline-edge-to-content-quiet: 0px;--select-spacing-label-to-select: 0px;--select-spacing-label-to-select-quiet: calc( -1 * var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--select-spacing-edge-to-disclosure-icon: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--select-spacing-edge-to-disclosure-icon-quiet: 0px;--select-animation-duration: var(--luzmo-animation-duration);--select-font-color-default: var(--luzmo-font-color);--select-font-color-default-open: var(--luzmo-font-color-hover);--select-font-color-hover: var(--luzmo-font-color-hover);--select-font-color-hover-open: var(--luzmo-font-color-down);--select-font-color-active: var(--luzmo-font-color-focus);--select-font-color-key-focus: var(--luzmo-font-color-focus);--select-icon-color-default: var(--luzmo-font-color);--select-icon-color-default-open: var(--luzmo-font-color-hover);--select-icon-color-hover: var(--luzmo-font-color-hover);--select-icon-color-hover-open: var(--luzmo-font-color-hover);--select-icon-color-active: var(--luzmo-font-color-focus);--select-icon-color-key-focus: var(--luzmo-font-color-focus);--select-border-color-error-default: var(--luzmo-negative-color);--select-border-color-error-default-open: var(--luzmo-negative-color-down);--select-border-color-error-hover: var(--luzmo-negative-color-hover);--select-border-color-error-hover-open: var(--luzmo-negative-color-down);--select-border-color-error-active: var(--luzmo-negative-color-down);--select-border-color-error-key-focus: var(--luzmo-negative-color-focus);--select-icon-color-error: var(--luzmo-negative-color);--select-background-color-disabled: var(--luzmo-background-color-disabled);--select-font-color-disabled: var(--luzmo-disabled-color);--select-icon-color-disabled: var(--luzmo-disabled-color);--select-focus-indicator-gap: var(--luzmo-indicator-gap);--select-focus-indicator-width: var(--luzmo-indicator-width);--select-focus-indicator-color: var(--luzmo-indicator-color);--select-disclosure-icon-size: var(--luzmo-font-size-s);--select-no-results-height: var(--select-button-block-size);--select-no-results-color: var(--select-font-color-disabled);--select-no-results-font-style: italic;--select-no-results-spacing-edge-to-text: var( --select-inline-edge-to-content )}:host([size=s]){--select-button-block-size: var(--luzmo-component-height-s);--select-font-size: var(--luzmo-font-size-s);--select-search-icon-height: var(--luzmo-font-size-s);--select-search-icon-width: var(--luzmo-font-size-s);--select-popover-max-width: 280px;--select-popover-min-width: 140px;--select-spacing-search-icon-to-text: var(--luzmo-spacing-3);--select-inline-edge-to-content: var(--luzmo-spacing-3);--select-spacing-text-to-icon: var(--luzmo-spacing-3);--select-spacing-text-to-icon-inline-end: var(--luzmo-spacing-3);--select-spacing-icon-to-disclosure-icon: var(--luzmo-spacing-3);--select-spacing-label-to-select-quiet: calc(-1 * var(--luzmo-spacing-3));--select-spacing-edge-to-disclosure-icon: var(--luzmo-spacing-3);--select-disclosure-icon-size: var(--luzmo-font-size-s)}:host([size=l]){--select-button-block-size: var(--luzmo-component-height-l);--select-font-size: var(--luzmo-font-size-l);--select-search-icon-height: var(--luzmo-font-size-l);--select-search-icon-width: var(--luzmo-font-size-l);--select-popover-max-width: 360px;--select-popover-min-width: 220px;--select-spacing-search-icon-to-text: var(--luzmo-spacing-4);--select-inline-edge-to-content: var(--luzmo-spacing-4);--select-spacing-text-to-icon: var(--luzmo-spacing-4);--select-spacing-text-to-icon-inline-end: var(--luzmo-spacing-4);--select-spacing-icon-to-disclosure-icon: var(--luzmo-spacing-4);--select-spacing-label-to-select-quiet: calc(-1 * var(--luzmo-spacing-4));--select-spacing-edge-to-disclosure-icon: var(--luzmo-spacing-4);--select-disclosure-icon-size: var(--luzmo-font-size)}:host([size=xl]){--select-button-block-size: var(--luzmo-component-height-xl);--select-font-size: var(--luzmo-font-size-xl);--select-search-icon-height: var(--luzmo-font-size-xl);--select-search-icon-width: var(--luzmo-font-size-xl);--select-popover-max-width: 400px;--select-popover-min-width: 260px;--select-spacing-search-icon-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--select-inline-edge-to-content: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--select-spacing-text-to-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--select-spacing-text-to-icon-inline-end: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--select-spacing-icon-to-disclosure-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--select-spacing-label-to-select-quiet: calc( -1 * var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--select-spacing-edge-to-disclosure-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--select-disclosure-icon-size: var(--luzmo-font-size-l)}:host([variant=highlight]) ::slotted(luzmo-option[selected]){--option-highlight-label-content-color: var(--luzmo-primary-inverse-color);--option-label-icon-color-default: var(--luzmo-primary-inverse-color);--menu-checkmark-display: var(--menu-checkmark-display-hidden);padding-inline-start:var(--luzmo-option-label-inline-edge-to-content, var(--option-label-inline-edge-to-content));background-color:var(--luzmo-option-highlight-label-background-color, var(--option-highlight-label-background-color, var(--luzmo-border-color)))}:host{display:inline-flex;vertical-align:top;max-inline-size:100%;inline-size:var(--luzmo-select-inline-size, var(--select-inline-size));min-inline-size:calc(var(--select-minimum-width-multiplier) * var(--luzmo-select-block-size, var(--select-block-size)))}:host([quiet]){width:auto;min-width:0}:host([disabled]){pointer-events:none}#button{width:100%;min-width:100%;max-width:100%}#icon:not([hidden]){display:inline-flex}:host([readonly]) #button{-webkit-user-select:inherit;user-select:inherit}.validation-icon{flex-shrink:0}luzmo-overlay{pointer-events:none}luzmo-options{pointer-events:initial}:host>#no-results,:host>luzmo-options{display:none}:host([focused]:not([quiet])) #button #label.placeholder{color:var(--select-placeholder-text-color-key-focus, var(--alias-placeholder-text-color-hover))}.visually-hidden{border:0;clip:rect(0,0,0,0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}luzmo-overlay:not(:defined){display:none}#button.remove-focus-ring-safari-hack:focus-visible{background-color:var(--highcontrast-select-background-color, var(--luzmo-select-background-color-default, var(--select-background-color-default)));border-color:var(--highcontrast-select-border-color-default, var(--luzmo-select-border-color-default, var(--select-border-color-default)));color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-default, var(--select-font-color-default)))}#button.remove-focus-ring-safari-hack:after{border:none}#button.remove-focus-ring-safari-hack:focus-visible:after{box-shadow:none}#button.remove-focus-ring-safari-hack:active{background-color:var(--highcontrast-select-background-color, var(--luzmo-select-background-color-default, var(--select-background-color-default)));border-color:var(--highcontrast-select-border-color-default, var(--luzmo-select-border-color-default, var(--select-border-color-default)));color:var(--highcontrast-select-content-color-default, var(--luzmo-select-font-color-default, var(--select-font-color-default)))}';
|
|
48
48
|
var oe = Object.defineProperty, s = (u, e, o, r) => {
|
|
49
|
-
for (var a = void 0, t = u.length - 1,
|
|
50
|
-
(
|
|
49
|
+
for (var a = void 0, t = u.length - 1, c; t >= 0; t--)
|
|
50
|
+
(c = u[t]) && (a = c(e, o, a) || a);
|
|
51
51
|
return a && oe(e, o, a), a;
|
|
52
52
|
};
|
|
53
53
|
const te = () => n`
|
|
@@ -106,13 +106,13 @@ class l extends Q(G, {
|
|
|
106
106
|
return;
|
|
107
107
|
}
|
|
108
108
|
if (e.preventDefault(), this.selects === "single") {
|
|
109
|
-
const t = o === "ArrowRight" ? 1 : -1,
|
|
109
|
+
const t = o === "ArrowRight" ? 1 : -1, c = this.options.findIndex(
|
|
110
110
|
(h) => {
|
|
111
111
|
var p, b, g;
|
|
112
112
|
return ((p = h == null ? void 0 : h.value) == null ? void 0 : p.toString()) === ((g = (b = this.value) == null ? void 0 : b[0]) == null ? void 0 : g.toString());
|
|
113
113
|
}
|
|
114
114
|
);
|
|
115
|
-
let d = (this.options.length +
|
|
115
|
+
let d = (this.options.length + c + t) % this.options.length, v = this.options.length;
|
|
116
116
|
for (; (a = (r = this.options) == null ? void 0 : r[d]) != null && a.disabled && v; )
|
|
117
117
|
v -= 1, d = (this.options.length + d + t) % this.options.length;
|
|
118
118
|
this.value = [this.options[d].value], this.dispatchEvent(
|
|
@@ -231,7 +231,7 @@ class l extends Q(G, {
|
|
|
231
231
|
<span aria-hidden="true"> ${this.label} </span>
|
|
232
232
|
</slot>
|
|
233
233
|
`;
|
|
234
|
-
const
|
|
234
|
+
const c = (I = this.value) != null && I.length ? n`
|
|
235
235
|
<div aria-hidden="true" class="visually-hidden" id="applied-label">
|
|
236
236
|
${this.label}
|
|
237
237
|
<slot name="label"></slot>
|
|
@@ -250,7 +250,7 @@ class l extends Q(G, {
|
|
|
250
250
|
>
|
|
251
251
|
${t}
|
|
252
252
|
</div>
|
|
253
|
-
${
|
|
253
|
+
${c}
|
|
254
254
|
${this.invalid && !this.pending ? n` ${this.renderAlertIcon()} ` : m}
|
|
255
255
|
${this.pendingStateController.renderPendingState()}
|
|
256
256
|
${this.clearable && !this.readonly && ((q = this.value) == null ? void 0 : q.length) > 0 ? d() : m}
|
|
@@ -272,13 +272,13 @@ class l extends Q(G, {
|
|
|
272
272
|
}
|
|
273
273
|
willUpdate(e) {
|
|
274
274
|
var d;
|
|
275
|
-
const o = e.has("open"), r = e.has("value"), a = e.has("options"), t = e.has("selects"),
|
|
275
|
+
const o = e.has("open"), r = e.has("value"), a = e.has("options"), t = e.has("selects"), c = e.get("open");
|
|
276
276
|
t && this.selects === "single" && ((d = this.value) == null ? void 0 : d.length) > 1 && (console.warn(
|
|
277
277
|
"luzmo-select is being set to a single value given the selects property changed to 'single'"
|
|
278
|
-
), this.value = this.value.slice(0, 1)), o &&
|
|
278
|
+
), this.value = this.value.slice(0, 1)), o && c === !1 && this.open && this.searchString && (this.searchString = ""), (r || a) && this.setSelectedOptionsFromValue();
|
|
279
279
|
}
|
|
280
280
|
updated(e) {
|
|
281
|
-
var t,
|
|
281
|
+
var t, c;
|
|
282
282
|
super.updated(e);
|
|
283
283
|
const o = e.has("options"), r = e.has("open"), a = e.has("placement");
|
|
284
284
|
if (r && (this.strategy.open = this.open, this.open === !1 && this.optionsMenu.scrollToTop()), o)
|
|
@@ -290,7 +290,7 @@ class l extends Q(G, {
|
|
|
290
290
|
this._estimatePopoverWidth(d);
|
|
291
291
|
} else
|
|
292
292
|
this.style.removeProperty("--select-popover-width");
|
|
293
|
-
(
|
|
293
|
+
(c = this.strategy) != null && c.overlay && (this.strategy.overlay.type !== "auto" && (this.strategy.overlay.type = "auto"), (a || this.strategy.overlay.type === "auto") && (this.strategy.overlay.placement = this.placement));
|
|
294
294
|
}
|
|
295
295
|
firstUpdated(e) {
|
|
296
296
|
super.firstUpdated(e), this.bindButtonKeydownListener(), this.bindEvents();
|
|
@@ -315,10 +315,10 @@ class l extends Q(G, {
|
|
|
315
315
|
_estimatePopoverWidth(e) {
|
|
316
316
|
const o = this._getCssVarInPixels("--luzmo-select-font-size") ?? this._getCssVarInPixels("--select-font-size"), r = this._getCssVarInPixels("--luzmo-select-popover-min-width") ?? this._getCssVarInPixels("--select-popover-min-width"), a = this._getCssVarInPixels("--luzmo-spacing-5"), t = document.createElement("luzmo-options");
|
|
317
317
|
t.style.setProperty("--luzmo-select-font-size", `${o}px`), t.options = [e], t.value = [e], t.variant = this.variant, t.size = this.size, t.style.position = "absolute", t.style.left = "-9999px", t.style.top = "-9999px", t.style.opacity = "0", t.style.width = "auto", document.body.append(t), t.updateComplete.then(() => {
|
|
318
|
-
const
|
|
319
|
-
return
|
|
320
|
-
}).catch((
|
|
321
|
-
console.error(
|
|
318
|
+
const c = t.offsetWidth + (a ?? 0);
|
|
319
|
+
return c > (r ?? 0) ? this.style.setProperty("--select-popover-width", `${c}px`) : this.style.removeProperty("--select-popover-width"), t.remove(), c;
|
|
320
|
+
}).catch((c) => {
|
|
321
|
+
console.error(c), t.remove();
|
|
322
322
|
});
|
|
323
323
|
}
|
|
324
324
|
/**
|
|
@@ -410,9 +410,9 @@ class l extends Q(G, {
|
|
|
410
410
|
*/
|
|
411
411
|
get renderMenu() {
|
|
412
412
|
const e = this.options.filter((r) => {
|
|
413
|
-
var t,
|
|
413
|
+
var t, c, d;
|
|
414
414
|
const a = typeof r == "string" ? r : r == null ? void 0 : r.label;
|
|
415
|
-
return (d = (t = a == null ? void 0 : a.toString()) == null ? void 0 : t.toLowerCase()) == null ? void 0 : d.includes(((
|
|
415
|
+
return (d = (t = a == null ? void 0 : a.toString()) == null ? void 0 : t.toLowerCase()) == null ? void 0 : d.includes(((c = this.searchString) == null ? void 0 : c.toLowerCase()) ?? "");
|
|
416
416
|
}), o = n`
|
|
417
417
|
<luzmo-options
|
|
418
418
|
.variant=${this.variant}
|
|
@@ -452,8 +452,8 @@ class l extends Q(G, {
|
|
|
452
452
|
}), (t = this.strategy) == null ? void 0 : t.overlay;
|
|
453
453
|
}
|
|
454
454
|
renderContainer(e) {
|
|
455
|
-
var t,
|
|
456
|
-
const o = this.search === "on" || this.searchString && ((t = this.searchString) == null ? void 0 : t.length) > 0 || this.search === "auto" && ((
|
|
455
|
+
var t, c;
|
|
456
|
+
const o = this.search === "on" || this.searchString && ((t = this.searchString) == null ? void 0 : t.length) > 0 || this.search === "auto" && ((c = this.options) == null ? void 0 : c.length) > 20, r = o ? this.renderSearchInput() : m, a = n`
|
|
457
457
|
${r} ${this.dismissHelper} ${e} ${this.dismissHelper}
|
|
458
458
|
`;
|
|
459
459
|
return this.dependencyManager.add("luzmo-popover"), n`
|
|
@@ -519,65 +519,65 @@ s([
|
|
|
519
519
|
z("#button")
|
|
520
520
|
], l.prototype, "button");
|
|
521
521
|
s([
|
|
522
|
-
|
|
522
|
+
i({ type: Boolean, reflect: !0 })
|
|
523
523
|
], l.prototype, "disabled");
|
|
524
524
|
s([
|
|
525
|
-
|
|
525
|
+
i({ type: Boolean, reflect: !0 })
|
|
526
526
|
], l.prototype, "focused");
|
|
527
527
|
s([
|
|
528
|
-
|
|
528
|
+
i({ type: String, reflect: !0 })
|
|
529
529
|
], l.prototype, "icons");
|
|
530
530
|
s([
|
|
531
|
-
|
|
531
|
+
i({ type: String, reflect: !0 })
|
|
532
532
|
], l.prototype, "variant");
|
|
533
533
|
s([
|
|
534
|
-
|
|
534
|
+
i({ type: Boolean, reflect: !0 })
|
|
535
535
|
], l.prototype, "emphasized");
|
|
536
536
|
s([
|
|
537
|
-
|
|
537
|
+
i({ type: Boolean, reflect: !0 })
|
|
538
538
|
], l.prototype, "invalid");
|
|
539
539
|
s([
|
|
540
|
-
|
|
540
|
+
i({ type: String, reflect: !0 })
|
|
541
541
|
], l.prototype, "search");
|
|
542
542
|
s([
|
|
543
|
-
|
|
543
|
+
i({ type: Boolean, reflect: !0, attribute: "no-wrap" })
|
|
544
544
|
], l.prototype, "noWrap");
|
|
545
545
|
s([
|
|
546
|
-
|
|
546
|
+
i({ type: Boolean, reflect: !0 })
|
|
547
547
|
], l.prototype, "retrieving");
|
|
548
548
|
s([
|
|
549
|
-
|
|
549
|
+
i({ type: Boolean, reflect: !0 })
|
|
550
550
|
], l.prototype, "pending");
|
|
551
551
|
s([
|
|
552
|
-
|
|
552
|
+
i({ type: Boolean, reflect: !0 })
|
|
553
553
|
], l.prototype, "clearable");
|
|
554
554
|
s([
|
|
555
|
-
|
|
555
|
+
i({ type: String, attribute: "pending-label" })
|
|
556
556
|
], l.prototype, "pendingLabel");
|
|
557
557
|
s([
|
|
558
|
-
|
|
558
|
+
i({ type: String, attribute: "search-label" })
|
|
559
559
|
], l.prototype, "searchLabel");
|
|
560
560
|
s([
|
|
561
|
-
|
|
561
|
+
i({ type: String, attribute: "no-results-label" })
|
|
562
562
|
], l.prototype, "noResultsLabel");
|
|
563
563
|
s([
|
|
564
|
-
|
|
564
|
+
i({ type: String, attribute: "no-data-label" })
|
|
565
565
|
], l.prototype, "noDataLabel");
|
|
566
566
|
s([
|
|
567
|
-
|
|
567
|
+
i({
|
|
568
568
|
type: String,
|
|
569
569
|
attribute: "multiple-label-template",
|
|
570
570
|
reflect: !0
|
|
571
571
|
})
|
|
572
572
|
], l.prototype, "multipleLabelTemplate");
|
|
573
573
|
s([
|
|
574
|
-
|
|
574
|
+
i()
|
|
575
575
|
], l.prototype, "label");
|
|
576
576
|
s([
|
|
577
|
-
|
|
577
|
+
i({ type: Boolean, reflect: !0 })
|
|
578
578
|
], l.prototype, "open");
|
|
579
579
|
s([
|
|
580
|
-
|
|
580
|
+
i({ type: Boolean, reflect: !0 })
|
|
581
581
|
], l.prototype, "readonly");
|
|
582
582
|
s([
|
|
583
583
|
w()
|
|
@@ -601,13 +601,13 @@ s([
|
|
|
601
601
|
z("lit-virtualizer")
|
|
602
602
|
], l.prototype, "virtualizer");
|
|
603
603
|
s([
|
|
604
|
-
|
|
604
|
+
i({ type: String, reflect: !0 })
|
|
605
605
|
], l.prototype, "placement");
|
|
606
606
|
s([
|
|
607
|
-
|
|
607
|
+
i({ type: Boolean, reflect: !0 })
|
|
608
608
|
], l.prototype, "quiet");
|
|
609
609
|
s([
|
|
610
|
-
|
|
610
|
+
i({
|
|
611
611
|
type: Array,
|
|
612
612
|
converter: {
|
|
613
613
|
fromAttribute: (u) => {
|
|
@@ -624,10 +624,10 @@ s([
|
|
|
624
624
|
})
|
|
625
625
|
], l.prototype, "value");
|
|
626
626
|
s([
|
|
627
|
-
|
|
627
|
+
i({ type: Array })
|
|
628
628
|
], l.prototype, "options");
|
|
629
629
|
s([
|
|
630
|
-
|
|
630
|
+
i({ type: String, reflect: !0 })
|
|
631
631
|
], l.prototype, "selects");
|
|
632
632
|
customElements.get("luzmo-select") || customElements.define("luzmo-select", l);
|
|
633
633
|
export {
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("lit"),s=require("lit/decorators.js"),b=require("../base-DxRGeCrb.cjs"),m=require("../sized-mixin-DcvJLFeo.cjs");require("../button/index.cjs");const p=require("../focus-visible-D4BXb5RB.cjs"),f=require("../roving-tabindex-By_fCy_e.cjs"),k=':host{font-family:var(--luzmo-font-family);border-color:var(--highcontrast-tag-border-color, var(--luzmo-tag-border-color, var(--tag-border-color)));background-color:var(--highcontrast-tag-background-color, var(--luzmo-tag-background-color, var(--tag-background-color)));color:var(--highcontrast-tag-content-color, var(--luzmo-tag-content-color, var(--tag-content-color)));border-radius:var(--luzmo-tag-border-radius, var(--tag-border-radius));border-width:var(--luzmo-tag-border-width, var(--tag-border-width));block-size:var(--luzmo-tag-height, var(--tag-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:100%;-webkit-user-select:none;user-select:none;transition:border-color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,box-shadow var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,background-color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out;border-style:solid;outline:none;align-items:center;justify-content:center;padding-inline-start:calc(var(--luzmo-tag-spacing-inline-start, var(--tag-spacing-inline-start)) - var(--luzmo-tag-border-width, var(--tag-border-width)));padding-inline-end:0;display:inline-flex;position:relative}::slotted([slot=icon]){block-size:var(--luzmo-tag-icon-size, var(--tag-icon-size));inline-size:var(--luzmo-tag-icon-size, var(--tag-icon-size));flex-shrink:0;margin-inline-end:var(--luzmo-tag-icon-spacing-inline-end, var(--tag-icon-spacing-inline-end))}::slotted([slot=avatar]){margin-inline-end:var(--luzmo-tag-avatar-spacing-inline-end, var(--tag-avatar-spacing-inline-end))}.clear-button{--luzmo-clear-button-width: fit-content;--clearbutton-fill-size: fit-content;--clearbutton-fill-background-color: transparent;box-sizing:border-box;color:currentColor;margin-inline-start:calc(var(--luzmo-tag-clear-button-spacing-inline-start, var(--tag-clear-button-spacing-inline-start)) + var(--luzmo-tag-label-spacing-inline-end, var(--tag-label-spacing-inline-end)) * -1);margin-inline-end:calc(var(--luzmo-tag-clear-button-spacing-inline-end, var(--tag-clear-button-spacing-inline-end)) - var(--luzmo-tag-border-width, var(--tag-border-width)))}.clear-button .luzmo-ClearButton-fill{background-color:var(--luzmo-clearbutton-fill-background-color, var(--clearbutton-fill-background-color));inline-size:var(--luzmo-clearbutton-fill-size, var(--clearbutton-fill-size));block-size:var(--luzmo-clearbutton-fill-size, var(--clearbutton-fill-size))}.label{block-size:100%;box-sizing:border-box;line-height:var(--luzmo-tag-label-line-height, var(--tag-label-line-height));font-weight:var(--luzmo-tag-label-font-weight, var(--tag-label-font-weight));font-size:var(--luzmo-tag-font-size, var(--tag-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;flex:auto;display:flex;align-items:center;margin-inline-end:calc(var(--luzmo-tag-label-spacing-inline-end, var(--tag-label-spacing-inline-end)) - var(--luzmo-tag-border-width, var(--tag-border-width)));overflow:hidden}:host(:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-active, var(--luzmo-tag-border-color-active, var(--tag-border-color-active)));background-color:var(--highcontrast-tag-background-color-active, var(--luzmo-tag-background-color-active, var(--tag-background-color-active)));color:var(--highcontrast-tag-content-color-active, var(--luzmo-tag-content-color-active, var(--tag-content-color-active)))}:host([focused]),:host(:focus-visible){border-color:var(--highcontrast-tag-border-color-focus, var(--luzmo-tag-border-color-focus, var(--tag-border-color-focus)));background-color:var(--highcontrast-tag-background-color-focus, var(--luzmo-tag-background-color-focus, var(--tag-background-color-focus)));color:var(--highcontrast-tag-content-color-focus, var(--luzmo-tag-content-color-focus, var(--tag-content-color-focus)))}:host([focused]):after,:host(:focus-visible):after{content:"";border-color:var(--highcontrast-tag-focus-ring-color, var(--luzmo-tag-focus-ring-color, var(--tag-focus-ring-color)));border-radius:calc(var(--luzmo-tag-border-radius, var(--tag-border-radius)) + var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) + var(--luzmo-tag-border-width, var(--tag-border-width)));border-width:var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness));pointer-events:none;border-style:solid;display:inline-block;position:absolute;inset-block-start:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-block-end:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-inline-start:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-inline-end:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)))}:host([selected]){border-color:var(--highcontrast-tag-border-color-selected, var(--luzmo-tag-border-color-selected, var(--tag-border-color-selected)));background-color:var(--highcontrast-tag-background-color-selected, var(--luzmo-tag-background-color-selected, var(--tag-background-color-selected)));color:var(--highcontrast-tag-content-color-selected, var(--luzmo-tag-content-color-selected, var(--tag-content-color-selected)))}:host([selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-selected-active, var(--luzmo-tag-border-color-selected-active, var(--tag-border-color-selected-active)));background-color:var(--highcontrast-tag-background-color-selected-active, var(--luzmo-tag-background-color-selected-active, var(--tag-background-color-selected-active)))}:host([selected][focused]),:host([selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-selected-focus, var(--luzmo-tag-border-color-selected-focus, var(--tag-border-color-selected-focus)));background-color:var(--highcontrast-tag-background-color-selected-focus, var(--luzmo-tag-background-color-selected-focus, var(--tag-background-color-selected-focus)))}:host([invalid]){border-color:var(--highcontrast-tag-border-color-invalid, var(--luzmo-tag-border-color-invalid, var(--tag-border-color-invalid)));color:var(--highcontrast-tag-content-color-invalid, var(--luzmo-tag-content-color-invalid, var(--tag-content-color-invalid)))}:host([invalid]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-active, var(--luzmo-tag-border-color-invalid-active, var(--tag-border-color-invalid-active)));color:var(--highcontrast-tag-content-color-invalid-active, var(--luzmo-tag-content-color-invalid-active, var(--tag-content-color-invalid-active)))}:host([invalid][focused]),:host([invalid]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-focus, var(--luzmo-tag-border-color-invalid-focus, var(--tag-border-color-invalid-focus)));color:var(--highcontrast-tag-content-color-invalid-focus, var(--luzmo-tag-content-color-invalid-focus, var(--tag-content-color-invalid-focus)))}:host([invalid][selected]){border-color:var(--highcontrast-tag-border-color-invalid-selected, var(--luzmo-tag-border-color-invalid-selected, var(--tag-border-color-invalid-selected)));background-color:var(--highcontrast-tag-background-color-invalid-selected, var(--luzmo-tag-background-color-invalid-selected, var(--tag-background-color-invalid-selected)));color:var(--highcontrast-tag-content-color-invalid-selected, var(--luzmo-tag-content-color-invalid-selected, var(--tag-content-color-invalid-selected)))}:host([invalid][selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-selected-active, var(--luzmo-tag-border-color-invalid-selected-active, var(--tag-border-color-invalid-selected-active)));background-color:var(--highcontrast-tag-background-color-invalid-selected-active, var(--luzmo-tag-background-color-invalid-selected-active, var(--tag-background-color-invalid-selected-active)))}:host([invalid][selected][focused]),:host([invalid][selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-selected-focus, var(--luzmo-tag-border-color-invalid-selected-focus, var(--tag-border-color-invalid-selected-focus)));background-color:var(--highcontrast-tag-background-color-invalid-selected-focus, var(--luzmo-tag-background-color-invalid-selected-focus, var(--tag-background-color-invalid-selected-focus)))}:host([emphasized]){border-color:var(--highcontrast-tag-border-color-emphasized, var(--luzmo-tag-border-color-emphasized, var(--tag-border-color-emphasized)));background-color:var(--highcontrast-tag-background-color-emphasized, var(--luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized)));color:var(--highcontrast-tag-content-color-emphasized, var(--luzmo-tag-content-color-emphasized, var(--tag-content-color-emphasized)));--luzmo-clear-button-background-color-hover: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) );--luzmo-clear-button-background-color-focus: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) );--luzmo-clear-button-background-color-down: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) )}@media (hover: hover){:host(:hover){border-color:var(--highcontrast-tag-border-color-hover, var(--luzmo-tag-border-color-hover, var(--tag-border-color-hover)));background-color:var(--highcontrast-tag-background-color-hover, var(--luzmo-tag-background-color-hover, var(--tag-background-color-hover)));color:var(--highcontrast-tag-content-color-hover, var(--luzmo-tag-content-color-hover, var(--tag-content-color-hover)))}:host([selected]:hover){border-color:var(--highcontrast-tag-border-color-selected-hover, var(--luzmo-tag-border-color-selected-hover, var(--tag-border-color-selected-hover)));background-color:var(--highcontrast-tag-background-color-selected-hover, var(--luzmo-tag-background-color-selected-hover, var(--tag-background-color-selected-hover)));color:var(--highcontrast-tag-content-color-selected, var(--luzmo-tag-content-color-selected, var(--tag-content-color-selected)))}:host([invalid]:hover){border-color:var(--highcontrast-tag-border-color-invalid-hover, var(--luzmo-tag-border-color-invalid-hover, var(--tag-border-color-invalid-hover)));color:var(--highcontrast-tag-content-color-invalid-hover, var(--luzmo-tag-content-color-invalid-hover, var(--tag-content-color-invalid-hover)))}:host([invalid][selected]:hover){border-color:var(--highcontrast-tag-border-color-invalid-selected-hover, var(--luzmo-tag-border-color-invalid-selected-hover, var(--tag-border-color-invalid-selected-hover)));background-color:var(--highcontrast-tag-background-color-invalid-selected-hover, var(--luzmo-tag-background-color-invalid-selected-hover, var(--tag-background-color-invalid-selected-hover)));color:var(--highcontrast-tag-content-color-invalid-selected, var(--luzmo-tag-content-color-invalid-selected, var(--tag-content-color-invalid-selected)))}:host([emphasized]:hover){border-color:var(--highcontrast-tag-border-color-emphasized-hover, var(--luzmo-tag-border-color-emphasized-hover, var(--tag-border-color-emphasized-hover)));background-color:var(--highcontrast-tag-background-color-emphasized-hover, var(--luzmo-tag-background-color-emphasized-hover, var(--tag-background-color-emphasized-hover)));color:var(--highcontrast-tag-content-color-emphasized, var(--luzmo-tag-content-color-emphasized, var(--tag-content-color-emphasized)))}}:host([emphasized]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-emphasized-active, var(--luzmo-tag-border-color-emphasized-active, var(--tag-border-color-emphasized-active)));background-color:var(--highcontrast-tag-background-color-emphasized-active, var(--luzmo-tag-background-color-emphasized-active, var(--tag-background-color-emphasized-active)))}:host([emphasized][focused]),:host([emphasized]:focus-visible){border-color:var(--highcontrast-tag-border-color-emphasized-focus, var(--luzmo-tag-border-color-emphasized-focus, var(--tag-border-color-emphasized-focus)));background-color:var(--highcontrast-tag-background-color-emphasized-focus, var(--luzmo-tag-background-color-emphasized-focus, var(--tag-background-color-emphasized-focus)))}:host([disabled]){border-color:var(--highcontrast-tag-border-color-disabled, var(--luzmo-tag-border-color-disabled, var(--tag-border-color-disabled)));background-color:var(--highcontrast-tag-background-color-disabled, var(--luzmo-tag-background-color-disabled, var(--tag-background-color-disabled)));color:var(--highcontrast-tag-content-color-disabled, var(--luzmo-tag-content-color-disabled, var(--tag-content-color-disabled)));pointer-events:none}:host([disabled]) ::slotted([slot=avatar]){opacity:var(--luzmo-avatar-opacity-disabled, var(--avatar-opacity-disabled))}@media (forced-colors: active){:host{--highcontrast-tag-border-color: ButtonText;--highcontrast-tag-border-color-hover: ButtonText;--highcontrast-tag-border-color-active: ButtonText;--highcontrast-tag-border-color-focus: Highlight;--highcontrast-tag-background-color: ButtonFace;--highcontrast-tag-background-color-hover: ButtonFace;--highcontrast-tag-background-color-active: ButtonFace;--highcontrast-tag-background-color-focus: ButtonFace;--highcontrast-tag-content-color: ButtonText;--highcontrast-tag-content-color-hover: ButtonText;--highcontrast-tag-content-color-active: ButtonText;--highcontrast-tag-content-color-focus: ButtonText;--highcontrast-tag-focus-ring-color: Highlight;forced-color-adjust:none}:host([selected]){--highcontrast-tag-border-color-selected: Highlight;--highcontrast-tag-border-color-selected-hover: Highlight;--highcontrast-tag-border-color-selected-active: Highlight;--highcontrast-tag-border-color-selected-focus: Highlight;--highcontrast-tag-background-color-selected: Highlight;--highcontrast-tag-background-color-selected-hover: Highlight;--highcontrast-tag-background-color-selected-active: Highlight;--highcontrast-tag-background-color-selected-focus: Highlight;--highcontrast-tag-content-color-selected: HighlightText}:host([disabled]){--highcontrast-tag-border-color-disabled: GrayText;--highcontrast-tag-background-color-disabled: ButtonFace;--highcontrast-tag-content-color-disabled: GrayText}:host([invalid]){--highcontrast-tag-border-color-invalid: Highlight;--highcontrast-tag-border-color-invalid-hover: Highlight;--highcontrast-tag-border-color-invalid-active: Highlight;--highcontrast-tag-border-color-invalid-focus: Highlight;--highcontrast-tag-content-color-invalid: CanvasText;--highcontrast-tag-content-color-invalid-hover: CanvasText;--highcontrast-tag-content-color-invalid-active: CanvasText;--highcontrast-tag-content-color-invalid-focus: CanvasText}:host([invalid][selected]){--highcontrast-tag-border-color-invalid-selected: Highlight;--highcontrast-tag-border-color-invalid-selected-hover: Highlight;--highcontrast-tag-border-color-invalid-selected-focus: Highlight;--highcontrast-tag-border-color-invalid-selected-active: Highlight;--highcontrast-tag-background-color-invalid-selected: Highlight;--highcontrast-tag-background-color-invalid-selected-hover: Highlight;--highcontrast-tag-background-color-invalid-selected-active: Highlight;--highcontrast-tag-background-color-invalid-selected-focus: Highlight;--highcontrast-tag-content-color-invalid-selected: HighlightText}:host([emphasized]){--highcontrast-tag-border-color-emphasized: Highlight;--highcontrast-tag-border-color-emphasized-hover: Highlight;--highcontrast-tag-border-color-emphasized-active: Highlight;--highcontrast-tag-border-color-emphasized-focus: Highlight;--highcontrast-tag-background-color-emphasized: ButtonFace;--highcontrast-tag-background-color-emphasized-hover: ButtonFace;--highcontrast-tag-background-color-emphasized-active: ButtonFace;--highcontrast-tag-background-color-emphasized-focus: ButtonFace;--highcontrast-tag-content-color-emphasized: CanvasText}}:host{--tag-border-color: var(--luzmo-border-color);--tag-border-color-hover: var(--luzmo-border-color-hover);--tag-border-color-active: var(--luzmo-border-color-active);--tag-border-color-focus: var(--luzmo-border-color-focus);--tag-size-small-corner-radius: var(--luzmo-border-radius-s);--tag-size-medium-corner-radius: var(--luzmo-border-radius);--tag-size-large-corner-radius: var(--luzmo-border-radius);--tag-background-color: var(--luzmo-background-color);--tag-background-color-hover: var(--luzmo-background-color-hover);--tag-background-color-active: var(--luzmo-background-color-active);--tag-background-color-focus: var(--luzmo-background-color-focus);--tag-content-color: var(--luzmo-font-color);--tag-content-color-hover: var(--luzmo-font-color-hover);--tag-content-color-active: var(--luzmo-font-color-active);--tag-content-color-focus: var(--luzmo-font-color-focus);--tag-border-color-selected: var(--luzmo-border-color-down);--tag-border-color-selected-hover: var(--luzmo-border-color-down);--tag-border-color-selected-active: var(--luzmo-border-color-down);--tag-border-color-selected-focus: var(--luzmo-border-color-down);--tag-border-color-disabled: var(--luzmo-border-color-disabled);--tag-background-color-disabled: var(--luzmo-background-color-disabled);--avatar-opacity-disabled: .3;--tag-animation-duration: var(--luzmo-animation-duration);--tag-border-width: var(--luzmo-border-width);--tag-focus-ring-thickness: var(--luzmo-indicator-width);--tag-focus-ring-gap: var(--luzmo-indicator-gap);--tag-focus-ring-color: var(--luzmo-indicator-color);--tag-label-line-height: var(--luzmo-line-height);--tag-label-font-weight: var(--luzmo-font-weight);--tag-content-color-selected: var(--luzmo-font-color-down);--tag-background-color-selected: var(--luzmo-background-color-down);--tag-background-color-selected-hover: var(--luzmo-background-color-down);--tag-background-color-selected-active: var(--luzmo-background-color-down);--tag-background-color-selected-focus: var(--luzmo-background-color-down);--tag-border-color-invalid: var(--luzmo-negative-color);--tag-border-color-invalid-hover: var(--luzmo-negative-color-hover);--tag-border-color-invalid-active: var(--luzmo-negative-color-down);--tag-border-color-invalid-focus: var(--luzmo-negative-color-focus);--tag-content-color-invalid: var(--luzmo-negative-color);--tag-content-color-invalid-hover: var(--luzmo-negative-color-hover);--tag-content-color-invalid-active: var(--luzmo-negative-color-down);--tag-content-color-invalid-focus: var(--luzmo-negative-color-focus);--tag-border-color-invalid-selected: var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-hover: var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-focus: var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-active: var(--luzmo-negative-color-down);--tag-background-color-invalid-selected: var(--luzmo-background-color-down);--tag-background-color-invalid-selected-hover: var( --luzmo-background-color-down );--tag-background-color-invalid-selected-active: var( --luzmo-background-color-down );--tag-background-color-invalid-selected-focus: var( --luzmo-background-color-down );--tag-content-color-invalid-selected: var(--luzmo-negative-color-down);--tag-border-color-emphasized: var(--luzmo-primary);--tag-border-color-emphasized-hover: var(--luzmo-primary-hover);--tag-border-color-emphasized-active: var(--luzmo-primary-down);--tag-border-color-emphasized-focus: var(--luzmo-primary-focus);--tag-background-color-emphasized: var(--luzmo-primary);--tag-background-color-emphasized-hover: var(--luzmo-primary-hover);--tag-background-color-emphasized-active: var(--luzmo-primary-down);--tag-background-color-emphasized-focus: var(--luzmo-primary-focus);--tag-content-color-emphasized: white;--tag-content-color-disabled: var(--luzmo-disabled-color);--tag-icon-spacing-inline-end: var(--luzmo-spacing-3);--tag-icon-size: var(--luzmo-font-icon-size-s);--tag-avatar-spacing-inline-end: var(--luzmo-spacing-3);--tag-font-size: var(--luzmo-font-size)}:host([size=s]){--tag-height: var(--luzmo-component-height-xs);--tag-font-size: var(--luzmo-font-size-s);--tag-icon-size: var(--luzmo-icon-size-s);--tag-icon-spacing-inline-end: var(--luzmo-spacing-2);--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-2);--tag-border-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: var(--luzmo-spacing-3);--tag-label-spacing-inline-end: var(--luzmo-spacing-3);--tag-clear-button-spacing-inline-end: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host{--tag-height: var(--luzmo-component-height-s);--tag-font-size: var(--luzmo-font-size);--tag-icon-size: var(--luzmo-icon-size-m);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--tag-border-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-label-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-clear-button-spacing-inline-end: var(--luzmo-spacing-3)}:host([size=l]){--tag-height: var(--luzmo-component-height);--tag-font-size: var(--luzmo-font-size);--tag-icon-size: var(--luzmo-icon-size-l);--tag-icon-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-3);--tag-border-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: var(--luzmo-spacing-4);--tag-label-spacing-inline-end: var(--luzmo-spacing-4);--tag-clear-button-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=xl]){--tag-height: var(--luzmo-component-height-l);--tag-font-size: var(--luzmo-font-size-l);--tag-icon-size: var(--luzmo-icon-size-xl);--tag-icon-spacing-inline-end: var(--luzmo-spacing-4);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-border-radius: var(--luzmo-border-radius-l);--tag-spacing-inline-start: var(--luzmo-spacing-5);--tag-label-spacing-inline-end: var(--luzmo-spacing-5);--tag-clear-button-spacing-inline-end: var(--luzmo-spacing-4)}:host([invalid]) .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-key-focus, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([invalid]):hover .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-hover, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([invalid]:is(:active,[active])) .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-hover, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([size=xs]){--icon-size: var(--workflow-icon-size-50)}:host([size=s]){--icon-size: var(--workflow-icon-size-75)}:host([size=m]){--icon-size: var(--workflow-icon-size)}:host([size=l]){--icon-size: var(--workflow-icon-size-200)}:host([size=xl]){--icon-size: var(--workflow-icon-size-300)}:host([size=xxl]){--icon-size: var(--workflow-icon-size-400)}';var w=Object.defineProperty,v=(i,o,a,n)=>{for(var r=void 0,t=i.length-1,e;t>=0;t--)(e=i[t])&&(r=e(o,a,r)||r);return r&&w(o,a,r),r};class c extends m.SizedMixin(b.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(),this.deletable=!1,this.disabled=!1,this.readonly=!1,this.handleFocusin=()=>{this.addEventListener("focusout",this.handleFocusout),this.addEventListener("keydown",this.handleKeydown)},this.handleFocusout=()=>{this.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("focusout",this.handleFocusout)},this.handleKeydown=o=>{if(!this.deletable||this.disabled)return;const{code:a}=o;switch(a){case"Backspace":case"Space":case"Delete":{o.preventDefault(),o.stopPropagation(),this.delete();break}default:return}},this.addEventListener("focusin",this.handleFocusin)}static get styles(){return[l.unsafeCSS(k)]}handleIconSlotChange(o){o.target.assignedElements().forEach(r=>{r.tagName.toLowerCase()==="luzmo-icon"&&r.setAttribute("block","")})}delete(){this.readonly||!this.dispatchEvent(new Event("delete",{bubbles:!0,cancelable:!0,composed:!0}))||(this.blur(),this.remove())}render(){return l.html`
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("lit"),s=require("lit/decorators.js"),b=require("../base-DxRGeCrb.cjs"),m=require("../sized-mixin-DcvJLFeo.cjs");require("../button/index.cjs");const p=require("../focus-visible-D4BXb5RB.cjs"),f=require("../roving-tabindex-By_fCy_e.cjs"),k=':host{font-family:var(--luzmo-font-family);border-color:var(--highcontrast-tag-border-color, var(--luzmo-tag-border-color, var(--tag-border-color)));background-color:var(--highcontrast-tag-background-color, var(--luzmo-tag-background-color, var(--tag-background-color)));color:var(--highcontrast-tag-content-color, var(--luzmo-tag-content-color, var(--tag-content-color)));border-radius:var(--luzmo-tag-border-radius, var(--tag-border-radius));border-width:var(--luzmo-tag-border-width, var(--tag-border-width));block-size:var(--luzmo-tag-height, var(--tag-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:100%;-webkit-user-select:none;user-select:none;transition:border-color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,box-shadow var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,background-color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out;border-style:solid;outline:none;align-items:center;justify-content:center;padding-inline-start:calc(var(--luzmo-tag-spacing-inline-start, var(--tag-spacing-inline-start)) - var(--luzmo-tag-border-width, var(--tag-border-width)));padding-inline-end:0;display:inline-flex;position:relative}::slotted([slot=icon]){block-size:var(--luzmo-tag-icon-size, var(--tag-icon-size));inline-size:var(--luzmo-tag-icon-size, var(--tag-icon-size));flex-shrink:0;margin-inline-end:var(--luzmo-tag-icon-spacing-inline-end, var(--tag-icon-spacing-inline-end))}::slotted([slot=avatar]){margin-inline-end:var(--luzmo-tag-avatar-spacing-inline-end, var(--tag-avatar-spacing-inline-end))}.clear-button{--luzmo-clear-button-width: fit-content;--clearbutton-fill-size: fit-content;--clearbutton-fill-background-color: transparent;box-sizing:border-box;color:currentColor;margin-inline-start:calc(var(--luzmo-tag-clear-button-spacing-inline-start, var(--tag-clear-button-spacing-inline-start)) + var(--luzmo-tag-label-spacing-inline-end, var(--tag-label-spacing-inline-end)) * -1);margin-inline-end:calc(var(--luzmo-tag-clear-button-spacing-inline-end, var(--tag-clear-button-spacing-inline-end)) - var(--luzmo-tag-border-width, var(--tag-border-width)))}.clear-button .luzmo-ClearButton-fill{background-color:var(--luzmo-clearbutton-fill-background-color, var(--clearbutton-fill-background-color));inline-size:var(--luzmo-clearbutton-fill-size, var(--clearbutton-fill-size));block-size:var(--luzmo-clearbutton-fill-size, var(--clearbutton-fill-size))}.label{block-size:100%;box-sizing:border-box;line-height:var(--luzmo-tag-label-line-height, var(--tag-label-line-height));font-weight:var(--luzmo-tag-label-font-weight, var(--tag-label-font-weight));font-size:var(--luzmo-tag-font-size, var(--tag-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;flex:auto;display:flex;align-items:center;margin-inline-end:calc(var(--luzmo-tag-label-spacing-inline-end, var(--tag-label-spacing-inline-end)) - var(--luzmo-tag-border-width, var(--tag-border-width)));overflow:hidden}:host(:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-active, var(--luzmo-tag-border-color-active, var(--tag-border-color-active)));background-color:var(--highcontrast-tag-background-color-active, var(--luzmo-tag-background-color-active, var(--tag-background-color-active)));color:var(--highcontrast-tag-content-color-active, var(--luzmo-tag-content-color-active, var(--tag-content-color-active)))}:host([focused]),:host(:focus-visible){border-color:var(--highcontrast-tag-border-color-focus, var(--luzmo-tag-border-color-focus, var(--tag-border-color-focus)));background-color:var(--highcontrast-tag-background-color-focus, var(--luzmo-tag-background-color-focus, var(--tag-background-color-focus)));color:var(--highcontrast-tag-content-color-focus, var(--luzmo-tag-content-color-focus, var(--tag-content-color-focus)))}:host([focused]):after,:host(:focus-visible):after{content:"";border-color:var(--highcontrast-tag-focus-ring-color, var(--luzmo-tag-focus-ring-color, var(--tag-focus-ring-color)));border-radius:calc(var(--luzmo-tag-border-radius, var(--tag-border-radius)) + var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) + var(--luzmo-tag-border-width, var(--tag-border-width)));border-width:var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness));pointer-events:none;border-style:solid;display:inline-block;position:absolute;inset-block-start:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-block-end:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-inline-start:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-inline-end:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)))}:host([selected]){border-color:var(--highcontrast-tag-border-color-selected, var(--luzmo-tag-border-color-selected, var(--tag-border-color-selected)));background-color:var(--highcontrast-tag-background-color-selected, var(--luzmo-tag-background-color-selected, var(--tag-background-color-selected)));color:var(--highcontrast-tag-content-color-selected, var(--luzmo-tag-content-color-selected, var(--tag-content-color-selected)))}:host([selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-selected-active, var(--luzmo-tag-border-color-selected-active, var(--tag-border-color-selected-active)));background-color:var(--highcontrast-tag-background-color-selected-active, var(--luzmo-tag-background-color-selected-active, var(--tag-background-color-selected-active)))}:host([selected][focused]),:host([selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-selected-focus, var(--luzmo-tag-border-color-selected-focus, var(--tag-border-color-selected-focus)));background-color:var(--highcontrast-tag-background-color-selected-focus, var(--luzmo-tag-background-color-selected-focus, var(--tag-background-color-selected-focus)))}:host([invalid]){border-color:var(--highcontrast-tag-border-color-invalid, var(--luzmo-tag-border-color-invalid, var(--tag-border-color-invalid)));color:var(--highcontrast-tag-content-color-invalid, var(--luzmo-tag-content-color-invalid, var(--tag-content-color-invalid)))}:host([invalid]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-active, var(--luzmo-tag-border-color-invalid-active, var(--tag-border-color-invalid-active)));color:var(--highcontrast-tag-content-color-invalid-active, var(--luzmo-tag-content-color-invalid-active, var(--tag-content-color-invalid-active)))}:host([invalid][focused]),:host([invalid]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-focus, var(--luzmo-tag-border-color-invalid-focus, var(--tag-border-color-invalid-focus)));color:var(--highcontrast-tag-content-color-invalid-focus, var(--luzmo-tag-content-color-invalid-focus, var(--tag-content-color-invalid-focus)))}:host([invalid][selected]){border-color:var(--highcontrast-tag-border-color-invalid-selected, var(--luzmo-tag-border-color-invalid-selected, var(--tag-border-color-invalid-selected)));background-color:var(--highcontrast-tag-background-color-invalid-selected, var(--luzmo-tag-background-color-invalid-selected, var(--tag-background-color-invalid-selected)));color:var(--highcontrast-tag-content-color-invalid-selected, var(--luzmo-tag-content-color-invalid-selected, var(--tag-content-color-invalid-selected)))}:host([invalid][selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-selected-active, var(--luzmo-tag-border-color-invalid-selected-active, var(--tag-border-color-invalid-selected-active)));background-color:var(--highcontrast-tag-background-color-invalid-selected-active, var(--luzmo-tag-background-color-invalid-selected-active, var(--tag-background-color-invalid-selected-active)))}:host([invalid][selected][focused]),:host([invalid][selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-selected-focus, var(--luzmo-tag-border-color-invalid-selected-focus, var(--tag-border-color-invalid-selected-focus)));background-color:var(--highcontrast-tag-background-color-invalid-selected-focus, var(--luzmo-tag-background-color-invalid-selected-focus, var(--tag-background-color-invalid-selected-focus)))}:host([emphasized]){border-color:var(--highcontrast-tag-border-color-emphasized, var(--luzmo-tag-border-color-emphasized, var(--tag-border-color-emphasized)));background-color:var(--highcontrast-tag-background-color-emphasized, var(--luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized)));color:var(--highcontrast-tag-content-color-emphasized, var(--luzmo-tag-content-color-emphasized, var(--tag-content-color-emphasized)));--luzmo-clear-button-background-color-hover: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) );--luzmo-clear-button-background-color-focus: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) );--luzmo-clear-button-background-color-down: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) )}@media (hover: hover){:host(:hover){border-color:var(--highcontrast-tag-border-color-hover, var(--luzmo-tag-border-color-hover, var(--tag-border-color-hover)));background-color:var(--highcontrast-tag-background-color-hover, var(--luzmo-tag-background-color-hover, var(--tag-background-color-hover)));color:var(--highcontrast-tag-content-color-hover, var(--luzmo-tag-content-color-hover, var(--tag-content-color-hover)))}:host([selected]:hover){border-color:var(--highcontrast-tag-border-color-selected-hover, var(--luzmo-tag-border-color-selected-hover, var(--tag-border-color-selected-hover)));background-color:var(--highcontrast-tag-background-color-selected-hover, var(--luzmo-tag-background-color-selected-hover, var(--tag-background-color-selected-hover)));color:var(--highcontrast-tag-content-color-selected, var(--luzmo-tag-content-color-selected, var(--tag-content-color-selected)))}:host([invalid]:hover){border-color:var(--highcontrast-tag-border-color-invalid-hover, var(--luzmo-tag-border-color-invalid-hover, var(--tag-border-color-invalid-hover)));color:var(--highcontrast-tag-content-color-invalid-hover, var(--luzmo-tag-content-color-invalid-hover, var(--tag-content-color-invalid-hover)))}:host([invalid][selected]:hover){border-color:var(--highcontrast-tag-border-color-invalid-selected-hover, var(--luzmo-tag-border-color-invalid-selected-hover, var(--tag-border-color-invalid-selected-hover)));background-color:var(--highcontrast-tag-background-color-invalid-selected-hover, var(--luzmo-tag-background-color-invalid-selected-hover, var(--tag-background-color-invalid-selected-hover)));color:var(--highcontrast-tag-content-color-invalid-selected, var(--luzmo-tag-content-color-invalid-selected, var(--tag-content-color-invalid-selected)))}:host([emphasized]:hover){border-color:var(--highcontrast-tag-border-color-emphasized-hover, var(--luzmo-tag-border-color-emphasized-hover, var(--tag-border-color-emphasized-hover)));background-color:var(--highcontrast-tag-background-color-emphasized-hover, var(--luzmo-tag-background-color-emphasized-hover, var(--tag-background-color-emphasized-hover)));color:var(--highcontrast-tag-content-color-emphasized, var(--luzmo-tag-content-color-emphasized, var(--tag-content-color-emphasized)))}}:host([emphasized]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-emphasized-active, var(--luzmo-tag-border-color-emphasized-active, var(--tag-border-color-emphasized-active)));background-color:var(--highcontrast-tag-background-color-emphasized-active, var(--luzmo-tag-background-color-emphasized-active, var(--tag-background-color-emphasized-active)))}:host([emphasized][focused]),:host([emphasized]:focus-visible){border-color:var(--highcontrast-tag-border-color-emphasized-focus, var(--luzmo-tag-border-color-emphasized-focus, var(--tag-border-color-emphasized-focus)));background-color:var(--highcontrast-tag-background-color-emphasized-focus, var(--luzmo-tag-background-color-emphasized-focus, var(--tag-background-color-emphasized-focus)))}:host([disabled]){border-color:var(--highcontrast-tag-border-color-disabled, var(--luzmo-tag-border-color-disabled, var(--tag-border-color-disabled)));background-color:var(--highcontrast-tag-background-color-disabled, var(--luzmo-tag-background-color-disabled, var(--tag-background-color-disabled)));color:var(--highcontrast-tag-content-color-disabled, var(--luzmo-tag-content-color-disabled, var(--tag-content-color-disabled)));pointer-events:none}:host([disabled]) ::slotted([slot=avatar]){opacity:var(--luzmo-avatar-opacity-disabled, var(--avatar-opacity-disabled))}@media (forced-colors: active){:host{--highcontrast-tag-border-color: ButtonText;--highcontrast-tag-border-color-hover: ButtonText;--highcontrast-tag-border-color-active: ButtonText;--highcontrast-tag-border-color-focus: Highlight;--highcontrast-tag-background-color: ButtonFace;--highcontrast-tag-background-color-hover: ButtonFace;--highcontrast-tag-background-color-active: ButtonFace;--highcontrast-tag-background-color-focus: ButtonFace;--highcontrast-tag-content-color: ButtonText;--highcontrast-tag-content-color-hover: ButtonText;--highcontrast-tag-content-color-active: ButtonText;--highcontrast-tag-content-color-focus: ButtonText;--highcontrast-tag-focus-ring-color: Highlight;forced-color-adjust:none}:host([selected]){--highcontrast-tag-border-color-selected: Highlight;--highcontrast-tag-border-color-selected-hover: Highlight;--highcontrast-tag-border-color-selected-active: Highlight;--highcontrast-tag-border-color-selected-focus: Highlight;--highcontrast-tag-background-color-selected: Highlight;--highcontrast-tag-background-color-selected-hover: Highlight;--highcontrast-tag-background-color-selected-active: Highlight;--highcontrast-tag-background-color-selected-focus: Highlight;--highcontrast-tag-content-color-selected: HighlightText}:host([disabled]){--highcontrast-tag-border-color-disabled: GrayText;--highcontrast-tag-background-color-disabled: ButtonFace;--highcontrast-tag-content-color-disabled: GrayText}:host([invalid]){--highcontrast-tag-border-color-invalid: Highlight;--highcontrast-tag-border-color-invalid-hover: Highlight;--highcontrast-tag-border-color-invalid-active: Highlight;--highcontrast-tag-border-color-invalid-focus: Highlight;--highcontrast-tag-content-color-invalid: CanvasText;--highcontrast-tag-content-color-invalid-hover: CanvasText;--highcontrast-tag-content-color-invalid-active: CanvasText;--highcontrast-tag-content-color-invalid-focus: CanvasText}:host([invalid][selected]){--highcontrast-tag-border-color-invalid-selected: Highlight;--highcontrast-tag-border-color-invalid-selected-hover: Highlight;--highcontrast-tag-border-color-invalid-selected-focus: Highlight;--highcontrast-tag-border-color-invalid-selected-active: Highlight;--highcontrast-tag-background-color-invalid-selected: Highlight;--highcontrast-tag-background-color-invalid-selected-hover: Highlight;--highcontrast-tag-background-color-invalid-selected-active: Highlight;--highcontrast-tag-background-color-invalid-selected-focus: Highlight;--highcontrast-tag-content-color-invalid-selected: HighlightText}:host([emphasized]){--highcontrast-tag-border-color-emphasized: Highlight;--highcontrast-tag-border-color-emphasized-hover: Highlight;--highcontrast-tag-border-color-emphasized-active: Highlight;--highcontrast-tag-border-color-emphasized-focus: Highlight;--highcontrast-tag-background-color-emphasized: ButtonFace;--highcontrast-tag-background-color-emphasized-hover: ButtonFace;--highcontrast-tag-background-color-emphasized-active: ButtonFace;--highcontrast-tag-background-color-emphasized-focus: ButtonFace;--highcontrast-tag-content-color-emphasized: CanvasText}}:host{--tag-border-color: var(--luzmo-border-color);--tag-border-color-hover: var(--luzmo-border-color-hover);--tag-border-color-active: var(--luzmo-border-color-active);--tag-border-color-focus: var(--luzmo-border-color-focus);--tag-size-small-border-radius: var(--luzmo-border-radius-s);--tag-size-medium-border-radius: var(--luzmo-border-radius);--tag-size-large-border-radius: var(--luzmo-border-radius);--tag-background-color: var(--luzmo-background-color);--tag-background-color-hover: var(--luzmo-background-color-hover);--tag-background-color-active: var(--luzmo-background-color-active);--tag-background-color-focus: var(--luzmo-background-color-focus);--tag-content-color: var(--luzmo-font-color);--tag-content-color-hover: var(--luzmo-font-color-hover);--tag-content-color-active: var(--luzmo-font-color-active);--tag-content-color-focus: var(--luzmo-font-color-focus);--tag-border-color-selected: var(--luzmo-border-color-down);--tag-border-color-selected-hover: var(--luzmo-border-color-down);--tag-border-color-selected-active: var(--luzmo-border-color-down);--tag-border-color-selected-focus: var(--luzmo-border-color-down);--tag-border-color-disabled: var(--luzmo-border-color-disabled);--tag-background-color-disabled: var(--luzmo-background-color-disabled);--avatar-opacity-disabled: .3;--tag-animation-duration: var(--luzmo-animation-duration);--tag-border-width: var(--luzmo-border-width);--tag-focus-ring-thickness: var(--luzmo-indicator-width);--tag-focus-ring-gap: var(--luzmo-indicator-gap);--tag-focus-ring-color: var(--luzmo-indicator-color);--tag-label-line-height: var(--luzmo-line-height);--tag-label-font-weight: var(--luzmo-font-weight);--tag-content-color-selected: var(--luzmo-font-color-down);--tag-background-color-selected: var(--luzmo-background-color-down);--tag-background-color-selected-hover: var(--luzmo-background-color-down);--tag-background-color-selected-active: var(--luzmo-background-color-down);--tag-background-color-selected-focus: var(--luzmo-background-color-down);--tag-border-color-invalid: var(--luzmo-negative-color);--tag-border-color-invalid-hover: var(--luzmo-negative-color-hover);--tag-border-color-invalid-active: var(--luzmo-negative-color-down);--tag-border-color-invalid-focus: var(--luzmo-negative-color-focus);--tag-content-color-invalid: var(--luzmo-negative-color);--tag-content-color-invalid-hover: var(--luzmo-negative-color-hover);--tag-content-color-invalid-active: var(--luzmo-negative-color-down);--tag-content-color-invalid-focus: var(--luzmo-negative-color-focus);--tag-border-color-invalid-selected: var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-hover: var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-focus: var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-active: var(--luzmo-negative-color-down);--tag-background-color-invalid-selected: var(--luzmo-background-color-down);--tag-background-color-invalid-selected-hover: var( --luzmo-background-color-down );--tag-background-color-invalid-selected-active: var( --luzmo-background-color-down );--tag-background-color-invalid-selected-focus: var( --luzmo-background-color-down );--tag-content-color-invalid-selected: var(--luzmo-negative-color-down);--tag-border-color-emphasized: var(--luzmo-primary);--tag-border-color-emphasized-hover: var(--luzmo-primary-hover);--tag-border-color-emphasized-active: var(--luzmo-primary-down);--tag-border-color-emphasized-focus: var(--luzmo-primary-focus);--tag-background-color-emphasized: var(--luzmo-primary);--tag-background-color-emphasized-hover: var(--luzmo-primary-hover);--tag-background-color-emphasized-active: var(--luzmo-primary-down);--tag-background-color-emphasized-focus: var(--luzmo-primary-focus);--tag-content-color-emphasized: white;--tag-content-color-disabled: var(--luzmo-disabled-color);--tag-icon-spacing-inline-end: var(--luzmo-spacing-3);--tag-icon-size: var(--luzmo-font-icon-size-s);--tag-avatar-spacing-inline-end: var(--luzmo-spacing-3);--tag-font-size: var(--luzmo-font-size)}:host([size=s]){--tag-height: var(--luzmo-component-height-xs);--tag-font-size: var(--luzmo-font-size-s);--tag-icon-size: var(--luzmo-icon-size-s);--tag-icon-spacing-inline-end: var(--luzmo-spacing-2);--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-2);--tag-border-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: var(--luzmo-spacing-3);--tag-label-spacing-inline-end: var(--luzmo-spacing-3);--tag-clear-button-spacing-inline-end: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host{--tag-height: var(--luzmo-component-height-s);--tag-font-size: var(--luzmo-font-size);--tag-icon-size: var(--luzmo-icon-size-m);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--tag-border-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-label-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-clear-button-spacing-inline-end: var(--luzmo-spacing-3)}:host([size=l]){--tag-height: var(--luzmo-component-height);--tag-font-size: var(--luzmo-font-size);--tag-icon-size: var(--luzmo-icon-size-l);--tag-icon-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-3);--tag-border-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: var(--luzmo-spacing-4);--tag-label-spacing-inline-end: var(--luzmo-spacing-4);--tag-clear-button-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=xl]){--tag-height: var(--luzmo-component-height-l);--tag-font-size: var(--luzmo-font-size-l);--tag-icon-size: var(--luzmo-icon-size-xl);--tag-icon-spacing-inline-end: var(--luzmo-spacing-4);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-border-radius: var(--luzmo-border-radius-l);--tag-spacing-inline-start: var(--luzmo-spacing-5);--tag-label-spacing-inline-end: var(--luzmo-spacing-5);--tag-clear-button-spacing-inline-end: var(--luzmo-spacing-4)}:host([invalid]) .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-key-focus, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([invalid]):hover .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-hover, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([invalid]:is(:active,[active])) .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-hover, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([size=xs]){--icon-size: var(--workflow-icon-size-50)}:host([size=s]){--icon-size: var(--workflow-icon-size-75)}:host([size=m]){--icon-size: var(--workflow-icon-size)}:host([size=l]){--icon-size: var(--workflow-icon-size-200)}:host([size=xl]){--icon-size: var(--workflow-icon-size-300)}:host([size=xxl]){--icon-size: var(--workflow-icon-size-400)}';var w=Object.defineProperty,v=(i,o,a,n)=>{for(var r=void 0,t=i.length-1,e;t>=0;t--)(e=i[t])&&(r=e(o,a,r)||r);return r&&w(o,a,r),r};class c extends m.SizedMixin(b.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(),this.deletable=!1,this.disabled=!1,this.readonly=!1,this.handleFocusin=()=>{this.addEventListener("focusout",this.handleFocusout),this.addEventListener("keydown",this.handleKeydown)},this.handleFocusout=()=>{this.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("focusout",this.handleFocusout)},this.handleKeydown=o=>{if(!this.deletable||this.disabled)return;const{code:a}=o;switch(a){case"Backspace":case"Space":case"Delete":{o.preventDefault(),o.stopPropagation(),this.delete();break}default:return}},this.addEventListener("focusin",this.handleFocusin)}static get styles(){return[l.unsafeCSS(k)]}handleIconSlotChange(o){o.target.assignedElements().forEach(r=>{r.tagName.toLowerCase()==="luzmo-icon"&&r.setAttribute("block","")})}delete(){this.readonly||!this.dispatchEvent(new Event("delete",{bubbles:!0,cancelable:!0,composed:!0}))||(this.blur(),this.remove())}render(){return l.html`
|
|
19
19
|
<slot name="avatar"></slot>
|
|
20
20
|
<slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
|
|
21
21
|
<span class="label"><slot></slot></span>
|
package/components/tags/index.js
CHANGED
|
@@ -29,7 +29,7 @@ const p = () => {
|
|
|
29
29
|
}
|
|
30
30
|
};
|
|
31
31
|
p();
|
|
32
|
-
const H = ':host{font-family:var(--luzmo-font-family);border-color:var(--highcontrast-tag-border-color, var(--luzmo-tag-border-color, var(--tag-border-color)));background-color:var(--highcontrast-tag-background-color, var(--luzmo-tag-background-color, var(--tag-background-color)));color:var(--highcontrast-tag-content-color, var(--luzmo-tag-content-color, var(--tag-content-color)));border-radius:var(--luzmo-tag-border-radius, var(--tag-border-radius));border-width:var(--luzmo-tag-border-width, var(--tag-border-width));block-size:var(--luzmo-tag-height, var(--tag-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:100%;-webkit-user-select:none;user-select:none;transition:border-color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,box-shadow var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,background-color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out;border-style:solid;outline:none;align-items:center;justify-content:center;padding-inline-start:calc(var(--luzmo-tag-spacing-inline-start, var(--tag-spacing-inline-start)) - var(--luzmo-tag-border-width, var(--tag-border-width)));padding-inline-end:0;display:inline-flex;position:relative}::slotted([slot=icon]){block-size:var(--luzmo-tag-icon-size, var(--tag-icon-size));inline-size:var(--luzmo-tag-icon-size, var(--tag-icon-size));flex-shrink:0;margin-inline-end:var(--luzmo-tag-icon-spacing-inline-end, var(--tag-icon-spacing-inline-end))}::slotted([slot=avatar]){margin-inline-end:var(--luzmo-tag-avatar-spacing-inline-end, var(--tag-avatar-spacing-inline-end))}.clear-button{--luzmo-clear-button-width: fit-content;--clearbutton-fill-size: fit-content;--clearbutton-fill-background-color: transparent;box-sizing:border-box;color:currentColor;margin-inline-start:calc(var(--luzmo-tag-clear-button-spacing-inline-start, var(--tag-clear-button-spacing-inline-start)) + var(--luzmo-tag-label-spacing-inline-end, var(--tag-label-spacing-inline-end)) * -1);margin-inline-end:calc(var(--luzmo-tag-clear-button-spacing-inline-end, var(--tag-clear-button-spacing-inline-end)) - var(--luzmo-tag-border-width, var(--tag-border-width)))}.clear-button .luzmo-ClearButton-fill{background-color:var(--luzmo-clearbutton-fill-background-color, var(--clearbutton-fill-background-color));inline-size:var(--luzmo-clearbutton-fill-size, var(--clearbutton-fill-size));block-size:var(--luzmo-clearbutton-fill-size, var(--clearbutton-fill-size))}.label{block-size:100%;box-sizing:border-box;line-height:var(--luzmo-tag-label-line-height, var(--tag-label-line-height));font-weight:var(--luzmo-tag-label-font-weight, var(--tag-label-font-weight));font-size:var(--luzmo-tag-font-size, var(--tag-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;flex:auto;display:flex;align-items:center;margin-inline-end:calc(var(--luzmo-tag-label-spacing-inline-end, var(--tag-label-spacing-inline-end)) - var(--luzmo-tag-border-width, var(--tag-border-width)));overflow:hidden}:host(:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-active, var(--luzmo-tag-border-color-active, var(--tag-border-color-active)));background-color:var(--highcontrast-tag-background-color-active, var(--luzmo-tag-background-color-active, var(--tag-background-color-active)));color:var(--highcontrast-tag-content-color-active, var(--luzmo-tag-content-color-active, var(--tag-content-color-active)))}:host([focused]),:host(:focus-visible){border-color:var(--highcontrast-tag-border-color-focus, var(--luzmo-tag-border-color-focus, var(--tag-border-color-focus)));background-color:var(--highcontrast-tag-background-color-focus, var(--luzmo-tag-background-color-focus, var(--tag-background-color-focus)));color:var(--highcontrast-tag-content-color-focus, var(--luzmo-tag-content-color-focus, var(--tag-content-color-focus)))}:host([focused]):after,:host(:focus-visible):after{content:"";border-color:var(--highcontrast-tag-focus-ring-color, var(--luzmo-tag-focus-ring-color, var(--tag-focus-ring-color)));border-radius:calc(var(--luzmo-tag-border-radius, var(--tag-border-radius)) + var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) + var(--luzmo-tag-border-width, var(--tag-border-width)));border-width:var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness));pointer-events:none;border-style:solid;display:inline-block;position:absolute;inset-block-start:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-block-end:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-inline-start:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-inline-end:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)))}:host([selected]){border-color:var(--highcontrast-tag-border-color-selected, var(--luzmo-tag-border-color-selected, var(--tag-border-color-selected)));background-color:var(--highcontrast-tag-background-color-selected, var(--luzmo-tag-background-color-selected, var(--tag-background-color-selected)));color:var(--highcontrast-tag-content-color-selected, var(--luzmo-tag-content-color-selected, var(--tag-content-color-selected)))}:host([selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-selected-active, var(--luzmo-tag-border-color-selected-active, var(--tag-border-color-selected-active)));background-color:var(--highcontrast-tag-background-color-selected-active, var(--luzmo-tag-background-color-selected-active, var(--tag-background-color-selected-active)))}:host([selected][focused]),:host([selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-selected-focus, var(--luzmo-tag-border-color-selected-focus, var(--tag-border-color-selected-focus)));background-color:var(--highcontrast-tag-background-color-selected-focus, var(--luzmo-tag-background-color-selected-focus, var(--tag-background-color-selected-focus)))}:host([invalid]){border-color:var(--highcontrast-tag-border-color-invalid, var(--luzmo-tag-border-color-invalid, var(--tag-border-color-invalid)));color:var(--highcontrast-tag-content-color-invalid, var(--luzmo-tag-content-color-invalid, var(--tag-content-color-invalid)))}:host([invalid]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-active, var(--luzmo-tag-border-color-invalid-active, var(--tag-border-color-invalid-active)));color:var(--highcontrast-tag-content-color-invalid-active, var(--luzmo-tag-content-color-invalid-active, var(--tag-content-color-invalid-active)))}:host([invalid][focused]),:host([invalid]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-focus, var(--luzmo-tag-border-color-invalid-focus, var(--tag-border-color-invalid-focus)));color:var(--highcontrast-tag-content-color-invalid-focus, var(--luzmo-tag-content-color-invalid-focus, var(--tag-content-color-invalid-focus)))}:host([invalid][selected]){border-color:var(--highcontrast-tag-border-color-invalid-selected, var(--luzmo-tag-border-color-invalid-selected, var(--tag-border-color-invalid-selected)));background-color:var(--highcontrast-tag-background-color-invalid-selected, var(--luzmo-tag-background-color-invalid-selected, var(--tag-background-color-invalid-selected)));color:var(--highcontrast-tag-content-color-invalid-selected, var(--luzmo-tag-content-color-invalid-selected, var(--tag-content-color-invalid-selected)))}:host([invalid][selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-selected-active, var(--luzmo-tag-border-color-invalid-selected-active, var(--tag-border-color-invalid-selected-active)));background-color:var(--highcontrast-tag-background-color-invalid-selected-active, var(--luzmo-tag-background-color-invalid-selected-active, var(--tag-background-color-invalid-selected-active)))}:host([invalid][selected][focused]),:host([invalid][selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-selected-focus, var(--luzmo-tag-border-color-invalid-selected-focus, var(--tag-border-color-invalid-selected-focus)));background-color:var(--highcontrast-tag-background-color-invalid-selected-focus, var(--luzmo-tag-background-color-invalid-selected-focus, var(--tag-background-color-invalid-selected-focus)))}:host([emphasized]){border-color:var(--highcontrast-tag-border-color-emphasized, var(--luzmo-tag-border-color-emphasized, var(--tag-border-color-emphasized)));background-color:var(--highcontrast-tag-background-color-emphasized, var(--luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized)));color:var(--highcontrast-tag-content-color-emphasized, var(--luzmo-tag-content-color-emphasized, var(--tag-content-color-emphasized)));--luzmo-clear-button-background-color-hover: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) );--luzmo-clear-button-background-color-focus: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) );--luzmo-clear-button-background-color-down: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) )}@media (hover: hover){:host(:hover){border-color:var(--highcontrast-tag-border-color-hover, var(--luzmo-tag-border-color-hover, var(--tag-border-color-hover)));background-color:var(--highcontrast-tag-background-color-hover, var(--luzmo-tag-background-color-hover, var(--tag-background-color-hover)));color:var(--highcontrast-tag-content-color-hover, var(--luzmo-tag-content-color-hover, var(--tag-content-color-hover)))}:host([selected]:hover){border-color:var(--highcontrast-tag-border-color-selected-hover, var(--luzmo-tag-border-color-selected-hover, var(--tag-border-color-selected-hover)));background-color:var(--highcontrast-tag-background-color-selected-hover, var(--luzmo-tag-background-color-selected-hover, var(--tag-background-color-selected-hover)));color:var(--highcontrast-tag-content-color-selected, var(--luzmo-tag-content-color-selected, var(--tag-content-color-selected)))}:host([invalid]:hover){border-color:var(--highcontrast-tag-border-color-invalid-hover, var(--luzmo-tag-border-color-invalid-hover, var(--tag-border-color-invalid-hover)));color:var(--highcontrast-tag-content-color-invalid-hover, var(--luzmo-tag-content-color-invalid-hover, var(--tag-content-color-invalid-hover)))}:host([invalid][selected]:hover){border-color:var(--highcontrast-tag-border-color-invalid-selected-hover, var(--luzmo-tag-border-color-invalid-selected-hover, var(--tag-border-color-invalid-selected-hover)));background-color:var(--highcontrast-tag-background-color-invalid-selected-hover, var(--luzmo-tag-background-color-invalid-selected-hover, var(--tag-background-color-invalid-selected-hover)));color:var(--highcontrast-tag-content-color-invalid-selected, var(--luzmo-tag-content-color-invalid-selected, var(--tag-content-color-invalid-selected)))}:host([emphasized]:hover){border-color:var(--highcontrast-tag-border-color-emphasized-hover, var(--luzmo-tag-border-color-emphasized-hover, var(--tag-border-color-emphasized-hover)));background-color:var(--highcontrast-tag-background-color-emphasized-hover, var(--luzmo-tag-background-color-emphasized-hover, var(--tag-background-color-emphasized-hover)));color:var(--highcontrast-tag-content-color-emphasized, var(--luzmo-tag-content-color-emphasized, var(--tag-content-color-emphasized)))}}:host([emphasized]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-emphasized-active, var(--luzmo-tag-border-color-emphasized-active, var(--tag-border-color-emphasized-active)));background-color:var(--highcontrast-tag-background-color-emphasized-active, var(--luzmo-tag-background-color-emphasized-active, var(--tag-background-color-emphasized-active)))}:host([emphasized][focused]),:host([emphasized]:focus-visible){border-color:var(--highcontrast-tag-border-color-emphasized-focus, var(--luzmo-tag-border-color-emphasized-focus, var(--tag-border-color-emphasized-focus)));background-color:var(--highcontrast-tag-background-color-emphasized-focus, var(--luzmo-tag-background-color-emphasized-focus, var(--tag-background-color-emphasized-focus)))}:host([disabled]){border-color:var(--highcontrast-tag-border-color-disabled, var(--luzmo-tag-border-color-disabled, var(--tag-border-color-disabled)));background-color:var(--highcontrast-tag-background-color-disabled, var(--luzmo-tag-background-color-disabled, var(--tag-background-color-disabled)));color:var(--highcontrast-tag-content-color-disabled, var(--luzmo-tag-content-color-disabled, var(--tag-content-color-disabled)));pointer-events:none}:host([disabled]) ::slotted([slot=avatar]){opacity:var(--luzmo-avatar-opacity-disabled, var(--avatar-opacity-disabled))}@media (forced-colors: active){:host{--highcontrast-tag-border-color: ButtonText;--highcontrast-tag-border-color-hover: ButtonText;--highcontrast-tag-border-color-active: ButtonText;--highcontrast-tag-border-color-focus: Highlight;--highcontrast-tag-background-color: ButtonFace;--highcontrast-tag-background-color-hover: ButtonFace;--highcontrast-tag-background-color-active: ButtonFace;--highcontrast-tag-background-color-focus: ButtonFace;--highcontrast-tag-content-color: ButtonText;--highcontrast-tag-content-color-hover: ButtonText;--highcontrast-tag-content-color-active: ButtonText;--highcontrast-tag-content-color-focus: ButtonText;--highcontrast-tag-focus-ring-color: Highlight;forced-color-adjust:none}:host([selected]){--highcontrast-tag-border-color-selected: Highlight;--highcontrast-tag-border-color-selected-hover: Highlight;--highcontrast-tag-border-color-selected-active: Highlight;--highcontrast-tag-border-color-selected-focus: Highlight;--highcontrast-tag-background-color-selected: Highlight;--highcontrast-tag-background-color-selected-hover: Highlight;--highcontrast-tag-background-color-selected-active: Highlight;--highcontrast-tag-background-color-selected-focus: Highlight;--highcontrast-tag-content-color-selected: HighlightText}:host([disabled]){--highcontrast-tag-border-color-disabled: GrayText;--highcontrast-tag-background-color-disabled: ButtonFace;--highcontrast-tag-content-color-disabled: GrayText}:host([invalid]){--highcontrast-tag-border-color-invalid: Highlight;--highcontrast-tag-border-color-invalid-hover: Highlight;--highcontrast-tag-border-color-invalid-active: Highlight;--highcontrast-tag-border-color-invalid-focus: Highlight;--highcontrast-tag-content-color-invalid: CanvasText;--highcontrast-tag-content-color-invalid-hover: CanvasText;--highcontrast-tag-content-color-invalid-active: CanvasText;--highcontrast-tag-content-color-invalid-focus: CanvasText}:host([invalid][selected]){--highcontrast-tag-border-color-invalid-selected: Highlight;--highcontrast-tag-border-color-invalid-selected-hover: Highlight;--highcontrast-tag-border-color-invalid-selected-focus: Highlight;--highcontrast-tag-border-color-invalid-selected-active: Highlight;--highcontrast-tag-background-color-invalid-selected: Highlight;--highcontrast-tag-background-color-invalid-selected-hover: Highlight;--highcontrast-tag-background-color-invalid-selected-active: Highlight;--highcontrast-tag-background-color-invalid-selected-focus: Highlight;--highcontrast-tag-content-color-invalid-selected: HighlightText}:host([emphasized]){--highcontrast-tag-border-color-emphasized: Highlight;--highcontrast-tag-border-color-emphasized-hover: Highlight;--highcontrast-tag-border-color-emphasized-active: Highlight;--highcontrast-tag-border-color-emphasized-focus: Highlight;--highcontrast-tag-background-color-emphasized: ButtonFace;--highcontrast-tag-background-color-emphasized-hover: ButtonFace;--highcontrast-tag-background-color-emphasized-active: ButtonFace;--highcontrast-tag-background-color-emphasized-focus: ButtonFace;--highcontrast-tag-content-color-emphasized: CanvasText}}:host{--tag-border-color: var(--luzmo-border-color);--tag-border-color-hover: var(--luzmo-border-color-hover);--tag-border-color-active: var(--luzmo-border-color-active);--tag-border-color-focus: var(--luzmo-border-color-focus);--tag-size-small-corner-radius: var(--luzmo-border-radius-s);--tag-size-medium-corner-radius: var(--luzmo-border-radius);--tag-size-large-corner-radius: var(--luzmo-border-radius);--tag-background-color: var(--luzmo-background-color);--tag-background-color-hover: var(--luzmo-background-color-hover);--tag-background-color-active: var(--luzmo-background-color-active);--tag-background-color-focus: var(--luzmo-background-color-focus);--tag-content-color: var(--luzmo-font-color);--tag-content-color-hover: var(--luzmo-font-color-hover);--tag-content-color-active: var(--luzmo-font-color-active);--tag-content-color-focus: var(--luzmo-font-color-focus);--tag-border-color-selected: var(--luzmo-border-color-down);--tag-border-color-selected-hover: var(--luzmo-border-color-down);--tag-border-color-selected-active: var(--luzmo-border-color-down);--tag-border-color-selected-focus: var(--luzmo-border-color-down);--tag-border-color-disabled: var(--luzmo-border-color-disabled);--tag-background-color-disabled: var(--luzmo-background-color-disabled);--avatar-opacity-disabled: .3;--tag-animation-duration: var(--luzmo-animation-duration);--tag-border-width: var(--luzmo-border-width);--tag-focus-ring-thickness: var(--luzmo-indicator-width);--tag-focus-ring-gap: var(--luzmo-indicator-gap);--tag-focus-ring-color: var(--luzmo-indicator-color);--tag-label-line-height: var(--luzmo-line-height);--tag-label-font-weight: var(--luzmo-font-weight);--tag-content-color-selected: var(--luzmo-font-color-down);--tag-background-color-selected: var(--luzmo-background-color-down);--tag-background-color-selected-hover: var(--luzmo-background-color-down);--tag-background-color-selected-active: var(--luzmo-background-color-down);--tag-background-color-selected-focus: var(--luzmo-background-color-down);--tag-border-color-invalid: var(--luzmo-negative-color);--tag-border-color-invalid-hover: var(--luzmo-negative-color-hover);--tag-border-color-invalid-active: var(--luzmo-negative-color-down);--tag-border-color-invalid-focus: var(--luzmo-negative-color-focus);--tag-content-color-invalid: var(--luzmo-negative-color);--tag-content-color-invalid-hover: var(--luzmo-negative-color-hover);--tag-content-color-invalid-active: var(--luzmo-negative-color-down);--tag-content-color-invalid-focus: var(--luzmo-negative-color-focus);--tag-border-color-invalid-selected: var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-hover: var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-focus: var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-active: var(--luzmo-negative-color-down);--tag-background-color-invalid-selected: var(--luzmo-background-color-down);--tag-background-color-invalid-selected-hover: var( --luzmo-background-color-down );--tag-background-color-invalid-selected-active: var( --luzmo-background-color-down );--tag-background-color-invalid-selected-focus: var( --luzmo-background-color-down );--tag-content-color-invalid-selected: var(--luzmo-negative-color-down);--tag-border-color-emphasized: var(--luzmo-primary);--tag-border-color-emphasized-hover: var(--luzmo-primary-hover);--tag-border-color-emphasized-active: var(--luzmo-primary-down);--tag-border-color-emphasized-focus: var(--luzmo-primary-focus);--tag-background-color-emphasized: var(--luzmo-primary);--tag-background-color-emphasized-hover: var(--luzmo-primary-hover);--tag-background-color-emphasized-active: var(--luzmo-primary-down);--tag-background-color-emphasized-focus: var(--luzmo-primary-focus);--tag-content-color-emphasized: white;--tag-content-color-disabled: var(--luzmo-disabled-color);--tag-icon-spacing-inline-end: var(--luzmo-spacing-3);--tag-icon-size: var(--luzmo-font-icon-size-s);--tag-avatar-spacing-inline-end: var(--luzmo-spacing-3);--tag-font-size: var(--luzmo-font-size)}:host([size=s]){--tag-height: var(--luzmo-component-height-xs);--tag-font-size: var(--luzmo-font-size-s);--tag-icon-size: var(--luzmo-icon-size-s);--tag-icon-spacing-inline-end: var(--luzmo-spacing-2);--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-2);--tag-border-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: var(--luzmo-spacing-3);--tag-label-spacing-inline-end: var(--luzmo-spacing-3);--tag-clear-button-spacing-inline-end: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host{--tag-height: var(--luzmo-component-height-s);--tag-font-size: var(--luzmo-font-size);--tag-icon-size: var(--luzmo-icon-size-m);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--tag-border-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-label-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-clear-button-spacing-inline-end: var(--luzmo-spacing-3)}:host([size=l]){--tag-height: var(--luzmo-component-height);--tag-font-size: var(--luzmo-font-size);--tag-icon-size: var(--luzmo-icon-size-l);--tag-icon-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-3);--tag-border-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: var(--luzmo-spacing-4);--tag-label-spacing-inline-end: var(--luzmo-spacing-4);--tag-clear-button-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=xl]){--tag-height: var(--luzmo-component-height-l);--tag-font-size: var(--luzmo-font-size-l);--tag-icon-size: var(--luzmo-icon-size-xl);--tag-icon-spacing-inline-end: var(--luzmo-spacing-4);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-border-radius: var(--luzmo-border-radius-l);--tag-spacing-inline-start: var(--luzmo-spacing-5);--tag-label-spacing-inline-end: var(--luzmo-spacing-5);--tag-clear-button-spacing-inline-end: var(--luzmo-spacing-4)}:host([invalid]) .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-key-focus, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([invalid]):hover .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-hover, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([invalid]:is(:active,[active])) .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-hover, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([size=xs]){--icon-size: var(--workflow-icon-size-50)}:host([size=s]){--icon-size: var(--workflow-icon-size-75)}:host([size=m]){--icon-size: var(--workflow-icon-size)}:host([size=l]){--icon-size: var(--workflow-icon-size-200)}:host([size=xl]){--icon-size: var(--workflow-icon-size-300)}:host([size=xxl]){--icon-size: var(--workflow-icon-size-400)}';
|
|
32
|
+
const H = ':host{font-family:var(--luzmo-font-family);border-color:var(--highcontrast-tag-border-color, var(--luzmo-tag-border-color, var(--tag-border-color)));background-color:var(--highcontrast-tag-background-color, var(--luzmo-tag-background-color, var(--tag-background-color)));color:var(--highcontrast-tag-content-color, var(--luzmo-tag-content-color, var(--tag-content-color)));border-radius:var(--luzmo-tag-border-radius, var(--tag-border-radius));border-width:var(--luzmo-tag-border-width, var(--tag-border-width));block-size:var(--luzmo-tag-height, var(--tag-height));box-sizing:border-box;vertical-align:bottom;max-inline-size:100%;-webkit-user-select:none;user-select:none;transition:border-color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,box-shadow var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out,background-color var(--luzmo-tag-animation-duration, var(--tag-animation-duration)) ease-in-out;border-style:solid;outline:none;align-items:center;justify-content:center;padding-inline-start:calc(var(--luzmo-tag-spacing-inline-start, var(--tag-spacing-inline-start)) - var(--luzmo-tag-border-width, var(--tag-border-width)));padding-inline-end:0;display:inline-flex;position:relative}::slotted([slot=icon]){block-size:var(--luzmo-tag-icon-size, var(--tag-icon-size));inline-size:var(--luzmo-tag-icon-size, var(--tag-icon-size));flex-shrink:0;margin-inline-end:var(--luzmo-tag-icon-spacing-inline-end, var(--tag-icon-spacing-inline-end))}::slotted([slot=avatar]){margin-inline-end:var(--luzmo-tag-avatar-spacing-inline-end, var(--tag-avatar-spacing-inline-end))}.clear-button{--luzmo-clear-button-width: fit-content;--clearbutton-fill-size: fit-content;--clearbutton-fill-background-color: transparent;box-sizing:border-box;color:currentColor;margin-inline-start:calc(var(--luzmo-tag-clear-button-spacing-inline-start, var(--tag-clear-button-spacing-inline-start)) + var(--luzmo-tag-label-spacing-inline-end, var(--tag-label-spacing-inline-end)) * -1);margin-inline-end:calc(var(--luzmo-tag-clear-button-spacing-inline-end, var(--tag-clear-button-spacing-inline-end)) - var(--luzmo-tag-border-width, var(--tag-border-width)))}.clear-button .luzmo-ClearButton-fill{background-color:var(--luzmo-clearbutton-fill-background-color, var(--clearbutton-fill-background-color));inline-size:var(--luzmo-clearbutton-fill-size, var(--clearbutton-fill-size));block-size:var(--luzmo-clearbutton-fill-size, var(--clearbutton-fill-size))}.label{block-size:100%;box-sizing:border-box;line-height:var(--luzmo-tag-label-line-height, var(--tag-label-line-height));font-weight:var(--luzmo-tag-label-font-weight, var(--tag-label-font-weight));font-size:var(--luzmo-tag-font-size, var(--tag-font-size));cursor:default;white-space:nowrap;text-overflow:ellipsis;flex:auto;display:flex;align-items:center;margin-inline-end:calc(var(--luzmo-tag-label-spacing-inline-end, var(--tag-label-spacing-inline-end)) - var(--luzmo-tag-border-width, var(--tag-border-width)));overflow:hidden}:host(:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-active, var(--luzmo-tag-border-color-active, var(--tag-border-color-active)));background-color:var(--highcontrast-tag-background-color-active, var(--luzmo-tag-background-color-active, var(--tag-background-color-active)));color:var(--highcontrast-tag-content-color-active, var(--luzmo-tag-content-color-active, var(--tag-content-color-active)))}:host([focused]),:host(:focus-visible){border-color:var(--highcontrast-tag-border-color-focus, var(--luzmo-tag-border-color-focus, var(--tag-border-color-focus)));background-color:var(--highcontrast-tag-background-color-focus, var(--luzmo-tag-background-color-focus, var(--tag-background-color-focus)));color:var(--highcontrast-tag-content-color-focus, var(--luzmo-tag-content-color-focus, var(--tag-content-color-focus)))}:host([focused]):after,:host(:focus-visible):after{content:"";border-color:var(--highcontrast-tag-focus-ring-color, var(--luzmo-tag-focus-ring-color, var(--tag-focus-ring-color)));border-radius:calc(var(--luzmo-tag-border-radius, var(--tag-border-radius)) + var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) + var(--luzmo-tag-border-width, var(--tag-border-width)));border-width:var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness));pointer-events:none;border-style:solid;display:inline-block;position:absolute;inset-block-start:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-block-end:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-inline-start:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)));inset-inline-end:calc(var(--luzmo-tag-focus-ring-gap, var(--tag-focus-ring-gap)) * -1 - var(--luzmo-tag-border-width, var(--tag-border-width)) - var(--luzmo-tag-focus-ring-thickness, var(--tag-focus-ring-thickness)))}:host([selected]){border-color:var(--highcontrast-tag-border-color-selected, var(--luzmo-tag-border-color-selected, var(--tag-border-color-selected)));background-color:var(--highcontrast-tag-background-color-selected, var(--luzmo-tag-background-color-selected, var(--tag-background-color-selected)));color:var(--highcontrast-tag-content-color-selected, var(--luzmo-tag-content-color-selected, var(--tag-content-color-selected)))}:host([selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-selected-active, var(--luzmo-tag-border-color-selected-active, var(--tag-border-color-selected-active)));background-color:var(--highcontrast-tag-background-color-selected-active, var(--luzmo-tag-background-color-selected-active, var(--tag-background-color-selected-active)))}:host([selected][focused]),:host([selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-selected-focus, var(--luzmo-tag-border-color-selected-focus, var(--tag-border-color-selected-focus)));background-color:var(--highcontrast-tag-background-color-selected-focus, var(--luzmo-tag-background-color-selected-focus, var(--tag-background-color-selected-focus)))}:host([invalid]){border-color:var(--highcontrast-tag-border-color-invalid, var(--luzmo-tag-border-color-invalid, var(--tag-border-color-invalid)));color:var(--highcontrast-tag-content-color-invalid, var(--luzmo-tag-content-color-invalid, var(--tag-content-color-invalid)))}:host([invalid]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-active, var(--luzmo-tag-border-color-invalid-active, var(--tag-border-color-invalid-active)));color:var(--highcontrast-tag-content-color-invalid-active, var(--luzmo-tag-content-color-invalid-active, var(--tag-content-color-invalid-active)))}:host([invalid][focused]),:host([invalid]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-focus, var(--luzmo-tag-border-color-invalid-focus, var(--tag-border-color-invalid-focus)));color:var(--highcontrast-tag-content-color-invalid-focus, var(--luzmo-tag-content-color-invalid-focus, var(--tag-content-color-invalid-focus)))}:host([invalid][selected]){border-color:var(--highcontrast-tag-border-color-invalid-selected, var(--luzmo-tag-border-color-invalid-selected, var(--tag-border-color-invalid-selected)));background-color:var(--highcontrast-tag-background-color-invalid-selected, var(--luzmo-tag-background-color-invalid-selected, var(--tag-background-color-invalid-selected)));color:var(--highcontrast-tag-content-color-invalid-selected, var(--luzmo-tag-content-color-invalid-selected, var(--tag-content-color-invalid-selected)))}:host([invalid][selected]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-invalid-selected-active, var(--luzmo-tag-border-color-invalid-selected-active, var(--tag-border-color-invalid-selected-active)));background-color:var(--highcontrast-tag-background-color-invalid-selected-active, var(--luzmo-tag-background-color-invalid-selected-active, var(--tag-background-color-invalid-selected-active)))}:host([invalid][selected][focused]),:host([invalid][selected]:focus-visible){border-color:var(--highcontrast-tag-border-color-invalid-selected-focus, var(--luzmo-tag-border-color-invalid-selected-focus, var(--tag-border-color-invalid-selected-focus)));background-color:var(--highcontrast-tag-background-color-invalid-selected-focus, var(--luzmo-tag-background-color-invalid-selected-focus, var(--tag-background-color-invalid-selected-focus)))}:host([emphasized]){border-color:var(--highcontrast-tag-border-color-emphasized, var(--luzmo-tag-border-color-emphasized, var(--tag-border-color-emphasized)));background-color:var(--highcontrast-tag-background-color-emphasized, var(--luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized)));color:var(--highcontrast-tag-content-color-emphasized, var(--luzmo-tag-content-color-emphasized, var(--tag-content-color-emphasized)));--luzmo-clear-button-background-color-hover: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) );--luzmo-clear-button-background-color-focus: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) );--luzmo-clear-button-background-color-down: var( --luzmo-tag-background-color-emphasized, var(--tag-background-color-emphasized) )}@media (hover: hover){:host(:hover){border-color:var(--highcontrast-tag-border-color-hover, var(--luzmo-tag-border-color-hover, var(--tag-border-color-hover)));background-color:var(--highcontrast-tag-background-color-hover, var(--luzmo-tag-background-color-hover, var(--tag-background-color-hover)));color:var(--highcontrast-tag-content-color-hover, var(--luzmo-tag-content-color-hover, var(--tag-content-color-hover)))}:host([selected]:hover){border-color:var(--highcontrast-tag-border-color-selected-hover, var(--luzmo-tag-border-color-selected-hover, var(--tag-border-color-selected-hover)));background-color:var(--highcontrast-tag-background-color-selected-hover, var(--luzmo-tag-background-color-selected-hover, var(--tag-background-color-selected-hover)));color:var(--highcontrast-tag-content-color-selected, var(--luzmo-tag-content-color-selected, var(--tag-content-color-selected)))}:host([invalid]:hover){border-color:var(--highcontrast-tag-border-color-invalid-hover, var(--luzmo-tag-border-color-invalid-hover, var(--tag-border-color-invalid-hover)));color:var(--highcontrast-tag-content-color-invalid-hover, var(--luzmo-tag-content-color-invalid-hover, var(--tag-content-color-invalid-hover)))}:host([invalid][selected]:hover){border-color:var(--highcontrast-tag-border-color-invalid-selected-hover, var(--luzmo-tag-border-color-invalid-selected-hover, var(--tag-border-color-invalid-selected-hover)));background-color:var(--highcontrast-tag-background-color-invalid-selected-hover, var(--luzmo-tag-background-color-invalid-selected-hover, var(--tag-background-color-invalid-selected-hover)));color:var(--highcontrast-tag-content-color-invalid-selected, var(--luzmo-tag-content-color-invalid-selected, var(--tag-content-color-invalid-selected)))}:host([emphasized]:hover){border-color:var(--highcontrast-tag-border-color-emphasized-hover, var(--luzmo-tag-border-color-emphasized-hover, var(--tag-border-color-emphasized-hover)));background-color:var(--highcontrast-tag-background-color-emphasized-hover, var(--luzmo-tag-background-color-emphasized-hover, var(--tag-background-color-emphasized-hover)));color:var(--highcontrast-tag-content-color-emphasized, var(--luzmo-tag-content-color-emphasized, var(--tag-content-color-emphasized)))}}:host([emphasized]:is(:active,[active])){border-color:var(--highcontrast-tag-border-color-emphasized-active, var(--luzmo-tag-border-color-emphasized-active, var(--tag-border-color-emphasized-active)));background-color:var(--highcontrast-tag-background-color-emphasized-active, var(--luzmo-tag-background-color-emphasized-active, var(--tag-background-color-emphasized-active)))}:host([emphasized][focused]),:host([emphasized]:focus-visible){border-color:var(--highcontrast-tag-border-color-emphasized-focus, var(--luzmo-tag-border-color-emphasized-focus, var(--tag-border-color-emphasized-focus)));background-color:var(--highcontrast-tag-background-color-emphasized-focus, var(--luzmo-tag-background-color-emphasized-focus, var(--tag-background-color-emphasized-focus)))}:host([disabled]){border-color:var(--highcontrast-tag-border-color-disabled, var(--luzmo-tag-border-color-disabled, var(--tag-border-color-disabled)));background-color:var(--highcontrast-tag-background-color-disabled, var(--luzmo-tag-background-color-disabled, var(--tag-background-color-disabled)));color:var(--highcontrast-tag-content-color-disabled, var(--luzmo-tag-content-color-disabled, var(--tag-content-color-disabled)));pointer-events:none}:host([disabled]) ::slotted([slot=avatar]){opacity:var(--luzmo-avatar-opacity-disabled, var(--avatar-opacity-disabled))}@media (forced-colors: active){:host{--highcontrast-tag-border-color: ButtonText;--highcontrast-tag-border-color-hover: ButtonText;--highcontrast-tag-border-color-active: ButtonText;--highcontrast-tag-border-color-focus: Highlight;--highcontrast-tag-background-color: ButtonFace;--highcontrast-tag-background-color-hover: ButtonFace;--highcontrast-tag-background-color-active: ButtonFace;--highcontrast-tag-background-color-focus: ButtonFace;--highcontrast-tag-content-color: ButtonText;--highcontrast-tag-content-color-hover: ButtonText;--highcontrast-tag-content-color-active: ButtonText;--highcontrast-tag-content-color-focus: ButtonText;--highcontrast-tag-focus-ring-color: Highlight;forced-color-adjust:none}:host([selected]){--highcontrast-tag-border-color-selected: Highlight;--highcontrast-tag-border-color-selected-hover: Highlight;--highcontrast-tag-border-color-selected-active: Highlight;--highcontrast-tag-border-color-selected-focus: Highlight;--highcontrast-tag-background-color-selected: Highlight;--highcontrast-tag-background-color-selected-hover: Highlight;--highcontrast-tag-background-color-selected-active: Highlight;--highcontrast-tag-background-color-selected-focus: Highlight;--highcontrast-tag-content-color-selected: HighlightText}:host([disabled]){--highcontrast-tag-border-color-disabled: GrayText;--highcontrast-tag-background-color-disabled: ButtonFace;--highcontrast-tag-content-color-disabled: GrayText}:host([invalid]){--highcontrast-tag-border-color-invalid: Highlight;--highcontrast-tag-border-color-invalid-hover: Highlight;--highcontrast-tag-border-color-invalid-active: Highlight;--highcontrast-tag-border-color-invalid-focus: Highlight;--highcontrast-tag-content-color-invalid: CanvasText;--highcontrast-tag-content-color-invalid-hover: CanvasText;--highcontrast-tag-content-color-invalid-active: CanvasText;--highcontrast-tag-content-color-invalid-focus: CanvasText}:host([invalid][selected]){--highcontrast-tag-border-color-invalid-selected: Highlight;--highcontrast-tag-border-color-invalid-selected-hover: Highlight;--highcontrast-tag-border-color-invalid-selected-focus: Highlight;--highcontrast-tag-border-color-invalid-selected-active: Highlight;--highcontrast-tag-background-color-invalid-selected: Highlight;--highcontrast-tag-background-color-invalid-selected-hover: Highlight;--highcontrast-tag-background-color-invalid-selected-active: Highlight;--highcontrast-tag-background-color-invalid-selected-focus: Highlight;--highcontrast-tag-content-color-invalid-selected: HighlightText}:host([emphasized]){--highcontrast-tag-border-color-emphasized: Highlight;--highcontrast-tag-border-color-emphasized-hover: Highlight;--highcontrast-tag-border-color-emphasized-active: Highlight;--highcontrast-tag-border-color-emphasized-focus: Highlight;--highcontrast-tag-background-color-emphasized: ButtonFace;--highcontrast-tag-background-color-emphasized-hover: ButtonFace;--highcontrast-tag-background-color-emphasized-active: ButtonFace;--highcontrast-tag-background-color-emphasized-focus: ButtonFace;--highcontrast-tag-content-color-emphasized: CanvasText}}:host{--tag-border-color: var(--luzmo-border-color);--tag-border-color-hover: var(--luzmo-border-color-hover);--tag-border-color-active: var(--luzmo-border-color-active);--tag-border-color-focus: var(--luzmo-border-color-focus);--tag-size-small-border-radius: var(--luzmo-border-radius-s);--tag-size-medium-border-radius: var(--luzmo-border-radius);--tag-size-large-border-radius: var(--luzmo-border-radius);--tag-background-color: var(--luzmo-background-color);--tag-background-color-hover: var(--luzmo-background-color-hover);--tag-background-color-active: var(--luzmo-background-color-active);--tag-background-color-focus: var(--luzmo-background-color-focus);--tag-content-color: var(--luzmo-font-color);--tag-content-color-hover: var(--luzmo-font-color-hover);--tag-content-color-active: var(--luzmo-font-color-active);--tag-content-color-focus: var(--luzmo-font-color-focus);--tag-border-color-selected: var(--luzmo-border-color-down);--tag-border-color-selected-hover: var(--luzmo-border-color-down);--tag-border-color-selected-active: var(--luzmo-border-color-down);--tag-border-color-selected-focus: var(--luzmo-border-color-down);--tag-border-color-disabled: var(--luzmo-border-color-disabled);--tag-background-color-disabled: var(--luzmo-background-color-disabled);--avatar-opacity-disabled: .3;--tag-animation-duration: var(--luzmo-animation-duration);--tag-border-width: var(--luzmo-border-width);--tag-focus-ring-thickness: var(--luzmo-indicator-width);--tag-focus-ring-gap: var(--luzmo-indicator-gap);--tag-focus-ring-color: var(--luzmo-indicator-color);--tag-label-line-height: var(--luzmo-line-height);--tag-label-font-weight: var(--luzmo-font-weight);--tag-content-color-selected: var(--luzmo-font-color-down);--tag-background-color-selected: var(--luzmo-background-color-down);--tag-background-color-selected-hover: var(--luzmo-background-color-down);--tag-background-color-selected-active: var(--luzmo-background-color-down);--tag-background-color-selected-focus: var(--luzmo-background-color-down);--tag-border-color-invalid: var(--luzmo-negative-color);--tag-border-color-invalid-hover: var(--luzmo-negative-color-hover);--tag-border-color-invalid-active: var(--luzmo-negative-color-down);--tag-border-color-invalid-focus: var(--luzmo-negative-color-focus);--tag-content-color-invalid: var(--luzmo-negative-color);--tag-content-color-invalid-hover: var(--luzmo-negative-color-hover);--tag-content-color-invalid-active: var(--luzmo-negative-color-down);--tag-content-color-invalid-focus: var(--luzmo-negative-color-focus);--tag-border-color-invalid-selected: var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-hover: var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-focus: var(--luzmo-negative-color-down);--tag-border-color-invalid-selected-active: var(--luzmo-negative-color-down);--tag-background-color-invalid-selected: var(--luzmo-background-color-down);--tag-background-color-invalid-selected-hover: var( --luzmo-background-color-down );--tag-background-color-invalid-selected-active: var( --luzmo-background-color-down );--tag-background-color-invalid-selected-focus: var( --luzmo-background-color-down );--tag-content-color-invalid-selected: var(--luzmo-negative-color-down);--tag-border-color-emphasized: var(--luzmo-primary);--tag-border-color-emphasized-hover: var(--luzmo-primary-hover);--tag-border-color-emphasized-active: var(--luzmo-primary-down);--tag-border-color-emphasized-focus: var(--luzmo-primary-focus);--tag-background-color-emphasized: var(--luzmo-primary);--tag-background-color-emphasized-hover: var(--luzmo-primary-hover);--tag-background-color-emphasized-active: var(--luzmo-primary-down);--tag-background-color-emphasized-focus: var(--luzmo-primary-focus);--tag-content-color-emphasized: white;--tag-content-color-disabled: var(--luzmo-disabled-color);--tag-icon-spacing-inline-end: var(--luzmo-spacing-3);--tag-icon-size: var(--luzmo-font-icon-size-s);--tag-avatar-spacing-inline-end: var(--luzmo-spacing-3);--tag-font-size: var(--luzmo-font-size)}:host([size=s]){--tag-height: var(--luzmo-component-height-xs);--tag-font-size: var(--luzmo-font-size-s);--tag-icon-size: var(--luzmo-icon-size-s);--tag-icon-spacing-inline-end: var(--luzmo-spacing-2);--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-2);--tag-border-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: var(--luzmo-spacing-3);--tag-label-spacing-inline-end: var(--luzmo-spacing-3);--tag-clear-button-spacing-inline-end: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host{--tag-height: var(--luzmo-component-height-s);--tag-font-size: var(--luzmo-font-size);--tag-icon-size: var(--luzmo-icon-size-m);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--tag-border-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-label-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-clear-button-spacing-inline-end: var(--luzmo-spacing-3)}:host([size=l]){--tag-height: var(--luzmo-component-height);--tag-font-size: var(--luzmo-font-size);--tag-icon-size: var(--luzmo-icon-size-l);--tag-icon-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-3);--tag-border-radius: var(--luzmo-border-radius);--tag-spacing-inline-start: var(--luzmo-spacing-4);--tag-label-spacing-inline-end: var(--luzmo-spacing-4);--tag-clear-button-spacing-inline-end: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=xl]){--tag-height: var(--luzmo-component-height-l);--tag-font-size: var(--luzmo-font-size-l);--tag-icon-size: var(--luzmo-icon-size-xl);--tag-icon-spacing-inline-end: var(--luzmo-spacing-4);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-border-radius: var(--luzmo-border-radius-l);--tag-spacing-inline-start: var(--luzmo-spacing-5);--tag-label-spacing-inline-end: var(--luzmo-spacing-5);--tag-clear-button-spacing-inline-end: var(--luzmo-spacing-4)}:host([invalid]) .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-key-focus, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([invalid]):hover .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-hover, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([invalid]:is(:active,[active])) .clear-button{--clearbutton-medium-icon-color: var( --tag-icon-color-error-hover, var(--red-600) );--clearbutton-medium-icon-color-hover: var(--clearbutton-medium-icon-color);--clearbutton-medium-icon-color-down: var( --tag-deletable-icon-color-error-down, var(--red-700) )}:host([size=xs]){--icon-size: var(--workflow-icon-size-50)}:host([size=s]){--icon-size: var(--workflow-icon-size-75)}:host([size=m]){--icon-size: var(--workflow-icon-size)}:host([size=l]){--icon-size: var(--workflow-icon-size-200)}:host([size=xl]){--icon-size: var(--workflow-icon-size-300)}:host([size=xxl]){--icon-size: var(--workflow-icon-size-400)}';
|
|
33
33
|
var T = Object.defineProperty, v = (e, o, a, c) => {
|
|
34
34
|
for (var r = void 0, t = e.length - 1, l; t >= 0; t--)
|
|
35
35
|
(l = e[t]) && (r = l(o, a, r) || r);
|