@luzmo/lucero 1.0.1-alpha.6 → 1.0.1-alpha.8
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 +4 -4
- package/components/accordion/index.js +5 -5
- package/components/action-bar/index.cjs +1 -1
- package/components/action-bar/index.js +1 -1
- package/components/action-button/index.cjs +2 -2
- package/components/action-button/index.js +2 -2
- package/components/action-menu/index.cjs +1 -1
- package/components/action-menu/index.js +2 -2
- package/components/button/index.cjs +1 -1
- package/components/button/index.js +2 -2
- package/components/calendar/index.cjs +1 -1
- package/components/calendar/index.js +1 -1
- package/components/checkbox/index.cjs +1 -1
- package/components/checkbox/index.js +1 -1
- package/components/{clear-button-DoeRUWQ3.js → clear-button-DQcRdcUa.js} +1 -1
- package/components/{clear-button-Qi1pMA5S.cjs → clear-button-OFUFFe7G.cjs} +1 -1
- package/components/{close-button-BFMBEw3q.cjs → close-button-Cbnb7XXj.cjs} +1 -1
- package/components/{close-button-BWXdHSx3.js → close-button-CqHYZhum.js} +1 -1
- package/components/color-field/index.cjs +1 -1
- package/components/color-field/index.js +1 -1
- package/components/color-menu/index.cjs +3 -3
- package/components/color-menu/index.js +1 -1
- package/components/color-picker/color-picker.d.ts +31 -2
- package/components/color-picker/index.cjs +4 -3
- package/components/color-picker/index.js +13 -9
- package/components/date-time-picker/index.cjs +3 -3
- package/components/date-time-picker/index.js +2 -2
- package/components/icon/index.cjs +1 -1
- package/components/icon/index.js +1 -1
- package/components/{index-A-yOTB_d.js → index-Cl54m8Yh.js} +1 -1
- package/components/{index-BLWuwZXx.cjs → index-Wq3qZJGh.cjs} +3 -3
- package/components/index.cjs +1 -1
- package/components/index.js +5 -5
- package/components/{luzmo-icons-DbwDQtuO.js → luzmo-icons-4nDFv1Lq.js} +25 -25
- package/components/{luzmo-icons-DletXGWU.cjs → luzmo-icons-D4IvHgVd.cjs} +2 -2
- package/components/menu/index.cjs +4 -4
- package/components/menu/index.js +1 -1
- package/components/number-field/index.cjs +5 -5
- package/components/number-field/index.js +8 -8
- package/components/options/index.cjs +8 -8
- package/components/options/index.js +15 -15
- package/components/picker/index.cjs +1 -1
- package/components/picker/index.js +2 -2
- package/components/{picker-BmoXv1jt.js → picker-BfBP7XJN.js} +1 -1
- package/components/picker-button/index.cjs +1 -1
- package/components/picker-button/index.js +1 -1
- package/components/{picker-DWsBWdPN.cjs → picker-xIphqE6d.cjs} +5 -5
- package/components/search/index.cjs +4 -4
- package/components/search/index.js +2 -2
- package/components/select/index.cjs +9 -9
- package/components/select/index.js +1 -1
- package/components/swatch/index.cjs +2 -2
- package/components/swatch/index.js +3 -3
- package/components/tabs/index.cjs +3 -3
- package/components/tabs/index.js +1 -1
- package/components/tags/index.cjs +1 -1
- package/components/tags/index.js +1 -1
- package/components/text-field/index.cjs +2 -2
- package/components/text-field/index.js +2 -2
- package/components/{text-field-D5d_Gt0t.cjs → text-field-BTkr42k4.cjs} +4 -4
- package/components/{text-field-BIADXoLC.js → text-field-ol9Ed5lQ.js} +5 -5
- package/components/toast/index.cjs +3 -3
- package/components/toast/index.js +2 -2
- package/components/unit-input/index.cjs +3 -3
- package/components/unit-input/index.js +1 -1
- package/custom-elements.json +1 -1
- package/package.json +1 -1
|
@@ -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 s=require("../base-CBCg3yyw.cjs"),L=require("../focus-visible-B0P9aY_G.cjs"),I=require("../observe-slot-presence-bc9chhsi.cjs"),E=require("../observe-slot-text-Ceb7SvYT.cjs"),y=require("../random-id-CqvckpWe.cjs"),f=require("../query-BL-TJj7K.cjs"),m=require("../class-map-Di1D_rCm.cjs"),x=require("../if-defined-C9YGdo33.cjs"),S=require("../sized-mixin-CPxE5C96.cjs"),$=require("../focusable-EbipgXRh.cjs"),q=require("../roving-tabindex-By_fCy_e.cjs"),w=require("../luzmo-icons-
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../base-CBCg3yyw.cjs"),L=require("../focus-visible-B0P9aY_G.cjs"),I=require("../observe-slot-presence-bc9chhsi.cjs"),E=require("../observe-slot-text-Ceb7SvYT.cjs"),y=require("../random-id-CqvckpWe.cjs"),f=require("../query-BL-TJj7K.cjs"),m=require("../class-map-Di1D_rCm.cjs"),x=require("../if-defined-C9YGdo33.cjs"),S=require("../sized-mixin-CPxE5C96.cjs"),$=require("../focusable-EbipgXRh.cjs"),q=require("../roving-tabindex-By_fCy_e.cjs"),w=require("../luzmo-icons-D4IvHgVd.cjs"),A=require("../state-D8JEtYqe.cjs"),_=require("../query-assigned-elements-DsKsfk7G.cjs");require("../action-button/index.cjs");require("../icon/index.cjs");const P=':host{font-family:var(--luzmo-tab-font-family, var(--luzmo-font-family));box-sizing:border-box;block-size:calc(var(--luzmo-tabs-item-height, var(--tabs-item-height)) - var(--luzmo-tabs-divider-size, var(--tabs-divider-size)));z-index:1;white-space:nowrap;color:var(--highcontrast-tabs-color, var(--luzmo-tabs-color, var(--tabs-color)));transition:color var(--luzmo-tabs-animation-duration, var(--tabs-animation-duration)) ease-out;cursor:pointer;outline:none;-webkit-text-decoration:none;text-decoration:none;position:relative}::slotted([slot=icon]){block-size:var(--luzmo-tabs-icon-size, var(--tabs-icon-size));inline-size:var(--luzmo-tabs-icon-size, var(--tabs-icon-size));margin-block-start:var(--luzmo-tabs-top-to-icon, var(--tabs-top-to-icon))}[name=icon]+#item-label{margin-inline-start:var(--luzmo-tabs-icon-to-text, var(--tabs-icon-to-text))}:host:before{content:"";box-sizing:border-box;block-size:calc(100% - var(--luzmo-tabs-top-to-text, var(--tabs-top-to-text)));inline-size:calc(100% + var(--luzmo-tabs-focus-indicator-gap, var(--tabs-focus-indicator-gap)) * 2);border:var(--luzmo-tabs-focus-indicator-width, var(--tabs-focus-indicator-width)) solid transparent;border-radius:var(--luzmo-tabs-focus-indicator-border-radius, var(--tabs-focus-indicator-border-radius));pointer-events:none;position:absolute;inset-block-start:calc(var(--luzmo-tabs-top-to-text, var(--tabs-top-to-text)) / 2);inset-inline-start:calc(var(--luzmo-tabs-focus-indicator-gap, var(--tabs-focus-indicator-gap)) * -1);inset-inline-end:calc(var(--luzmo-tabs-focus-indicator-gap, var(--tabs-focus-indicator-gap)) * -1)}@media (hover: hover){:host(:hover){color:var(--highcontrast-tabs-color-hover, var(--luzmo-tabs-color-hover, var(--tabs-color-hover)))}}:host([selected]){color:var(--highcontrast-tabs-color-selected, var(--luzmo-tabs-color-selected, var(--tabs-color-selected)))}:host([disabled]){cursor:default;color:var(--highcontrast-tabs-color-disabled, var(--luzmo-tabs-color-disabled, var(--tabs-color-disabled)))}:host([disabled]) #item-label{cursor:default}:host(:focus-visible){color:var(--highcontrast-tabs-color-key-focus, var(--luzmo-tabs-color-key-focus, var(--tabs-color-key-focus)))}:host(:focus-visible):before{border-color:var(--highcontrast-tabs-focus-indicator-color, var(--luzmo-tabs-focus-indicator-color, var(--tabs-focus-indicator-color)))}#item-label{cursor:pointer;vertical-align:top;font-family:var(--luzmo-tabs-font-family, var(--tabs-font-family));font-style:var(--luzmo-tabs-font-style, var(--tabs-font-style));font-size:var(--luzmo-tabs-font-size, var(--tabs-font-size));font-weight:var(--luzmo-tabs-font-weight, var(--tabs-font-weight));line-height:var(--luzmo-tabs-line-height, var(--tabs-line-height));margin-block-start:var(--luzmo-tabs-top-to-text, var(--tabs-top-to-text));margin-block-end:var(--luzmo-tabs-bottom-to-text, var(--tabs-bottom-to-text));-webkit-text-decoration:none;text-decoration:none;display:inline-block}#item-label:empty{display:none}:host{scroll-margin-inline:var(--luzmo-tabs-item-horizontal-spacing, var(--tabs-item-horizontal-spacing))}:host([disabled]){pointer-events:none}#item-label[hidden]{display:none}@media (forced-colors: active){:host:before{background-color:ButtonFace}:host ::slotted([slot=icon]){z-index:1;position:relative;color:inherit}#item-label{position:relative;z-index:1}:host([selected]){color:HighlightText}:host([selected]) ::slotted([slot=icon]){color:HighlightText}:host([selected]) #item-label{color:HighlightText}}:host([vertical]){display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto}:host([dir][vertical]) slot[name=icon]+#item-label{margin-inline-start:0;margin-block:calc(var(--luzmo-tabs-top-to-text, var(--tabs-top-to-text)) / 2) calc(var(--luzmo-tabs-bottom-to-text, var(--tabs-bottom-to-text)) / 2)}:host([vertical]) ::slotted([slot=icon]){margin-block-start:calc(var(--luzmo-tabs-top-to-icon, var(--tabs-top-to-icon)) / 2)}';var B=Object.defineProperty,v=(l,t,o,i)=>{for(var e=void 0,a=l.length-1,r;a>=0;a--)(r=l[a])&&(e=r(t,o,e)||e);return e&&B(t,o,e),e};class u extends L.FocusVisiblePolyfillMixin(E.ObserveSlotText(I.ObserveSlotPresence(s.LuzmoElement,'[slot="icon"]'),"")){constructor(){super(...arguments),this.disabled=!1,this.label="",this.selected=!1,this.vertical=!1,this.value=""}static get styles(){return[s.r(P)]}get hasIcon(){return this.slotContentIsPresent}get hasLabel(){return!!this.label||this.slotHasContent}render(){return s.x`
|
|
19
19
|
${this.hasIcon?s.x` <slot name="icon"></slot> `:s.E}
|
|
20
20
|
<label id="item-label" ?hidden=${!this.hasLabel}>
|
|
21
21
|
${this.slotHasContent?s.E:this.label}
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
tabindex="-1"
|
|
75
75
|
@click=${this._handleScrollClick}
|
|
76
76
|
>
|
|
77
|
-
<luzmo-icon slot="icon" .icon=${w.
|
|
77
|
+
<luzmo-icon slot="icon" .icon=${w.k}></luzmo-icon>
|
|
78
78
|
</luzmo-action-button>
|
|
79
79
|
<luzmo-action-button
|
|
80
80
|
class=${m.e({"right-scroll":!0,show:t})}
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
tabindex="-1"
|
|
84
84
|
@click=${this._handleScrollClick}
|
|
85
85
|
>
|
|
86
|
-
<luzmo-icon slot="icon" .icon=${w.
|
|
86
|
+
<luzmo-icon slot="icon" .icon=${w.S}></luzmo-icon>
|
|
87
87
|
</luzmo-action-button>
|
|
88
88
|
<slot
|
|
89
89
|
@slotchange=${this._handleSlotChange}
|
package/components/tabs/index.js
CHANGED
|
@@ -26,7 +26,7 @@ import { o as k } from "../if-defined-DOaE2coe.js";
|
|
|
26
26
|
import { S as T } from "../sized-mixin-D4ACoVUr.js";
|
|
27
27
|
import { F as U } from "../focusable-BxtpnzWp.js";
|
|
28
28
|
import { R as B } from "../roving-tabindex-DOg4z6ZU.js";
|
|
29
|
-
import {
|
|
29
|
+
import { k as F, S as O } from "../luzmo-icons-4nDFv1Lq.js";
|
|
30
30
|
import { r as R } from "../state-Deh-vKYE.js";
|
|
31
31
|
import { o as D } from "../query-assigned-elements-DjfhL1cl.js";
|
|
32
32
|
import "../action-button/index.js";
|
|
@@ -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 t=require("../base-CBCg3yyw.cjs"),h=require("../sized-mixin-CPxE5C96.cjs");require("../clear-button-Qi1pMA5S.cjs");const m=require("../query-assigned-nodes-BcKWmGzy.cjs"),z=require("../focus-visible-B0P9aY_G.cjs"),f=require("../roving-tabindex-By_fCy_e.cjs"),p=':host{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-corner-radius, var(--tag-corner-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-corner-radius, var(--tag-corner-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-font-size-s);--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-2);--tag-corner-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-font-size);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--tag-corner-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-font-size);--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-3);--tag-corner-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-font-size-l);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-corner-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 k=Object.defineProperty,v=(l,o,a,n)=>{for(var r=void 0,e=l.length-1,c;e>=0;e--)(c=l[e])&&(r=c(o,a,r)||r);return r&&k(o,a,r),r};class i extends h.SizedMixin(t.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":{this.delete();break}default:return}},this.addEventListener("focusin",this.handleFocusin)}static get styles(){return[t.r(p)]}delete(){this.readonly||!this.dispatchEvent(new Event("delete",{bubbles:!0,cancelable:!0,composed:!0}))||this.remove()}render(){return t.x`
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../base-CBCg3yyw.cjs"),h=require("../sized-mixin-CPxE5C96.cjs");require("../clear-button-OFUFFe7G.cjs");const m=require("../query-assigned-nodes-BcKWmGzy.cjs"),z=require("../focus-visible-B0P9aY_G.cjs"),f=require("../roving-tabindex-By_fCy_e.cjs"),p=':host{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-corner-radius, var(--tag-corner-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-corner-radius, var(--tag-corner-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-font-size-s);--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-2);--tag-corner-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-font-size);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--tag-corner-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-font-size);--tag-clear-button-spacing-inline-start: var(--luzmo-spacing-3);--tag-corner-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-font-size-l);--tag-clear-button-spacing-inline-start: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--tag-corner-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 k=Object.defineProperty,v=(l,o,a,n)=>{for(var r=void 0,e=l.length-1,c;e>=0;e--)(c=l[e])&&(r=c(o,a,r)||r);return r&&k(o,a,r),r};class i extends h.SizedMixin(t.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":{this.delete();break}default:return}},this.addEventListener("focusin",this.handleFocusin)}static get styles(){return[t.r(p)]}delete(){this.readonly||!this.dispatchEvent(new Event("delete",{bubbles:!0,cancelable:!0,composed:!0}))||this.remove()}render(){return t.x`
|
|
19
19
|
<slot name="avatar"></slot>
|
|
20
20
|
<slot name="icon"></slot>
|
|
21
21
|
<span class="label"><slot></slot></span>
|
package/components/tags/index.js
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
* */
|
|
18
18
|
import { a as h, r as m, E as k, x as g, n as u } from "../base-WsynuqaS.js";
|
|
19
19
|
import { S as b } from "../sized-mixin-D4ACoVUr.js";
|
|
20
|
-
import "../clear-button-
|
|
20
|
+
import "../clear-button-DQcRdcUa.js";
|
|
21
21
|
import { n as x } from "../query-assigned-nodes-C76XVPWY.js";
|
|
22
22
|
import { F as w } from "../focus-visible-DBlJGoEW.js";
|
|
23
23
|
import { R as y } from "../roving-tabindex-DOg4z6ZU.js";
|
|
@@ -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 x=require("../text-field-
|
|
19
|
-
${this.variant==="negative"&&this.icon?t.x` ${h.
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("../text-field-BTkr42k4.cjs"),t=require("../base-CBCg3yyw.cjs"),h=require("../luzmo-icons-D4IvHgVd.cjs"),c=require("../sized-mixin-CPxE5C96.cjs"),s="@media (forced-colors: active){:host{--highcontrast-helptext-content-color-default: CanvasText;--highcontrast-helptext-icon-color-default: CanvasText}:host,.text,.icon{forced-color-adjust:none}}:host{--helptext-bottom-to-workflow-icon: 3px;color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--helptext-content-color-default)));font-family:var(--luzmo-helptext-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-helptext-font-weight, var(--luzmo-font-weight));font-size:var(--luzmo-helptext-font-size, var(--helptext-font-size, var(--luzmo-font-size-s)));min-block-size:var(--luzmo-helptext-min-height, var(--helptext-min-height, 24px));display:flex}.icon{block-size:var(--luzmo-helptext-icon-size, var(--helptext-icon-size, 18px));inline-size:var(--luzmo-helptext-icon-size, var(--helptext-icon-size, 18px));flex-shrink:0;margin-inline-end:var(--luzmo-helptext-text-to-visual, var(--helptext-text-to-visual, 7px));padding-block-start:var(--luzmo-helptext-top-to-workflow-icon, var(--helptext-top-to-workflow-icon, 3px));padding-block-end:var(--luzmo-helptext-bottom-to-workflow-icon, var(--helptext-bottom-to-workflow-icon, 3px))}.text{line-height:var(--luzmo-helptext-line-height, var(--helptext-line-height, 1.3));padding-block-start:var(--luzmo-helptext-top-to-text, var(--helptext-top-to-text, 4px));padding-block-end:var(--luzmo-helptext-bottom-to-text, var(--helptext-bottom-to-text, 5px))}:host(:lang(ja)) .text,:host(:lang(ko)) .text,:host(:lang(zh)) .text{line-height:var(--luzmo-helptext-line-height-cjk, var(--helptext-line-height-cjk, 1.4))}:host([variant=neutral]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--helptext-content-color-default)))}:host([variant=neutral]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host([variant=negative]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--luzmo-negative-color-down)))}:host([variant=negative]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host([disabled]) .text{color:var(--highcontrast-helptext-content-color-default, var(--luzmo-helptext-content-color-default, var(--luzmo-font-color)))}:host([disabled]) .icon{color:var(--highcontrast-helptext-icon-color-default, var(--luzmo-helptext-icon-color-default, var(--helptext-icon-color-default)))}:host{--helptext-line-height: 1.3;--helptext-content-color-default: var(--luzmo-font-color);--helptext-icon-color-default: var(--luzmo-font-color);--helptext-disabled-content-color: var(--luzmo-font-color-disabled)}:host([variant=neutral]){--helptext-content-color-default: var(var(--luzmo-font-color));--helptext-icon-color-default: var(var(--luzmo-font-color))}:host([variant=negative]){--helptext-content-color-default: var(var(--luzmo-negative-color));--helptext-icon-color-default: var(var(--luzmo-negative-color))}:host([disabled]){--helptext-content-color-default: var(--luzmo-font-color-disabled);--helptext-icon-color-default: var(--luzmo-font-color-disabled)}:host(:lang(ja)){--helptext-line-height-cjk: 1.4}:host(:lang(zh)){--helptext-line-height-cjk: 1.4}:host(:lang(ko)){--helptext-line-height-cjk: 1.4}:host([size=s]){--helptext-min-height: 24px;--helptext-icon-size: 16px;--helptext-font-size: 12px;--helptext-text-to-visual: 7px;--helptext-top-to-workflow-icon: 4px;--helptext-top-to-text: 4px;--helptext-bottom-to-text: 5px}:host{--helptext-min-height: 24px;--helptext-icon-size: 18px;--helptext-font-size: 12px;--helptext-text-to-visual: 7px;--helptext-top-to-workflow-icon: 3px;--helptext-top-to-text: 4px;--helptext-bottom-to-text: 5px}:host([size=l]){--helptext-min-height: 32px;--helptext-icon-size: 20px;--helptext-font-size: 14px;--helptext-text-to-visual: 8px;--helptext-top-to-workflow-icon: 6px;--helptext-top-to-text: 6px;--helptext-bottom-to-text: 5px}:host([size=xl]){--helptext-min-height: 40px;--helptext-icon-size: 22px;--helptext-font-size: 16px;--helptext-text-to-visual: 9px;--helptext-top-to-workflow-icon: 9px;--helptext-top-to-text: 9px;--helptext-bottom-to-text: 12px}";var u=Object.defineProperty,p=(l,i,r,v)=>{for(var e=void 0,n=l.length-1,a;n>=0;n--)(a=l[n])&&(e=a(i,r,e)||e);return e&&u(i,r,e),e};class o extends c.SizedMixin(t.LuzmoElement,{noDefaultSize:!0}){constructor(){super(...arguments),this.icon=!1,this.variant="neutral"}static get styles(){return[t.r(s)]}render(){return t.x`
|
|
19
|
+
${this.variant==="negative"&&this.icon?t.x` ${h.y3(h.x)} `:t.E}
|
|
20
20
|
<div class="text"><slot></slot></div>
|
|
21
21
|
`}}p([t.n({type:Boolean,reflect:!0})],o.prototype,"icon");p([t.n({reflect:!0})],o.prototype,"variant");customElements.get("luzmo-text-field")||customElements.define("luzmo-text-field",x.LuzmoTextField);customElements.get("luzmo-help-text")||customElements.define("luzmo-help-text",o);exports.LuzmoTextField=x.LuzmoTextField;exports.LuzmoHelpText=o;
|
|
@@ -15,9 +15,9 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
import { L as m } from "../text-field-
|
|
18
|
+
import { L as m } from "../text-field-ol9Ed5lQ.js";
|
|
19
19
|
import { a as x, r as p, E as s, x as a, n as c } from "../base-WsynuqaS.js";
|
|
20
|
-
import {
|
|
20
|
+
import { y as z, x as d } from "../luzmo-icons-4nDFv1Lq.js";
|
|
21
21
|
import { S as f } from "../sized-mixin-D4ACoVUr.js";
|
|
22
22
|
const h = () => {
|
|
23
23
|
if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
|
|
@@ -15,14 +15,14 @@
|
|
|
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";const t=require("./base-CBCg3yyw.cjs"),
|
|
18
|
+
"use strict";const t=require("./base-CBCg3yyw.cjs"),y=require("./state-D8JEtYqe.cjs"),m=require("./query-BL-TJj7K.cjs"),r=require("./if-defined-C9YGdo33.cjs"),u=require("./directive-C7oCP5Bh.cjs"),c=require("./directive-helpers-DyIRTWwA.cjs"),h=require("./luzmo-icons-D4IvHgVd.cjs"),g=require("./focusable-EbipgXRh.cjs"),f=require("./sized-mixin-CPxE5C96.cjs"),$=require("./manage-help-text-DhgARkZX.cjs"),x=require("./text-field.module-p_VF2tC_.cjs");/**
|
|
19
19
|
* @license
|
|
20
20
|
* Copyright 2020 Google LLC
|
|
21
21
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
22
22
|
*/const b=u.e(class extends u.i{constructor(s){if(super(s),s.type!==u.t.PROPERTY&&s.type!==u.t.ATTRIBUTE&&s.type!==u.t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!c.f(s))throw Error("`live` bindings can only contain a single expression")}render(s){return s}update(s,[e]){if(e===t.T||e===t.E)return e;const l=s.element,a=s.name;if(s.type===u.t.PROPERTY){if(e===l[a])return t.T}else if(s.type===u.t.BOOLEAN_ATTRIBUTE){if(!!e===l.hasAttribute(a))return t.T}else if(s.type===u.t.ATTRIBUTE&&l.getAttribute(a)===e+"")return t.T;return c.m(s),e}});var E=Object.defineProperty,T=Object.getOwnPropertyDescriptor,n=(s,e,l,a)=>{for(var o=a>1?void 0:a?T(e,l):e,p=s.length-1,d;p>=0;p--)(d=s[p])&&(o=(a?d(e,l,o):d(o))||o);return a&&o&&E(e,l,o),o};const q=["text","url","tel","email","password"];class i extends $.ManageHelpText(f.SizedMixin(g.Focusable,{noDefaultSize:!0})){constructor(){super(...arguments),this.allowedKeys="",this.focused=!1,this.invalid=!1,this.label="",this.placeholder="",this._type="text",this.grows=!1,this.maxlength=-1,this.minlength=-1,this.multiline=!1,this.readonly=!1,this.rows=-1,this.valid=!1,this._value="",this.quiet=!1,this.required=!1}static get styles(){return[t.r(x.textFieldStyles)]}set type(e){const l=this._type;this._type=e,this.requestUpdate("type",l)}get type(){return q.find(e=>e===this._type)??"text"}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}get focusElement(){return this.inputElement}setSelectionRange(e,l,a="none"){this.inputElement.setSelectionRange(e,l,a)}select(){this.inputElement.select()}handleInput(e){if(this.allowedKeys&&this.inputElement.value&&!new RegExp(`^[${this.allowedKeys}]*$`,"u").test(this.inputElement.value)){const o=this.inputElement.selectionStart-1;this.inputElement.value=this.value.toString(),this.inputElement.setSelectionRange(o,o);return}this.value=this.inputElement.value}handleChange(){this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}onFocus(){this.focused=!this.readonly&&!0}onBlur(e){this.focused=!this.readonly&&!1}handleInputElementPointerdown(){}renderStateIcons(){return this.invalid?t.x`
|
|
23
|
-
<div id="invalid" class="icon">${h.
|
|
23
|
+
<div id="invalid" class="icon">${h.y3(h.$)}</div>
|
|
24
24
|
`:this.valid?t.x`
|
|
25
|
-
<div id="valid" class="icon">${h.
|
|
25
|
+
<div id="valid" class="icon">${h.y3(h.B)}</div>
|
|
26
26
|
`:t.E}get displayValue(){return this.value.toString()}get renderMultiline(){return t.x`
|
|
27
27
|
${this.multiline&&this.grows&&this.rows===-1?t.x`
|
|
28
28
|
<div id="sizer" class="input" aria-hidden="true">${this.value}​
|
|
@@ -82,4 +82,4 @@
|
|
|
82
82
|
`}render(){return t.x`
|
|
83
83
|
<div id="text-field">${this.renderField()}</div>
|
|
84
84
|
${this.renderHelpText(this.invalid)}
|
|
85
|
-
`}update(e){(e.has("value")||e.has("required")&&this.required)&&this.updateComplete.then(()=>{this.checkValidity()}),super.update(e)}checkValidity(){let e=this.inputElement.checkValidity();return(this.required||this.value&&this.pattern)&&((this.disabled||this.multiline)&&this.pattern&&(e=new RegExp(`^${this.pattern}$`,"u").test(this.value.toString())),this.minlength!==void 0&&(e=e&&this.value.toString().length>=this.minlength),this.valid=e,this.invalid=!e),e}}n([
|
|
85
|
+
`}update(e){(e.has("value")||e.has("required")&&this.required)&&this.updateComplete.then(()=>{this.checkValidity()}),super.update(e)}checkValidity(){let e=this.inputElement.checkValidity();return(this.required||this.value&&this.pattern)&&((this.disabled||this.multiline)&&this.pattern&&(e=new RegExp(`^${this.pattern}$`,"u").test(this.value.toString())),this.minlength!==void 0&&(e=e&&this.value.toString().length>=this.minlength),this.valid=e,this.invalid=!e),e}}n([y.r()],i.prototype,"appliedLabel",2);n([t.n({attribute:"allowed-keys"})],i.prototype,"allowedKeys",2);n([t.n({type:Boolean,reflect:!0})],i.prototype,"focused",2);n([m.e(".input:not(#sizer)")],i.prototype,"inputElement",2);n([t.n({type:Boolean,reflect:!0})],i.prototype,"invalid",2);n([t.n()],i.prototype,"label",2);n([t.n({type:String,reflect:!0})],i.prototype,"name",2);n([t.n()],i.prototype,"placeholder",2);n([y.r()],i.prototype,"type",1);n([t.n({attribute:"type",reflect:!0})],i.prototype,"_type",2);n([t.n()],i.prototype,"pattern",2);n([t.n({type:Boolean,reflect:!0})],i.prototype,"grows",2);n([t.n({type:Number})],i.prototype,"maxlength",2);n([t.n({type:Number})],i.prototype,"minlength",2);n([t.n({type:Boolean,reflect:!0})],i.prototype,"multiline",2);n([t.n({type:Boolean,reflect:!0})],i.prototype,"readonly",2);n([t.n({type:Number})],i.prototype,"rows",2);n([t.n({type:Boolean,reflect:!0})],i.prototype,"valid",2);n([t.n({type:String})],i.prototype,"value",1);n([t.n({type:Boolean,reflect:!0})],i.prototype,"quiet",2);n([t.n({type:Boolean,reflect:!0})],i.prototype,"required",2);n([t.n({type:String,reflect:!0})],i.prototype,"autocomplete",2);class v extends i{constructor(){super(...arguments),this._value=""}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}}n([t.n({type:String})],v.prototype,"value",1);exports.LuzmoTextField=v;exports.LuzmoTextFieldBase=i;
|
|
@@ -21,7 +21,7 @@ import { e as g } from "./query-D_KR_GUc.js";
|
|
|
21
21
|
import { o as n } from "./if-defined-DOaE2coe.js";
|
|
22
22
|
import { e as $, i as x, t as p } from "./directive-oAbCiebi.js";
|
|
23
23
|
import { f as b, m as E } from "./directive-helpers-Cm6gitnu.js";
|
|
24
|
-
import {
|
|
24
|
+
import { y as m, $ as w, B as T } from "./luzmo-icons-4nDFv1Lq.js";
|
|
25
25
|
import { F as _ } from "./focusable-BxtpnzWp.js";
|
|
26
26
|
import { S } from "./sized-mixin-D4ACoVUr.js";
|
|
27
27
|
import { M as B } from "./manage-help-text-syYnjKGL.js";
|
|
@@ -51,8 +51,8 @@ const q = $(class extends x {
|
|
|
51
51
|
}
|
|
52
52
|
});
|
|
53
53
|
var R = Object.defineProperty, F = Object.getOwnPropertyDescriptor, t = (l, e, s, a) => {
|
|
54
|
-
for (var o = a > 1 ? void 0 : a ? F(e, s) : e, c = l.length - 1,
|
|
55
|
-
(
|
|
54
|
+
for (var o = a > 1 ? void 0 : a ? F(e, s) : e, c = l.length - 1, y; c >= 0; c--)
|
|
55
|
+
(y = l[c]) && (o = (a ? y(e, s, o) : y(o)) || o);
|
|
56
56
|
return a && o && R(e, s, o), o;
|
|
57
57
|
};
|
|
58
58
|
const O = ["text", "url", "tel", "email", "password"];
|
|
@@ -135,9 +135,9 @@ class i extends B(
|
|
|
135
135
|
}
|
|
136
136
|
renderStateIcons() {
|
|
137
137
|
return this.invalid ? h`
|
|
138
|
-
<div id="invalid" class="icon">${
|
|
138
|
+
<div id="invalid" class="icon">${m(w)}</div>
|
|
139
139
|
` : this.valid ? h`
|
|
140
|
-
<div id="valid" class="icon">${
|
|
140
|
+
<div id="valid" class="icon">${m(T)}</div>
|
|
141
141
|
` : u;
|
|
142
142
|
}
|
|
143
143
|
get displayValue() {
|
|
@@ -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 o=require("../base-CBCg3yyw.cjs");require("../close-button-
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../base-CBCg3yyw.cjs");require("../close-button-Cbnb7XXj.cjs");const d=require("../focus-visible-B0P9aY_G.cjs"),u=require("../luzmo-icons-D4IvHgVd.cjs"),v="@media (forced-colors: active){:host{--highcontrast-toast-border-color: ButtonText;border:var(--luzmo-toast-border-width, var(--toast-border-width)) solid var(--highcontrast-toast-border-color, transparent)}}:host{box-sizing:border-box;min-block-size:var(--luzmo-toast-block-size, var(--toast-block-size));max-inline-size:var(--luzmo-toast-max-inline-size, var(--toast-max-inline-size));border-radius:var(--luzmo-toast-corner-radius, var(--toast-corner-radius));font-size:var(--luzmo-toast-font-size, var(--toast-font-size));font-weight:var(--luzmo-toast-font-weight, var(--toast-font-weight));-webkit-font-smoothing:antialiased;background-color:var(--highcontrast-toast-background-color-default, var(--luzmo-toast-background-color-default, var(--toast-background-color-default)));color:var(--highcontrast-toast-background-color-default, var(--luzmo-toast-background-color-default, var(--toast-background-color-default)));overflow-wrap:anywhere;flex-direction:row;align-items:stretch;padding-inline-start:var(--luzmo-toast-spacing-start-edge-to-text-and-icon, var(--toast-spacing-start-edge-to-text-and-icon));display:inline-flex}:host([variant=negative]){background-color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=info]){background-color:var(--highcontrast-toast-informative-background-color-default, var(--luzmo-toast-informative-background-color-default, var(--toast-informative-background-color-default)))}:host([variant=info]),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-informative-background-color-default, var(--luzmo-toast-informative-background-color-default, var(--toast-informative-background-color-default)))}:host([variant=positive]){background-color:var(--highcontrast-toast-positive-background-color-default, var(--luzmo-toast-positive-background-color-default, var(--toast-positive-background-color-default)))}:host([variant=positive]),:host([variant=positive]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-positive-background-color-default, var(--luzmo-toast-positive-background-color-default, var(--toast-positive-background-color-default)))}.type{flex-grow:0;flex-shrink:0;margin-block-start:var(--luzmo-toast-spacing-top-edge-to-icon, var(--toast-spacing-top-edge-to-icon));margin-inline-start:0;margin-inline-end:var(--luzmo-toast-spacing-icon-to-text, var(--toast-spacing-icon-to-text))}.content,.type{color:var(--highcontrast-toast-text-and-icon-color, var(--luzmo-toast-text-and-icon-color, var(--toast-text-and-icon-color)))}.content{box-sizing:border-box;line-height:var(--luzmo-toast-line-height, var(--toast-line-height));text-align:start;flex:auto;padding-block-start:calc(var(--luzmo-toast-spacing-top-edge-to-text, var(--toast-spacing-top-edge-to-text)) - var(--luzmo-toast-spacing-block-start, var(--toast-spacing-block-start)));padding-block-end:calc(var(--luzmo-toast-spacing-bottom-edge-to-text, var(--toast-spacing-bottom-edge-to-text)) - var(--luzmo-toast-spacing-block-end, var(--toast-spacing-block-end)));padding-inline-start:0;padding-inline-end:var(--luzmo-toast-spacing-text-to-action-button-horizontal, var(--toast-spacing-text-to-action-button-horizontal));display:inline-block}.content:lang(ja),.content:lang(ko),.content:lang(zh){line-height:var(--luzmo-toast-line-height-cjk, var(--toast-line-height-cjk))}.buttons{border-inline-start-color:var(--luzmo-toast-divider-color, var(--toast-divider-color));flex:none;align-items:flex-start;margin-block-start:var(--luzmo-toast-spacing-top-edge-to-divider, var(--toast-spacing-top-edge-to-divider));margin-block-end:var(--luzmo-toast-spacing-bottom-edge-to-divider, var(--toast-spacing-bottom-edge-to-divider));padding-inline-end:var(--luzmo-toast-spacing-close-button, var(--toast-spacing-close-button));display:flex}.buttons .luzmo-CloseButton{align-self:flex-start}.body{flex-wrap:wrap;flex:auto;align-self:center;align-items:center;padding-block-start:var(--luzmo-toast-spacing-block-start, var(--toast-spacing-block-start));padding-block-end:var(--luzmo-toast-spacing-block-end, var(--toast-spacing-block-end));display:flex}.body ::slotted([slot=action]){margin-inline-start:auto;margin-inline-end:var(--luzmo-toast-spacing-text-and-action-button-to-divider, var(--toast-spacing-text-and-action-button-to-divider))}.body ::slotted([slot=action]:dir(rtl)),:host([dir=rtl]) .body ::slotted([slot=action]){margin-inline-end:var(--luzmo-toast-spacing-text-and-action-button-to-divider, var(--toast-spacing-text-and-action-button-to-divider))}.body+.buttons{border-inline-start-style:solid;border-inline-start-width:1px;padding-inline-start:var(--luzmo-toast-spacing-close-button, var(--toast-spacing-close-button))}:host{--toast-background-color-default: rgb(80, 80, 80);--toast-font-weight: var(--luzmo-font-weight);--toast-font-size: var(--luzmo-font-size);--toast-corner-radius: var(--luzmo-border-radius);--toast-block-size: var(--luzmo-component-height);--toast-max-inline-size: 360px;--toast-border-width: var(--luzmo-border-width);--toast-line-height: var(--luzmo-line-height);--toast-line-height-cjk: 1.5;--toast-spacing-icon-to-text: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--toast-spacing-start-edge-to-text-and-icon: var(--luzmo-spacing-5);--toast-spacing-text-and-action-button-to-divider: var(--luzmo-spacing-5);--toast-spacing-top-edge-to-divider: var(--luzmo-spacing-3);--toast-spacing-bottom-edge-to-divider: var(--luzmo-spacing-3);--toast-spacing-top-edge-to-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-spacing-text-to-action-button-horizontal: var(--luzmo-spacing-5);--toast-spacing-close-button: var(--luzmo-spacing-3);--toast-spacing-block-start: var(--luzmo-spacing-3);--toast-spacing-block-end: var(--luzmo-spacing-3);--toast-spacing-top-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-spacing-bottom-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-negative-background-color-default: var(--luzmo-negative-color);--toast-positive-background-color-default: var(--luzmo-positive-color);--toast-informative-background-color-default: var(--luzmo-informative-color);--toast-text-and-icon-color: rgb(255, 255, 255);--toast-divider-color: rgba(255, 255, 255, .2)}:host{--overlay-animation-distance: var(--spacing-100);--overlay-animation-duration: var(--animation-duration-100);opacity:0;pointer-events:none;transition:transform var(--overlay-animation-duration) ease-in-out,opacity var(--overlay-animation-duration) ease-in-out,visibility 0s linear var(--overlay-animation-duration);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0s;visibility:visible}:host([variant=error]),:host([variant=warning]){background-color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active),:host([variant=warning]),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}";var g=Object.defineProperty,h=Object.getOwnPropertyDescriptor,s=(r,t,a,i)=>{for(var n=i>1?void 0:i?h(t,a):t,l=r.length-1,c;l>=0;l--)(c=r[l])&&(n=(i?c(t,a,n):c(n))||n);return i&&n&&g(t,a,n),n};const p=["negative","positive","info"];class e extends d.FocusVisiblePolyfillMixin(o.LuzmoElement){constructor(){super(...arguments),this.open=!1,this._timeout=null,this._variant="",this.countdownStart=0,this.nextCount=-1,this.doCountdown=t=>{this.countdownStart||(this.countdownStart=performance.now()),t-this.countdownStart>this._timeout?(this.shouldClose(),this.countdownStart=0):this.countdown()},this.countdown=()=>{cancelAnimationFrame(this.nextCount),this.nextCount=requestAnimationFrame(this.doCountdown)},this.holdCountdown=()=>{this.stopCountdown(),this.addEventListener("focusout",this.resumeCountdown)},this.resumeCountdown=()=>{this.removeEventListener("focusout",this.holdCountdown),this.countdown()}}static get styles(){return[o.r(v)]}set timeout(t){const i=typeof t!==null&&t>0?Math.max(6e3,t):null,n=this.timeout;i&&this.countdownStart&&(this.countdownStart=performance.now()),this._timeout=i,this.requestUpdate("timeout",n)}get timeout(){return this._timeout}set variant(t){if(t===this.variant)return;const a=this.variant;p.includes(t)?(this.setAttribute("variant",t),this._variant=t):(this.removeAttribute("variant"),this._variant=""),this.requestUpdate("variant",a)}get variant(){return this._variant}renderIcon(t,a){switch(t){case"info":return o.x`
|
|
19
19
|
<luzmo-icon
|
|
20
20
|
.icon=${u.p1}
|
|
21
21
|
label=${a||"Information"}
|
|
@@ -23,13 +23,13 @@
|
|
|
23
23
|
></luzmo-icon>
|
|
24
24
|
`;case"negative":return o.x`
|
|
25
25
|
<luzmo-icon
|
|
26
|
-
.icon=${u.
|
|
26
|
+
.icon=${u.I}
|
|
27
27
|
label=${a||"Error"}
|
|
28
28
|
class="type"
|
|
29
29
|
></luzmo-icon>
|
|
30
30
|
`;case"positive":return o.x`
|
|
31
31
|
<luzmo-icon
|
|
32
|
-
.icon=${u.
|
|
32
|
+
.icon=${u.C0}
|
|
33
33
|
label=${a||"Success"}
|
|
34
34
|
class="type"
|
|
35
35
|
></luzmo-icon>
|
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
18
|
import { a as m, r as g, x as i, n as l } from "../base-WsynuqaS.js";
|
|
19
|
-
import "../close-button-
|
|
19
|
+
import "../close-button-CqHYZhum.js";
|
|
20
20
|
import { F as v } from "../focus-visible-DBlJGoEW.js";
|
|
21
|
-
import {
|
|
21
|
+
import { C as p, I as b, p as z } from "../luzmo-icons-4nDFv1Lq.js";
|
|
22
22
|
const d = () => {
|
|
23
23
|
if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
|
|
24
24
|
const e = document.createElement("style");
|
|
@@ -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 o=require("../base-CBCg3yyw.cjs"),h=require("../state-D8JEtYqe.cjs"),d=require("../luzmo-icons-
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../base-CBCg3yyw.cjs"),h=require("../state-D8JEtYqe.cjs"),d=require("../luzmo-icons-D4IvHgVd.cjs"),x=require("../style-map-CeilmSgs.cjs"),z="*,*:before,*:after{box-sizing:border-box}:host{display:flex;flex:1 1 auto}svg{height:.75em}.unit-input-container{width:100%;position:relative;display:flex;height:1.875rem;box-sizing:border-box;border-radius:var(--luzmo-border-radius)}.unit-input-container input{box-sizing:border-box;min-width:0;width:100%;line-height:1.6rem;color:var(--luzmo-font-color);padding-left:var(--luzmo-spacing-3);padding-right:var(--luzmo-spacing-5);outline:none;border:var(--luzmo-border-width) solid var(--luzmo-border-color);border-radius:var(--luzmo-border-radius);background:transparent;font-weight:400;text-align:right;transition:border .2s ease-in-out}.unit-input-container input:focus{border:var(--luzmo-border-width) solid var(--luzmo-primary);background:var(--luzmo-background-color-hover)}.unit-input-container input:focus~.ticks{border:var(--luzmo-border-width) solid var(--luzmo-primary)}.unit-input-container input:focus~.ticks .tick-up{border-bottom:var(--luzmo-border-width) solid var(--luzmo-primary)}.unit-input-container .unit{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;right:1.125rem;color:var(--luzmo-font-color-disabled);padding:0 var(--luzmo-spacing-2);height:100%;cursor:default;-webkit-user-select:none;user-select:none;z-index:2;font-size:80%}.unit-input-container .ticks{position:absolute;display:flex;flex-direction:column;top:0;bottom:0;right:0;width:var(--luzmo-unit-input-tick-width, 1rem);-webkit-user-select:none;user-select:none;z-index:3;border:var(--luzmo-border-width) solid var(--luzmo-border-color);border-top-right-radius:var(--luzmo-border-radius);border-bottom-right-radius:var(--luzmo-border-radius);overflow:hidden;background-color:var(--luzmo-background-color-hover)}.unit-input-container .ticks>div{flex:1 1 auto;display:flex;justify-content:center;align-items:center;overflow:hidden;color:var(--luzmo-font-color);transition:all .2s ease-in-out;cursor:pointer;position:relative}.unit-input-container .ticks>div:hover{color:var(--luzmo-font-color-hard);background:var(--background-color-alt-2)}.unit-input-container .ticks>div.disabled,.unit-input-container .ticks>div.disabled:hover{cursor:not-allowed;color:var(--luzmo-font-color-disabled)!important;background-color:var(--luzmo-background-color)}.unit-input-container .ticks>div.tick-up{border-bottom:var(--luzmo-border-width) solid var(--luzmo-border-color)}.unit-input-container.with-unit input{padding-right:2.25rem}.unit-input-container.has-error input{border-color:var(--luzmo-negative-color, red)!important}.unit-input-container.has-error .ticks{border-color:var(--luzmo-negative-color, red)!important;background-color:var(--luzmo-negative-color, red)!important}.unit-input-container.has-error .tick-up,.unit-input-container.has-error .tick-down{border-color:var(--luzmo-negative-color, red)!important;background-color:var(--luzmo-negative-color, red)!important;color:#fff!important}";var w=Object.defineProperty,s=(m,t,e,i)=>{for(var a=void 0,n=m.length-1,u;n>=0;n--)(u=m[n])&&(a=u(t,e,a)||a);return a&&w(t,e,a),a};const l={min:-99999999999,max:99999999999,step:1,default:0,debounce:250},p=class p extends o.LuzmoElement{constructor(){super(),this.isDecimal=!1,this.disabled=!1,this.readOnly=!1,this.inputWidth="",this.debounce=l.debounce,this.errors=[],this.setValue=t=>{this.waitForUpdate=!0,this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0}))},this.debounce||0)},this.setCorrectInitialValues()}transformToNumber(t,e){let i=t;return i=this.isDecimal?Number.parseFloat(t+""):Number.parseInt(t+"",10),i=Number.isNaN(i)?Number(e):Number(i),i}onInput(t){let e=new RegExp(/[^0-9+-]/g);this.isDecimal&&(e=new RegExp(/[^0-9.,+-]/g));const i=t.target.value.replace(e,"").replaceAll(",",".");t.target.value=i,this.errors=[];const a=this.isDecimal?Number.parseFloat(i+""):Number.parseInt(i+"",10);Number.isNaN(a)&&this.errors.push("Not a number"),a<this.min&&this.errors.length===0&&this.errors.push("Value is lower than minimum"),a>this.max&&this.errors.length===0&&this.errors.push("Value is higher than maximum"),this.errors.length===0?(this.validValue=a,this.value=this.validValue,this.setValue(this.value),this.setErrorStatus(!1)):this.setErrorStatus(!0)}setErrorStatus(t){var e,i;t?(e=this.renderRoot.querySelector(".unit-input-container"))==null||e.classList.add("has-error"):(this.errors=[],(i=this.renderRoot.querySelector(".unit-input-container"))==null||i.classList.remove("has-error"))}setDisabledUpDownStatus(){this.value===this.min?this.renderRoot.querySelector(".tick-down").classList.add("disabled"):this.renderRoot.querySelector(".tick-down").classList.remove("disabled"),this.value===this.max?this.renderRoot.querySelector(".tick-up").classList.add("disabled"):this.renderRoot.querySelector(".tick-up").classList.remove("disabled")}createAndSetValidValue(t){let e=this.validValue?this.transformToNumber(t,this.validValue):this.transformToNumber(t,this.default);this.max<e&&(e=this.max),this.min>e&&(e=this.min),this.validValue=e,this.value=e}setCorrectInitialValues(){this.min=this.transformToNumber(this.min,l.min),this.max=this.transformToNumber(this.max,l.max),this.step=Math.abs(this.transformToNumber(this.step,l.step)),this.min>this.max&&(this.min=this.max),this.max<this.min+this.step&&(this.max=this.min+this.step),this.default=this.transformToNumber(this.default,l.default),this.createAndSetValidValue(this.value)}onKeydown(t){!this.disabled&&(t.key==="ArrowUp"||t.key==="ArrowDown")&&this.applyStep(t,t.key==="ArrowUp")}applyStep(t,e){var i,a,n,u,b,f;if(!this.disabled){t.preventDefault();const v=((n=(a=(i=this.validValue.toString())==null?void 0:i.split("."))==null?void 0:a[1])==null?void 0:n.length)??0,g=((f=(b=(u=this.step.toString())==null?void 0:u.split("."))==null?void 0:b[1])==null?void 0:f.length)??0,y=Math.max(v,g);let c=this.validValue+(e?this.step:-this.step);c=Number.parseFloat(c.toFixed(y)),this.createAndSetValidValue(c),this.setErrorStatus(!1),this.renderRoot.querySelector("input").value=this.validValue+"",this.setValue(this.validValue),this.setDisabledUpDownStatus()}}setPaddingRightOfInput(){const t=this.renderRoot.querySelector(".unit"),e=this.renderRoot.querySelector(".ticks"),i=this.unit?`calc(${t==null?void 0:t.offsetWidth}px + ${e==null?void 0:e.offsetWidth}px)`:`calc(${e==null?void 0:e.offsetWidth}px + var(--luzmo-spacing-3))`;this.renderRoot.querySelector("input").style.paddingRight=i}updated(t){t.has("value")&&(this.setCorrectInitialValues(),this.waitForUpdate?this.waitForUpdate=!1:this.renderRoot.querySelector("input").value=this.value+"",this.setPaddingRightOfInput())}render(){return o.x`
|
|
19
19
|
<div style=${x.o(this.inputWidth?{width:this.inputWidth}:{})}>
|
|
20
20
|
<input
|
|
21
21
|
.min=${String(this.min)}
|
|
@@ -29,14 +29,14 @@
|
|
|
29
29
|
class="tick-up"
|
|
30
30
|
@click=${{handleEvent:t=>this.applyStep(t,!0)}}
|
|
31
31
|
>
|
|
32
|
-
${d.
|
|
32
|
+
${d.y3(d.b)}
|
|
33
33
|
</div>
|
|
34
34
|
|
|
35
35
|
<div
|
|
36
36
|
class="tick-down"
|
|
37
37
|
@click=${{handleEvent:t=>this.applyStep(t,!1)}}
|
|
38
38
|
>
|
|
39
|
-
${d.
|
|
39
|
+
${d.y3(d.T)}
|
|
40
40
|
</div>
|
|
41
41
|
</div>
|
|
42
42
|
</div>
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
* */
|
|
18
18
|
import { a as w, r as k, x as f, n as u } from "../base-WsynuqaS.js";
|
|
19
19
|
import { r as m } from "../state-Deh-vKYE.js";
|
|
20
|
-
import {
|
|
20
|
+
import { y as z, b as S, T as V } from "../luzmo-icons-4nDFv1Lq.js";
|
|
21
21
|
import { o as N } from "../style-map-IgqIKvlE.js";
|
|
22
22
|
const y = () => {
|
|
23
23
|
if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
|