@luzmo/analytics-components-kit 1.0.1-alpha.25 → 1.0.1-alpha.27
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/{button-base-B7v4eeRh-BKKUK3x0.cjs → button-base-DSHx7XO8-Cixrr9aG.cjs} +3 -3
- package/components/{button-base-B7v4eeRh-D3-GH03o.js → button-base-DSHx7XO8-VB_BBSqq.js} +27 -27
- package/components/display-settings/index.cjs +1 -1
- package/components/display-settings/index.js +7 -7
- package/components/display-settings-binning/index.cjs +1 -1
- package/components/display-settings-binning/index.js +5 -5
- package/components/display-settings-datetime/index.cjs +1 -1
- package/components/display-settings-datetime/index.js +8 -8
- package/components/display-settings-grand-totals/index.cjs +1 -1
- package/components/display-settings-grand-totals/index.js +4 -4
- package/components/display-settings-numeric/index.cjs +1 -1
- package/components/display-settings-numeric/index.js +9 -9
- package/components/display-settings-period-over-period/index.cjs +2 -2
- package/components/display-settings-period-over-period/index.js +7 -7
- package/components/draggable-data-item-level/index.cjs +4 -4
- package/components/draggable-data-item-level/index.js +4 -4
- package/components/droppable-slot/droppable-slot.d.ts +2 -2
- package/components/droppable-slot/index.cjs +1 -1
- package/components/droppable-slot/index.js +2 -2
- package/components/edit-item/edit-item.d.ts +1 -0
- package/components/edit-item/index.cjs +5 -4
- package/components/edit-item/index.js +26 -12
- package/components/edit-option-action-button-group/index.cjs +1 -1
- package/components/edit-option-action-button-group/index.js +5 -5
- package/components/{edit-option-base-qePiIQWd.js → edit-option-base-CPLI5-oZ.js} +2 -2
- package/components/{edit-option-base-Boz7TNRZ.cjs → edit-option-base-ChZvMFLr.cjs} +1 -1
- package/components/edit-option-color-picker/index.cjs +10 -10
- package/components/edit-option-color-picker/index.js +16 -16
- package/components/edit-option-multi-language-field/index.cjs +1 -1
- package/components/edit-option-multi-language-field/index.js +2 -2
- package/components/edit-option-number-field/index.cjs +1 -1
- package/components/edit-option-number-field/index.js +2 -2
- package/components/edit-option-picker/index.cjs +1 -1
- package/components/edit-option-picker/index.js +3 -3
- package/components/edit-option-position-picker/index.cjs +1 -1
- package/components/edit-option-position-picker/index.js +2 -2
- package/components/edit-option-positions-number-field/index.cjs +1 -1
- package/components/edit-option-positions-number-field/index.js +3 -3
- package/components/edit-option-radio-button-group/index.cjs +1 -1
- package/components/edit-option-radio-button-group/index.js +3 -3
- package/components/edit-option-slider/index.cjs +2 -2
- package/components/edit-option-slider/index.js +2 -2
- package/components/edit-option-switch/index.cjs +2 -2
- package/components/edit-option-switch/index.js +3 -3
- package/components/edit-option-text-field/index.cjs +1 -1
- package/components/edit-option-text-field/index.js +2 -2
- package/components/filter-data-item-picker/filter-data-item-picker.d.ts +80 -0
- package/components/filter-data-item-picker/index.d.ts +7 -0
- package/components/filter-expression-picker/filter-expression-picker.d.ts +60 -0
- package/components/filter-expression-picker/index.d.ts +7 -0
- package/components/filter-group/filter-group.d.ts +39 -0
- package/components/filter-group/index.d.ts +7 -0
- package/components/filter-item/filter-item.d.ts +64 -0
- package/components/filter-item/index.d.ts +7 -0
- package/components/filter-item/stories/dataset-data-items.const.d.ts +15 -0
- package/components/filter-parameter-picker/filter-parameter-picker.d.ts +26 -0
- package/components/filter-parameter-picker/index.d.ts +7 -0
- package/components/filter-value-picker/filter-value-picker.d.ts +65 -0
- package/components/filter-value-picker/index.d.ts +7 -0
- package/components/filter-value-picker-datetime/filter-value-picker-datetime.d.ts +43 -0
- package/components/filter-value-picker-datetime/index.d.ts +7 -0
- package/components/filter-value-picker-hierarchy/filter-value-picker-hierarchy.d.ts +71 -0
- package/components/filter-value-picker-hierarchy/index.d.ts +7 -0
- package/components/filter-value-picker-numeric/filter-value-picker-numeric.d.ts +72 -0
- package/components/filter-value-picker-numeric/index.d.ts +7 -0
- package/components/index-B6Os866t.cjs +127 -0
- package/components/index-BgR4fBCA.cjs +42 -0
- package/components/{index-CdUTqQ3L.cjs → index-BnOOdgQZ.cjs} +3 -3
- package/components/{index-BH9W0QLt-DBxyzKWK.js → index-Brne8JKA.js} +84 -51
- package/components/{index-CXIT0cYY.js → index-Bsn3jtgt.js} +2 -2
- package/components/index-CAG4u31N.cjs +117 -0
- package/components/{index-DUO13KGl.cjs → index-CDUZyVS8.cjs} +1 -1
- package/components/{index-BYfDERr7.js → index-CJtXD_RI.js} +1 -1
- package/components/{index-Dc9c_dq-.cjs → index-CMvCwUvn.cjs} +1 -1
- package/components/{index-ymMEPngt.js → index-CPdcj1Bo.js} +22 -22
- package/components/{index-ByjLd3bT.cjs → index-CT2P9cSY.cjs} +2 -2
- package/components/{index-BUSWsm5N.js → index-CTxrSfyd.js} +4 -4
- package/components/{index-B3ve6cAj.js → index-CX0ynTHR.js} +135 -101
- package/components/{index-i8GaIN7i.cjs → index-CY1zprJk.cjs} +1 -1
- package/components/{index-CfEn3fIT.js → index-CdZDTZcN.js} +1 -1
- package/components/{index-aYcu00GB.js → index-DDm8p09D.js} +1 -1
- package/components/{index-h9T5DPIm.cjs → index-DFt-aKCN.cjs} +2 -2
- package/components/{index-C8IL2IZ6.js → index-DOnHTKUs.js} +2 -2
- package/components/{index-86cIx1Ql.cjs → index-DULisWB3.cjs} +2 -2
- package/components/index-DW3LXQ5Z.js +779 -0
- package/components/{index-CdCtJpK9.js → index-Dk2zOgvd.js} +4 -4
- package/components/index-DoZEESMk.cjs +217 -0
- package/components/{index-BVX_ozT9.js → index-Dpt_Qqgy.js} +1 -1
- package/components/{index-Bt5nP_6w.cjs → index-Dv1aV79F.cjs} +1 -1
- package/components/{index-BJVxTeoi.cjs → index-E6HaIK_Z.cjs} +2 -2
- package/components/{index-DEVOZNSc.cjs → index-NFKXlEm1.cjs} +1 -1
- package/components/{index-Bee1uunR.js → index-OuAMpMdS.js} +1 -1
- package/components/{index-DVAsMiOm.js → index-nP-SGD7o.js} +3 -3
- package/components/index.cjs +1 -1
- package/components/index.js +457 -54
- package/components/{language-resolution-8yZa5r_P-FqQChUDW.cjs → language-resolution-8yZa5r_P-CYK1IIrs.cjs} +2 -2
- package/components/{language-resolution-8yZa5r_P-Bn0bYosv.js → language-resolution-8yZa5r_P-Chn3SFme.js} +7 -7
- package/components/{luzmo-icons-BE2T8vWu.js → luzmo-icons-DxZo8BWX.js} +15 -15
- package/components/slot-menu/index.cjs +1 -1
- package/components/slot-menu/index.js +2 -2
- package/components/slot-menu-list/index.js +1 -1
- package/components/text-field-BTnBJoP9-Cwm3XQ88.cjs +147 -0
- package/components/text-field-BTnBJoP9-jo797Hka.js +430 -0
- package/components/utils.cjs +1 -1
- package/components/utils.js +472 -54
- package/custom-elements.json +4 -4
- package/index.d.ts +1 -0
- package/item-definitions/marker-map/marker-map-options.config.d.ts +1 -1
- package/package.json +1 -1
- package/utils/data-broker/index.d.ts +173 -0
- package/utils/data-item-types/calculate-data-item-icon.d.ts +3 -0
- package/utils/expressions/index.d.ts +13 -0
- package/utils/index.d.ts +1 -0
- package/utils/themes/index.d.ts +507 -0
- package/components/index-BH9W0QLt-Cy2sUVJ_.cjs +0 -95
- package/components/index-D5LI0odG.js +0 -44
- package/components/index-DM_2d78G.js +0 -744
- package/components/index-DrLPC6eG.cjs +0 -185
- package/components/index-iYpAy-Kg.cjs +0 -95
- package/components/index-w3j1USKK.cjs +0 -36
- package/components/index-zuArOtOt.cjs +0 -42
- package/components/text-field-CvKSS59x-Dn0_1HO7.js +0 -412
- package/components/text-field-CvKSS59x-E9LQElL4.cjs +0 -131
@@ -1,42 +0,0 @@
|
|
1
|
-
/*! * A kit of modern Luzmo Web Components for analytics in your web application.
|
2
|
-
*
|
3
|
-
* Copyright © 2025 Luzmo
|
4
|
-
* All rights reserved.
|
5
|
-
* Luzmo web components (“Luzmo Web Components”)
|
6
|
-
* must be used according to the Luzmo Terms of Service.
|
7
|
-
* This license allows users with a current active Luzmo account
|
8
|
-
* to use the Luzmo Web Components. This license terminates
|
9
|
-
* automatically if a user no longer has an active Luzmo account.
|
10
|
-
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
11
|
-
*
|
12
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
13
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
14
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
15
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
16
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
17
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
18
|
-
* SOFTWARE.
|
19
|
-
* */
|
20
|
-
"use strict";const d=require("./luzmo-icons-XsFsTAl3.cjs"),r=require("./property-0L4eB11h.cjs"),s=require("./sized-mixin-BxMraZLS-DEFWqo8f.cjs"),g=require("./button-base-B7v4eeRh-BKKUK3x0.cjs");/*! * Lucero - The design system for Luzmo.
|
21
|
-
*
|
22
|
-
* Copyright © 2025 Luzmo
|
23
|
-
* All rights reserved.
|
24
|
-
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
25
|
-
* This license allows users with a current active Luzmo account to use Lucero.
|
26
|
-
* This license terminates automatically if a user no longer has an active Luzmo account.
|
27
|
-
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
28
|
-
*
|
29
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
30
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
31
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
32
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
33
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
34
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
35
|
-
* SOFTWARE.
|
36
|
-
* */const h=()=>{if(typeof document<"u"&&!document.querySelector("style[data-luzmo-vars]")){const c=document.createElement("style");c.setAttribute("data-luzmo-vars",""),c.textContent='html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}',document.head.appendChild(c)}};h();const m=':host{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;font-family:var(--luzmo-button-font-family, var(--luzmo-sans-font-family-stack, var(--luzmo-font-family)));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--luzmo-button-line-height, var(--luzmo-line-height-100, var(--line-height-100)));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out,border-color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out,color var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out,box-shadow var(--luzmo-button-animation-duration, var(--luzmo-animation-duration-100, var(--animation-duration-100))) ease-out;border-style:solid;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;overflow:visible}:host(:focus){outline:none}:host([disabled]){cursor:default}::slotted([slot=icon]){max-block-size:100%;flex-shrink:0}#label{text-align:center;place-self:center}#label:empty{display:none}@media (forced-colors: active){:host{--highcontrast-action-button-focus-indicator-color: ButtonText}:host:after{forced-color-adjust:none}:host([selected]){--highcontrast-action-button-background-color-default: Highlight;--highcontrast-action-button-background-color-hover: Highlight;--highcontrast-action-button-background-color-focus: Highlight;--highcontrast-action-button-background-color-down: Highlight;--highcontrast-action-button-background-color-disabled: ButtonFace;--highcontrast-action-button-border-color-default: HighlightText;--highcontrast-action-button-border-color-hover: HighlightText;--highcontrast-action-button-border-color-focus: HighlightText;--highcontrast-action-button-border-color-down: HighlightText;--highcontrast-action-button-border-color-disabled: GrayText;--highcontrast-action-button-content-color-default: HighlightText;--highcontrast-action-button-content-color-hover: HighlightText;--highcontrast-action-button-content-color-focus: HighlightText;--highcontrast-action-button-content-color-down: HighlightText;--highcontrast-action-button-content-color-disabled: GrayText}:host([selected]) .hold-affordance,:host([selected]) ::slotted([slot=icon]),:host([selected]) #label{forced-color-adjust:none}}:host{--action-button-focus-indicator-border-radius: calc( var(--action-button-border-radius) + var(--action-button-focus-indicator-gap) );--action-button-edge-to-visual: calc( var(--action-button-edge-to-visual-size) - var(--action-button-border-width) );--action-button-edge-to-text: calc( var(--action-button-edge-to-text-size) - var(--action-button-border-width) );--action-button-edge-to-visual-only: calc( var(--action-button-edge-to-visual-only-size) - var( --action-button-border-width ) );min-inline-size:var(--luzmo-action-button-min-width, var(--action-button-min-width));block-size:var(--luzmo-action-button-height, var(--action-button-height));border-radius:var(--luzmo-action-button-border-radius, var(--action-button-border-radius));border-width:var(--luzmo-action-button-border-width, var(--action-button-border-width));gap:calc(var(--luzmo-action-button-text-to-visual, var(--action-button-text-to-visual)) + var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)) - var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)));padding-inline:var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text));background-color:var(--highcontrast-action-button-background-color-default, var(--luzmo-action-button-background-color-default, var(--action-button-background-color-default)));border-color:var(--highcontrast-action-button-border-color-default, var(--luzmo-action-button-border-color-default, var(--action-button-border-color-default)));color:var(--highcontrast-action-button-content-color-default, var(--luzmo-action-button-content-color-default, var(--action-button-content-color-default)));position:relative}:host:dir(rtl),:host([dir=rtl]){--logical-rotation: matrix(-1, 0, 0, 1, 0, 0)}@media (hover: hover){:host(:hover){background-color:var(--highcontrast-action-button-background-color-hover, var(--luzmo-action-button-background-color-hover, var(--action-button-background-color-hover)));border-color:var(--highcontrast-action-button-border-color-hover, var(--luzmo-action-button-border-color-hover, var(--action-button-border-color-hover)));color:var(--highcontrast-action-button-content-color-hover, var(--luzmo-action-button-content-color-hover, var(--action-button-content-color-hover)))}}:host(:focus-visible){background-color:var(--highcontrast-action-button-background-color-focus, var(--luzmo-action-button-background-color-focus, var(--action-button-background-color-focus)));border-color:var(--highcontrast-action-button-border-color-focus, var(--luzmo-action-button-border-color-focus, var(--action-button-border-color-focus)));color:var(--highcontrast-action-button-content-color-focus, var(--luzmo-action-button-content-color-focus, var(--action-button-content-color-focus)))}:host(:is(:active,[active])){background-color:var(--highcontrast-action-button-background-color-down, var(--luzmo-action-button-background-color-down, var(--action-button-background-color-down)));border-color:var(--highcontrast-action-button-border-color-down, var(--luzmo-action-button-border-color-down, var(--action-button-border-color-down)));color:var(--highcontrast-action-button-content-color-down, var(--luzmo-action-button-content-color-down, var(--action-button-content-color-down)))}:host([disabled]){background-color:var(--highcontrast-action-button-background-color-disabled, var(--luzmo-action-button-background-color-disabled, var(--action-button-background-color-disabled)));border-color:var(--highcontrast-action-button-border-color-disabled, var(--luzmo-action-button-border-color-disabled, var(--action-button-border-color-disabled)));color:var(--highcontrast-action-button-content-color-disabled, var(--luzmo-action-button-content-color-disabled, var(--action-button-content-color-disabled)))}:host([selected]){--luzmo-action-button-background-color-default: var( --luzmo-action-button-background-color-default-selected );--luzmo-action-button-background-color-hover: var( --luzmo-action-button-background-color-hover-selected );--luzmo-action-button-background-color-down: var( --luzmo-action-button-background-color-down-selected );--luzmo-action-button-background-color-focus: var( --luzmo-action-button-background-color-focus-selected );--luzmo-action-button-content-color-default: var( --luzmo-action-button-content-color-default-selected );--luzmo-action-button-content-color-hover: var( --luzmo-action-button-content-color-hover-selected );--luzmo-action-button-content-color-down: var( --luzmo-action-button-content-color-down-selected );--luzmo-action-button-content-color-focus: var( --luzmo-action-button-content-color-focus-selected )}:host([selected][emphasized]){--luzmo-action-button-background-color-default: var( --luzmo-action-button-background-color-default-selected-emphasized );--luzmo-action-button-background-color-hover: var( --luzmo-action-button-background-color-hover-selected-emphasized );--luzmo-action-button-background-color-down: var( --luzmo-action-button-background-color-down-selected-emphasized );--luzmo-action-button-background-color-focus: var( --luzmo-action-button-background-color-focus-selected-emphasized );--luzmo-action-button-content-color-default: var( --luzmo-action-button-content-color-default-selected-emphasized );--luzmo-action-button-content-color-hover: var( --luzmo-action-button-content-color-hover-selected-emphasized );--luzmo-action-button-content-color-down: var( --luzmo-action-button-content-color-down-selected-emphasized );--luzmo-action-button-content-color-focus: var( --luzmo-action-button-content-color-focus-selected-emphasized )}:host([selected][static-color=black]),:host([selected][static-color=white]){--luzmo-action-button-content-color-default: var( --luzmo-action-button-static-content-color );--luzmo-action-button-content-color-hover: var( --luzmo-action-button-static-content-color );--luzmo-action-button-content-color-down: var( --luzmo-action-button-static-content-color );--luzmo-action-button-content-color-focus: var( --luzmo-action-button-static-content-color )}::slotted([slot=icon]){inline-size:var(--luzmo-action-button-icon-size, var(--action-button-icon-size));color:inherit;margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual, var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual, var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)))}.hold-affordance+::slotted([slot=icon]){margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual, var(--action-button-edge-to-visual)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)))}.hold-affordance+[icon-only]::slotted([slot=icon]),[icon-only]::slotted([slot=icon]){margin-inline-start:calc(var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)));margin-inline-end:calc(var(--luzmo-action-button-edge-to-visual-only, var(--action-button-edge-to-visual-only)) - var(--luzmo-action-button-edge-to-text, var(--action-button-edge-to-text)))}#label{pointer-events:none;font-size:var(--luzmo-action-button-font-size, var(--action-button-font-size));white-space:nowrap;color:inherit;color:var(--luzmo-action-button-label-color, inherit);text-overflow:ellipsis;overflow:hidden}.hold-affordance{color:inherit;transform:var(--logical-rotation);position:absolute;font-size:var(--action-button-corner-triangle-size);inset-block-end:calc(var(--luzmo-action-button-edge-to-hold-icon, var(--action-button-edge-to-hold-icon)) - var(--luzmo-action-button-border-width, var(--action-button-border-width)));inset-inline-end:calc(var(--luzmo-action-button-edge-to-hold-icon, var(--action-button-edge-to-hold-icon)) - var(--luzmo-action-button-border-width, var(--action-button-border-width)))}:host{transition:border-color var(--luzmo-action-button-animation-duration, var(--action-button-animation-duration)) ease-in-out}:host:after{margin:calc((var(--luzmo-action-button-focus-indicator-gap, var(--action-button-focus-indicator-gap)) + var(--luzmo-action-button-border-width, var(--action-button-border-width))) * -1);border-radius:var(--luzmo-action-button-focus-indicator-border-radius, var(--action-button-focus-indicator-border-radius));transition:box-shadow var(--luzmo-action-button-animation-duration, var(--action-button-animation-duration)) ease-in-out;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0}:host(:focus-visible){box-shadow:none;outline:none}:host(:focus-visible):after{box-shadow:0 0 0 var(--luzmo-action-button-focus-indicator-thickness, var(--action-button-focus-indicator-thickness)) var(--highcontrast-action-button-focus-indicator-color, var(--luzmo-action-button-focus-indicator-color, var(--action-button-focus-indicator-color)))}:host{--action-button-animation-duration: var(--luzmo-animation-duration);--action-button-border-radius: var(--luzmo-border-radius);--action-button-border-width: var(--luzmo-border-width);--action-button-content-color-default: var(--luzmo-font-color);--action-button-content-color-hover: var(--luzmo-font-color-hover);--action-button-content-color-down: var(--luzmo-font-color-down);--action-button-content-color-focus: var(--luzmo-font-color-focus);--action-button-focus-indicator-gap: var(--luzmo-indicator-gap);--action-button-focus-indicator-thickness: var(--luzmo-indicator-width);--action-button-focus-indicator-color: var(--luzmo-indicator-color);--action-button-background-color-default: var(--luzmo-background-color);--action-button-background-color-hover: var(--luzmo-background-color-hover);--action-button-background-color-down: var(--luzmo-background-color-down);--action-button-background-color-focus: var(--luzmo-background-color-focus);--action-button-border-color-default: var(--luzmo-border-color);--action-button-border-color-hover: var(--luzmo-border-color-hover);--action-button-border-color-down: var(--luzmo-border-color-down);--action-button-border-color-focus: var(--luzmo-border-color-focus);--action-button-background-color-disabled: var(--luzmo-background-color);--action-button-border-color-disabled: var(--luzmo-border-color-disabled);--action-button-content-color-disabled: var(--luzmo-font-color-disabled)}:host([quiet]){--action-button-background-color-default: transparent;--action-button-background-color-hover: var(--luzmo-background-color-hover);--action-button-background-color-down: var(--luzmo-background-color-down);--action-button-background-color-focus: var(--luzmo-background-color-focus);--action-button-background-color-disabled: transparent;--action-button-border-color-default: transparent;--action-button-border-color-hover: transparent;--action-button-border-color-down: transparent;--action-button-border-color-focus: transparent;--action-button-border-color-disabled: transparent}:host([selected]){--action-button-background-color-default: var(--luzmo-font-color);--action-button-background-color-hover: var(--luzmo-font-color-hover);--action-button-background-color-down: var(--luzmo-font-color-down);--action-button-background-color-focus: var(--luzmo-font-color-focus);--action-button-content-color-default: var(--luzmo-background-color);--action-button-content-color-hover: var(--luzmo-background-color);--action-button-content-color-down: var(--luzmo-background-color);--action-button-content-color-focus: var(--luzmo-background-color);--action-button-border-color-default: transparent;--action-button-border-color-hover: transparent;--action-button-border-color-down: transparent;--action-button-border-color-focus: transparent;--action-button-border-color-disabled: transparent;--action-button-background-color-disabled: var( --luzmo-background-color-disabled )}:host([selected][emphasized]){--action-button-background-color-default: var(--luzmo-primary);--action-button-background-color-hover: var(--luzmo-primary-hover);--action-button-background-color-down: var(--luzmo-primary-down);--action-button-background-color-focus: var(--luzmo-primary-focus);--action-button-content-color-default: var(--luzmo-primary-inverse-color);--action-button-content-color-hover: var(--luzmo-primary-inverse-color);--action-button-content-color-down: var(--luzmo-primary-inverse-color);--action-button-content-color-focus: var(--luzmo-primary-inverse-color)}:host([static-color=black][quiet]),:host([static-color=white][quiet]){--action-button-border-color-default: transparent;--action-button-border-color-hover: transparent;--action-button-border-color-down: transparent;--action-button-border-color-focus: transparent;--action-button-border-color-disabled: transparent}:host([static-color=black]){--action-button-background-color-default: transparent;--action-button-background-color-hover: rgba(0, 0, 0, .25);--action-button-background-color-down: rgba(0, 0, 0, .4);--action-button-background-color-focus: rgba(0, 0, 0, .25);--action-button-background-color-disabled: transparent;--action-button-border-color-default: rgba(0, 0, 0, .4);--action-button-border-color-hover: rgba(0, 0, 0, .55);--action-button-border-color-down: rgba(0, 0, 0, .7);--action-button-border-color-focus: rgba(0, 0, 0, .25);--action-button-border-color-disabled: transparent;--action-button-content-color-default: rgb(0, 0, 0);--action-button-content-color-hover: rgb(0, 0, 0);--action-button-content-color-down: rgb(0, 0, 0);--action-button-content-color-focus: rgb(0, 0, 0);--action-button-content-color-disabled: rgba(0, 0, 0, .55);--action-button-focus-indicator-color: rgb(0, 0, 0)}:host([static-color=black][selected]){--action-button-background-color-default: rgba(0, 0, 0, .9);--action-button-background-color-hover: rgb(0, 0, 0);--action-button-background-color-down: rgb(0, 0, 0);--action-button-background-color-focus: rgb(0, 0, 0);--action-button-background-color-disabled: rgba(0, 0, 0, .1);--action-button-border-color-disabled: transparent;--action-button-content-color-default: rgb(255, 255, 255);--action-button-content-color-hover: rgb(255, 255, 255);--action-button-content-color-down: rgb(255, 255, 255);--action-button-content-color-focus: rgb(255, 255, 255)}:host([static-color=black][selected][emphasized]){--action-button-background-color-default: rgba(0, 0, 0, .9);--action-button-background-color-hover: rgb(0, 0, 0);--action-button-background-color-down: rgb(0, 0, 0);--action-button-background-color-focus: rgb(0, 0, 0);--action-button-content-color-default: rgb(255, 255, 255);--action-button-content-color-hover: rgb(255, 255, 255);--action-button-content-color-down: rgb(255, 255, 255);--action-button-content-color-focus: rgb(255, 255, 255)}:host([static-color=white]){--action-button-background-color-default: transparent;--action-button-background-color-hover: rgba(255, 255, 255, .25);--action-button-background-color-down: rgba(255, 255, 255, .4);--action-button-background-color-focus: rgba(255, 255, 255, .25);--action-button-background-color-disabled: transparent;--action-button-border-color-default: rgba(255, 255, 255, .4);--action-button-border-color-hover: rgba(255, 255, 255, .55);--action-button-border-color-down: rgba(255, 255, 255, .7);--action-button-border-color-focus: rgba(255, 255, 255, .55);--action-button-border-color-disabled: rgba(255, 255, 255, .25);--action-button-content-color-default: rgb(255, 255, 255);--action-button-content-color-hover: rgb(255, 255, 255);--action-button-content-color-down: rgb(255, 255, 255);--action-button-content-color-focus: rgb(255, 255, 255);--action-button-content-color-disabled: rgba(255, 255, 255, .55);--action-button-focus-indicator-color: rgb(255, 255, 255)}:host([static-color=white][selected]){--action-button-background-color-default: rgba(255, 255, 255, .9);--action-button-background-color-hover: rgb(255, 255, 255);--action-button-background-color-down: rgb(255, 255, 255);--action-button-background-color-focus: rgb(255, 255, 255);--action-button-background-color-disabled: rgba(255, 255, 255, .1);--action-button-border-color-disabled: transparent;--action-button-content-color-default: rgb(0, 0, 0);--action-button-content-color-hover: rgb(0, 0, 0);--action-button-content-color-down: rgb(0, 0, 0);--action-button-content-color-focus: rgb(0, 0, 0)}:host([static-color=white][selected][emphasized]){--action-button-background-color-default: rgba(255, 255, 255, .9);--action-button-background-color-hover: rgb(255, 255, 255);--action-button-background-color-down: rgb(255, 255, 255);--action-button-background-color-focus: rgb(255, 255, 255);--action-button-content-color-default: rgb(0, 0, 0)}:host{--action-button-min-width: var(--luzmo-component-height);--action-button-height: var(--luzmo-component-height);--action-button-icon-size: var(--luzmo-font-size-l);--action-button-font-size: var(--luzmo-font-size);--action-button-text-to-visual: var(--luzmo-spacing-2);--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--action-button-edge-to-visual-only-size: var(--luzmo-spacing-3);--action-button-edge-to-text-size: 12px;--action-button-corner-triangle-size: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([size=xs]){--action-button-min-width: var(--luzmo-component-height-xs);--action-button-height: var(--luzmo-component-height-xs);--action-button-icon-size: var(--luzmo-font-size-s);--action-button-font-size: var(--luzmo-font-size-xs);--action-button-text-to-visual: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--action-button-edge-to-visual-only-size: var(--luzmo-spacing-2);--action-button-edge-to-text-size: var(--luzmo-spacing-2);--action-button-corner-triangle-size: var(--luzmo-spacing-2)}:host([size=s]){--action-button-min-width: var(--luzmo-component-height-s);--action-button-height: var(--luzmo-component-height-s);--action-button-icon-size: var(--luzmo-font-size);--action-button-font-size: var(--luzmo-font-size-s);--action-button-text-to-visual: var(--luzmo-spacing-3);--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: var(--luzmo-spacing-3);--action-button-edge-to-visual-only-size: var(--luzmo-spacing-2);--action-button-edge-to-text-size: var(--luzmo-spacing-3);--action-button-corner-triangle-size: var(--luzmo-spacing-2)}:host([size=l]){--action-button-min-width: var(--luzmo-component-height-l);--action-button-height: var(--luzmo-component-height-l);--action-button-icon-size: var(--luzmo-font-size-xl);--action-button-font-size: var(--luzmo-font-size-l);--action-button-text-to-visual: var(--luzmo-spacing-3);--action-button-edge-to-hold-icon: var(--luzmo-spacing-2);--action-button-edge-to-visual-size: var(--luzmo-spacing-4);--action-button-edge-to-visual-only-size: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--action-button-edge-to-text-size: var(--luzmo-spacing-5);--action-button-corner-triangle-size: var(--luzmo-spacing-3)}:host([size=xl]){--action-button-min-width: var(--luzmo-component-height-xl);--action-button-height: var(--luzmo-component-height-xl);--action-button-icon-size: var(--luzmo-font-size-xxl);--action-button-font-size: var(--luzmo-font-size-xl);--action-button-text-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--action-button-edge-to-hold-icon: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--action-button-edge-to-visual-size: var(--luzmo-spacing-5);--action-button-edge-to-visual-only-size: var(--luzmo-spacing-4);--action-button-edge-to-text-size: var(--luzmo-spacing-5);--action-button-corner-triangle-size: var(--luzmo-spacing-3)}::slotted([slot=icon]){flex-shrink:0}#label{flex-grow:var(--action-button-label-flex-grow);text-align:var(--action-button-label-text-align);pointer-events:none!important}:host([size=xs]){min-width:var(--action-button-height, 0);--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-2) - var(--action-button-border-width) )}:host([size=s]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-2) - var(--action-button-border-width) )}:host([size=m]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) - var(--action-button-border-width) )}:host([size=l]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-3) - var(--action-button-border-width) )}:host([size=xl]){--action-button-edge-to-visual-only: calc( var(--luzmo-spacing-4) - var(--action-button-border-width) )}@media (forced-colors: active){:host{--highcontrast-action-button-border-color-disabled: GrayText;--highcontrast-action-button-content-color-disabled: GrayText}}';var v=Object.defineProperty,z=Object.getOwnPropertyDescriptor,e=(c,o,t,n)=>{for(var i=n>1?void 0:n?z(o,t):o,l=c.length-1,u;l>=0;l--)(u=c[l])&&(i=(n?u(o,t,i):u(i))||i);return n&&i&&v(o,t,i),i};const f=300;let b;class a extends s.m(g.a,{validSizes:["xs","s","m","l","xl"],noDefaultSize:!0}){constructor(){super(),this.emphasized=!1,this.holdAffordance=!1,this.quiet=!1,this.role="button",this.selected=!1,this.toggles=!1,this._value="",this.onClick=()=>{this.toggles&&(this.selected=!this.selected,this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0,composed:!0}))||(this.selected=!this.selected))},this.addEventListener("click",this.onClick)}static get styles(){return[...super.styles,r.ht(m)]}get value(){return this._value||this.itemText}set value(o){o!==this._value&&(this._value=o||"",this._value?this.setAttribute("value",this._value):this.removeAttribute("value"))}get itemText(){return(this.textContent||"").trim()}handlePointerdownHoldAffordance(o){o.button===0&&(this.addEventListener("pointerup",this.handlePointerupHoldAffordance),this.addEventListener("pointercancel",this.handlePointerupHoldAffordance),b=setTimeout(()=>{this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"pointer"}}))},f))}handlePointerupHoldAffordance(){clearTimeout(b),this.removeEventListener("pointerup",this.handlePointerupHoldAffordance),this.removeEventListener("pointercancel",this.handlePointerupHoldAffordance)}handleKeydown(o){if(!this.holdAffordance)return super.handleKeydown(o);const{code:t,altKey:n}=o;(t==="Space"||n&&t==="ArrowDown")&&(o.preventDefault(),t==="ArrowDown"&&(o.stopPropagation(),o.stopImmediatePropagation()),this.addEventListener("keyup",this.handleKeyup),this.active=!0)}handleKeyup(o){if(!this.holdAffordance)return super.handleKeyup(o);const{code:t,altKey:n}=o;(t==="Space"||n&&t==="ArrowDown")&&(o.stopPropagation(),this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"keyboard"}})),this.active=!1)}get buttonContent(){const o=super.buttonContent;return this.holdAffordance&&o.unshift(r.Ht`
|
37
|
-
<div
|
38
|
-
class="hold-affordance corner-triangle-${this.size}"
|
39
|
-
>
|
40
|
-
${d.O2(d.d1)}
|
41
|
-
</div>
|
42
|
-
`),o}updated(o){super.updated(o);const t=this.role==="button",n=t&&(this.selected||this.toggles)&&!(this.hasAttribute("aria-haspopup")&&this.hasAttribute("aria-expanded"));(o.has("selected")||o.has("role"))&&(n?this.setAttribute("aria-pressed",this.selected?"true":"false"):(this.removeAttribute("aria-pressed"),t&&this.toggles&&this.hasAttribute("aria-expanded")&&this.setAttribute("aria-expanded",this.selected?"true":"false"))),o.has("holdAffordance")&&(this.holdAffordance?this.addEventListener("pointerdown",this.handlePointerdownHoldAffordance):(this.removeEventListener("pointerdown",this.handlePointerdownHoldAffordance),this.handlePointerupHoldAffordance()))}}e([r.Rt({type:Boolean,reflect:!0})],a.prototype,"emphasized",2);e([r.Rt({type:Boolean,reflect:!0,attribute:"hold-affordance"})],a.prototype,"holdAffordance",2);e([r.Rt({type:Boolean,reflect:!0})],a.prototype,"quiet",2);e([r.Rt({reflect:!0})],a.prototype,"role",2);e([r.Rt({type:Boolean,reflect:!0})],a.prototype,"selected",2);e([r.Rt({type:Boolean,reflect:!0})],a.prototype,"toggles",2);e([r.Rt({reflect:!0,attribute:"static-color"})],a.prototype,"staticColor",2);e([r.Rt({type:String})],a.prototype,"value",1);customElements.get("luzmo-action-button")||customElements.define("luzmo-action-button",a);
|
@@ -1,412 +0,0 @@
|
|
1
|
-
/*! * A kit of modern Luzmo Web Components for analytics in your web application.
|
2
|
-
*
|
3
|
-
* Copyright © 2025 Luzmo
|
4
|
-
* All rights reserved.
|
5
|
-
* Luzmo web components (“Luzmo Web Components”)
|
6
|
-
* must be used according to the Luzmo Terms of Service.
|
7
|
-
* This license allows users with a current active Luzmo account
|
8
|
-
* to use the Luzmo Web Components. This license terminates
|
9
|
-
* automatically if a user no longer has an active Luzmo account.
|
10
|
-
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
11
|
-
*
|
12
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
13
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
14
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
15
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
16
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
17
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
18
|
-
* SOFTWARE.
|
19
|
-
* */
|
20
|
-
import { H as s, r as g, h as b, d as u, v as h, R as r } from "./property-B2F7x7Cz.js";
|
21
|
-
import { _ as z, n as m, $ as y, s as c, r as k, f as w } from "./directive-helpers-nlQRAaQt-I6T4KZKW.js";
|
22
|
-
import { m as n, d as $ } from "./if-defined-BSAr_4u4-4Ys8VE7T.js";
|
23
|
-
import { O as x, I as q, F as T } from "./luzmo-icons-BE2T8vWu.js";
|
24
|
-
import { m as E } from "./sized-mixin-BxMraZLS-B_y0PzR3.js";
|
25
|
-
import { n as f, u as I } from "./element-resolution-FCUT-wql--7ctE626.js";
|
26
|
-
/*! * Lucero - The design system for Luzmo.
|
27
|
-
*
|
28
|
-
* Copyright © 2025 Luzmo
|
29
|
-
* All rights reserved.
|
30
|
-
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
31
|
-
* This license allows users with a current active Luzmo account to use Lucero.
|
32
|
-
* This license terminates automatically if a user no longer has an active Luzmo account.
|
33
|
-
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
34
|
-
*
|
35
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
36
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
37
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
38
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
39
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
40
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
41
|
-
* SOFTWARE.
|
42
|
-
* */
|
43
|
-
class B {
|
44
|
-
constructor(e, { mode: t } = { mode: "internal" }) {
|
45
|
-
this.mode = "internal", this.handleSlotchange = ({
|
46
|
-
target: a
|
47
|
-
}) => {
|
48
|
-
this.handleHelpText(a), this.handleNegativeHelpText(a);
|
49
|
-
}, this.host = e, this.id = `luzmo-help-text-${f()}`, this.mode = t;
|
50
|
-
}
|
51
|
-
get isInternal() {
|
52
|
-
return this.mode === "internal";
|
53
|
-
}
|
54
|
-
render(e) {
|
55
|
-
return s`
|
56
|
-
<div
|
57
|
-
id=${n(this.isInternal ? this.id : void 0)}
|
58
|
-
aria-live="assertive"
|
59
|
-
>
|
60
|
-
<slot
|
61
|
-
name=${e ? "negative-help-text" : `pass-through-help-text-${f()}`}
|
62
|
-
@slotchange=${this.handleSlotchange}
|
63
|
-
>
|
64
|
-
<slot name="help-text"></slot>
|
65
|
-
</slot>
|
66
|
-
</div>
|
67
|
-
`;
|
68
|
-
}
|
69
|
-
addId() {
|
70
|
-
const e = this.helpTextElement ? this.helpTextElement.id : this.id;
|
71
|
-
this.conditionId = I(
|
72
|
-
this.host,
|
73
|
-
"aria-describedby",
|
74
|
-
e
|
75
|
-
), this.host.hasAttribute("tabindex") && (this.previousTabindex = Number.parseFloat(
|
76
|
-
this.host.getAttribute("tabindex")
|
77
|
-
)), this.host.tabIndex = 0;
|
78
|
-
}
|
79
|
-
removeId() {
|
80
|
-
this.conditionId && (this.conditionId(), delete this.conditionId), !this.helpTextElement && (this.previousTabindex ? this.host.tabIndex = this.previousTabindex : this.host.removeAttribute("tabindex"));
|
81
|
-
}
|
82
|
-
handleHelpText(e) {
|
83
|
-
if (this.isInternal)
|
84
|
-
return;
|
85
|
-
this.helpTextElement && this.helpTextElement.id === this.id && this.helpTextElement.removeAttribute("id"), this.removeId();
|
86
|
-
const t = e.assignedElements()[0];
|
87
|
-
this.helpTextElement = t, t && (t.id || (t.id = this.id), this.addId());
|
88
|
-
}
|
89
|
-
handleNegativeHelpText(e) {
|
90
|
-
e.name === "negative-help-text" && e.assignedElements().forEach(
|
91
|
-
(t) => t.variant = "negative"
|
92
|
-
);
|
93
|
-
}
|
94
|
-
}
|
95
|
-
function S(l, { mode: e } = { mode: "internal" }) {
|
96
|
-
class t extends l {
|
97
|
-
constructor() {
|
98
|
-
super(...arguments), this.helpTextManager = new B(this, { mode: e });
|
99
|
-
}
|
100
|
-
get helpTextId() {
|
101
|
-
return this.helpTextManager.id;
|
102
|
-
}
|
103
|
-
renderHelpText(d) {
|
104
|
-
return this.helpTextManager.render(d);
|
105
|
-
}
|
106
|
-
}
|
107
|
-
return t;
|
108
|
-
}
|
109
|
-
/*! * Lucero - The design system for Luzmo.
|
110
|
-
*
|
111
|
-
* Copyright © 2025 Luzmo
|
112
|
-
* All rights reserved.
|
113
|
-
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
114
|
-
* This license allows users with a current active Luzmo account to use Lucero.
|
115
|
-
* This license terminates automatically if a user no longer has an active Luzmo account.
|
116
|
-
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
117
|
-
*
|
118
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
119
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
120
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
121
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
122
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
123
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
124
|
-
* SOFTWARE.
|
125
|
-
* */
|
126
|
-
/**
|
127
|
-
* @license
|
128
|
-
* Copyright 2020 Google LLC
|
129
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
130
|
-
*/
|
131
|
-
const _ = z(class extends y {
|
132
|
-
constructor(l) {
|
133
|
-
if (super(l), l.type !== c.PROPERTY && l.type !== c.ATTRIBUTE && l.type !== c.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
|
134
|
-
if (!k(l)) throw Error("`live` bindings can only contain a single expression");
|
135
|
-
}
|
136
|
-
render(l) {
|
137
|
-
return l;
|
138
|
-
}
|
139
|
-
update(l, [e]) {
|
140
|
-
if (e === h || e === u) return e;
|
141
|
-
const t = l.element, a = l.name;
|
142
|
-
if (l.type === c.PROPERTY) {
|
143
|
-
if (e === t[a]) return h;
|
144
|
-
} else if (l.type === c.BOOLEAN_ATTRIBUTE) {
|
145
|
-
if (!!e === t.hasAttribute(a)) return h;
|
146
|
-
} else if (l.type === c.ATTRIBUTE && t.getAttribute(a) === e + "") return h;
|
147
|
-
return w(l), e;
|
148
|
-
}
|
149
|
-
}), C = '#text-field{--luzmo-text-field-input-line-height: var( --luzmo-text-field-height, var(--text-field-height) );text-overflow:ellipsis;inline-size:var(--luzmo-text-field-width, 240px);grid-template-rows:auto auto auto;grid-template-columns:auto auto;margin:0;display:inline-grid;position:relative;overflow:visible}:host([quiet]) #text-field:after{content:"";pointer-events:none;inline-size:100%;block-size:var(--luzmo-text-field-focus-indicator-width, 2px);position:absolute;inset-block-end:calc((var(--luzmo-text-field-focus-indicator-gap, 2px) + var(--luzmo-text-field-focus-indicator-width, 2px)) * -1);inset-inline-start:0}:host([quiet][focused]) #text-field:after{background-color:var(--highcontrast-text-field-focus-indicator-color, var(--luzmo-text-field-focus-indicator-color, var(--luzmo-color-informative)))}:host([quiet][invalid]) #text-field .input{padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-invalid, var(--text-field-icon-spacing-inline-start-invalid)) + var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid)))}:host([quiet][valid]) #text-field .input{padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-valid, var(--text-field-icon-spacing-inline-start-valid)) + var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid)))}:host([invalid]) #text-field .icon,:host([valid]) #text-field .icon{pointer-events:all;grid-area:2/2;margin-inline-start:auto;position:absolute;inset-block-start:0;display:flex;align-items:center;justify-content:center}#text-field.luzmo-text-field--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([valid]) #text-field .icon{font-size:var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid));color:var(--highcontrast-text-field-icon-color-valid, var(--luzmo-text-field-icon-color-valid, var(--luzmo-color-positive)));inset-block-start:var(--luzmo-text-field-icon-spacing-block-valid, var(--text-field-icon-spacing-block-valid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-valid, var(--text-field-icon-spacing-block-valid));inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-valid, var(--text-field-icon-spacing-inline-end-valid))}:host([invalid]) #text-field .icon{font-size:var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid));color:var(--highcontrast-text-field-icon-color-invalid, var(--luzmo-text-field-icon-color-invalid, var(--luzmo-color-negative)));inset-block-start:var(--luzmo-text-field-icon-spacing-block-invalid, var(--text-field-icon-spacing-block-invalid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-invalid, var(--text-field-icon-spacing-block-invalid));inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-invalid, var(--text-field-icon-spacing-inline-end-invalid))}:host([disabled]) #text-field .icon,:host([readonly]) #text-field .icon{color:#0000}:host([quiet]) .icon{padding-inline-end:0}:host([quiet][valid]) .icon{inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-quiet-valid, 0px)}:host([quiet][invalid]) .icon{inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-quiet-invalid, 0px)}#text-field .luzmo-field-label{grid-area:1/1/auto/span 1;margin-block-end:var(--luzmo-text-field-label-spacing-block, 0px)}:host([quiet]) .luzmo-field-label{margin-block-end:var(--luzmo-text-field-label-spacing-block-quiet, var(--text-field-label-spacing-block-quiet))}:host([disabled]) .luzmo-field-label{color:var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled))}#text-field .luzmo-help-text{grid-area:3/1/auto/span 2;margin-block-start:var(--luzmo-text-field-helptext-spacing-block, 0px)}.luzmo-text-field-characterCount{inline-size:auto;font-size:var(--luzmo-text-field-character-count-font-size, var(--text-field-character-count-font-size));font-family:var(--luzmo-text-field-character-count-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-character-count-font-weight, var(--luzmo-font-weight));grid-area:1/2/auto/span 1;justify-content:flex-end;align-items:flex-end;margin-block-end:var(--luzmo-text-field-character-count-spacing-block, var(--text-field-character-count-spacing-block));margin-inline-start:var(--luzmo-text-field-character-count-spacing-inline, 12px);margin-inline-end:0;padding-inline-end:calc(var(--luzmo-text-field-corner-radius, var(--luzmo-border-radius)) / 2);display:inline-flex}:host([quiet]) .luzmo-text-field-characterCount{margin-block-end:var(--luzmo-text-field-character-count-spacing-block-quiet, var(--text-field-character-count-spacing-block-quiet))}.input{text-align:var(--luzmo-text-field-text-align, start);line-height:var(--luzmo-text-field-input-line-height);box-sizing:border-box;inline-size:100%;min-inline-size:var(--luzmo-text-field-min-width, 1.5);block-size:var(--luzmo-text-field-height, var(--text-field-height));padding-block-start:calc(var(--luzmo-text-field-spacing-block-start, var(--luzmo-spacing-3)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));padding-block-end:calc(var(--luzmo-text-field-spacing-block-end, var(--luzmo-spacing-3)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));padding-inline:calc(var(--luzmo-text-field-spacing-inline, var(--text-field-spacing-inline)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));vertical-align:top;background-color:var(--luzmo-text-field-background-color, var(--luzmo-background-color));border-color:var(--highcontrast-text-field-border-color, var(--luzmo-text-field-border-color, var(--luzmo-border-color)));border-style:solid;border-width:var(--luzmo-text-field-border-width, var(--luzmo-border-width));border-radius:var(--luzmo-text-field-corner-radius, var(--luzmo-border-radius));transition:border-color var(--luzmo-text-field-animation-duration, var(--luzmo-animation-duration)) ease-in-out;font-size:var(--luzmo-text-field-placeholder-font-size, var(--text-field-placeholder-font-size));font-family:var(--luzmo-text-field-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-font-weight, var(--luzmo-font-weight));color:var(--highcontrast-text-field-text-color-default, var(--luzmo-text-field-text-color-default, var(--luzmo-font-color)));text-overflow:ellipsis;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;grid-area:2/1/auto/span 2;margin:0}:host([type=number]) .input{-moz-appearance:text-field}:host([type=number]) .input::-webkit-inner-spin-button,:host([type=number]) .input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input:-moz-ui-invalid{box-shadow:none}.input::placeholder{opacity:1;font-size:var(--luzmo-text-field-placeholder-font-size, var(--text-field-placeholder-font-size));font-family:var(--luzmo-text-field-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-font-weight, var(--luzmo-font-weight));color:var(--highcontrast-text-field-text-color-default, var(--luzmo-text-field-placeholder-text-color-default, var(--luzmo-font-color-disabled)));transition:color var(--luzmo-text-field-animation-duration, var(--luzmo-animation-duration)) ease-in-out}.input:lang(ja)::placeholder,.input:lang(ko)::placeholder,.input:lang(zh)::placeholder{font-style:normal}:host([focused]) .input,.input:focus{border-color:var(--highcontrast-text-field-border-color-focus, var(--luzmo-text-field-border-color-focus, var(--luzmo-primary)));color:var(--highcontrast-text-field-text-color-focus, var(--luzmo-text-field-text-color-focus, var(--luzmo-font-color-hard)))}:host([focused]) .input::placeholder,.input:focus::placeholder{color:var(--highcontrast-text-field-text-color-focus, var(--luzmo-text-field-placeholder-text-color-focus, var(--luzmo-color-disabled)))}:host([focused]) .input{border-color:var(--highcontrast-text-field-border-color-keyboard-focus, var(--luzmo-text-field-border-color-keyboard-focus, var(--luzmo-primary)));outline:var(--luzmo-text-field-focus-indicator-width, 0) solid;outline-color:var(--highcontrast-text-field-focus-indicator-color, var(--luzmo-text-field-focus-indicator-color, var(--luzmo-color-informative)));outline-offset:var(--luzmo-text-field-focus-indicator-gap, 2px);color:var(--highcontrast-text-field-text-color-keyboard-focus, var(--luzmo-text-field-text-color-keyboard-focus, var(--luzmo-font-color-hard)))}:host([focused]) .input::placeholder{color:var(--highcontrast-text-field-text-color-keyboard-focus, var(--luzmo-text-field-placeholder-text-color-keyboard-focus, var(--luzmo-color-disabled)))}:host([valid]) .input{color:var(--highcontrast-text-field-text-color-valid, var(--luzmo-text-field-text-color-valid, var(--luzmo-font-color)));padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-valid, var(--text-field-icon-spacing-inline-start-valid)) + var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid)) + var(--luzmo-text-field-icon-spacing-inline-end-valid, var(--text-field-icon-spacing-inline-end-valid)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)))}:host([invalid]) .input{color:var(--highcontrast-text-field-text-color-invalid, var(--luzmo-text-field-text-color-invalid, var(--luzmo-font-color)));border-color:var(--highcontrast-text-field-border-color-invalid-default, var(--luzmo-text-field-border-color-invalid-default, var(luzmo-danger-color)));padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-invalid, var(--text-field-icon-spacing-inline-start-invalid)) + var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid)) + var(--luzmo-text-field-icon-spacing-inline-end-invalid, var(--text-field-icon-spacing-inline-end-invalid)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)))}:host([invalid]) .input:focus,:host([invalid][focused]) .input,:host([invalid]:focus) .input{border-color:var(--highcontrast-text-field-border-color-invalid-focus, var(--luzmo-text-field-border-color-invalid-focus, var(luzmo-danger-color)))}:host([invalid]) .input:focus-visible,:host([invalid][focused]) .input{border-color:var(--highcontrast-text-field-border-color-invalid-keyboard-focus, var(--luzmo-text-field-border-color-invalid-keyboard-focus, var(luzmo-danger-color)))}.input:disabled,:host([disabled]) #text-field .input{background-color:var(--luzmo-text-field-background-color-disabled, var(--luzmo-background-color-disabled));resize:none;opacity:1;border-color:#0000}.input:disabled,.input:disabled::placeholder,:host([disabled]) #text-field .input,:host([disabled]) #text-field .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([border=none]) .input{border-width:0;outline:none}:host([quiet]) .input{padding-block-start:var(--luzmo-text-field-spacing-block-start, var(--luzmo-spacing-2));padding-inline:var(--luzmo-text-field-spacing-inline-quiet, 0px);background-color:initial;resize:none;border-block-start-width:0;border-inline-width:0;border-radius:0;outline:none;margin-block-end:var(--luzmo-text-field-spacing-block-quiet, 0px);overflow-y:hidden}:host([quiet][disabled]) .input,.input:disabled{background-color:initial;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled))}:host([quiet][disabled]) .input,:host([quiet][disabled]) .input::placeholder,.input:disabled,.input:disabled::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-color-disabled)))}.input:read-only,:host([readonly]) #text-field .input{background-color:initial;color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-font-color)));border-color:#0000;outline:none}.input:read-only::placeholder,:host([readonly]) #text-field .input::placeholder{color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-color-disabled)));background-color:initial}@media (hover: hover){.input:hover,#text-field:hover .input{border-color:var(--highcontrast-text-field-border-color-hover, var(--luzmo-text-field-border-color-hover, rgba(var(--luzmo-primary-rgb), .3)))}.input:hover,#text-field:hover .input{color:var(--highcontrast-text-field-text-color-hover, var(--luzmo-text-field-text-color-hover, var(--luzmo-font-color-hard)))}.input:hover::placeholder,#text-field:hover .input::placeholder{color:var(--highcontrast-text-field-text-color-hover, var(--luzmo-text-field-placeholder-text-color-hover, var(--luzmo-color-disabled)))}:host([focused]) .input:hover,:host([focused]) #text-field:hover .input,.input:focus:hover{border-color:var(--highcontrast-text-field-border-color-focus-hover, var(--luzmo-text-field-border-color-focus-hover, var(--luzmo-primary)))}:host([focused]) .input:hover,.input:focus:hover{color:var(--highcontrast-text-field-text-color-focus-hover, var(--luzmo-text-field-text-color-focus-hover, var(--luzmo-font-color-hard)))}:host([focused]) .input:hover::placeholder,.input:focus:hover::placeholder{color:var(--highcontrast-text-field-text-color-focus-hover, var(--luzmo-text-field-placeholder-text-color-focus-hover, var(--luzmo-color-disabled)))}:host([invalid]) .input:hover:not(.is-disabled),:host([invalid]:hover):not(.is-disabled) .input{border-color:var(--highcontrast-text-field-border-color-invalid-hover, var(--luzmo-text-field-border-color-invalid-hover, var(luzmo-danger-color)))}:host([invalid]) .input:focus:hover,:host([invalid][focused]) .input:hover,:host([invalid]:focus) .input:hover{border-color:var(--highcontrast-text-field-border-color-invalid-focus-hover, var(--luzmo-text-field-border-color-invalid-focus-hover, var(luzmo-danger-color)))}:host([disabled]) #text-field:hover .input{background-color:var(--luzmo-text-field-background-color-disabled, var(--luzmo-background-color-disabled));resize:none;opacity:1;border-color:#0000}:host([quiet][disabled]:hover) .input,:host([disabled]) #text-field:hover .input,:host([disabled]) #text-field:hover .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([quiet][disabled]:hover) .input{background-color:initial;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled))}:host([quiet][disabled]:hover) .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([readonly]) #text-field:hover .input{border-color:#0000;outline:none}:host([readonly]) #text-field:hover .input,:host([readonly]) #text-field:hover .input::placeholder{background-color:initial;color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-font-color)))}}.luzmo-text-field--sideLabel{grid-template-rows:auto auto;grid-template-columns:auto auto auto}.luzmo-text-field--sideLabel:after{grid-area:1/2/span 1/span 1}.luzmo-text-field--sideLabel .luzmo-field-label{grid-area:1/1/span 2/span 1;margin-inline-end:var(--luzmo-text-field-label-spacing-inline-side-label, var(--text-field-label-spacing-inline-side-label))}.luzmo-text-field--sideLabel .luzmo-text-field-characterCount{grid-area:1/3/auto/span 1;align-items:flex-start;margin-block-start:var(--luzmo-text-field-character-count-spacing-block-side, var(--text-field-character-count-spacing-block-side));margin-inline-start:var(--luzmo-text-field-character-count-spacing-inline-side, 12px)}.luzmo-text-field--sideLabel .luzmo-help-text{grid-area:2/2/auto/span 1}.luzmo-text-field--sideLabel .input,.luzmo-text-field--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([multiline]){--luzmo-text-field-input-line-height: normal}:host([multiline]) .input{min-inline-size:var(--luzmo-text-area-min-inline-size, 112px);min-block-size:var(--luzmo-text-area-min-block-size, 56px);resize:inherit}:host([multiline][grows]) .input{grid-row:2}:host([multiline][grows]) .luzmo-text-field--sideLabel .input{grid-row:1}:host([multiline][quiet]) .input{min-block-size:var(--luzmo-text-area-min-block-size-quiet, var(--text-area-min-block-size-quiet));resize:none;overflow-y:hidden}@media (forced-colors: active){:host{--highcontrast-text-field-border-color-hover: Highlight;--highcontrast-text-field-border-color-focus: Highlight;--highcontrast-text-field-border-color-keyboard-focus: CanvasText;--highcontrast-text-field-focus-indicator-color: Highlight;--highcontrast-text-field-border-color-invalid-default: Highlight;--highcontrast-text-field-border-color-invalid-hover: Highlight;--highcontrast-text-field-border-color-invalid-focus: Highlight;--highcontrast-text-field-border-color-invalid-keyboard-focus: Highlight;--highcontrast-text-field-text-color-valid: CanvasText;--highcontrast-text-field-text-color-invalid: CanvasText}#text-field .input{--highcontrast-text-field-text-color-default: CanvasText;--highcontrast-text-field-text-color-hover: CanvasText;--highcontrast-text-field-text-color-keyboard-focus: CanvasText;--highcontrast-text-field-text-color-disabled: GrayText;--highcontrast-text-field-text-color-readonly: CanvasText}#text-field .input::placeholder{--highcontrast-text-field-text-color-default: GrayText;--highcontrast-text-field-text-color-hover: GrayText;--highcontrast-text-field-text-color-keyboard-focus: GrayText;--highcontrast-text-field-text-color-disabled: GrayText;--highcontrast-text-field-text-color-readonly: CanvasText}}:host{display:inline-flex;flex-direction:column;inline-size:var(--luzmo-text-field-width, 240px)}:host([multiline]){resize:both}:host([multiline][readonly]){resize:none}:host([disabled]:focus-visible){outline:none}#text-field{inline-size:100%}#text-field,textarea{resize:inherit}.input{min-inline-size:var(--luzmo-text-field-min-width, 1.5)}:host([focused]) .input{caret-color:var(--swc-test-caret-color);forced-color-adjust:var(--swc-test-forced-color-adjust)}#sizer{block-size:auto;word-break:break-word;opacity:0;white-space:pre-line}.icon,.icon-workflow{pointer-events:none}:host([multiline]) #text-field{display:inline-grid;--luzmo-text-field-input-line-height: normal}:host([multiline]) textarea{transition:box-shadow var(--luzmo-animation-duration) ease-in-out,border-color var(--luzmo-animation-duration) ease-in-out}:host([multiline]:not([quiet])) #text-field:after{box-shadow:none}:host([multiline][rows]) .input{block-size:auto;resize:none}:host([multiline][rows="1"]) .input{min-block-size:auto}:host([disabled][quiet]) #text-field .input,:host([disabled][quiet]) #text-field:hover .input,:host([quiet]) .input :disabled{background-color:#0000;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled));color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([disabled]) #text-field .icon.icon-search,:host([readonly]) #text-field .icon.icon-search{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([multiline][grows]:not([quiet])) #text-field:after{grid-area:unset;min-block-size:calc(var(--luzmo-text-area-min-block-size, var(--luzmo-text-area-min-block-size)) + var(--luzmo-text-field-focus-indicator-gap, 2px) * 2)}:host([multiline][grows]:not([rows])) .input:not(#sizer){position:absolute;top:0;left:0;height:100%;resize:none;overflow:hidden}:host{--text-field-height: var(--luzmo-component-height);--text-field-label-spacing-block-quiet: -8px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 14px;--text-field-spacing-inline: 12px;--text-field-icon-size-invalid: 18px;--text-field-icon-size-valid: 10px;--text-field-icon-spacing-inline-end-invalid: 12px;--text-field-icon-spacing-inline-end-valid: 15px;--text-field-icon-spacing-block-invalid: 7px;--text-field-icon-spacing-block-valid: 4px;--text-field-icon-spacing-inline-start-invalid: var(--luzmo-spacing-4);--text-field-icon-spacing-inline-start-valid: var(--luzmo-spacing-4);--text-field-character-count-font-size: var(--luzmo-font-size-s);--text-field-character-count-spacing-block: 5px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 8px;--text-area-min-block-size-quiet: var(--luzmo-component-height)}:host([size=s]){--text-field-height: var(--luzmo-component-height-s);--text-field-label-spacing-block-quiet: -8px;--text-field-label-spacing-inline-side-label: 8px;--text-field-placeholder-font-size: 12px;--text-field-spacing-inline: 9px;--text-field-icon-size-invalid: 16px;--text-field-icon-size-valid: 10px;--text-field-icon-spacing-inline-end-invalid: 9px;--text-field-icon-spacing-inline-end-valid: 11px;--text-field-icon-spacing-block-invalid: 2px;--text-field-icon-spacing-block-valid: -1px;--text-field-icon-spacing-inline-start-invalid: var(--luzmo-spacing-3);--text-field-icon-spacing-inline-start-valid: var(--luzmo-spacing-3);--text-field-character-count-font-size: var(--luzmo-font-size-xs);--text-field-character-count-spacing-block: 5px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 4px;--text-area-min-block-size-quiet: var(--luzmo-component-height-s)}:host([size=l]){--text-field-height: var(--luzmo-component-height-l);--text-field-label-spacing-block-quiet: -12px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 16px;--text-field-spacing-inline: 15px;--text-field-icon-size-invalid: 20px;--text-field-icon-size-valid: 12px;--text-field-icon-spacing-inline-end-invalid: 15px;--text-field-icon-spacing-inline-end-valid: 17px;--text-field-icon-spacing-block-invalid: 10px;--text-field-icon-spacing-block-valid: 8px;--text-field-icon-spacing-inline-start-invalid: 15px;--text-field-icon-spacing-inline-start-valid: 15px;--text-field-character-count-font-size: var(--luzmo-font-size);--text-field-character-count-spacing-block: 9px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 11px;--text-area-min-block-size-quiet: var(--luzmo-component-height-l)}:host([size=xl]){--text-field-height: var(--luzmo-component-height-xl);--text-field-label-spacing-block-quiet: -15px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 18px;--text-field-spacing-inline: 15px;--text-field-icon-size-invalid: 22px;--text-field-icon-size-valid: 14px;--text-field-icon-spacing-inline-end-invalid: 18px;--text-field-icon-spacing-inline-end-valid: 20px;--text-field-icon-spacing-block-invalid: 12px;--text-field-icon-spacing-block-valid: 13px;--text-field-icon-spacing-inline-start-invalid: 18px;--text-field-icon-spacing-inline-start-valid: 18px;--text-field-character-count-font-size: var(--luzmo-font-size-l);--text-field-character-count-spacing-block: 11px;--text-field-character-count-spacing-block-quiet: -4px;--text-field-character-count-spacing-block-side: 14px;--text-area-min-block-size-quiet: var(--luzmo-component-height-xl)}';
|
150
|
-
var H = Object.defineProperty, L = Object.getOwnPropertyDescriptor, i = (l, e, t, a) => {
|
151
|
-
for (var d = a > 1 ? void 0 : a ? L(e, t) : e, p = l.length - 1, v; p >= 0; p--)
|
152
|
-
(v = l[p]) && (d = (a ? v(e, t, d) : v(d)) || d);
|
153
|
-
return a && d && H(e, t, d), d;
|
154
|
-
};
|
155
|
-
const R = ["text", "url", "tel", "email", "password"];
|
156
|
-
class o extends S(
|
157
|
-
E(g, {
|
158
|
-
noDefaultSize: !0
|
159
|
-
})
|
160
|
-
) {
|
161
|
-
constructor() {
|
162
|
-
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;
|
163
|
-
}
|
164
|
-
static get styles() {
|
165
|
-
return [b(C)];
|
166
|
-
}
|
167
|
-
set type(e) {
|
168
|
-
const t = this._type;
|
169
|
-
this._type = e, this.requestUpdate("type", t);
|
170
|
-
}
|
171
|
-
get type() {
|
172
|
-
return R.find((e) => e === this._type) ?? "text";
|
173
|
-
}
|
174
|
-
set value(e) {
|
175
|
-
if (e === this.value)
|
176
|
-
return;
|
177
|
-
const t = this._value;
|
178
|
-
this._value = e, this.requestUpdate("value", t);
|
179
|
-
}
|
180
|
-
get value() {
|
181
|
-
return this._value;
|
182
|
-
}
|
183
|
-
get focusElement() {
|
184
|
-
return this.inputElement;
|
185
|
-
}
|
186
|
-
/**
|
187
|
-
* Sets the start and end positions of the current selection.
|
188
|
-
*
|
189
|
-
* @param selectionStart The 0-based index of the first selected character. An index greater than the length of the
|
190
|
-
* element's value is treated as pointing to the end of the value.
|
191
|
-
* @param selectionEnd The 0-based index of the character after the last selected character. An index greater than
|
192
|
-
* the length of the element's value is treated as pointing to the end of the value.
|
193
|
-
* @param [selectionDirection="none"] A string indicating the direction in which the selection is considered to
|
194
|
-
* have been performed.
|
195
|
-
*/
|
196
|
-
setSelectionRange(e, t, a = "none") {
|
197
|
-
this.inputElement.setSelectionRange(
|
198
|
-
e,
|
199
|
-
t,
|
200
|
-
a
|
201
|
-
);
|
202
|
-
}
|
203
|
-
/**
|
204
|
-
* Selects all the text.
|
205
|
-
*/
|
206
|
-
select() {
|
207
|
-
this.inputElement.select();
|
208
|
-
}
|
209
|
-
handleInput(e) {
|
210
|
-
if (this.allowedKeys && this.inputElement.value && !new RegExp(`^[${this.allowedKeys}]*$`, "u").test(this.inputElement.value)) {
|
211
|
-
const t = this.inputElement.selectionStart - 1;
|
212
|
-
this.inputElement.value = this.value.toString(), this.inputElement.setSelectionRange(t, t);
|
213
|
-
return;
|
214
|
-
}
|
215
|
-
this.value = this.inputElement.value;
|
216
|
-
}
|
217
|
-
handleChange() {
|
218
|
-
this.dispatchEvent(
|
219
|
-
new Event("change", {
|
220
|
-
bubbles: !0,
|
221
|
-
composed: !0
|
222
|
-
})
|
223
|
-
);
|
224
|
-
}
|
225
|
-
onFocus() {
|
226
|
-
this.focused = !this.readonly && !0;
|
227
|
-
}
|
228
|
-
onBlur(e) {
|
229
|
-
this.focused = !this.readonly && !1;
|
230
|
-
}
|
231
|
-
handleInputElementPointerdown() {
|
232
|
-
}
|
233
|
-
renderStateIcons() {
|
234
|
-
return this.invalid ? s`
|
235
|
-
<div id="invalid" class="icon">${x(q)}</div>
|
236
|
-
` : this.valid ? s`
|
237
|
-
<div id="valid" class="icon">${x(T)}</div>
|
238
|
-
` : u;
|
239
|
-
}
|
240
|
-
get displayValue() {
|
241
|
-
return this.value.toString();
|
242
|
-
}
|
243
|
-
// prettier-ignore
|
244
|
-
get renderMultiline() {
|
245
|
-
return s`
|
246
|
-
${this.multiline && this.grows && this.rows === -1 ? s`
|
247
|
-
<div id="sizer" class="input" aria-hidden="true">${this.value}​
|
248
|
-
</div>
|
249
|
-
` : u}
|
250
|
-
<!-- @ts-ignore -->
|
251
|
-
<textarea
|
252
|
-
name=${n(this.name || void 0)}
|
253
|
-
aria-describedby=${this.helpTextId}
|
254
|
-
aria-label=${this.label || this.appliedLabel || this.placeholder}
|
255
|
-
aria-invalid=${n(this.invalid || void 0)}
|
256
|
-
class="input"
|
257
|
-
maxlength=${n(this.maxlength > -1 ? this.maxlength : void 0)}
|
258
|
-
minlength=${n(this.minlength > -1 ? this.minlength : void 0)}
|
259
|
-
title=${this.invalid ? "" : u}
|
260
|
-
pattern=${n(this.pattern)}
|
261
|
-
placeholder=${this.placeholder}
|
262
|
-
.value=${this.displayValue}
|
263
|
-
@change=${this.handleChange}
|
264
|
-
@input=${this.handleInput}
|
265
|
-
@focus=${this.onFocus}
|
266
|
-
@blur=${this.onBlur}
|
267
|
-
?disabled=${this.disabled}
|
268
|
-
?required=${this.required}
|
269
|
-
?readonly=${this.readonly}
|
270
|
-
rows=${n(this.rows > -1 ? this.rows : void 0)}
|
271
|
-
autocomplete=${n(this.autocomplete)}
|
272
|
-
></textarea>
|
273
|
-
`;
|
274
|
-
}
|
275
|
-
get renderInput() {
|
276
|
-
return s`
|
277
|
-
<!-- @ts-ignore -->
|
278
|
-
<input
|
279
|
-
name=${n(this.name || void 0)}
|
280
|
-
type=${this.type}
|
281
|
-
aria-describedby=${this.helpTextId}
|
282
|
-
aria-label=${this.label || this.appliedLabel || this.placeholder}
|
283
|
-
aria-invalid=${n(this.invalid || void 0)}
|
284
|
-
class="input"
|
285
|
-
title=${this.invalid ? "" : u}
|
286
|
-
maxlength=${n(this.maxlength > -1 ? this.maxlength : void 0)}
|
287
|
-
minlength=${n(this.minlength > -1 ? this.minlength : void 0)}
|
288
|
-
pattern=${n(this.pattern)}
|
289
|
-
placeholder=${this.placeholder}
|
290
|
-
.value=${_(this.displayValue)}
|
291
|
-
@change=${this.handleChange}
|
292
|
-
@input=${this.handleInput}
|
293
|
-
@pointerdown=${this.handleInputElementPointerdown}
|
294
|
-
@focus=${this.onFocus}
|
295
|
-
@blur=${this.onBlur}
|
296
|
-
?disabled=${this.disabled}
|
297
|
-
?required=${this.required}
|
298
|
-
?readonly=${this.readonly}
|
299
|
-
autocomplete=${n(this.autocomplete)}
|
300
|
-
/>
|
301
|
-
`;
|
302
|
-
}
|
303
|
-
renderField() {
|
304
|
-
return s`
|
305
|
-
${this.renderStateIcons()}
|
306
|
-
${this.multiline ? this.renderMultiline : this.renderInput}
|
307
|
-
`;
|
308
|
-
}
|
309
|
-
render() {
|
310
|
-
return s`
|
311
|
-
<div id="text-field">${this.renderField()}</div>
|
312
|
-
${this.renderHelpText(this.invalid)}
|
313
|
-
`;
|
314
|
-
}
|
315
|
-
update(e) {
|
316
|
-
(e.has("value") || e.has("required") && this.required) && this.updateComplete.then(() => {
|
317
|
-
this.checkValidity();
|
318
|
-
}), super.update(e);
|
319
|
-
}
|
320
|
-
checkValidity() {
|
321
|
-
let e = this.inputElement.checkValidity();
|
322
|
-
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;
|
323
|
-
}
|
324
|
-
}
|
325
|
-
i([
|
326
|
-
m()
|
327
|
-
], o.prototype, "appliedLabel", 2);
|
328
|
-
i([
|
329
|
-
r({ attribute: "allowed-keys" })
|
330
|
-
], o.prototype, "allowedKeys", 2);
|
331
|
-
i([
|
332
|
-
r({ type: Boolean, reflect: !0 })
|
333
|
-
], o.prototype, "focused", 2);
|
334
|
-
i([
|
335
|
-
$(".input:not(#sizer)")
|
336
|
-
], o.prototype, "inputElement", 2);
|
337
|
-
i([
|
338
|
-
r({ type: Boolean, reflect: !0 })
|
339
|
-
], o.prototype, "invalid", 2);
|
340
|
-
i([
|
341
|
-
r()
|
342
|
-
], o.prototype, "label", 2);
|
343
|
-
i([
|
344
|
-
r({ type: String, reflect: !0 })
|
345
|
-
], o.prototype, "name", 2);
|
346
|
-
i([
|
347
|
-
r()
|
348
|
-
], o.prototype, "placeholder", 2);
|
349
|
-
i([
|
350
|
-
m()
|
351
|
-
], o.prototype, "type", 1);
|
352
|
-
i([
|
353
|
-
r({ attribute: "type", reflect: !0 })
|
354
|
-
], o.prototype, "_type", 2);
|
355
|
-
i([
|
356
|
-
r()
|
357
|
-
], o.prototype, "pattern", 2);
|
358
|
-
i([
|
359
|
-
r({ type: Boolean, reflect: !0 })
|
360
|
-
], o.prototype, "grows", 2);
|
361
|
-
i([
|
362
|
-
r({ type: Number })
|
363
|
-
], o.prototype, "maxlength", 2);
|
364
|
-
i([
|
365
|
-
r({ type: Number })
|
366
|
-
], o.prototype, "minlength", 2);
|
367
|
-
i([
|
368
|
-
r({ type: Boolean, reflect: !0 })
|
369
|
-
], o.prototype, "multiline", 2);
|
370
|
-
i([
|
371
|
-
r({ type: Boolean, reflect: !0 })
|
372
|
-
], o.prototype, "readonly", 2);
|
373
|
-
i([
|
374
|
-
r({ type: Number })
|
375
|
-
], o.prototype, "rows", 2);
|
376
|
-
i([
|
377
|
-
r({ type: Boolean, reflect: !0 })
|
378
|
-
], o.prototype, "valid", 2);
|
379
|
-
i([
|
380
|
-
r({ type: String })
|
381
|
-
], o.prototype, "value", 1);
|
382
|
-
i([
|
383
|
-
r({ type: Boolean, reflect: !0 })
|
384
|
-
], o.prototype, "quiet", 2);
|
385
|
-
i([
|
386
|
-
r({ type: Boolean, reflect: !0 })
|
387
|
-
], o.prototype, "required", 2);
|
388
|
-
i([
|
389
|
-
r({ type: String, reflect: !0 })
|
390
|
-
], o.prototype, "autocomplete", 2);
|
391
|
-
class A extends o {
|
392
|
-
constructor() {
|
393
|
-
super(...arguments), this._value = "";
|
394
|
-
}
|
395
|
-
set value(e) {
|
396
|
-
if (e === this.value)
|
397
|
-
return;
|
398
|
-
const t = this._value;
|
399
|
-
this._value = e, this.requestUpdate("value", t);
|
400
|
-
}
|
401
|
-
get value() {
|
402
|
-
return this._value;
|
403
|
-
}
|
404
|
-
}
|
405
|
-
i([
|
406
|
-
r({ type: String })
|
407
|
-
], A.prototype, "value", 1);
|
408
|
-
export {
|
409
|
-
A as I,
|
410
|
-
o as i,
|
411
|
-
S as u
|
412
|
-
};
|