@luzmo/lucero 1.0.1-alpha.3 → 1.0.1-alpha.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/accordion/index.cjs +6 -6
- package/components/accordion/index.js +13 -12
- package/components/action-bar/index.cjs +4 -4
- package/components/action-bar/index.js +11 -9
- package/components/action-button/index.cjs +3 -3
- package/components/action-button/index.js +6 -5
- package/components/action-group/index.cjs +1 -1
- package/components/action-group/index.js +1 -1
- package/components/{action-group-DBImibFn.js → action-group-Bwt9w8Vh.js} +10 -9
- package/components/action-group-D917z7XF.cjs +20 -0
- package/components/action-menu/index.cjs +9 -9
- package/components/action-menu/index.js +9 -9
- package/components/avatar/index.cjs +3 -3
- package/components/avatar/index.js +6 -6
- package/components/base-5nDSSNeT.cjs +18 -0
- package/components/base-CdYjmV_8.js +96 -0
- package/components/button/button-base.d.ts +16 -0
- package/components/button/button.d.ts +38 -2
- package/components/button/index.cjs +2 -2
- package/components/button/index.js +34 -29
- package/components/{button-base-DbkDzb71.js → button-base-B5uul3tZ.js} +54 -39
- package/components/button-base-C7or8-FB.cjs +25 -0
- package/components/button-group/index.cjs +1 -1
- package/components/button-group/index.js +10 -8
- package/components/calendar/index.cjs +96 -1
- package/components/calendar/index.js +538 -6
- package/components/checkbox/index.cjs +4 -4
- package/components/checkbox/index.js +6 -4
- package/components/{checkbox-mixin-Do7EgtpQ.js → checkbox-mixin-DUbGDm7f.js} +9 -9
- package/components/{checkbox-mixin-BDN0dBtS.cjs → checkbox-mixin-DhN8CIXY.cjs} +3 -3
- package/components/{clear-button-DoeRUWQ3.js → clear-button-BFtJVPzm.js} +14 -13
- package/components/clear-button-_a8GjtJC.cjs +18 -0
- package/components/{close-button-BWXdHSx3.js → close-button-D9qjjy2w.js} +13 -12
- package/components/close-button-TZ08VFmi.cjs +18 -0
- package/components/color-area/index.cjs +5 -5
- package/components/color-area/index.js +11 -10
- package/components/color-controller-7sNUf7SP.js +386 -0
- package/components/color-controller-ChN-A9Ft.cjs +18 -0
- package/components/color-field/color-field.d.ts +8 -0
- package/components/color-field/index.cjs +4 -4
- package/components/color-field/index.js +37 -24
- package/components/color-handle/index.cjs +2 -2
- package/components/color-handle/index.js +7 -5
- package/components/color-loupe/index.cjs +1 -1
- package/components/color-loupe/index.js +1 -1
- package/components/color-loupe-CIEFp7ln.cjs +56 -0
- package/components/{color-loupe-CmMsXbjT.js → color-loupe-CLPX6xVb.js} +6 -4
- package/components/color-menu/index.cjs +8 -8
- package/components/color-menu/index.js +45 -45
- package/components/color-palette/color-palette.d.ts +38 -3
- package/components/color-palette/index.cjs +1 -1
- package/components/color-palette/index.js +53 -39
- package/components/color-palette-group/color-palette-group.d.ts +79 -0
- package/components/color-palette-group/index.cjs +28 -0
- package/components/color-palette-group/index.d.ts +7 -0
- package/components/color-palette-group/index.js +206 -0
- package/components/color-picker/color-picker.d.ts +31 -2
- package/components/color-picker/index.cjs +6 -5
- package/components/color-picker/index.js +15 -11
- package/components/color-slider/index.cjs +40 -1
- package/components/color-slider/index.js +452 -6
- package/components/date-time-picker/index.cjs +16 -16
- package/components/date-time-picker/index.js +104 -105
- package/components/{dependency-manger-CEXvGQUV.js → dependency-manger-CO-VPlqq.js} +4 -4
- package/components/{dependency-manger-C5HCkMMB.cjs → dependency-manger-uthev62E.cjs} +1 -1
- package/components/divider/index.cjs +1 -1
- package/components/divider/index.js +10 -8
- package/components/field-group/index.cjs +1 -1
- package/components/field-group/index.js +1 -1
- package/components/field-group-BYHNJmv0.cjs +23 -0
- package/components/{field-group-DXfBWrkO.js → field-group-CHmw159R.js} +7 -5
- package/components/field-label/index.cjs +1 -1
- package/components/field-label/index.js +1 -1
- package/components/{field-label-CZ2zzChK.js → field-label-Cy3xMWZ-.js} +9 -8
- package/components/field-label-DZoeqJJX.cjs +25 -0
- package/components/{focus-visible-DBlJGoEW.js → focus-visible-BvScGDCE.js} +20 -20
- package/components/focus-visible-D4BXb5RB.cjs +18 -0
- package/components/{focusable-BxtpnzWp.js → focusable-BjvsvVam.js} +3 -2
- package/components/focusable-CbVKgGfS.cjs +18 -0
- package/components/icon/index.cjs +1 -1
- package/components/icon/index.js +22 -20
- package/components/index.cjs +1 -1
- package/components/index.js +139 -137
- package/components/infield-button/index.cjs +2 -2
- package/components/infield-button/index.js +4 -3
- package/components/label/index.cjs +1 -1
- package/components/label/index.js +6 -4
- package/components/{language-resolution-8yZa5r_P.js → language-resolution-B-wjV5bb.js} +9 -8
- package/components/{directive-C7oCP5Bh.cjs → language-resolution-EUER43cg.cjs} +1 -5
- package/components/like-anchor-B2EqJPdw.cjs +32 -0
- package/components/{like-anchor-Bvn_vLQ8.js → like-anchor-CgqCU210.js} +23 -22
- package/components/{manage-help-text-DhgARkZX.cjs → manage-help-text-Bat9yGvF.cjs} +3 -3
- package/components/{manage-help-text-syYnjKGL.js → manage-help-text-C9sCHK3R.js} +8 -8
- package/components/menu/index.cjs +38 -13
- package/components/menu/index.js +137 -104
- package/components/menu/menu-item.d.ts +8 -1
- package/components/multi-language-field/index.cjs +2 -2
- package/components/multi-language-field/index.js +8 -6
- package/components/number-field/index.cjs +6 -6
- package/components/number-field/index.js +33 -34
- package/components/observe-slot-presence-CNltc0C0.cjs +18 -0
- package/components/{observe-slot-presence-CmVi0zTc.js → observe-slot-presence-DFi6GE3H.js} +1 -1
- package/components/observe-slot-text-CBMHpuIK.cjs +18 -0
- package/components/{observe-slot-text-BPfIQQtz.js → observe-slot-text-DorVpCL4.js} +14 -15
- package/components/options/index.cjs +26 -58
- package/components/options/index.js +205 -849
- package/components/overlay/index.cjs +6 -6
- package/components/overlay/index.js +30 -31
- package/components/overlay-DpWon1Rp.js +1736 -0
- package/components/overlay-nUwFClQq.cjs +47 -0
- package/components/{pending-state-CaH1si5b.cjs → pending-state-DQctFHI8.cjs} +2 -2
- package/components/{pending-state-DTX7ggyF.js → pending-state-Dx1u3EXA.js} +2 -2
- package/components/picker/index.cjs +1 -1
- package/components/picker/index.js +2 -2
- package/components/{picker-BmoXv1jt.js → picker-Cm6_didQ.js} +44 -44
- package/components/picker-DxYgh4LR.cjs +123 -0
- package/components/picker-button/index.cjs +4 -4
- package/components/picker-button/index.js +7 -6
- package/components/{platform-BiXhwqk3.cjs → platform-BJnOJJag.cjs} +1 -1
- package/components/{platform-BM-uMWpX.js → platform-CqwNrovd.js} +12 -12
- package/components/popover/index.cjs +1 -1
- package/components/popover/index.js +1 -1
- package/components/popover-lcZnODPK.cjs +30 -0
- package/components/{popover-DjX0aAnY.js → popover-ucIgjbQs.js} +8 -7
- package/components/progress-circle/index.cjs +1 -1
- package/components/progress-circle/index.js +1 -1
- package/components/{progress-circle-DXH9z8-6.js → progress-circle-D5J0ZwY0.js} +8 -7
- package/components/progress-circle-DgMbqrzG.cjs +33 -0
- package/components/radio/index.cjs +2 -2
- package/components/radio/index.js +11 -10
- package/components/search/index.cjs +6 -6
- package/components/search/index.js +5 -5
- package/components/select/index.cjs +43 -43
- package/components/select/index.js +106 -91
- package/components/select/select.d.ts +1 -1
- package/components/{base-BjTwmyRF.cjs → sized-mixin-DcvJLFeo.cjs} +1 -5
- package/components/{sized-mixin-D4ACoVUr.js → sized-mixin-cJbo3PKR.js} +5 -5
- package/components/slider/index.cjs +1 -1
- package/components/slider/index.js +48 -1101
- package/components/{strategies-9indNIEb.js → strategies-Bk97oVn1.js} +15 -50
- package/components/strategies-CNgBb6dM.cjs +18 -0
- package/components/{streaming-listener-CP-JE6Fa.js → streaming-listener-BlWm-XZU.js} +5 -6
- package/components/streaming-listener-D9Wc7skA.cjs +18 -0
- package/components/swatch/index.cjs +7 -7
- package/components/swatch/index.js +17 -16
- package/components/switch/index.cjs +2 -2
- package/components/switch/index.js +5 -4
- package/components/tabs/index.cjs +16 -24
- package/components/tabs/index.js +93 -161
- package/components/tags/index.cjs +4 -4
- package/components/tags/index.js +14 -13
- package/components/text-field/index.cjs +3 -3
- package/components/text-field/index.js +12 -10
- package/components/text-field/text-field.d.ts +1 -0
- package/components/{text-field-BIADXoLC.js → text-field-BTEpwGFu.js} +73 -99
- package/components/text-field-JMrsh-zo.cjs +81 -0
- package/components/{text-field.module-ColtFhf_.js → text-field.module-C2KVUJcX.js} +1 -1
- package/components/{text-field.module-p_VF2tC_.cjs → text-field.module-DXhFA9G-.cjs} +1 -1
- package/components/toast/index.cjs +11 -11
- package/components/toast/index.js +10 -8
- package/components/tooltip/index.cjs +4 -4
- package/components/tooltip/index.js +60 -36
- package/components/tooltip/tooltip.d.ts +12 -1
- package/components/unit-input/index.cjs +6 -6
- package/components/unit-input/index.js +10 -9
- package/components/utils.cjs +1 -1
- package/components/utils.js +6 -6
- package/custom-elements.json +1 -1
- package/index.d.ts +1 -0
- package/package.json +67 -1
- package/components/NumberFormatter-DewVDY5w.cjs +0 -18
- package/components/NumberFormatter-DgOUVrge.js +0 -136
- package/components/NumberParser-Dik4a0h-.cjs +0 -18
- package/components/NumberParser-ci9J5EKv.js +0 -173
- package/components/action-group-DJGMcRHb.cjs +0 -20
- package/components/async-directive-BX1T1e1_.cjs +0 -22
- package/components/async-directive-BfcqVjDp.js +0 -82
- package/components/base-CBCg3yyw.cjs +0 -40
- package/components/base-D76d76ww.js +0 -26
- package/components/base-WsynuqaS.js +0 -677
- package/components/button-base-XgPLmwP-.cjs +0 -25
- package/components/class-map-Di1D_rCm.cjs +0 -22
- package/components/class-map-NbVXqBU0.js +0 -51
- package/components/clear-button-Qi1pMA5S.cjs +0 -18
- package/components/close-button-BFMBEw3q.cjs +0 -18
- package/components/color-controller-DTp1juRz.js +0 -3198
- package/components/color-controller-_ZwyhvaU.cjs +0 -18
- package/components/color-loupe-CaA_Lfkk.cjs +0 -56
- package/components/directive-helpers-Cm6gitnu.js +0 -62
- package/components/directive-helpers-DyIRTWwA.cjs +0 -22
- package/components/directive-oAbCiebi.js +0 -44
- package/components/field-group-DkGst3r5.cjs +0 -23
- package/components/field-label-mO1AkUgR.cjs +0 -25
- package/components/flow-D-0MTYCm.js +0 -527
- package/components/flow-DM3dNAKs.cjs +0 -30
- package/components/focus-visible-B0P9aY_G.cjs +0 -18
- package/components/focusable-EbipgXRh.cjs +0 -18
- package/components/if-defined-C9YGdo33.cjs +0 -22
- package/components/if-defined-DOaE2coe.js +0 -27
- package/components/index-A-yOTB_d.js +0 -1490
- package/components/index-BLWuwZXx.cjs +0 -113
- package/components/index-BwxgAdzi.cjs +0 -57
- package/components/index-HjQa8tew.js +0 -1174
- package/components/language-resolution-DJzmyzZq.cjs +0 -18
- package/components/like-anchor-sod1C1fR.cjs +0 -32
- package/components/luzmo-icons-DbwDQtuO.js +0 -229
- package/components/luzmo-icons-DletXGWU.cjs +0 -29
- package/components/mutation-controller-DH7YOCyj.js +0 -52
- package/components/mutation-controller-DkOMCW-c.cjs +0 -22
- package/components/observe-slot-presence-bc9chhsi.cjs +0 -18
- package/components/observe-slot-text-Ceb7SvYT.cjs +0 -18
- package/components/overlay-Cig9r6uU.js +0 -2747
- package/components/overlay-KSKMzzkh.cjs +0 -47
- package/components/picker-DWsBWdPN.cjs +0 -123
- package/components/popover-KFfO0IYL.cjs +0 -30
- package/components/progress-circle-BvRJNuNo.cjs +0 -33
- package/components/query-BL-TJj7K.cjs +0 -22
- package/components/query-D_KR_GUc.js +0 -51
- package/components/query-assigned-elements-DjfhL1cl.js +0 -36
- package/components/query-assigned-elements-DsKsfk7G.cjs +0 -22
- package/components/query-assigned-nodes-BcKWmGzy.cjs +0 -22
- package/components/query-assigned-nodes-C76XVPWY.js +0 -36
- package/components/sized-mixin-CPxE5C96.cjs +0 -18
- package/components/state-D8JEtYqe.cjs +0 -22
- package/components/state-Deh-vKYE.js +0 -29
- package/components/strategies-BACP6MhR.cjs +0 -18
- package/components/streaming-listener-B00MvALi.cjs +0 -18
- package/components/style-map-CeilmSgs.cjs +0 -22
- package/components/style-map-IgqIKvlE.js +0 -53
- package/components/text-field-D5d_Gt0t.cjs +0 -85
- package/components/when-CDK1Tt5Y.js +0 -28
- package/components/when-CDZyJPvd.cjs +0 -22
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/*! * Lucero - The design system for Luzmo.
|
|
2
|
+
*
|
|
3
|
+
* Copyright © 2025 Luzmo
|
|
4
|
+
* All rights reserved.
|
|
5
|
+
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
|
6
|
+
* This license allows users with a current active Luzmo account to use Lucero.
|
|
7
|
+
* This license terminates automatically if a user no longer has an active Luzmo account.
|
|
8
|
+
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
|
9
|
+
*
|
|
10
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
11
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
13
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
14
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
15
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
|
+
* SOFTWARE.
|
|
17
|
+
* */
|
|
18
|
+
"use strict";const m=require("lit"),i=require("lit/decorators.js"),g=require("lit/directives/if-defined.js"),d=require("./base-5nDSSNeT.cjs"),f=require("./sized-mixin-DcvJLFeo.cjs"),p=(a,r)=>{if(a)return null;const t=r.assignedNodes().reduce((o,e)=>e.textContent?o+e.textContent:o,"");return t?t.trim():null},u="@media (forced-colors: active){:host{--highcontrast-progress-circle-fill-border-color: Highlight;--highcontrast-progress-circle-fill-border-color-over-background: Highlight}.track{--progress-circle-track-border-style: double}}:host{position:var(--luzmo-progress-circle-position, relative);direction:ltr;display:inline-block;position:relative;transform:translateZ(0)}:host,.track{inline-size:var(--luzmo-progress-circle-size, var(--progress-circle-size, 32px));block-size:var(--luzmo-progress-circle-size, var(--progress-circle-size, 32px))}.track{box-sizing:border-box;border-style:var(--highcontrast-progress-circle-track-border-style, var(--luzmo-progress-circle-track-border-style, var(--progress-circle-track-border-style, solid)));border-width:var(--luzmo-progress-circle-thickness, var(--progress-circle-thickness, 2px));border-radius:var(--luzmo-progress-circle-size, var(--progress-circle-size, 32px));border-color:var(--luzmo-progress-circle-track-border-color, var(--luzmo-border-color))}.fills{inline-size:100%;block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.fill{box-sizing:border-box;inline-size:var(--luzmo-progress-circle-size, var(--progress-circle-size, 32px));block-size:var(--luzmo-progress-circle-size, var(--progress-circle-size, 32px));border-style:solid;border-width:var(--luzmo-progress-circle-thickness, var(--progress-circle-thickness, 3px));border-radius:var(--luzmo-progress-circle-size, var(--progress-circle-size, 32px));border-color:var(--highcontrast-progress-circle-fill-border-color, var(--luzmo-progress-circle-fill-border-color, var(--luzmo-primary)))}:host([static-color=black]) .track{border-color:var(--luzmo-progress-circle-track-border-color-over-background, rgba(0, 0, 0, .25))}:host([static-color=black]) .fill{border-color:var(--highcontrast-progress-circle-fill-border-color-over-background, var(--luzmo-progress-circle-fill-border-color-over-background, rgb(0, 0, 0)))}:host([static-color=white]) .track{border-color:var(--luzmo-progress-circle-track-border-color-over-background, rgba(255, 255, 255, .15))}:host([static-color=white]) .fill{border-color:var(--highcontrast-progress-circle-fill-border-color-over-background, var(--luzmo-progress-circle-fill-border-color-over-background, rgb(255, 255, 255)))}.fill-mask1,.fill-mask2{inline-size:50%;block-size:100%;transform-origin:100%;position:absolute;overflow:hidden;transform:rotate(180deg)}.fill-sub-mask1,.fill-sub-mask2{inline-size:100%;block-size:100%;transform-origin:100%;overflow:hidden;transform:rotate(-180deg)}.fill-mask2{transform:rotate(0)}:host([indeterminate]) .fills{will-change:transform;transform-origin:center;animation:1s cubic-bezier(.25,.78,.48,.89) infinite luzmo-fills-rotate;transform:translateZ(0)}:host([indeterminate]) .fill-sub-mask1{will-change:transform;animation:1s linear infinite luzmo-fill-mask-1;transform:translateZ(0)}:host([indeterminate]) .fill-sub-mask2{will-change:transform;animation:1s linear infinite luzmo-fill-mask-2;transform:translateZ(0)}.fill-submask-2{animation:1s linear infinite luzmo-fill-mask-2}@keyframes luzmo-fill-mask-1{0%{transform:rotate(90deg)}1.69%{transform:rotate(72.3deg)}3.39%{transform:rotate(55.5deg)}5.08%{transform:rotate(40.3deg)}6.78%{transform:rotate(25deg)}8.47%{transform:rotate(10.6deg)}10.17%{transform:rotate(0)}11.86%{transform:rotate(0)}13.56%{transform:rotate(0)}15.25%{transform:rotate(0)}16.95%{transform:rotate(0)}18.64%{transform:rotate(0)}20.34%{transform:rotate(0)}22.03%{transform:rotate(0)}23.73%{transform:rotate(0)}25.42%{transform:rotate(0)}27.12%{transform:rotate(0)}28.81%{transform:rotate(0)}30.51%{transform:rotate(0)}32.2%{transform:rotate(0)}33.9%{transform:rotate(0)}35.59%{transform:rotate(0)}37.29%{transform:rotate(0)}38.98%{transform:rotate(0)}40.68%{transform:rotate(0)}42.37%{transform:rotate(5.3deg)}44.07%{transform:rotate(13.4deg)}45.76%{transform:rotate(20.6deg)}47.46%{transform:rotate(29deg)}49.15%{transform:rotate(36.5deg)}50.85%{transform:rotate(42.6deg)}52.54%{transform:rotate(48.8deg)}54.24%{transform:rotate(54.2deg)}55.93%{transform:rotate(59.4deg)}57.63%{transform:rotate(63.2deg)}59.32%{transform:rotate(67.2deg)}61.02%{transform:rotate(70.8deg)}62.71%{transform:rotate(73.8deg)}64.41%{transform:rotate(76.2deg)}66.1%{transform:rotate(78.7deg)}67.8%{transform:rotate(80.6deg)}69.49%{transform:rotate(82.6deg)}71.19%{transform:rotate(83.7deg)}72.88%{transform:rotate(85deg)}74.58%{transform:rotate(86.3deg)}76.27%{transform:rotate(87deg)}77.97%{transform:rotate(87.7deg)}79.66%{transform:rotate(88.3deg)}81.36%{transform:rotate(88.6deg)}83.05%{transform:rotate(89.2deg)}84.75%{transform:rotate(89.2deg)}86.44%{transform:rotate(89.5deg)}88.14%{transform:rotate(89.9deg)}89.83%{transform:rotate(89.7deg)}91.53%{transform:rotate(90.1deg)}93.22%{transform:rotate(90.2deg)}94.92%{transform:rotate(90.1deg)}96.61%{transform:rotate(90deg)}98.31%{transform:rotate(89.8deg)}to{transform:rotate(90deg)}}@keyframes luzmo-fill-mask-2{0%{transform:rotate(180deg)}1.69%{transform:rotate(180deg)}3.39%{transform:rotate(180deg)}5.08%{transform:rotate(180deg)}6.78%{transform:rotate(180deg)}8.47%{transform:rotate(180deg)}10.17%{transform:rotate(179.2deg)}11.86%{transform:rotate(164deg)}13.56%{transform:rotate(151.8deg)}15.25%{transform:rotate(140.8deg)}16.95%{transform:rotate(130.3deg)}18.64%{transform:rotate(120.4deg)}20.34%{transform:rotate(110.8deg)}22.03%{transform:rotate(101.6deg)}23.73%{transform:rotate(93.5deg)}25.42%{transform:rotate(85.4deg)}27.12%{transform:rotate(78.1deg)}28.81%{transform:rotate(71.2deg)}30.51%{transform:rotate(89.1deg)}32.2%{transform:rotate(105.5deg)}33.9%{transform:rotate(121.3deg)}35.59%{transform:rotate(135.5deg)}37.29%{transform:rotate(148.4deg)}38.98%{transform:rotate(161deg)}40.68%{transform:rotate(173.5deg)}42.37%{transform:rotate(180deg)}44.07%{transform:rotate(180deg)}45.76%{transform:rotate(180deg)}47.46%{transform:rotate(180deg)}49.15%{transform:rotate(180deg)}50.85%{transform:rotate(180deg)}52.54%{transform:rotate(180deg)}54.24%{transform:rotate(180deg)}55.93%{transform:rotate(180deg)}57.63%{transform:rotate(180deg)}59.32%{transform:rotate(180deg)}61.02%{transform:rotate(180deg)}62.71%{transform:rotate(180deg)}64.41%{transform:rotate(180deg)}66.1%{transform:rotate(180deg)}67.8%{transform:rotate(180deg)}69.49%{transform:rotate(180deg)}71.19%{transform:rotate(180deg)}72.88%{transform:rotate(180deg)}74.58%{transform:rotate(180deg)}76.27%{transform:rotate(180deg)}77.97%{transform:rotate(180deg)}79.66%{transform:rotate(180deg)}81.36%{transform:rotate(180deg)}83.05%{transform:rotate(180deg)}84.75%{transform:rotate(180deg)}86.44%{transform:rotate(180deg)}88.14%{transform:rotate(180deg)}89.83%{transform:rotate(180deg)}91.53%{transform:rotate(180deg)}93.22%{transform:rotate(180deg)}94.92%{transform:rotate(180deg)}96.61%{transform:rotate(180deg)}98.31%{transform:rotate(180deg)}to{transform:rotate(180deg)}}@keyframes luzmo-fills-rotate{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}:host([size=s]){--progress-circle-size: 16px;--progress-circle-thickness: 2px}:host([size=l]){--progress-circle-size: 48px;--progress-circle-thickness: 3px}:host([size=xl]){--progress-circle-size: 64px;--progress-circle-thickness: 4px}:host{block-size:var(--luzmo-progress-circle-size, var(--parent-element-progress-circle-size));inline-size:var(--luzmo-progress-circle-size, var(--parent-element-progress-circle-size));--progress-circle-size: inherit;--parent-element-progress-circle-size: inherit;--parent-element-progress-circle-size: var(--progress-circle-size, 32px)}:host([size=s]){--parent-element-progress-circle-size: var(--progress-circle-size, 16px)}:host([size=l]){--parent-element-progress-circle-size: var(--progress-circle-size, 48px)}:host([size=xl]){--parent-element-progress-circle-size: var(--progress-circle-size, 64px)}slot{display:none}.track,.fill{block-size:var(--luzmo-progress-circle-size, var(--parent-element-progress-circle-size));border-radius:var(--luzmo-progress-circle-size, var(--parent-element-progress-circle-size));inline-size:var(--luzmo-progress-circle-size, var(--parent-element-progress-circle-size))}:host([indeterminate]) .fills,:host([indeterminate]) .fill-sub-mask1,:host([indeterminate]) .fill-sub-mask2{animation-duration:var(--luzmo-progress-circle-animation-duration, 1s)}";var b=Object.defineProperty,l=(a,r,t,o)=>{for(var e=void 0,n=a.length-1,c;n>=0;n--)(c=a[n])&&(e=c(r,t,e)||e);return e&&b(r,t,e),e};class s extends f.SizedMixin(d.LuzmoElement,{validSizes:["s","m","l","xl"]}){constructor(){super(...arguments),this.indeterminate=!1,this.label="",this.progress=0}static get styles(){return[m.unsafeCSS(u)]}makeRotation(r){return this.indeterminate?void 0:`transform: rotate(${r}deg);`}render(){const r=[this.makeRotation(-180+3.6*Math.min(this.progress,50)),this.makeRotation(-180+3.6*Math.max(this.progress-50,0))],t=["mask1","mask2"];return m.html`
|
|
19
|
+
<slot @slotchange=${this.handleSlotchange}></slot>
|
|
20
|
+
<div class="track"></div>
|
|
21
|
+
<div class="fills">
|
|
22
|
+
${t.map((o,e)=>m.html`
|
|
23
|
+
<div class="fill-${o}">
|
|
24
|
+
<div
|
|
25
|
+
class="fill-sub-${o}"
|
|
26
|
+
style=${g.ifDefined(r[e])}
|
|
27
|
+
>
|
|
28
|
+
<div class="fill"></div>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
`)}
|
|
32
|
+
</div>
|
|
33
|
+
`}handleSlotchange(){const r=p(this.label,this.slotEl);r&&(this.label=r)}firstUpdated(r){super.firstUpdated(r),this.hasAttribute("role")||this.setAttribute("role","progressbar")}updated(r){super.updated(r),!this.indeterminate&&r.has("progress")?this.setAttribute("aria-valuenow",""+this.progress):this.hasAttribute("aria-valuenow")&&this.removeAttribute("aria-valuenow"),r.has("label")&&(this.label.length>0?this.setAttribute("aria-label",this.label):r.get("label")===this.getAttribute("aria-label")&&this.removeAttribute("aria-label"))}}l([i.property({type:Boolean,reflect:!0})],s.prototype,"indeterminate");l([i.property({type:String})],s.prototype,"label");l([i.property({reflect:!0,attribute:"static-color"})],s.prototype,"staticColor");l([i.property({type:Number})],s.prototype,"progress");l([i.query("slot")],s.prototype,"slotEl");exports.LuzmoProgressCircle=s;
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../base-CBCg3yyw.cjs"),h=require("../focus-visible-B0P9aY_G.cjs"),b=require("../sized-mixin-CPxE5C96.cjs"),v=require("../query-assigned-nodes-BcKWmGzy.cjs"),p=require("../roving-tabindex-By_fCy_e.cjs"),m=require("../field-group-DkGst3r5.cjs"),f='@media (forced-colors: active){:host{--highcontrast-radio-neutral-content-color: CanvasText;--highcontrast-radio-neutral-content-color-hover: CanvasText;--highcontrast-radio-neutral-content-color-down: CanvasText;--highcontrast-radio-neutral-content-color-focus: CanvasText;--highcontrast-radio-button-border-color-default: ButtonText;--highcontrast-radio-button-border-color-hover: Highlight;--highcontrast-radio-button-border-color-down: ButtonText;--highcontrast-radio-button-border-color-focus: Highlight;--highcontrast-radio-emphasized-accent-color: ButtonText;--highcontrast-radio-emphasized-accent-color-hover: Highlight;--highcontrast-radio-emphasized-accent-color-down: ButtonText;--highcontrast-radio-emphasized-accent-color-focus: Highlight;--highcontrast-radio-button-checked-border-color-default: Highlight;--highcontrast-radio-button-checked-border-color-hover: Highlight;--highcontrast-radio-button-checked-border-color-down: Highlight;--highcontrast-radio-button-checked-border-color-focus: Highlight;--highcontrast-radio-disabled-content-color: GrayText;--highcontrast-radio-disabled-border-color: GrayText;--highcontrast-radio-focus-indicator-color: CanvasText}#button:after{forced-color-adjust:none}}:host{vertical-align:top;min-block-size:var(--luzmo-radio-height, var(--radio-height));max-inline-size:100%;align-items:flex-start;display:inline-flex;position:relative;font-family:var(--luzmo-radio-font-family, var(--luzmo-font-family))}:host(:active) #button:before{border-color:var(--highcontrast-radio-button-border-color-down, var(--luzmo-radio-button-border-color-down, var(--radio-button-border-color-down)))}:host(:active[checked]) #input+#button:before{border-color:var(--highcontrast-radio-button-checked-border-color-down, var(--luzmo-radio-button-checked-border-color-down, var(--radio-button-checked-border-color-down)))}:host(:active) #label{color:var(--highcontrast-radio-neutral-content-color-down, var(--luzmo-radio-neutral-content-color-down, var(--radio-neutral-content-color-down)))}:host(:focus-visible) #button:before{border-color:var(--highcontrast-radio-button-border-color-focus, var(--luzmo-radio-button-border-color-focus, var(--radio-button-border-color-focus)))}:host(:focus-visible) #button:after{border-style:solid;border-color:var(--highcontrast-radio-focus-indicator-color, var(--luzmo-radio-focus-indicator-color, var(--radio-focus-indicator-color)));border-width:var(--luzmo-radio-focus-indicator-width, var(--radio-focus-indicator-width));inline-size:calc(var(--radio-button-control-size) + var(--radio-focus-indicator-gap) * 2);block-size:calc(var(--radio-button-control-size) + var(--radio-focus-indicator-gap) * 2)}:host(:focus-visible[checked]) #input+#button:before{border-color:var(--highcontrast-radio-button-checked-border-color-focus, var(--luzmo-radio-button-checked-border-color-focus, var(--radio-button-checked-border-color-focus)))}:host(:focus-visible) #label{color:var(--highcontrast-radio-neutral-content-color-focus, var(--luzmo-radio-neutral-content-color-focus, var(--radio-neutral-content-color-focus)))}:host([readonly]) #input:read-only{cursor:auto}:host([readonly]) #button{clip:rect(1px,1px,1px,1px);clip-path:inset(50%);position:fixed;inset-block-end:100%;inset-inline-end:100%}:host([readonly][checked][disabled]) #input~#label,:host([readonly][disabled]) #input~#label,:host([readonly]) #label{color:var(--highcontrast-radio-neutral-content-color, var(--luzmo-radio-neutral-content-color, var(--radio-neutral-content-color)));margin-inline-start:0}:host([emphasized][checked]) #input+#button:before{border-color:var(--highcontrast-radio-emphasized-accent-color, var(--luzmo-radio-emphasized-accent-color, var(--radio-emphasized-accent-color)))}@media (hover: hover){:host(:hover) #button:before{border-color:var(--highcontrast-radio-button-border-color-hover, var(--luzmo-radio-button-border-color-hover, var(--radio-button-border-color-hover)))}:host([checked]:hover) #input+#button:before{border-color:var(--highcontrast-radio-button-checked-border-color-hover, var(--luzmo-radio-button-checked-border-color-hover, var(--radio-button-checked-border-color-hover)))}:host(:hover) #label{color:var(--highcontrast-radio-neutral-content-color-hover, var(--luzmo-radio-neutral-content-color-hover, var(--radio-neutral-content-color-hover)))}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(--highcontrast-radio-emphasized-accent-color-hover, var(--luzmo-radio-emphasized-accent-color-hover, var(--radio-emphasized-accent-color-hover)))}}:host([emphasized]:active[checked]) #input+#button:before{border-color:var(--highcontrast-radio-emphasized-accent-color-down, var(--luzmo-radio-emphasized-accent-color-down, var(--radio-emphasized-accent-color-down)))}:host([emphasized]:focus-visible[checked]) #input+#button:before{border-color:var(--highcontrast-radio-emphasized-accent-color-focus, var(--luzmo-radio-emphasized-accent-color-focus, var(--radio-emphasized-accent-color-focus)))}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(--highcontrast-radio-disabled-border-color, var(--luzmo-radio-disabled-border-color, var(--radio-disabled-border-color)))}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(--highcontrast-radio-disabled-content-color, var(--luzmo-radio-disabled-content-color, var(--radio-disabled-content-color)))}#input{font-family:inherit;font-size:100%;line-height:var(--luzmo-radio-line-height, var(--radio-line-height));box-sizing:border-box;inline-size:100%;block-size:100%;opacity:0;z-index:1;cursor:pointer;margin:0;padding:0;position:absolute;overflow:visible}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-width:calc(var(--radio-button-control-size) / 2 - var(--radio-button-selection-indicator) / 2);border-color:var(--highcontrast-radio-button-checked-border-color-default, var(--luzmo-radio-button-checked-border-color-default, var(--radio-button-checked-border-color-default)))}#input:focus-visible+#button:after{border-width:var(--luzmo-radio-focus-indicator-width, var(--radio-focus-indicator-width));border-color:var(--highcontrast-radio-focus-indicator-color, var(--luzmo-radio-focus-indicator-color, var(--radio-focus-indicator-color)));inline-size:calc(var(--radio-button-control-size) + var(--radio-focus-indicator-gap) * 2);block-size:calc(var(--radio-button-control-size) + var(--radio-focus-indicator-gap) * 2);border-style:solid}#label{text-align:start;font-size:var(--luzmo-radio-font-size, var(--radio-font-size));color:var(--highcontrast-radio-neutral-content-color, var(--luzmo-radio-neutral-content-color, var(--radio-neutral-content-color)));line-height:var(--luzmo-radio-line-height, var(--radio-line-height));transition:color var(--luzmo-radio-animation-duration, var(--radio-animation-duration)) ease-in-out;margin-block-start:var(--radio-label-top-to-text);margin-block-end:var(--radio-label-bottom-to-text);margin-inline-start:var(--luzmo-radio-text-to-control, var(--radio-text-to-control))}#label:lang(ja),#label:lang(ko),#label:lang(zh){line-height:var(--luzmo-radio-line-height-cjk, var(--radio-line-height-cjk))}#button{box-sizing:border-box;inline-size:var(--luzmo-radio-button-control-size, var(--radio-button-control-size));block-size:var(--luzmo-radio-button-control-size, var(--radio-button-control-size));flex-grow:0;flex-shrink:0;margin-block-start:var(--luzmo-radio-button-top-to-control, var(--radio-button-top-to-control));position:relative}#button:before{z-index:0;content:"";box-sizing:border-box;inline-size:var(--luzmo-radio-button-control-size, var(--radio-button-control-size));block-size:var(--luzmo-radio-button-control-size, var(--radio-button-control-size));background-color:var(--highcontrast-radio-button-background-color, var(--luzmo-radio-button-background-color, var(--radio-button-background-color)));border-width:var(--luzmo-radio-border-width, var(--radio-border-width));border-color:var(--highcontrast-radio-button-border-color-default, var(--luzmo-radio-button-border-color-default, var(--radio-button-border-color-default)));transition:border var(--luzmo-radio-animation-duration, var(--radio-animation-duration)) ease-in-out,box-shadow var(--luzmo-radio-animation-duration, var(--radio-animation-duration)) ease-in-out;border-style:solid;border-radius:50%;display:block;position:absolute}#button:after{content:"";transition:opacity var(--luzmo-radio-animation-duration, var(--radio-animation-duration)) ease-out,margin var(--luzmo-radio-animation-duration, var(--radio-animation-duration)) ease-out;border-radius:50%;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%) translateY(-50%)}:host:dir(rtl) #button:after,:host([dir=rtl]) #button:after{transform:translate(50%) translateY(-50%)}:host{--radio-button-border-color-default: var(--luzmo-border-color-full);--radio-button-border-color-hover: var(--luzmo-border-color-full-hover);--radio-button-border-color-down: var(--luzmo-border-color-full-hover);--radio-button-border-color-focus: var(--luzmo-border-color-full-hover);--radio-neutral-content-color: var(--luzmo-selected-color-hard);--radio-neutral-content-color-hover: var(--luzmo-selected-color-hard-hover);--radio-neutral-content-color-down: var(--luzmo-selected-color-hard-down);--radio-neutral-content-color-focus: var(--luzmo-selected-color-hard-focus);--radio-button-selection-indicator: var(--luzmo-spacing-2);--radio-focus-indicator-width: var(--luzmo-indicator-width);--radio-focus-indicator-gap: var(--luzmo-indicator-gap);--radio-focus-indicator-color: var(--luzmo-primary);--radio-disabled-content-color: var(--luzmo-disabled-color);--radio-disabled-border-color: var(--luzmo-border-color-disabled);--radio-emphasized-accent-color: var(--luzmo-primary);--radio-emphasized-accent-color-hover: var(--luzmo-primary-hover);--radio-emphasized-accent-color-down: var(--luzmo-primary-down);--radio-emphasized-accent-color-focus: var(--luzmo-primary-focus);--radio-border-width: calc(var(--luzmo-border-width) * 2);--radio-button-background-color: var(--luzmo-background-color);--radio-button-checked-border-color-default: var(--luzmo-selected-color-hard);--radio-button-checked-border-color-hover: var( --luzmo-selected-color-hard-hover );--radio-button-checked-border-color-down: var( --luzmo-selected-color-hard-down );--radio-button-checked-border-color-focus: var( --luzmo-selected-color-hard-focus );--radio-line-height: 1.3;--radio-animation-duration: var(--luzmo-animation-duration);--radio-height: 32px;--radio-button-control-size: 14px;--radio-text-to-control: 10px;--radio-label-top-to-text: 6px;--radio-label-bottom-to-text: 9px;--radio-button-top-to-control: 9px;--radio-font-size: 14px}:host(:lang(ja)),:host(:lang(zh)),:host(:lang(ko)){--radio-line-height-cjk: 1.5}:host{--radio-height: var(--luzmo-component-height);--radio-button-control-size: 14px;--radio-text-to-control: 10px;--radio-label-top-to-text: 7px;--radio-label-bottom-to-text: 9px;--radio-button-top-to-control: 9px;--radio-font-size: 14px}:host([size=s]){--radio-height: var(--luzmo-component-height-s);--radio-button-control-size: var(--luzmo-spacing-4);--radio-text-to-control: 9px;--radio-label-top-to-text: var(--luzmo-spacing-2);--radio-label-bottom-to-text: 5px;--radio-button-top-to-control: 6px;--radio-font-size: var(--luzmo-spacing-4)}:host([size=l]){--radio-height: var(--luzmo-component-height-l);--radio-button-control-size: 16px;--radio-text-to-control: 11px;--radio-label-top-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--radio-label-bottom-to-text: 11px;--radio-button-top-to-control: var(--luzmo-spacing-4);--radio-font-size: 16px}:host([size=xl]){--radio-height: var(--luzmo-component-height-xl);--radio-button-control-size: 18px;--radio-text-to-control: 13px;--radio-label-top-to-text: var(--luzmo-spacing-4);--radio-label-bottom-to-text: 14px;--radio-button-top-to-control: 15px;--radio-font-size: 18px}:host([emphasized]){--radio-button-checked-border-color-default: var(--luzmo-primary);--radio-button-checked-border-color-hover: var(--luzmo-primary-hover);--radio-button-checked-border-color-down: var(--luzmo-primary-down);--radio-button-checked-border-color-focus: var(--luzmo-primary-focus)}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host([dir=rtl]) #button:after{transform:translate(50%) translateY(-50%)}';var z=Object.defineProperty,n=(d,o,t,l)=>{for(var r=void 0,i=d.length-1,c;i>=0;i--)(c=d[i])&&(r=c(o,t,r)||r);return r&&z(o,t,r),r};class a extends b.SizedMixin(h.FocusVisiblePolyfillMixin(e.LuzmoElement),{noDefaultSize:!0}){constructor(){super(...arguments),this.autofocus=!1,this.value="",this.checked=!1,this.disabled=!1,this.emphasized=!1,this.invalid=!1,this.readonly=!1}static get styles(){return[e.r(f)]}click(){this.disabled||this.activate()}manageAutoFocus(){this.autofocus&&(this.dispatchEvent(new KeyboardEvent("keydown",{code:"Tab"})),this.focus())}activate(){this.checked||(this.checked=!0,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}handleKeyup(o){o.code==="Space"&&this.activate()}render(){return e.x`
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("lit"),e=require("lit/decorators.js"),v=require("../base-5nDSSNeT.cjs"),b=require("../focus-visible-D4BXb5RB.cjs"),p=require("../sized-mixin-DcvJLFeo.cjs"),m=require("../roving-tabindex-By_fCy_e.cjs"),f=require("../field-group-BYHNJmv0.cjs"),z='@media (forced-colors: active){:host{--highcontrast-radio-neutral-content-color: CanvasText;--highcontrast-radio-neutral-content-color-hover: CanvasText;--highcontrast-radio-neutral-content-color-down: CanvasText;--highcontrast-radio-neutral-content-color-focus: CanvasText;--highcontrast-radio-button-border-color-default: ButtonText;--highcontrast-radio-button-border-color-hover: Highlight;--highcontrast-radio-button-border-color-down: ButtonText;--highcontrast-radio-button-border-color-focus: Highlight;--highcontrast-radio-emphasized-accent-color: ButtonText;--highcontrast-radio-emphasized-accent-color-hover: Highlight;--highcontrast-radio-emphasized-accent-color-down: ButtonText;--highcontrast-radio-emphasized-accent-color-focus: Highlight;--highcontrast-radio-button-checked-border-color-default: Highlight;--highcontrast-radio-button-checked-border-color-hover: Highlight;--highcontrast-radio-button-checked-border-color-down: Highlight;--highcontrast-radio-button-checked-border-color-focus: Highlight;--highcontrast-radio-disabled-content-color: GrayText;--highcontrast-radio-disabled-border-color: GrayText;--highcontrast-radio-focus-indicator-color: CanvasText}#button:after{forced-color-adjust:none}}:host{vertical-align:top;min-block-size:var(--luzmo-radio-height, var(--radio-height));max-inline-size:100%;align-items:flex-start;display:inline-flex;position:relative;font-family:var(--luzmo-radio-font-family, var(--luzmo-font-family))}:host(:active) #button:before{border-color:var(--highcontrast-radio-button-border-color-down, var(--luzmo-radio-button-border-color-down, var(--radio-button-border-color-down)))}:host(:active[checked]) #input+#button:before{border-color:var(--highcontrast-radio-button-checked-border-color-down, var(--luzmo-radio-button-checked-border-color-down, var(--radio-button-checked-border-color-down)))}:host(:active) #label{color:var(--highcontrast-radio-neutral-content-color-down, var(--luzmo-radio-neutral-content-color-down, var(--radio-neutral-content-color-down)))}:host(:focus-visible) #button:before{border-color:var(--highcontrast-radio-button-border-color-focus, var(--luzmo-radio-button-border-color-focus, var(--radio-button-border-color-focus)))}:host(:focus-visible) #button:after{border-style:solid;border-color:var(--highcontrast-radio-focus-indicator-color, var(--luzmo-radio-focus-indicator-color, var(--radio-focus-indicator-color)));border-width:var(--luzmo-radio-focus-indicator-width, var(--radio-focus-indicator-width));inline-size:calc(var(--radio-button-control-size) + var(--radio-focus-indicator-gap) * 2);block-size:calc(var(--radio-button-control-size) + var(--radio-focus-indicator-gap) * 2)}:host(:focus-visible[checked]) #input+#button:before{border-color:var(--highcontrast-radio-button-checked-border-color-focus, var(--luzmo-radio-button-checked-border-color-focus, var(--radio-button-checked-border-color-focus)))}:host(:focus-visible) #label{color:var(--highcontrast-radio-neutral-content-color-focus, var(--luzmo-radio-neutral-content-color-focus, var(--radio-neutral-content-color-focus)))}:host([readonly]) #input:read-only{cursor:auto}:host([readonly]) #button{clip:rect(1px,1px,1px,1px);clip-path:inset(50%);position:fixed;inset-block-end:100%;inset-inline-end:100%}:host([readonly][checked][disabled]) #input~#label,:host([readonly][disabled]) #input~#label,:host([readonly]) #label{color:var(--highcontrast-radio-neutral-content-color, var(--luzmo-radio-neutral-content-color, var(--radio-neutral-content-color)));margin-inline-start:0}:host([emphasized][checked]) #input+#button:before{border-color:var(--highcontrast-radio-emphasized-accent-color, var(--luzmo-radio-emphasized-accent-color, var(--radio-emphasized-accent-color)))}@media (hover: hover){:host(:hover) #button:before{border-color:var(--highcontrast-radio-button-border-color-hover, var(--luzmo-radio-button-border-color-hover, var(--radio-button-border-color-hover)))}:host([checked]:hover) #input+#button:before{border-color:var(--highcontrast-radio-button-checked-border-color-hover, var(--luzmo-radio-button-checked-border-color-hover, var(--radio-button-checked-border-color-hover)))}:host(:hover) #label{color:var(--highcontrast-radio-neutral-content-color-hover, var(--luzmo-radio-neutral-content-color-hover, var(--radio-neutral-content-color-hover)))}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(--highcontrast-radio-emphasized-accent-color-hover, var(--luzmo-radio-emphasized-accent-color-hover, var(--radio-emphasized-accent-color-hover)))}}:host([emphasized]:active[checked]) #input+#button:before{border-color:var(--highcontrast-radio-emphasized-accent-color-down, var(--luzmo-radio-emphasized-accent-color-down, var(--radio-emphasized-accent-color-down)))}:host([emphasized]:focus-visible[checked]) #input+#button:before{border-color:var(--highcontrast-radio-emphasized-accent-color-focus, var(--luzmo-radio-emphasized-accent-color-focus, var(--radio-emphasized-accent-color-focus)))}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(--highcontrast-radio-disabled-border-color, var(--luzmo-radio-disabled-border-color, var(--radio-disabled-border-color)))}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(--highcontrast-radio-disabled-content-color, var(--luzmo-radio-disabled-content-color, var(--radio-disabled-content-color)))}#input{font-family:inherit;font-size:100%;line-height:var(--luzmo-radio-line-height, var(--radio-line-height));box-sizing:border-box;inline-size:100%;block-size:100%;opacity:0;z-index:1;cursor:pointer;margin:0;padding:0;position:absolute;overflow:visible}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-width:calc(var(--radio-button-control-size) / 2 - var(--radio-button-selection-indicator) / 2);border-color:var(--highcontrast-radio-button-checked-border-color-default, var(--luzmo-radio-button-checked-border-color-default, var(--radio-button-checked-border-color-default)))}#input:focus-visible+#button:after{border-width:var(--luzmo-radio-focus-indicator-width, var(--radio-focus-indicator-width));border-color:var(--highcontrast-radio-focus-indicator-color, var(--luzmo-radio-focus-indicator-color, var(--radio-focus-indicator-color)));inline-size:calc(var(--radio-button-control-size) + var(--radio-focus-indicator-gap) * 2);block-size:calc(var(--radio-button-control-size) + var(--radio-focus-indicator-gap) * 2);border-style:solid}#label{text-align:start;font-size:var(--luzmo-radio-font-size, var(--radio-font-size));color:var(--highcontrast-radio-neutral-content-color, var(--luzmo-radio-neutral-content-color, var(--radio-neutral-content-color)));line-height:var(--luzmo-radio-line-height, var(--radio-line-height));transition:color var(--luzmo-radio-animation-duration, var(--radio-animation-duration)) ease-in-out;margin-block-start:var(--radio-label-top-to-text);margin-block-end:var(--radio-label-bottom-to-text);margin-inline-start:var(--luzmo-radio-text-to-control, var(--radio-text-to-control))}#label:lang(ja),#label:lang(ko),#label:lang(zh){line-height:var(--luzmo-radio-line-height-cjk, var(--radio-line-height-cjk))}#button{box-sizing:border-box;inline-size:var(--luzmo-radio-button-control-size, var(--radio-button-control-size));block-size:var(--luzmo-radio-button-control-size, var(--radio-button-control-size));flex-grow:0;flex-shrink:0;margin-block-start:var(--luzmo-radio-button-top-to-control, var(--radio-button-top-to-control));position:relative}#button:before{z-index:0;content:"";box-sizing:border-box;inline-size:var(--luzmo-radio-button-control-size, var(--radio-button-control-size));block-size:var(--luzmo-radio-button-control-size, var(--radio-button-control-size));background-color:var(--highcontrast-radio-button-background-color, var(--luzmo-radio-button-background-color, var(--radio-button-background-color)));border-width:var(--luzmo-radio-border-width, var(--radio-border-width));border-color:var(--highcontrast-radio-button-border-color-default, var(--luzmo-radio-button-border-color-default, var(--radio-button-border-color-default)));transition:border var(--luzmo-radio-animation-duration, var(--radio-animation-duration)) ease-in-out,box-shadow var(--luzmo-radio-animation-duration, var(--radio-animation-duration)) ease-in-out;border-style:solid;border-radius:50%;display:block;position:absolute}#button:after{content:"";transition:opacity var(--luzmo-radio-animation-duration, var(--radio-animation-duration)) ease-out,margin var(--luzmo-radio-animation-duration, var(--radio-animation-duration)) ease-out;border-radius:50%;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%) translateY(-50%)}:host:dir(rtl) #button:after,:host([dir=rtl]) #button:after{transform:translate(50%) translateY(-50%)}:host{--radio-button-border-color-default: var(--luzmo-border-color-full);--radio-button-border-color-hover: var(--luzmo-border-color-full-hover);--radio-button-border-color-down: var(--luzmo-border-color-full-hover);--radio-button-border-color-focus: var(--luzmo-border-color-full-hover);--radio-neutral-content-color: var(--luzmo-selected-color-hard);--radio-neutral-content-color-hover: var(--luzmo-selected-color-hard-hover);--radio-neutral-content-color-down: var(--luzmo-selected-color-hard-down);--radio-neutral-content-color-focus: var(--luzmo-selected-color-hard-focus);--radio-button-selection-indicator: var(--luzmo-spacing-2);--radio-focus-indicator-width: var(--luzmo-indicator-width);--radio-focus-indicator-gap: var(--luzmo-indicator-gap);--radio-focus-indicator-color: var(--luzmo-primary);--radio-disabled-content-color: var(--luzmo-disabled-color);--radio-disabled-border-color: var(--luzmo-border-color-disabled);--radio-emphasized-accent-color: var(--luzmo-primary);--radio-emphasized-accent-color-hover: var(--luzmo-primary-hover);--radio-emphasized-accent-color-down: var(--luzmo-primary-down);--radio-emphasized-accent-color-focus: var(--luzmo-primary-focus);--radio-border-width: calc(var(--luzmo-border-width) * 2);--radio-button-background-color: var(--luzmo-background-color);--radio-button-checked-border-color-default: var(--luzmo-selected-color-hard);--radio-button-checked-border-color-hover: var( --luzmo-selected-color-hard-hover );--radio-button-checked-border-color-down: var( --luzmo-selected-color-hard-down );--radio-button-checked-border-color-focus: var( --luzmo-selected-color-hard-focus );--radio-line-height: 1.3;--radio-animation-duration: var(--luzmo-animation-duration);--radio-height: 32px;--radio-button-control-size: 14px;--radio-text-to-control: 10px;--radio-label-top-to-text: 6px;--radio-label-bottom-to-text: 9px;--radio-button-top-to-control: 9px;--radio-font-size: 14px}:host(:lang(ja)),:host(:lang(zh)),:host(:lang(ko)){--radio-line-height-cjk: 1.5}:host{--radio-height: var(--luzmo-component-height);--radio-button-control-size: 14px;--radio-text-to-control: 10px;--radio-label-top-to-text: 7px;--radio-label-bottom-to-text: 9px;--radio-button-top-to-control: 9px;--radio-font-size: 14px}:host([size=s]){--radio-height: var(--luzmo-component-height-s);--radio-button-control-size: var(--luzmo-spacing-4);--radio-text-to-control: 9px;--radio-label-top-to-text: var(--luzmo-spacing-2);--radio-label-bottom-to-text: 5px;--radio-button-top-to-control: 6px;--radio-font-size: var(--luzmo-spacing-4)}:host([size=l]){--radio-height: var(--luzmo-component-height-l);--radio-button-control-size: 16px;--radio-text-to-control: 11px;--radio-label-top-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--radio-label-bottom-to-text: 11px;--radio-button-top-to-control: var(--luzmo-spacing-4);--radio-font-size: 16px}:host([size=xl]){--radio-height: var(--luzmo-component-height-xl);--radio-button-control-size: 18px;--radio-text-to-control: 13px;--radio-label-top-to-text: var(--luzmo-spacing-4);--radio-label-bottom-to-text: 14px;--radio-button-top-to-control: 15px;--radio-font-size: 18px}:host([emphasized]){--radio-button-checked-border-color-default: var(--luzmo-primary);--radio-button-checked-border-color-hover: var(--luzmo-primary-hover);--radio-button-checked-border-color-down: var(--luzmo-primary-down);--radio-button-checked-border-color-focus: var(--luzmo-primary-focus)}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host([dir=rtl]) #button:after{transform:translate(50%) translateY(-50%)}';var g=Object.defineProperty,n=(d,o,t,l)=>{for(var r=void 0,i=d.length-1,c;i>=0;i--)(c=d[i])&&(r=c(o,t,r)||r);return r&&g(o,t,r),r};class a extends p.SizedMixin(b.FocusVisiblePolyfillMixin(v.LuzmoElement),{noDefaultSize:!0}){constructor(){super(...arguments),this.autofocus=!1,this.value="",this.checked=!1,this.disabled=!1,this.emphasized=!1,this.invalid=!1,this.readonly=!1}static get styles(){return[h.unsafeCSS(z)]}click(){this.disabled||this.activate()}manageAutoFocus(){this.autofocus&&(this.dispatchEvent(new KeyboardEvent("keydown",{code:"Tab"})),this.focus())}activate(){this.checked||(this.checked=!0,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}handleKeyup(o){o.code==="Space"&&this.activate()}render(){return h.html`
|
|
19
19
|
<div id="input"></div>
|
|
20
20
|
<span id="button"></span>
|
|
21
21
|
<span id="label" role="presentation"><slot></slot></span>
|
|
22
|
-
`}firstUpdated(o){super.firstUpdated(o),this.setAttribute("role","radio"),this.hasAttribute("tabindex")||(this.tabIndex=0),this.manageAutoFocus(),this.addEventListener("click",this.activate),this.addEventListener("keyup",this.handleKeyup)}updated(o){super.updated(o),o.has("invalid")&&(this.invalid?this.setAttribute("aria-invalid","true"):this.removeAttribute("aria-invalid")),o.has("checked")&&(this.checked?this.setAttribute("aria-checked","true"):this.setAttribute("aria-checked","false")),o.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}}n([e.
|
|
22
|
+
`}firstUpdated(o){super.firstUpdated(o),this.setAttribute("role","radio"),this.hasAttribute("tabindex")||(this.tabIndex=0),this.manageAutoFocus(),this.addEventListener("click",this.activate),this.addEventListener("keyup",this.handleKeyup)}updated(o){super.updated(o),o.has("invalid")&&(this.invalid?this.setAttribute("aria-invalid","true"):this.removeAttribute("aria-invalid")),o.has("checked")&&(this.checked?this.setAttribute("aria-checked","true"):this.setAttribute("aria-checked","false")),o.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}}n([e.property({type:Boolean})],a.prototype,"autofocus");n([e.property({type:String,reflect:!0})],a.prototype,"value");n([e.property({type:Boolean,reflect:!0})],a.prototype,"checked");n([e.property({type:Boolean,reflect:!0})],a.prototype,"disabled");n([e.property({type:Boolean,reflect:!0})],a.prototype,"emphasized");n([e.property({type:Boolean,reflect:!0})],a.prototype,"invalid");n([e.property({type:Boolean,reflect:!0})],a.prototype,"readonly");var x=Object.defineProperty,u=(d,o,t,l)=>{for(var r=void 0,i=d.length-1,c;i>=0;i--)(c=d[i])&&(r=c(o,t,r)||r);return r&&x(o,t,r),r};class s extends b.FocusVisiblePolyfillMixin(f.LuzmoFieldGroup){constructor(){super(...arguments),this.name="",this.rovingTabindexController=new m.RovingTabindexController(this,{focusInIndex:o=>o.findIndex(t=>this.selected?!t.disabled&&t.value===this.selected:!t.disabled),elementEnterAction:o=>{this._setSelected(o.value)},elements:()=>this.buttons,isFocusableElement:o=>!o.disabled}),this.selected=""}get buttons(){return this.defaultNodes.filter(o=>o instanceof a)}focus(){this.rovingTabindexController.focus()}_setSelected(o){if(o===this.selected)return;const t=this.selected,l=o?this.querySelector(`luzmo-radio[value="${o}"]`):void 0;if(this.selected=l?o:"",!this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0,composed:!0}))){this.selected=t;return}this.validateRadios()}willUpdate(o){if(!this.hasUpdated){this.setAttribute("role","radiogroup");const t=this.querySelector("luzmo-radio[checked]"),l=t?t.value:"";if(this.selected=l||this.selected,this.selected&&this.selected!==l){const r=this.querySelector(`luzmo-radio[value="${this.selected}"]`);r&&(r.checked=!0)}this.shadowRoot.addEventListener("change",r=>{r.stopPropagation();const i=r.target;this._setSelected(i.value)})}o.has("selected")&&this.validateRadios()}async validateRadios(){let o=!1;this.hasUpdated||await this.updateComplete,this.buttons.map(t=>{t.checked=this.selected===t.value,o=o||t.checked}),o||(this.selected="")}handleSlotchange(){this.rovingTabindexController.clearElementCache()}}u([e.property({type:String})],s.prototype,"name");u([e.queryAssignedNodes()],s.prototype,"defaultNodes");u([e.property({reflect:!0})],s.prototype,"selected");customElements.get("luzmo-radio")||customElements.define("luzmo-radio",a);customElements.get("luzmo-radio-group")||customElements.define("luzmo-radio-group",s);exports.LuzmoRadio=a;exports.LuzmoRadioGroup=s;
|
|
@@ -15,12 +15,13 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
18
|
+
import { unsafeCSS as m, html as z } from "lit";
|
|
19
|
+
import { property as i, queryAssignedNodes as v } from "lit/decorators.js";
|
|
20
|
+
import { a as p } from "../base-CdYjmV_8.js";
|
|
21
|
+
import { F as h } from "../focus-visible-BvScGDCE.js";
|
|
22
|
+
import { S as f } from "../sized-mixin-cJbo3PKR.js";
|
|
22
23
|
import { R as g } from "../roving-tabindex-DOg4z6ZU.js";
|
|
23
|
-
import { L as x } from "../field-group-
|
|
24
|
+
import { L as x } from "../field-group-CHmw159R.js";
|
|
24
25
|
const b = () => {
|
|
25
26
|
if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
|
|
26
27
|
const e = document.createElement("style");
|
|
@@ -34,15 +35,15 @@ var y = Object.defineProperty, d = (e, o, t, n) => {
|
|
|
34
35
|
(c = e[a]) && (r = c(o, t, r) || r);
|
|
35
36
|
return r && y(o, t, r), r;
|
|
36
37
|
};
|
|
37
|
-
class l extends
|
|
38
|
-
h(
|
|
38
|
+
class l extends f(
|
|
39
|
+
h(p),
|
|
39
40
|
{ noDefaultSize: !0 }
|
|
40
41
|
) {
|
|
41
42
|
constructor() {
|
|
42
43
|
super(...arguments), this.autofocus = !1, this.value = "", this.checked = !1, this.disabled = !1, this.emphasized = !1, this.invalid = !1, this.readonly = !1;
|
|
43
44
|
}
|
|
44
45
|
static get styles() {
|
|
45
|
-
return [
|
|
46
|
+
return [m(k)];
|
|
46
47
|
}
|
|
47
48
|
click() {
|
|
48
49
|
this.disabled || this.activate();
|
|
@@ -66,7 +67,7 @@ class l extends p(
|
|
|
66
67
|
o.code === "Space" && this.activate();
|
|
67
68
|
}
|
|
68
69
|
render() {
|
|
69
|
-
return
|
|
70
|
+
return z`
|
|
70
71
|
<div id="input"></div>
|
|
71
72
|
<span id="button"></span>
|
|
72
73
|
<span id="label" role="presentation"><slot></slot></span>
|
|
@@ -178,7 +179,7 @@ u([
|
|
|
178
179
|
i({ type: String })
|
|
179
180
|
], s.prototype, "name");
|
|
180
181
|
u([
|
|
181
|
-
|
|
182
|
+
v()
|
|
182
183
|
], s.prototype, "defaultNodes");
|
|
183
184
|
u([
|
|
184
185
|
i({ reflect: !0 })
|
|
@@ -15,11 +15,11 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../base-CBCg3yyw.cjs"),h=require("../query-BL-TJj7K.cjs"),u=require("../if-defined-C9YGdo33.cjs"),i=require("../luzmo-icons-DletXGWU.cjs");require("../button/index.cjs");require("../icon/index.cjs");const d=require("../text-field-D5d_Gt0t.cjs"),v="@media (forced-colors: active){#text-field #text-field,#text-field #text-field .input{--highcontrast-search-color-default: CanvasText;--highcontrast-search-color-hover: CanvasText;--highcontrast-search-color-focus: CanvasText;--highcontrast-search-color-disabled: GrayText}#text-field #button .luzmo-ClearButton-fill{forced-color-adjust:none;background-color:initial}}#text-field{--search-button-inline-size: var(--search-block-size);--search-min-inline-size: calc( var(--search-min-inline-multiplier) * var(--search-block-size) );--luzmo-text-field-font-family: var( --luzmo-search-font-family, var(--search-font-family) );--luzmo-text-field-font-weight: var( --luzmo-search-font-weight, var(--search-font-weight) );--luzmo-text-field-corner-radius: var( --luzmo-search-border-radius, var(--search-border-radius) );--luzmo-text-field-border-width: var( --luzmo-search-border-width, var(--search-border-width) );--luzmo-text-field-focus-indicator-gap: var( --luzmo-search-focus-indicator-gap, var(--search-focus-indicator-gap) );--luzmo-text-field-focus-indicator-width: var( --luzmo-search-focus-indicator-width, var(--search-focus-indicator-width) );--luzmo-text-field-focus-indicator-color: var( --luzmo-search-focus-indicator-color, var(--search-focus-indicator-color) );--luzmo-text-field-text-color-default: var( --luzmo-search-color-default, var(--search-color-default) );--luzmo-text-field-text-color-hover: var( --luzmo-search-color-hover, var(--search-color-hover) );--luzmo-text-field-text-color-focus: var( --luzmo-search-color-focus, var(--search-color-focus) );--luzmo-text-field-text-color-focus-hover: var( --luzmo-search-color-focus-hover, var(--search-color-focus-hover) );--luzmo-text-field-text-color-keyboard-focus: var( --luzmo-search-color-key-focus, var(--search-color-key-focus) );--luzmo-text-field-text-color-disabled: var( --luzmo-search-color-disabled, var(--search-color-disabled) );--luzmo-text-field-border-color: var( --luzmo-search-border-color-default, var(--search-border-color-default) );--luzmo-text-field-border-color-hover: var( --luzmo-search-border-color-hover, var(--search-border-color-hover) );--luzmo-text-field-border-color-focus: var( --luzmo-search-border-color-focus, var(--search-border-color-focus) );--luzmo-text-field-border-color-focus-hover: var( --luzmo-search-border-color-focus-hover, var(--search-border-color-focus-hover) );--luzmo-text-field-border-color-keyboard-focus: var( --luzmo-search-border-color-key-focus, var(--search-border-color-key-focus) );--luzmo-text-field-border-color-disabled: var( --luzmo-search-border-color-disabled, var(--search-border-color-disabled) );--luzmo-text-field-background-color: var( --luzmo-search-background-color, var(--search-background-color) );--luzmo-text-field-background-color-disabled: var( --luzmo-search-background-color-disabled, var(--search-background-color-disabled) );inline-size:var(--luzmo-search-inline-size, var(--search-inline-size));min-inline-size:var(--luzmo-search-min-inline-size, var(--search-min-inline-size));display:inline-block;position:relative}#text-field .luzmo-HelpText{margin-block-start:var(--luzmo-search-to-help-text, var(--search-to-help-text))}#button{position:absolute;inset-block-start:0;inset-inline-end:0;height:var(--search-block-size);width:var(--search-block-size)}#button,#button .luzmo-ClearButton-fill{border-radius:var(--luzmo-search-border-radius, var(--search-border-radius))}#text-field.is-disabled #button{display:none}#text-field{inline-size:100%}.icon-search{--search-color: var( --highcontrast-search-color-default, var(--luzmo-search-color-default, var(--search-color-default)) );color:var(--search-color);margin-block:auto;display:block;position:absolute;inset-block:0}#text-field.is-focused .icon-search{--search-color: var( --highcontrast-search-color-focus, var(--luzmo-search-color-focus, var(--search-color-focus)) )}#text-field.is-disabled .icon-search{--search-color: var( --highcontrast-search-color-disabled, var(--luzmo-search-color-disabled, var(--search-color-disabled)) )}@media (hover: hover){#text-field:hover .icon-search{--search-color: var( --highcontrast-search-color-hover, var(--luzmo-search-color-hover, var(--search-color-hover)) )}#text-field.is-focused:hover .icon-search{--search-color: var( --highcontrast-search-color-focus, var(--luzmo-search-color-focus-hover, var(--search-color-focus-hover)) )}#text-field.is-disabled:hover .icon-search{--search-color: var( --highcontrast-search-color-disabled, var(--luzmo-search-color-disabled, var(--search-color-disabled)) )}}.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;block-size:var(--luzmo-search-block-size, var(--search-block-size));font-style:var(--luzmo-search-font-style, var(--search-font-style));line-height:var(--luzmo-search-line-height, var(--search-line-height));padding-block-start:calc(var(--luzmo-search-top-to-text, var(--search-top-to-text)) - var(--luzmo-search-border-width, var(--search-border-width)));padding-block-end:calc(var(--luzmo-search-bottom-to-text, var(--search-bottom-to-text)) - var(--luzmo-search-border-width, var(--search-border-width)))}.input::-webkit-search-cancel-button,.input::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(:not([quiet])) #text-field .icon-search{inset-inline-start:var(--luzmo-search-edge-to-visual, var(--search-edge-to-visual))}:host(:not([quiet])) #text-field .input{padding-inline-start:calc(var(--luzmo-search-edge-to-visual, var(--search-edge-to-visual)) - var(--luzmo-search-border-width, var(--search-border-width)) + var(--luzmo-search-icon-size, var(--search-icon-size)) + var(--luzmo-search-text-to-icon, var(--search-text-to-icon)));padding-inline-end:calc(var(--luzmo-search-button-inline-size, var(--search-button-inline-size)) - var(--luzmo-search-border-width, var(--search-border-width)))}:host([quiet]){--search-quiet-button-offset: var( --luzmo-search-quiet-button-offset, calc( var(--luzmo-search-block-size, var(--search-block-size)) / 2 - var(--luzmo-search-icon-size, var(--search-icon-size)) / 2 ) )}:host([quiet]) #button .luzmo-ClearButton-icon{transform:translate(var(--search-quiet-button-offset))}:host([quiet]) #text-field .input{border-radius:var(--luzmo-search-border-radius, var(--search-border-radius));padding-block-start:var(--luzmo-search-top-to-text, var(--search-top-to-text));padding-inline-start:calc(var(--luzmo-search-edge-to-visual, var(--search-edge-to-visual)) + var(--luzmo-search-icon-size, var(--search-icon-size)) + var(--luzmo-search-text-to-icon, var(--search-text-to-icon)));padding-inline-end:calc(var(--luzmo-search-button-inline-size, var(--search-button-inline-size)) - var(--search-quiet-button-offset))}:host{--search-border-color-default: var(--luzmo-border-color);--search-border-color-hover: rgba(var(--luzmo-primary-rgb), .3);--search-border-color-focus: var(--luzmo-primary);--search-border-color-focus-hover: var(--luzmo-primary);--search-border-color-key-focus: var(--luzmo-primary);--search-inline-size: 192px;--search-min-inline-multiplier: 3;--search-to-help-text: 0px;--search-top-to-text: var(--luzmo-spacing-2);--search-bottom-to-text: var(--luzmo-spacing-2);--search-focus-indicator-width: var(--luzmo-indicator-width);--search-focus-indicator-gap: -1px;--search-focus-indicator-color: var(--luzmo-primary);--search-font-family: var(--luzmo-font-family);--search-font-weight: var(--luzmo-font-weight);--search-font-style: var(--luzmo-font-style);--search-line-height: var(--luzmo-line-height);--search-color-default: var(--luzmo-font-color);--search-color-hover: var(--luzmo-font-color-hover);--search-color-focus: var(--luzmo-font-color-focus);--search-color-focus-hover: var(--luzmo-font-focus);--search-color-key-focus: var(--luzmo-font-color-focus);--search-border-width: var(--luzmo-border-width);--search-background-color: var(--luzmo-background-color);--search-color-disabled: var(--luzmo-disabled-color);--search-background-color-disabled: var(--luzmo-background-color-disabled);--search-border-color-disabled: var(--luzmo-border-color-disabled)}:host #text-field{--search-border-radius: var(--luzmo-border-radius);--search-edge-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--search-block-size: var(--luzmo-component-height);--search-icon-size: var(--luzmo-font-size-l);--search-text-to-icon: calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=s]) #text-field{--search-border-radius: var(--luzmo-border-radius);--search-edge-to-visual: var(--luzmo-spacing-3);--search-block-size: var(--luzmo-component-height-s);--search-icon-size: var(--luzmo-font-size);--search-text-to-icon: var(--luzmo-spacing-3)}:host([size=l]) #text-field{--search-border-radius: var(--luzmo-border-radius);--search-edge-to-visual: var(--luzmo-spacing-4);--search-block-size: var(--luzmo-component-height-l);--search-icon-size: var(--luzmo-font-size-xl);--search-text-to-icon: calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=xl]) #text-field{--search-border-radius: var(--luzmo-border-radius);--search-edge-to-visual: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--search-block-size: var(--luzmo-component-height-xl);--search-icon-size: var(--luzmo-font-size-xxl);--search-text-to-icon: var(--luzmo-spacing-4)}:host([quiet]) #text-field{--search-background-color: transparent;--search-background-color-disabled: transparent;--search-border-color-disabled: var(--luzmo-border-color-disabled);--search-border-radius: 0;--search-edge-to-visual: 0px}:host{--luzmo-text-field-spacing-inline: var(--alias-infield-button-full-height-m)}input::-webkit-search-cancel-button{display:none}@media (forced-colors: active){luzmo-clear-button{--clear-button-fill-background-color: transparent;--clear-button-fill-background-color-disabled: transparent;--clear-button-fill-background-color-down: transparent;--clear-button-fill-background-color-hover: transparent;--clear-button-fill-background-color-key-focus: transparent}}";var m=Object.defineProperty,t=(a,e,c,f)=>{for(var s=void 0,l=a.length-1,n;l>=0;l--)(n=a[l])&&(s=n(e,c,s)||s);return s&&m(e,c,s),s};const b=a=>a.stopPropagation(),z=a=>a==="s"?i.l2:a==="l"?i.z2:i.n2;class o extends d.LuzmoTextField{constructor(){super(...arguments),this.action="",this.label="Search",this.placeholder="Search"}static get styles(){return[...super.styles,r.r(v)]}handleSubmit(e){this.dispatchEvent(new Event("submit",{cancelable:!0,bubbles:!0}))||e.preventDefault()}handleKeydown(e){const{code:c}=e;c==="Escape"&&this.holdValueOnEscape||!this.value||c!=="Escape"||this.reset()}async reset(){this.value="",await this.updateComplete,this.focusElement.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.focusElement.dispatchEvent(new InputEvent("change",{bubbles:!0}))}renderField(){return r.x`
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("lit"),a=require("lit/decorators.js"),u=require("lit/directives/if-defined.js"),n=require("@luzmo/icons");require("../button/index.cjs");require("../icon/index.cjs");const d=require("../text-field-JMrsh-zo.cjs"),v="@media (forced-colors: active){#text-field #text-field,#text-field #text-field .input{--highcontrast-search-color-default: CanvasText;--highcontrast-search-color-hover: CanvasText;--highcontrast-search-color-focus: CanvasText;--highcontrast-search-color-disabled: GrayText}#text-field #button .luzmo-ClearButton-fill{forced-color-adjust:none;background-color:initial}}#text-field{--search-button-inline-size: var(--search-block-size);--search-min-inline-size: calc( var(--search-min-inline-multiplier) * var(--search-block-size) );--luzmo-text-field-font-family: var( --luzmo-search-font-family, var(--search-font-family) );--luzmo-text-field-font-weight: var( --luzmo-search-font-weight, var(--search-font-weight) );--luzmo-text-field-corner-radius: var( --luzmo-search-border-radius, var(--search-border-radius) );--luzmo-text-field-border-width: var( --luzmo-search-border-width, var(--search-border-width) );--luzmo-text-field-focus-indicator-gap: var( --luzmo-search-focus-indicator-gap, var(--search-focus-indicator-gap) );--luzmo-text-field-focus-indicator-width: var( --luzmo-search-focus-indicator-width, var(--search-focus-indicator-width) );--luzmo-text-field-focus-indicator-color: var( --luzmo-search-focus-indicator-color, var(--search-focus-indicator-color) );--luzmo-text-field-text-color-default: var( --luzmo-search-color-default, var(--search-color-default) );--luzmo-text-field-text-color-hover: var( --luzmo-search-color-hover, var(--search-color-hover) );--luzmo-text-field-text-color-focus: var( --luzmo-search-color-focus, var(--search-color-focus) );--luzmo-text-field-text-color-focus-hover: var( --luzmo-search-color-focus-hover, var(--search-color-focus-hover) );--luzmo-text-field-text-color-keyboard-focus: var( --luzmo-search-color-key-focus, var(--search-color-key-focus) );--luzmo-text-field-text-color-disabled: var( --luzmo-search-color-disabled, var(--search-color-disabled) );--luzmo-text-field-border-color: var( --luzmo-search-border-color-default, var(--search-border-color-default) );--luzmo-text-field-border-color-hover: var( --luzmo-search-border-color-hover, var(--search-border-color-hover) );--luzmo-text-field-border-color-focus: var( --luzmo-search-border-color-focus, var(--search-border-color-focus) );--luzmo-text-field-border-color-focus-hover: var( --luzmo-search-border-color-focus-hover, var(--search-border-color-focus-hover) );--luzmo-text-field-border-color-keyboard-focus: var( --luzmo-search-border-color-key-focus, var(--search-border-color-key-focus) );--luzmo-text-field-border-color-disabled: var( --luzmo-search-border-color-disabled, var(--search-border-color-disabled) );--luzmo-text-field-background-color: var( --luzmo-search-background-color, var(--search-background-color) );--luzmo-text-field-background-color-disabled: var( --luzmo-search-background-color-disabled, var(--search-background-color-disabled) );inline-size:var(--luzmo-search-inline-size, var(--search-inline-size));min-inline-size:var(--luzmo-search-min-inline-size, var(--search-min-inline-size));display:inline-block;position:relative}#text-field .luzmo-HelpText{margin-block-start:var(--luzmo-search-to-help-text, var(--search-to-help-text))}#button{position:absolute;inset-block-start:0;inset-inline-end:0;height:var(--search-block-size);width:var(--search-block-size)}#button,#button .luzmo-ClearButton-fill{border-radius:var(--luzmo-search-border-radius, var(--search-border-radius))}#text-field.is-disabled #button{display:none}#text-field{inline-size:100%}.icon-search{--search-color: var( --highcontrast-search-color-default, var(--luzmo-search-color-default, var(--search-color-default)) );color:var(--search-color);margin-block:auto;display:block;position:absolute;inset-block:0}#text-field.is-focused .icon-search{--search-color: var( --highcontrast-search-color-focus, var(--luzmo-search-color-focus, var(--search-color-focus)) )}#text-field.is-disabled .icon-search{--search-color: var( --highcontrast-search-color-disabled, var(--luzmo-search-color-disabled, var(--search-color-disabled)) )}@media (hover: hover){#text-field:hover .icon-search{--search-color: var( --highcontrast-search-color-hover, var(--luzmo-search-color-hover, var(--search-color-hover)) )}#text-field.is-focused:hover .icon-search{--search-color: var( --highcontrast-search-color-focus, var(--luzmo-search-color-focus-hover, var(--search-color-focus-hover)) )}#text-field.is-disabled:hover .icon-search{--search-color: var( --highcontrast-search-color-disabled, var(--luzmo-search-color-disabled, var(--search-color-disabled)) )}}.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;block-size:var(--luzmo-search-block-size, var(--search-block-size));font-style:var(--luzmo-search-font-style, var(--search-font-style));line-height:var(--luzmo-search-line-height, var(--search-line-height));padding-block-start:calc(var(--luzmo-search-top-to-text, var(--search-top-to-text)) - var(--luzmo-search-border-width, var(--search-border-width)));padding-block-end:calc(var(--luzmo-search-bottom-to-text, var(--search-bottom-to-text)) - var(--luzmo-search-border-width, var(--search-border-width)))}.input::-webkit-search-cancel-button,.input::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(:not([quiet])) #text-field .icon-search{inset-inline-start:var(--luzmo-search-edge-to-visual, var(--search-edge-to-visual))}:host(:not([quiet])) #text-field .input{padding-inline-start:calc(var(--luzmo-search-edge-to-visual, var(--search-edge-to-visual)) - var(--luzmo-search-border-width, var(--search-border-width)) + var(--luzmo-search-icon-size, var(--search-icon-size)) + var(--luzmo-search-text-to-icon, var(--search-text-to-icon)));padding-inline-end:calc(var(--luzmo-search-button-inline-size, var(--search-button-inline-size)) - var(--luzmo-search-border-width, var(--search-border-width)))}:host([quiet]){--search-quiet-button-offset: var( --luzmo-search-quiet-button-offset, calc( var(--luzmo-search-block-size, var(--search-block-size)) / 2 - var(--luzmo-search-icon-size, var(--search-icon-size)) / 2 ) )}:host([quiet]) #button .luzmo-ClearButton-icon{transform:translate(var(--search-quiet-button-offset))}:host([quiet]) #text-field .input{border-radius:var(--luzmo-search-border-radius, var(--search-border-radius));padding-block-start:var(--luzmo-search-top-to-text, var(--search-top-to-text));padding-inline-start:calc(var(--luzmo-search-edge-to-visual, var(--search-edge-to-visual)) + var(--luzmo-search-icon-size, var(--search-icon-size)) + var(--luzmo-search-text-to-icon, var(--search-text-to-icon)));padding-inline-end:calc(var(--luzmo-search-button-inline-size, var(--search-button-inline-size)) - var(--search-quiet-button-offset))}:host{--search-border-color-default: var(--luzmo-border-color);--search-border-color-hover: rgba(var(--luzmo-primary-rgb), .3);--search-border-color-focus: var(--luzmo-primary);--search-border-color-focus-hover: var(--luzmo-primary);--search-border-color-key-focus: var(--luzmo-primary);--search-inline-size: 192px;--search-min-inline-multiplier: 3;--search-to-help-text: 0px;--search-top-to-text: var(--luzmo-spacing-2);--search-bottom-to-text: var(--luzmo-spacing-2);--search-focus-indicator-width: var(--luzmo-indicator-width);--search-focus-indicator-gap: -1px;--search-focus-indicator-color: var(--luzmo-primary);--search-font-family: var(--luzmo-font-family);--search-font-weight: var(--luzmo-font-weight);--search-font-style: var(--luzmo-font-style);--search-line-height: var(--luzmo-line-height);--search-color-default: var(--luzmo-font-color);--search-color-hover: var(--luzmo-font-color-hover);--search-color-focus: var(--luzmo-font-color-focus);--search-color-focus-hover: var(--luzmo-font-focus);--search-color-key-focus: var(--luzmo-font-color-focus);--search-border-width: var(--luzmo-border-width);--search-background-color: var(--luzmo-background-color);--search-color-disabled: var(--luzmo-disabled-color);--search-background-color-disabled: var(--luzmo-background-color-disabled);--search-border-color-disabled: var(--luzmo-border-color-disabled)}:host #text-field{--search-border-radius: var(--luzmo-border-radius);--search-edge-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--search-block-size: var(--luzmo-component-height);--search-icon-size: var(--luzmo-font-size-l);--search-text-to-icon: calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=s]) #text-field{--search-border-radius: var(--luzmo-border-radius);--search-edge-to-visual: var(--luzmo-spacing-3);--search-block-size: var(--luzmo-component-height-s);--search-icon-size: var(--luzmo-font-size);--search-text-to-icon: var(--luzmo-spacing-3)}:host([size=l]) #text-field{--search-border-radius: var(--luzmo-border-radius);--search-edge-to-visual: var(--luzmo-spacing-4);--search-block-size: var(--luzmo-component-height-l);--search-icon-size: var(--luzmo-font-size-xl);--search-text-to-icon: calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=xl]) #text-field{--search-border-radius: var(--luzmo-border-radius);--search-edge-to-visual: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--search-block-size: var(--luzmo-component-height-xl);--search-icon-size: var(--luzmo-font-size-xxl);--search-text-to-icon: var(--luzmo-spacing-4)}:host([quiet]) #text-field{--search-background-color: transparent;--search-background-color-disabled: transparent;--search-border-color-disabled: var(--luzmo-border-color-disabled);--search-border-radius: 0;--search-edge-to-visual: 0px}:host{--luzmo-text-field-spacing-inline: var(--alias-infield-button-full-height-m)}input::-webkit-search-cancel-button{display:none}@media (forced-colors: active){luzmo-clear-button{--clear-button-fill-background-color: transparent;--clear-button-fill-background-color-disabled: transparent;--clear-button-fill-background-color-down: transparent;--clear-button-fill-background-color-hover: transparent;--clear-button-fill-background-color-key-focus: transparent}}";var m=Object.defineProperty,t=(o,r,c,f)=>{for(var s=void 0,i=o.length-1,h;i>=0;i--)(h=o[i])&&(s=h(r,c,s)||s);return s&&m(r,c,s),s};const b=o=>o.stopPropagation(),z=o=>o==="s"?n.luzmoSearch12:o==="l"?n.luzmoSearch:n.luzmoSearch14;class e extends d.LuzmoTextField{constructor(){super(...arguments),this.action="",this.label="Search",this.placeholder="Search"}static get styles(){return[...super.styles,l.unsafeCSS(v)]}handleSubmit(r){this.dispatchEvent(new Event("submit",{cancelable:!0,bubbles:!0}))||r.preventDefault()}handleKeydown(r){const{code:c}=r;c==="Escape"&&this.holdValueOnEscape||!this.value||c!=="Escape"||this.reset()}async reset(){this.value="",await this.updateComplete,this.focusElement.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.focusElement.dispatchEvent(new InputEvent("change",{bubbles:!0}))}renderField(){return l.html`
|
|
19
19
|
<form
|
|
20
20
|
action=${this.action}
|
|
21
21
|
id="form"
|
|
22
|
-
method=${u.
|
|
22
|
+
method=${u.ifDefined(this.method)}
|
|
23
23
|
@submit=${this.handleSubmit}
|
|
24
24
|
@reset=${this.reset}
|
|
25
25
|
@keydown=${this.handleKeydown}
|
|
@@ -31,15 +31,15 @@
|
|
|
31
31
|
class="icon magnifier icon-workflow icon-search"
|
|
32
32
|
></luzmo-icon>
|
|
33
33
|
${super.renderField()}
|
|
34
|
-
${this.value?
|
|
34
|
+
${this.value?l.html`
|
|
35
35
|
<luzmo-clear-button
|
|
36
36
|
id="button"
|
|
37
37
|
label="Reset"
|
|
38
38
|
tabindex="-1"
|
|
39
39
|
type="reset"
|
|
40
|
-
size=${u.
|
|
40
|
+
size=${u.ifDefined(this.size)}
|
|
41
41
|
@keydown=${b}
|
|
42
42
|
></luzmo-clear-button>
|
|
43
|
-
`:
|
|
43
|
+
`:l.nothing}
|
|
44
44
|
</form>
|
|
45
|
-
`}firstUpdated(
|
|
45
|
+
`}firstUpdated(r){super.firstUpdated(r),this.hasAttribute("holdValueOnEscape")||this.inputElement.setAttribute("type","search")}willUpdate(){this.multiline=!1}}t([a.property()],e.prototype,"action");t([a.property()],e.prototype,"label");t([a.property({type:String,reflect:!0})],e.prototype,"border");t([a.property()],e.prototype,"method");t([a.property()],e.prototype,"placeholder");t([a.property({type:Boolean})],e.prototype,"holdValueOnEscape");t([a.query("#form")],e.prototype,"form");customElements.get("luzmo-search")||customElements.define("luzmo-search",e);exports.LuzmoSearch=e;
|
|
@@ -15,13 +15,13 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
18
|
+
import { unsafeCSS as h, nothing as m, html as u } from "lit";
|
|
19
|
+
import { property as t, query as z } from "lit/decorators.js";
|
|
20
|
+
import { ifDefined as n } from "lit/directives/if-defined.js";
|
|
21
|
+
import { luzmoSearch12 as b, luzmoSearch as f, luzmoSearch14 as v } from "@luzmo/icons";
|
|
22
22
|
import "../button/index.js";
|
|
23
23
|
import "../icon/index.js";
|
|
24
|
-
import { L as p } from "../text-field-
|
|
24
|
+
import { L as p } from "../text-field-BTEpwGFu.js";
|
|
25
25
|
const d = () => {
|
|
26
26
|
if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
|
|
27
27
|
const o = document.createElement("style");
|