@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.
Files changed (123) hide show
  1. package/components/{button-base-B7v4eeRh-BKKUK3x0.cjs → button-base-DSHx7XO8-Cixrr9aG.cjs} +3 -3
  2. package/components/{button-base-B7v4eeRh-D3-GH03o.js → button-base-DSHx7XO8-VB_BBSqq.js} +27 -27
  3. package/components/display-settings/index.cjs +1 -1
  4. package/components/display-settings/index.js +7 -7
  5. package/components/display-settings-binning/index.cjs +1 -1
  6. package/components/display-settings-binning/index.js +5 -5
  7. package/components/display-settings-datetime/index.cjs +1 -1
  8. package/components/display-settings-datetime/index.js +8 -8
  9. package/components/display-settings-grand-totals/index.cjs +1 -1
  10. package/components/display-settings-grand-totals/index.js +4 -4
  11. package/components/display-settings-numeric/index.cjs +1 -1
  12. package/components/display-settings-numeric/index.js +9 -9
  13. package/components/display-settings-period-over-period/index.cjs +2 -2
  14. package/components/display-settings-period-over-period/index.js +7 -7
  15. package/components/draggable-data-item-level/index.cjs +4 -4
  16. package/components/draggable-data-item-level/index.js +4 -4
  17. package/components/droppable-slot/droppable-slot.d.ts +2 -2
  18. package/components/droppable-slot/index.cjs +1 -1
  19. package/components/droppable-slot/index.js +2 -2
  20. package/components/edit-item/edit-item.d.ts +1 -0
  21. package/components/edit-item/index.cjs +5 -4
  22. package/components/edit-item/index.js +26 -12
  23. package/components/edit-option-action-button-group/index.cjs +1 -1
  24. package/components/edit-option-action-button-group/index.js +5 -5
  25. package/components/{edit-option-base-qePiIQWd.js → edit-option-base-CPLI5-oZ.js} +2 -2
  26. package/components/{edit-option-base-Boz7TNRZ.cjs → edit-option-base-ChZvMFLr.cjs} +1 -1
  27. package/components/edit-option-color-picker/index.cjs +10 -10
  28. package/components/edit-option-color-picker/index.js +16 -16
  29. package/components/edit-option-multi-language-field/index.cjs +1 -1
  30. package/components/edit-option-multi-language-field/index.js +2 -2
  31. package/components/edit-option-number-field/index.cjs +1 -1
  32. package/components/edit-option-number-field/index.js +2 -2
  33. package/components/edit-option-picker/index.cjs +1 -1
  34. package/components/edit-option-picker/index.js +3 -3
  35. package/components/edit-option-position-picker/index.cjs +1 -1
  36. package/components/edit-option-position-picker/index.js +2 -2
  37. package/components/edit-option-positions-number-field/index.cjs +1 -1
  38. package/components/edit-option-positions-number-field/index.js +3 -3
  39. package/components/edit-option-radio-button-group/index.cjs +1 -1
  40. package/components/edit-option-radio-button-group/index.js +3 -3
  41. package/components/edit-option-slider/index.cjs +2 -2
  42. package/components/edit-option-slider/index.js +2 -2
  43. package/components/edit-option-switch/index.cjs +2 -2
  44. package/components/edit-option-switch/index.js +3 -3
  45. package/components/edit-option-text-field/index.cjs +1 -1
  46. package/components/edit-option-text-field/index.js +2 -2
  47. package/components/filter-data-item-picker/filter-data-item-picker.d.ts +80 -0
  48. package/components/filter-data-item-picker/index.d.ts +7 -0
  49. package/components/filter-expression-picker/filter-expression-picker.d.ts +60 -0
  50. package/components/filter-expression-picker/index.d.ts +7 -0
  51. package/components/filter-group/filter-group.d.ts +39 -0
  52. package/components/filter-group/index.d.ts +7 -0
  53. package/components/filter-item/filter-item.d.ts +64 -0
  54. package/components/filter-item/index.d.ts +7 -0
  55. package/components/filter-item/stories/dataset-data-items.const.d.ts +15 -0
  56. package/components/filter-parameter-picker/filter-parameter-picker.d.ts +26 -0
  57. package/components/filter-parameter-picker/index.d.ts +7 -0
  58. package/components/filter-value-picker/filter-value-picker.d.ts +65 -0
  59. package/components/filter-value-picker/index.d.ts +7 -0
  60. package/components/filter-value-picker-datetime/filter-value-picker-datetime.d.ts +43 -0
  61. package/components/filter-value-picker-datetime/index.d.ts +7 -0
  62. package/components/filter-value-picker-hierarchy/filter-value-picker-hierarchy.d.ts +71 -0
  63. package/components/filter-value-picker-hierarchy/index.d.ts +7 -0
  64. package/components/filter-value-picker-numeric/filter-value-picker-numeric.d.ts +72 -0
  65. package/components/filter-value-picker-numeric/index.d.ts +7 -0
  66. package/components/index-B6Os866t.cjs +127 -0
  67. package/components/index-BgR4fBCA.cjs +42 -0
  68. package/components/{index-CdUTqQ3L.cjs → index-BnOOdgQZ.cjs} +3 -3
  69. package/components/{index-BH9W0QLt-DBxyzKWK.js → index-Brne8JKA.js} +84 -51
  70. package/components/{index-CXIT0cYY.js → index-Bsn3jtgt.js} +2 -2
  71. package/components/index-CAG4u31N.cjs +117 -0
  72. package/components/{index-DUO13KGl.cjs → index-CDUZyVS8.cjs} +1 -1
  73. package/components/{index-BYfDERr7.js → index-CJtXD_RI.js} +1 -1
  74. package/components/{index-Dc9c_dq-.cjs → index-CMvCwUvn.cjs} +1 -1
  75. package/components/{index-ymMEPngt.js → index-CPdcj1Bo.js} +22 -22
  76. package/components/{index-ByjLd3bT.cjs → index-CT2P9cSY.cjs} +2 -2
  77. package/components/{index-BUSWsm5N.js → index-CTxrSfyd.js} +4 -4
  78. package/components/{index-B3ve6cAj.js → index-CX0ynTHR.js} +135 -101
  79. package/components/{index-i8GaIN7i.cjs → index-CY1zprJk.cjs} +1 -1
  80. package/components/{index-CfEn3fIT.js → index-CdZDTZcN.js} +1 -1
  81. package/components/{index-aYcu00GB.js → index-DDm8p09D.js} +1 -1
  82. package/components/{index-h9T5DPIm.cjs → index-DFt-aKCN.cjs} +2 -2
  83. package/components/{index-C8IL2IZ6.js → index-DOnHTKUs.js} +2 -2
  84. package/components/{index-86cIx1Ql.cjs → index-DULisWB3.cjs} +2 -2
  85. package/components/index-DW3LXQ5Z.js +779 -0
  86. package/components/{index-CdCtJpK9.js → index-Dk2zOgvd.js} +4 -4
  87. package/components/index-DoZEESMk.cjs +217 -0
  88. package/components/{index-BVX_ozT9.js → index-Dpt_Qqgy.js} +1 -1
  89. package/components/{index-Bt5nP_6w.cjs → index-Dv1aV79F.cjs} +1 -1
  90. package/components/{index-BJVxTeoi.cjs → index-E6HaIK_Z.cjs} +2 -2
  91. package/components/{index-DEVOZNSc.cjs → index-NFKXlEm1.cjs} +1 -1
  92. package/components/{index-Bee1uunR.js → index-OuAMpMdS.js} +1 -1
  93. package/components/{index-DVAsMiOm.js → index-nP-SGD7o.js} +3 -3
  94. package/components/index.cjs +1 -1
  95. package/components/index.js +457 -54
  96. package/components/{language-resolution-8yZa5r_P-FqQChUDW.cjs → language-resolution-8yZa5r_P-CYK1IIrs.cjs} +2 -2
  97. package/components/{language-resolution-8yZa5r_P-Bn0bYosv.js → language-resolution-8yZa5r_P-Chn3SFme.js} +7 -7
  98. package/components/{luzmo-icons-BE2T8vWu.js → luzmo-icons-DxZo8BWX.js} +15 -15
  99. package/components/slot-menu/index.cjs +1 -1
  100. package/components/slot-menu/index.js +2 -2
  101. package/components/slot-menu-list/index.js +1 -1
  102. package/components/text-field-BTnBJoP9-Cwm3XQ88.cjs +147 -0
  103. package/components/text-field-BTnBJoP9-jo797Hka.js +430 -0
  104. package/components/utils.cjs +1 -1
  105. package/components/utils.js +472 -54
  106. package/custom-elements.json +4 -4
  107. package/index.d.ts +1 -0
  108. package/item-definitions/marker-map/marker-map-options.config.d.ts +1 -1
  109. package/package.json +1 -1
  110. package/utils/data-broker/index.d.ts +173 -0
  111. package/utils/data-item-types/calculate-data-item-icon.d.ts +3 -0
  112. package/utils/expressions/index.d.ts +13 -0
  113. package/utils/index.d.ts +1 -0
  114. package/utils/themes/index.d.ts +507 -0
  115. package/components/index-BH9W0QLt-Cy2sUVJ_.cjs +0 -95
  116. package/components/index-D5LI0odG.js +0 -44
  117. package/components/index-DM_2d78G.js +0 -744
  118. package/components/index-DrLPC6eG.cjs +0 -185
  119. package/components/index-iYpAy-Kg.cjs +0 -95
  120. package/components/index-w3j1USKK.cjs +0 -36
  121. package/components/index-zuArOtOt.cjs +0 -42
  122. package/components/text-field-CvKSS59x-Dn0_1HO7.js +0 -412
  123. 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}&#8203;
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
- };