@mhmo91/schmancy 0.2.115 → 0.2.116
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/dist/{animated-text-BJ8e_TdT.cjs → animated-text-DmtCT-2q.cjs} +2 -2
- package/dist/{animated-text-BJ8e_TdT.cjs.map → animated-text-DmtCT-2q.cjs.map} +1 -1
- package/dist/{animated-text-C-LJVhLw.js → animated-text-DrH4Miy7.js} +3 -3
- package/dist/{animated-text-C-LJVhLw.js.map → animated-text-DrH4Miy7.js.map} +1 -1
- package/dist/animated-text.cjs +1 -1
- package/dist/animated-text.js +1 -1
- package/dist/area.cjs +1 -1
- package/dist/{area.component-Bf5USqvC.cjs → area.component-Bg1zJKiZ.cjs} +2 -2
- package/dist/{area.component-Bf5USqvC.cjs.map → area.component-Bg1zJKiZ.cjs.map} +1 -1
- package/dist/{area.component-6ebQ-3Kb.js → area.component-CmsssAq_.js} +3 -3
- package/dist/{area.component-6ebQ-3Kb.js.map → area.component-CmsssAq_.js.map} +1 -1
- package/dist/area.js +1 -1
- package/dist/{autocomplete-CM_YM2UF.cjs → autocomplete-BFj0YUYW.cjs} +2 -2
- package/dist/{autocomplete-CM_YM2UF.cjs.map → autocomplete-BFj0YUYW.cjs.map} +1 -1
- package/dist/{autocomplete-NTEOksdT.js → autocomplete-BsrWuTsP.js} +3 -3
- package/dist/{autocomplete-NTEOksdT.js.map → autocomplete-BsrWuTsP.js.map} +1 -1
- package/dist/autocomplete.cjs +1 -1
- package/dist/autocomplete.js +1 -1
- package/dist/busy.cjs +1 -1
- package/dist/busy.js +1 -1
- package/dist/button.cjs +1 -1
- package/dist/button.js +1 -1
- package/dist/card.cjs +1 -1
- package/dist/card.js +1 -1
- package/dist/{checkbox-jcFvgv_5.cjs → checkbox-Cb7nmI6P.cjs} +2 -2
- package/dist/{checkbox-jcFvgv_5.cjs.map → checkbox-Cb7nmI6P.cjs.map} +1 -1
- package/dist/{checkbox-1tBSHNXu.js → checkbox-DUP_qnel.js} +2 -2
- package/dist/{checkbox-1tBSHNXu.js.map → checkbox-DUP_qnel.js.map} +1 -1
- package/dist/checkbox.cjs +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/{chips-CdcS0QXD.js → chips-0hsW-Rxx.js} +3 -3
- package/dist/{chips-CdcS0QXD.js.map → chips-0hsW-Rxx.js.map} +1 -1
- package/dist/{chips-K7p1j3Uk.cjs → chips-CiesiXpI.cjs} +2 -2
- package/dist/{chips-K7p1j3Uk.cjs.map → chips-CiesiXpI.cjs.map} +1 -1
- package/dist/chips.cjs +1 -1
- package/dist/chips.js +1 -1
- package/dist/components.cjs +1 -1
- package/dist/components.js +1 -1
- package/dist/content-drawer.cjs +1 -1
- package/dist/content-drawer.js +1 -1
- package/dist/{date-range-BSBJICYH.js → date-range-DF_kjOLs.js} +3 -3
- package/dist/{date-range-BSBJICYH.js.map → date-range-DF_kjOLs.js.map} +1 -1
- package/dist/{date-range-BmVLxD4w.cjs → date-range-DvTXqD8e.cjs} +2 -2
- package/dist/{date-range-BmVLxD4w.cjs.map → date-range-DvTXqD8e.cjs.map} +1 -1
- package/dist/date-range.cjs +1 -1
- package/dist/date-range.js +1 -1
- package/dist/{delay-CgOaVklg.js → delay-Cmf_vIaJ.js} +2 -2
- package/dist/{delay-CgOaVklg.js.map → delay-Cmf_vIaJ.js.map} +1 -1
- package/dist/{delay-BC-GT6yV.cjs → delay-DhV8MSPZ.cjs} +2 -2
- package/dist/{delay-BC-GT6yV.cjs.map → delay-DhV8MSPZ.cjs.map} +1 -1
- package/dist/delay.cjs +1 -1
- package/dist/delay.js +1 -1
- package/dist/{divider-Dw4upy-U.cjs → divider-4ev5A0v0.cjs} +2 -2
- package/dist/{divider-Dw4upy-U.cjs.map → divider-4ev5A0v0.cjs.map} +1 -1
- package/dist/{divider-lRP5ZCxr.js → divider-B7GoicdG.js} +3 -3
- package/dist/{divider-lRP5ZCxr.js.map → divider-B7GoicdG.js.map} +1 -1
- package/dist/divider.cjs +1 -1
- package/dist/divider.js +1 -1
- package/dist/extra.cjs +1 -1
- package/dist/extra.js +1 -1
- package/dist/{flex-X4APHjaR.cjs → flex-DFHDHleC.cjs} +2 -2
- package/dist/{flex-X4APHjaR.cjs.map → flex-DFHDHleC.cjs.map} +1 -1
- package/dist/{flex-BkuM0UK7.js → flex-t4F0-R-c.js} +2 -2
- package/dist/{flex-BkuM0UK7.js.map → flex-t4F0-R-c.js.map} +1 -1
- package/dist/{form-Ct_Qt0rD.cjs → form-D_ShigQq.cjs} +2 -2
- package/dist/{form-Ct_Qt0rD.cjs.map → form-D_ShigQq.cjs.map} +1 -1
- package/dist/{form-Ci8uCvU-.js → form-dVHTERy3.js} +2 -2
- package/dist/{form-Ci8uCvU-.js.map → form-dVHTERy3.js.map} +1 -1
- package/dist/form.cjs +1 -1
- package/dist/form.js +1 -1
- package/dist/{icon-BPsYPc8h.cjs → icon-BNyFKp0p.cjs} +2 -2
- package/dist/{icon-BPsYPc8h.cjs.map → icon-BNyFKp0p.cjs.map} +1 -1
- package/dist/{icon-DOJOFG3x.js → icon-C3PI8GgN.js} +3 -3
- package/dist/{icon-DOJOFG3x.js.map → icon-C3PI8GgN.js.map} +1 -1
- package/dist/{icon-button-cirbgD54.cjs → icon-button-D4D5bXCm.cjs} +2 -2
- package/dist/{icon-button-cirbgD54.cjs.map → icon-button-D4D5bXCm.cjs.map} +1 -1
- package/dist/{icon-button-BPa29txC.js → icon-button-Dr_-8Ey5.js} +3 -3
- package/dist/{icon-button-BPa29txC.js.map → icon-button-Dr_-8Ey5.js.map} +1 -1
- package/dist/icons.cjs +1 -1
- package/dist/icons.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +35 -35
- package/dist/{input-B4miYmDK.cjs → input-BHgBONgn.cjs} +2 -2
- package/dist/{input-B4miYmDK.cjs.map → input-BHgBONgn.cjs.map} +1 -1
- package/dist/{input-DTJsOi9t.js → input-BgmQpY14.js} +2 -2
- package/dist/{input-DTJsOi9t.js.map → input-BgmQpY14.js.map} +1 -1
- package/dist/input-Bk7EZhOl.cjs +51 -0
- package/dist/input-Bk7EZhOl.cjs.map +1 -0
- package/dist/{input-CuvPPYVq.js → input-_XU4ILwo.js} +34 -34
- package/dist/input-_XU4ILwo.js.map +1 -0
- package/dist/input.cjs +1 -1
- package/dist/input.js +1 -1
- package/dist/layout.cjs +1 -1
- package/dist/layout.js +1 -1
- package/dist/{list-QiglVzPK.cjs → list-CCrSL1bZ.cjs} +2 -2
- package/dist/{list-QiglVzPK.cjs.map → list-CCrSL1bZ.cjs.map} +1 -1
- package/dist/{list-CWbygRrR.js → list-r6mo_zcT.js} +2 -2
- package/dist/{list-CWbygRrR.js.map → list-r6mo_zcT.js.map} +1 -1
- package/dist/list.cjs +1 -1
- package/dist/list.js +1 -1
- package/dist/{litElement.mixin-D_oDZMIO.cjs → litElement.mixin-CAXeI5RY.cjs} +2 -2
- package/dist/{litElement.mixin-D_oDZMIO.cjs.map → litElement.mixin-CAXeI5RY.cjs.map} +1 -1
- package/dist/{litElement.mixin-MZntPOCu.js → litElement.mixin-DfYInjJd.js} +2 -2
- package/dist/{litElement.mixin-MZntPOCu.js.map → litElement.mixin-DfYInjJd.js.map} +1 -1
- package/dist/{menu-Bn4JuaBS.cjs → menu-B6x8xZng.cjs} +2 -2
- package/dist/{menu-Bn4JuaBS.cjs.map → menu-B6x8xZng.cjs.map} +1 -1
- package/dist/{menu-iSx7aWwL.js → menu-yboJ8_V4.js} +3 -3
- package/dist/{menu-iSx7aWwL.js.map → menu-yboJ8_V4.js.map} +1 -1
- package/dist/menu.cjs +1 -1
- package/dist/menu.js +1 -1
- package/dist/nav-drawer.cjs +1 -1
- package/dist/nav-drawer.js +1 -1
- package/dist/notification.cjs +1 -1
- package/dist/notification.js +1 -1
- package/dist/{option-DMwxI7ML.js → option-CmZo8fXU.js} +2 -2
- package/dist/{option-DMwxI7ML.js.map → option-CmZo8fXU.js.map} +1 -1
- package/dist/{option-DBfFfXNm.cjs → option-gnBrhD_1.cjs} +2 -2
- package/dist/{option-DBfFfXNm.cjs.map → option-gnBrhD_1.cjs.map} +1 -1
- package/dist/option.cjs +1 -1
- package/dist/option.js +1 -1
- package/dist/{outlet-KhTjvKCU.js → outlet-BgJ_WOwi.js} +2 -2
- package/dist/{outlet-KhTjvKCU.js.map → outlet-BgJ_WOwi.js.map} +1 -1
- package/dist/{outlet-CEaS1zUl.cjs → outlet-CSduKjEi.cjs} +2 -2
- package/dist/{outlet-CEaS1zUl.cjs.map → outlet-CSduKjEi.cjs.map} +1 -1
- package/dist/{payment-card-form-CVZyDkcJ.cjs → payment-card-form-CVW9uWum.cjs} +2 -2
- package/dist/{payment-card-form-CVZyDkcJ.cjs.map → payment-card-form-CVW9uWum.cjs.map} +1 -1
- package/dist/{payment-card-form-DK86Lcng.js → payment-card-form-NUTic2b3.js} +3 -3
- package/dist/{payment-card-form-DK86Lcng.js.map → payment-card-form-NUTic2b3.js.map} +1 -1
- package/dist/{radio-group-DNmZuvSj.js → radio-group-Bl5nhDCh.js} +2 -2
- package/dist/{radio-group-DNmZuvSj.js.map → radio-group-Bl5nhDCh.js.map} +1 -1
- package/dist/{radio-group-CxJXNx54.cjs → radio-group-CTCnzxmZ.cjs} +2 -2
- package/dist/{radio-group-CxJXNx54.cjs.map → radio-group-CTCnzxmZ.cjs.map} +1 -1
- package/dist/radio-group.cjs +1 -1
- package/dist/radio-group.js +1 -1
- package/dist/{select-DRi9CB_N.js → select-C2TJxenH.js} +12 -12
- package/dist/select-C2TJxenH.js.map +1 -0
- package/dist/select-D3yrgnVD.cjs +56 -0
- package/dist/select-D3yrgnVD.cjs.map +1 -0
- package/dist/select.cjs +1 -1
- package/dist/select.js +1 -1
- package/dist/sheet-CwzonocJ.cjs +62 -0
- package/dist/sheet-CwzonocJ.cjs.map +1 -0
- package/dist/sheet-DHyy-OIH.js +244 -0
- package/dist/sheet-DHyy-OIH.js.map +1 -0
- package/dist/sheet.cjs +1 -1
- package/dist/sheet.js +1 -1
- package/dist/{slider-A_LoTZ1P.js → slider-2mhXBUIM.js} +3 -3
- package/dist/{slider-A_LoTZ1P.js.map → slider-2mhXBUIM.js.map} +1 -1
- package/dist/{slider-XRH0sXZN.cjs → slider-DCJHcXt1.cjs} +2 -2
- package/dist/{slider-XRH0sXZN.cjs.map → slider-DCJHcXt1.cjs.map} +1 -1
- package/dist/slider.cjs +1 -1
- package/dist/slider.js +1 -1
- package/dist/{spinner-D0l2eAK5.js → spinner-B9JHqmoP.js} +3 -3
- package/dist/{spinner-D0l2eAK5.js.map → spinner-B9JHqmoP.js.map} +1 -1
- package/dist/{spinner-CSsb6sKK.cjs → spinner-D-vtqMqq.cjs} +2 -2
- package/dist/{spinner-CSsb6sKK.cjs.map → spinner-D-vtqMqq.cjs.map} +1 -1
- package/dist/{surface-DEAdaZUh.cjs → surface-DLHFSFU6.cjs} +2 -2
- package/dist/{surface-DEAdaZUh.cjs.map → surface-DLHFSFU6.cjs.map} +1 -1
- package/dist/{surface-D5FgxeIB.js → surface-O_-YGi6T.js} +2 -2
- package/dist/{surface-D5FgxeIB.js.map → surface-O_-YGi6T.js.map} +1 -1
- package/dist/surface.cjs +1 -1
- package/dist/surface.js +1 -1
- package/dist/{table-DC86Vj6Z.js → table-Bvb_ZG7b.js} +2 -2
- package/dist/{table-DC86Vj6Z.js.map → table-Bvb_ZG7b.js.map} +1 -1
- package/dist/{table-Cygw_pIl.cjs → table-CdkLZM2b.cjs} +2 -2
- package/dist/{table-Cygw_pIl.cjs.map → table-CdkLZM2b.cjs.map} +1 -1
- package/dist/table.cjs +1 -1
- package/dist/table.js +1 -1
- package/dist/{tabs-group-BQomo5q3.cjs → tabs-group-B-KvImY2.cjs} +2 -2
- package/dist/{tabs-group-BQomo5q3.cjs.map → tabs-group-B-KvImY2.cjs.map} +1 -1
- package/dist/{tabs-group-7bz0I9uV.js → tabs-group-CVZ2SEq3.js} +2 -2
- package/dist/{tabs-group-7bz0I9uV.js.map → tabs-group-CVZ2SEq3.js.map} +1 -1
- package/dist/tabs.cjs +1 -1
- package/dist/tabs.js +1 -1
- package/dist/tailwind.mixin-BvhzMkqK.js +43 -0
- package/dist/{tailwind.mixin-B-T2bBPl.js.map → tailwind.mixin-BvhzMkqK.js.map} +1 -1
- package/dist/tailwind.mixin-csgxM8P_.cjs +2 -0
- package/dist/{tailwind.mixin-CduPdozY.cjs.map → tailwind.mixin-csgxM8P_.cjs.map} +1 -1
- package/dist/teleport.cjs +1 -1
- package/dist/{teleport.component-gFIqLOrA.js → teleport.component-BRm0yYbM.js} +37 -37
- package/dist/{teleport.component-gFIqLOrA.js.map → teleport.component-BRm0yYbM.js.map} +1 -1
- package/dist/{teleport.component-BMLwCM8y.cjs → teleport.component-D9xuyN_z.cjs} +2 -2
- package/dist/{teleport.component-BMLwCM8y.cjs.map → teleport.component-D9xuyN_z.cjs.map} +1 -1
- package/dist/teleport.js +1 -1
- package/dist/{textarea-CixoZTFB.cjs → textarea-BaTTXEtZ.cjs} +2 -2
- package/dist/{textarea-CixoZTFB.cjs.map → textarea-BaTTXEtZ.cjs.map} +1 -1
- package/dist/{textarea-1aeql05N.js → textarea-txN6-t64.js} +2 -2
- package/dist/{textarea-1aeql05N.js.map → textarea-txN6-t64.js.map} +1 -1
- package/dist/textarea.cjs +1 -1
- package/dist/textarea.js +1 -1
- package/dist/{theme-button-MRgILdtC.js → theme-button-C2oB9OCM.js} +2 -2
- package/dist/{theme-button-MRgILdtC.js.map → theme-button-C2oB9OCM.js.map} +1 -1
- package/dist/{theme-button-DocSoRxe.cjs → theme-button-qFLBZi0_.cjs} +2 -2
- package/dist/{theme-button-DocSoRxe.cjs.map → theme-button-qFLBZi0_.cjs.map} +1 -1
- package/dist/theme-button.cjs +1 -1
- package/dist/theme-button.js +1 -1
- package/dist/theme.cjs +1 -1
- package/dist/{theme.component-BgOdO6iM.cjs → theme.component-C-055F7V.cjs} +2 -2
- package/dist/{theme.component-BgOdO6iM.cjs.map → theme.component-C-055F7V.cjs.map} +1 -1
- package/dist/{theme.component-BFkhNT0D.js → theme.component-UVrnuMPb.js} +2 -2
- package/dist/{theme.component-BFkhNT0D.js.map → theme.component-UVrnuMPb.js.map} +1 -1
- package/dist/theme.js +1 -1
- package/dist/{timezone-CvOrPfno.cjs → timezone-CvS7opKc.cjs} +2 -2
- package/dist/{timezone-CvOrPfno.cjs.map → timezone-CvS7opKc.cjs.map} +1 -1
- package/dist/{timezone-BW6MC511.js → timezone-DUYp8qD3.js} +3 -3
- package/dist/{timezone-BW6MC511.js.map → timezone-DUYp8qD3.js.map} +1 -1
- package/dist/{tree-PSCsuzDT.js → tree-Cxgw_mi9.js} +2 -2
- package/dist/{tree-PSCsuzDT.js.map → tree-Cxgw_mi9.js.map} +1 -1
- package/dist/{tree-DysB6Y8C.cjs → tree-DYLlgF1F.cjs} +2 -2
- package/dist/{tree-DysB6Y8C.cjs.map → tree-DYLlgF1F.cjs.map} +1 -1
- package/dist/tree.cjs +1 -1
- package/dist/tree.js +1 -1
- package/dist/{typewriter-DmzUuxvZ.js → typewriter-DUdvh6VO.js} +4 -4
- package/dist/{typewriter-DmzUuxvZ.js.map → typewriter-DUdvh6VO.js.map} +1 -1
- package/dist/{typewriter-C8pWgRuU.cjs → typewriter-DoGLma1z.cjs} +2 -2
- package/dist/{typewriter-C8pWgRuU.cjs.map → typewriter-DoGLma1z.cjs.map} +1 -1
- package/dist/typewriter.cjs +1 -1
- package/dist/typewriter.js +1 -1
- package/dist/{typography-D486o2A3.js → typography-BnQJ5TWy.js} +2 -2
- package/dist/{typography-D486o2A3.js.map → typography-BnQJ5TWy.js.map} +1 -1
- package/dist/{typography-BfjWKELJ.cjs → typography-DFREXmBg.cjs} +2 -2
- package/dist/{typography-BfjWKELJ.cjs.map → typography-DFREXmBg.cjs.map} +1 -1
- package/dist/typography.cjs +1 -1
- package/dist/typography.js +1 -1
- package/dist/v2.cjs +1 -1
- package/dist/v2.js +1 -1
- package/package.json +1 -1
- package/types/src/select/select.d.ts +1 -0
- package/types/src/sheet/header.d.ts +0 -1
- package/types/src/sheet/sheet.d.ts +120 -1
- package/dist/input-CuvPPYVq.js.map +0 -1
- package/dist/input-DibJxeWY.cjs +0 -51
- package/dist/input-DibJxeWY.cjs.map +0 -1
- package/dist/select-DRi9CB_N.js.map +0 -1
- package/dist/select-SQOIioEy.cjs +0 -56
- package/dist/select-SQOIioEy.cjs.map +0 -1
- package/dist/sheet-BJGyAQko.js +0 -182
- package/dist/sheet-BJGyAQko.js.map +0 -1
- package/dist/sheet-QIcFyBDD.cjs +0 -43
- package/dist/sheet-QIcFyBDD.cjs.map +0 -1
- package/dist/tailwind.mixin-B-T2bBPl.js +0 -43
- package/dist/tailwind.mixin-CduPdozY.cjs +0 -2
|
@@ -1,30 +1,149 @@
|
|
|
1
1
|
import { SchmancySheetPosition } from './sheet.service';
|
|
2
2
|
declare const SchmancySheet_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
|
|
3
|
+
/**
|
|
4
|
+
* `<schmancy-sheet>` component
|
|
5
|
+
*
|
|
6
|
+
* A modal sheet component that can be positioned at the bottom or side of the viewport.
|
|
7
|
+
* Supports customizable animations, focus management, and accessibility features.
|
|
8
|
+
*
|
|
9
|
+
* @element schmancy-sheet
|
|
10
|
+
* @fires before-close - Fired before the sheet begins closing (cancelable)
|
|
11
|
+
* @fires close - Fired when the sheet has closed
|
|
12
|
+
* @fires open - Fired when the sheet has opened
|
|
13
|
+
*/
|
|
3
14
|
export default class SchmancySheet extends SchmancySheet_base {
|
|
15
|
+
/** Unique identifier for the sheet */
|
|
4
16
|
uid: string;
|
|
17
|
+
/** Controls whether the sheet is open or closed */
|
|
5
18
|
open: boolean;
|
|
19
|
+
/** Controls visibility of the header section */
|
|
6
20
|
header: 'hidden' | 'visible';
|
|
21
|
+
/** Position of the sheet */
|
|
7
22
|
position: SchmancySheetPosition;
|
|
23
|
+
/** Whether the sheet persists after closing */
|
|
8
24
|
persist: boolean;
|
|
25
|
+
/** Whether clicking the overlay dismisses the sheet */
|
|
9
26
|
allowOverlayDismiss: boolean;
|
|
27
|
+
/** Prevents closing by backdrop click, even if allowOverlayDismiss is true */
|
|
28
|
+
preventBackdropClick: boolean;
|
|
29
|
+
/** Title displayed in the header */
|
|
10
30
|
title: string;
|
|
31
|
+
/** Accessible label for the sheet (for screen readers) */
|
|
32
|
+
ariaLabel: string;
|
|
33
|
+
/** ARIA describedby attribute value */
|
|
34
|
+
ariaDescribedBy?: string;
|
|
35
|
+
/** Custom selector to specify which element receives focus when opened */
|
|
36
|
+
initialFocusSelector?: string;
|
|
37
|
+
/** Animation duration in milliseconds */
|
|
38
|
+
animationDuration: number;
|
|
39
|
+
/** Animation easing function */
|
|
40
|
+
animationEasing: string;
|
|
41
|
+
/** Attribute to specify which element should receive focus when the sheet opens */
|
|
42
|
+
focusAttribute: string;
|
|
43
|
+
/** Ref to the sheet container */
|
|
11
44
|
private sheet;
|
|
45
|
+
/** Ref to the sheet body */
|
|
46
|
+
bodyElement: HTMLElement;
|
|
47
|
+
/** Collection of assigned elements */
|
|
12
48
|
private assignedElements;
|
|
13
|
-
|
|
49
|
+
/** Tracks the element that had focus before the sheet opened */
|
|
14
50
|
private lastFocusedElement;
|
|
51
|
+
/** For touch interactions */
|
|
52
|
+
private startY;
|
|
53
|
+
private currentY;
|
|
54
|
+
/** ResizeObserver instance */
|
|
55
|
+
private resizeObserver;
|
|
56
|
+
/**
|
|
57
|
+
* Lifecycle callback for when the 'open' property changes
|
|
58
|
+
*/
|
|
15
59
|
onOpenChange(_oldValue: boolean, newValue: boolean): void;
|
|
60
|
+
/**
|
|
61
|
+
* Component connected to DOM
|
|
62
|
+
*/
|
|
16
63
|
connectedCallback(): void;
|
|
64
|
+
/**
|
|
65
|
+
* First update lifecycle callback
|
|
66
|
+
*/
|
|
67
|
+
firstUpdated(): void;
|
|
68
|
+
/**
|
|
69
|
+
* Component updated lifecycle callback
|
|
70
|
+
*/
|
|
71
|
+
updated(changedProps: Map<string, unknown>): void;
|
|
72
|
+
/**
|
|
73
|
+
* Component disconnected from DOM
|
|
74
|
+
*/
|
|
17
75
|
disconnectedCallback(): void;
|
|
76
|
+
/**
|
|
77
|
+
* Updates CSS custom properties
|
|
78
|
+
*/
|
|
79
|
+
private updateCssVariables;
|
|
80
|
+
/**
|
|
81
|
+
* Sets up event listeners
|
|
82
|
+
*/
|
|
18
83
|
private setupEventListeners;
|
|
84
|
+
/**
|
|
85
|
+
* Check if focus is within the sheet
|
|
86
|
+
*/
|
|
19
87
|
private sheetContainsFocus;
|
|
88
|
+
/**
|
|
89
|
+
* Announce presence to the sheet service
|
|
90
|
+
*/
|
|
20
91
|
private announcePresence;
|
|
92
|
+
/**
|
|
93
|
+
* Add focus trap to keep focus within sheet when open
|
|
94
|
+
*/
|
|
21
95
|
private addFocusTrap;
|
|
96
|
+
/**
|
|
97
|
+
* Remove focus trap
|
|
98
|
+
*/
|
|
22
99
|
private removeFocusTrap;
|
|
100
|
+
/**
|
|
101
|
+
* Handle focus events to trap focus
|
|
102
|
+
*/
|
|
23
103
|
private handleFocusIn;
|
|
104
|
+
/**
|
|
105
|
+
* Handle scroll events
|
|
106
|
+
*/
|
|
107
|
+
private handleScroll;
|
|
108
|
+
/**
|
|
109
|
+
* Updates the aria-hidden and aria-modal attributes
|
|
110
|
+
*/
|
|
24
111
|
setIsSheetShown(isShown: boolean): void;
|
|
112
|
+
/**
|
|
113
|
+
* Closes the sheet
|
|
114
|
+
*/
|
|
25
115
|
closeSheet(): void;
|
|
116
|
+
/**
|
|
117
|
+
* Update dimensions based on viewport
|
|
118
|
+
*/
|
|
119
|
+
private updateSheetDimensions;
|
|
120
|
+
/**
|
|
121
|
+
* Find the element that should receive focus
|
|
122
|
+
*/
|
|
26
123
|
private getFocusElement;
|
|
124
|
+
/**
|
|
125
|
+
* Set focus within the sheet
|
|
126
|
+
*/
|
|
27
127
|
focus(): void;
|
|
128
|
+
/**
|
|
129
|
+
* Fire events with consistent format
|
|
130
|
+
*/
|
|
131
|
+
private fireEvent;
|
|
132
|
+
/**
|
|
133
|
+
* Handle touch start for swipe gesture
|
|
134
|
+
*/
|
|
135
|
+
private handleTouchStart;
|
|
136
|
+
/**
|
|
137
|
+
* Handle touch move for swipe gesture
|
|
138
|
+
*/
|
|
139
|
+
private handleTouchMove;
|
|
140
|
+
/**
|
|
141
|
+
* Handle touch end for swipe gesture
|
|
142
|
+
*/
|
|
143
|
+
private handleTouchEnd;
|
|
144
|
+
/**
|
|
145
|
+
* Render the component
|
|
146
|
+
*/
|
|
28
147
|
render(): import("lit-html").TemplateResult<1>;
|
|
29
148
|
}
|
|
30
149
|
declare global {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input-CuvPPYVq.js","sources":["../src/input/input.ts"],"sourcesContent":["import { html, LitElement, nothing, PropertyValueMap } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { when } from 'lit/directives/when.js'\nimport { distinctUntilChanged, filter, fromEvent, map, takeUntil } from 'rxjs'\n\nimport { TailwindElement } from '@mixins/index'\n\n// color directive + theme interface\nimport { color } from '@schmancy/directives'\nimport { SchmancyTheme } from '@schmancy/theme/theme.interface'\nimport style from './input.scss?inline'\n// If you want to be form-associated, define the type on `ElementInternals`.\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-input': SchmancyInput\n\t}\n}\n\ntype EventDetails = {\n\tvalue: string\n}\n\n/**\n * Custom events the component may emit:\n * - 'input': on every keystroke\n * - 'change': on native blur/change\n * - 'enter': specifically when user presses Enter\n */\nexport type SchmancyInputInputEvent = CustomEvent<EventDetails>\nexport type SchmancyInputChangeEvent = CustomEvent<EventDetails>\nexport type SchmancyInputEnterEvent = CustomEvent<EventDetails>\n\n@customElement('schmancy-input')\nexport default class SchmancyInput extends TailwindElement(style) {\n\t// ----------------------------\n\t// A) Public properties\n\t// ----------------------------\n\n\t/** If user does NOT set `id`, we'll autogenerate one. */\n\tstatic _idCounter = 0\n\n\t@property({ reflect: true })\n\tpublic override id = ''\n\n\t/**\n\t * The label for the control. If populated, we render a `<label for=\"...\">`.\n\t * If empty, we add an `aria-label` to the <input> for better screenreader support.\n\t */\n\t@property({ type: String }) label = ''\n\n\t/**\n\t * The type of input. (e.g. 'text', 'password', 'email', etc.)\n\t */\n\t@property({ reflect: true })\n\tpublic type: HTMLInputElement['type'] = 'text'\n\n\t/**\n\t * Name attribute (for form submissions). By default, a unique fallback.\n\t */\n\t@property()\n\tpublic name = `name_${Date.now()}`\n\n\t@property()\n\tpublic placeholder = ''\n\n\t/** Current value of the input. */\n\t@property({ type: String, reflect: true })\n\tpublic value = ''\n\n\t/** Pattern validation attribute. */\n\t@property({ type: String, reflect: true })\n\tpublic pattern?: string\n\n\t/** Whether the control is required for form validation. */\n\t@property({ type: Boolean, reflect: true })\n\tpublic required = false\n\n\t/** Whether the control is disabled. */\n\t@property({ type: Boolean, reflect: true })\n\tpublic disabled = false\n\n\t/** Whether the input is read-only. */\n\t@property({ type: Boolean, reflect: true })\n\tpublic readonly = false\n\n\t/** If true, we visually show a pointer cursor even if readOnly. */\n\t@property({ type: Boolean, reflect: true }) public clickable = false\n\n\t/** Whether browser spellcheck is enabled. */\n\t@property({ type: Boolean, reflect: true })\n\tpublic spellcheck = false\n\n\t/**\n\t * Text alignment within the input.\n\t * - 'left' | 'center' | 'right'\n\t */\n\t@property({ type: String, reflect: true })\n\tpublic align: 'left' | 'center' | 'right' = 'left'\n\n\t/** inputmode attribute (affects on-screen keyboards in mobile). */\n\t@property()\n\tpublic inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'\n\n\t@property({ type: Number })\n\tpublic minlength?: number\n\n\t@property({ type: Number })\n\tpublic maxlength?: number\n\n\t@property()\n\tpublic min?: string\n\n\t@property()\n\tpublic max?: string\n\n\t@property({ type: Number, reflect: true })\n\tpublic step?: number\n\n\t/** If true, auto-focus this input on first render. */\n\t@property({ type: Boolean })\n\tpublic autofocus = false\n\n\t/** Autocomplete/autofill hints. */\n\t@property({ type: String, reflect: true })\n\tpublic autocomplete: AutoFill = 'on'\n\n\t/**\n\t * tabIndex for focusing by tab key. Typically 0 or -1.\n\t */\n\t@property({ type: Number, reflect: true })\n\tpublic tabIndex = 0\n\n\t/**\n\t * A small hint text or error message to display under the input.\n\t */\n\t@property()\n\tpublic hint?: string\n\n\t/**\n\t * If true, we style the input as an error state, and possibly display\n\t * the hint as an error message.\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tpublic error = false\n\n\t// ----------------------------\n\t// B) Queries & Refs\n\t// ----------------------------\n\t@query('input') private inputElement!: HTMLInputElement\n\tprivate inputRef = createRef<HTMLInputElement>()\n\n\t// ----------------------------\n\t// C) Form-associated logic\n\t// ----------------------------\n\tstatic formAssociated = true\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true, // so focus() goes to <input>\n\t}\n\n\tprivate internals?: ElementInternals\n\n\tconstructor() {\n\t\tsuper()\n\t\tif ('attachInternals' in this) {\n\t\t\ttry {\n\t\t\t\tthis.internals = this.attachInternals()\n\t\t\t} catch {\n\t\t\t\t// no-op for older browsers / polyfills\n\t\t\t\tthis.internals = undefined\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * If user did not provide an ID, auto-generate one so <label for=\"...\">\n\t * and various aria-* attributes can reference it.\n\t */\n\tprotected override willUpdate(changedProps: PropertyValueMap<any> | Map<PropertyKey, unknown>) {\n\t\tif (!this.id) {\n\t\t\tthis.id = `schmancy-input-${SchmancyInput._idCounter++}`\n\t\t}\n\t\tsuper.willUpdate(changedProps)\n\t}\n\n\t/** The form this element is associated with, if any. */\n\tget form() {\n\t\treturn this.internals?.form ?? null\n\t}\n\n\tprotected override updated(changedProps: Map<string, unknown>) {\n\t\tsuper.updated(changedProps)\n\t\tif (changedProps.has('value')) {\n\t\t\t// Reflect the current value to the form internals, so it’s submitted.\n\t\t\tthis.internals?.setFormValue(this.value)\n\t\t}\n\n\t\tif (changedProps.has('error')) {\n\t\t\t// If we have an error state, we can set custom error validity, or none if resolved.\n\t\t\tif (this.error) {\n\t\t\t\tthis.internals?.setValidity({ customError: true }, 'Invalid input', this.inputElement)\n\t\t\t} else {\n\t\t\t\tthis.internals?.setValidity({})\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Native form methods:\n\t * - checkValidity()\n\t * - reportValidity()\n\t * - setCustomValidity()\n\t */\n\tpublic checkValidity() {\n\t\treturn this.inputRef.value?.checkValidity() ?? true\n\t}\n\tpublic reportValidity() {\n\t\treturn this.inputRef.value?.reportValidity() ?? true\n\t}\n\tpublic setCustomValidity(message: string) {\n\t\tthis.inputRef.value?.setCustomValidity(message)\n\t}\n\n\t// ----------------------------\n\t// D) Lifecycle Hooks\n\t// ----------------------------\n\tfirstUpdated() {\n\t\t// Autofocus if desired\n\t\tif (this.autofocus) {\n\t\t\tthis.focus()\n\t\t}\n\n\t\t// 1) Subscribe to 'input' events (every keystroke)\n\t\tfromEvent<InputEvent>(this.inputElement, 'input')\n\t\t\t.pipe(\n\t\t\t\tmap(ev => (ev.target as HTMLInputElement).value),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(value => {\n\t\t\t\tthis.value = value\n\t\t\t\t// Fire custom 'input' event with details\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('input', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t\t// dispatch change event\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('change', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t})\n\n\t\t// 2) Subscribe to 'change' events (native behavior, usually on blur)\n\t\tfromEvent<Event>(this.inputElement, 'change')\n\t\t\t.pipe(\n\t\t\t\tmap(ev => (ev.target as HTMLInputElement).value),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(value => {\n\t\t\t\tthis.value = value\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('change', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t})\n\n\t\t// 3) Emit a custom 'enter' event when user presses Enter\n\t\tfromEvent<KeyboardEvent>(this.inputElement, 'keyup')\n\t\t\t.pipe(\n\t\t\t\tfilter(ev => ev.key === 'Enter'),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(ev => {\n\t\t\t\tconst { value } = ev.target as HTMLInputElement\n\t\t\t\tthis.value = value\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('enter', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t})\n\n\t\t// 4) Detect autofill animation (Chrome, etc.)\n\t\tfromEvent<AnimationEvent>(this.inputElement, 'animationstart')\n\t\t\t.pipe(\n\t\t\t\tfilter(ev => ev.animationName === 'onAutoFillStart'),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(ev => {\n\t\t\t\tconst { value } = ev.target as HTMLInputElement\n\t\t\t\tthis.value = value\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('change', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t})\n\t}\n\n\t// ----------------------------\n\t// E) Utility Methods\n\t// ----------------------------\n\t/** Selects all text within the input. */\n\tpublic select() {\n\t\treturn this.inputRef.value?.select()\n\t}\n\n\t/** Returns the native validity state of the inner <input>. */\n\tpublic getValidity(): ValidityState | undefined {\n\t\treturn this.inputRef.value?.validity\n\t}\n\n\t/**\n\t * Override to forward focus to the internal <input>.\n\t * Also dispatch a 'focus' event for external listeners.\n\t */\n\tpublic override focus(options?: FocusOptions) {\n\t\tthis.inputRef.value?.focus(options)\n\t\tthis.dispatchEvent(new Event('focus'))\n\t}\n\n\t/**\n\t * Override to forward clicks to the internal <input>.\n\t * Also dispatch a 'click' event for external listeners.\n\t */\n\tpublic override click() {\n\t\tthis.inputRef.value?.click()\n\t\tthis.dispatchEvent(new Event('click'))\n\t}\n\n\t/** Forward blur to the internal <input>. */\n\tpublic override blur() {\n\t\tthis.inputRef.value?.blur()\n\t\tthis.dispatchEvent(new Event('blur'))\n\t}\n\n\t// ----------------------------\n\t// F) Rendering\n\t// ----------------------------\n\tprotected override render() {\n\t\tconst inputClasses = {\n\t\t\t'w-full flex-1 h-[50px] rounded-[8px] border-0 px-[8px] sm:px-[12px] md:px-[16px]': true,\n\t\t\t'outline-secondary-default focus:outline-1 ': true,\n\t\t\t'disabled:opacity-40 disabled:cursor-not-allowed': true,\n\t\t\t'placeholder:text-muted': true,\n\t\t\t'ring-0 ring-inset focus:ring-1 focus:ring-inset': true,\n\t\t\t// If not in error state, use standard ring color:\n\t\t\t'ring-secondary-default ring-outline focus:ring-secondary-default': !this.error,\n\t\t\t// Error ring override:\n\t\t\t'ring-error-default focus:ring-error-default': this.error,\n\t\t\t// If read-only but \"clickable\" is true, show pointer. Otherwise normal text cursor.\n\t\t\t'caret-transparent focus:outline-hidden cursor-pointer text-select-none': this.readonly,\n\t\t\t'cursor-pointer': this.clickable,\n\t\t\t// Alignment classes:\n\t\t\t'text-center': this.align === 'center',\n\t\t\t'text-right': this.align === 'right',\n\t\t}\n\n\t\tconst labelClasses = {\n\t\t\t'opacity-40': this.disabled,\n\t\t\t'block mb-[4px]': true,\n\t\t}\n\n\t\t/**\n\t\t * - If `this.label` is present, we render a proper `<label for=\"${this.id}\">`.\n\t\t * - If not, we add an aria-label to the <input> for better accessibility.\n\t\t * - If there's a `hint`, we reference it via aria-describedby.\n\t\t * - If there's an error, we set aria-invalid and could set aria-errormessage.\n\t\t */\n\t\treturn html`\n\t\t\t${when(\n\t\t\t\tthis.label,\n\t\t\t\t() => html`\n\t\t\t\t\t<label\n\t\t\t\t\t\tfor=${this.id}\n\t\t\t\t\t\tid=\"label-${this.id}\"\n\t\t\t\t\t\tclass=${classMap(labelClasses)}\n\t\t\t\t\t\t${color({\n\t\t\t\t\t\t\tcolor: this.error ? SchmancyTheme.sys.color.error.default : SchmancyTheme.sys.color.primary.default,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t<schmancy-typography type=\"label\" token=\"lg\">${this.label}</schmancy-typography>\n\t\t\t\t\t</label>\n\t\t\t\t`,\n\t\t\t)}\n\n\t\t\t<input\n\t\t\t\t${color({\n\t\t\t\t\tbgColor: SchmancyTheme.sys.color.surface.highest,\n\t\t\t\t\tcolor: SchmancyTheme.sys.color.surface.on,\n\t\t\t\t})}\n\t\t\t\t${ref(this.inputRef)}\n\t\t\t\tid=${this.id}\n\t\t\t\tname=${this.name}\n\t\t\t\tclass=${classMap(inputClasses)}\n\t\t\t\t.value=${this.value}\n\t\t\t\t.type=${this.type}\n\t\t\t\t.autocomplete=${this.autocomplete}\n\t\t\t\t.spellcheck=${this.spellcheck}\n\t\t\t\tplaceholder=${this.placeholder}\n\t\t\t\tinputmode=${ifDefined(this.inputmode)}\n\t\t\t\tpattern=${ifDefined(this.pattern)}\n\t\t\t\tstep=${ifDefined(this.step)}\n\t\t\t\tminlength=${ifDefined(this.minlength)}\n\t\t\t\tmaxlength=${ifDefined(this.maxlength)}\n\t\t\t\tmin=${ifDefined(this.min)}\n\t\t\t\tmax=${ifDefined(this.max)}\n\t\t\t\t?required=${this.required}\n\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t?readonly=${this.readonly}\n\t\t\t\taria-invalid=${this.error ? 'true' : 'false'}\n\t\t\t\taria-required=${this.required ? 'true' : 'false'}\n\t\t\t\taria-labelledby=${this.label ? `label-${this.id}` : nothing}\n\t\t\t\taria-describedby=${this.hint ? `hint-${this.id}` : nothing}\n\t\t\t\taria-label=${ifDefined(!this.label ? this.placeholder || 'Input' : undefined)}\n\t\t\t/>\n\n\t\t\t${when(\n\t\t\t\tthis.hint,\n\t\t\t\t() => html`\n\t\t\t\t\t<div\n\t\t\t\t\t\tid=\"hint-${this.id}\"\n\t\t\t\t\t\tclass=\"pt-[2px]\"\n\t\t\t\t\t\t${color({\n\t\t\t\t\t\t\tcolor: this.error ? SchmancyTheme.sys.color.error.default : SchmancyTheme.sys.color.primary.default,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t<schmancy-typography align=\"left\" type=\"label\"> ${this.hint} </schmancy-typography>\n\t\t\t\t\t</div>\n\t\t\t\t`,\n\t\t\t)}\n\t\t`\n\t}\n}\n"],"names":["SchmancyInput","TailwindElement","super","this","id","label","type","name","Date","now","placeholder","value","required","disabled","readonly","clickable","spellcheck","align","autofocus","autocomplete","tabIndex","error","inputRef","createRef","internals","attachInternals","changedProps","_idCounter","willUpdate","form","updated","has","setFormValue","setValidity","customError","inputElement","checkValidity","reportValidity","message","setCustomValidity","focus","fromEvent","pipe","map","ev","target","distinctUntilChanged","takeUntil","disconnecting","subscribe","dispatchEvent","CustomEvent","detail","bubbles","composed","filter","key","animationName","select","getValidity","validity","options","Event","click","blur","inputClasses","labelClasses","html","when","classMap","color","SchmancyTheme","sys","default","primary","bgColor","surface","highest","on","ref","ifDefined","inputmode","pattern","step","minlength","maxlength","min","max","nothing","hint","formAssociated","shadowRootOptions","LitElement","delegatesFocus","__decorateClass","property","reflect","prototype","String","Boolean","Number","query","customElement"],"mappings":"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"}
|
package/dist/input-DibJxeWY.cjs
DELETED
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
"use strict";const u=require("lit"),i=require("lit/decorators.js"),m=require("lit/directives/class-map.js"),s=require("lit/directives/if-defined.js"),f=require("lit/directives/ref.js"),b=require("lit/directives/when.js"),o=require("rxjs");require("lit/directives/style-map.js");const g=require("./tailwind.mixin-CduPdozY.cjs"),y=require("./color-D8r6dpWm.cjs");require("./ripple-B_wT0zgD.cjs");const h=require("./theme.interface-Xg5Zi46a.cjs");var v=Object.defineProperty,$=Object.getOwnPropertyDescriptor,r=(t,n,p,a)=>{for(var c,l=a>1?void 0:a?$(n,p):n,d=t.length-1;d>=0;d--)(c=t[d])&&(l=(a?c(n,p,l):c(l))||l);return a&&l&&v(n,p,l),l};let e=class extends g.TailwindElement(":host{border:unset!important;line-height:unset!important;background:unset!important;padding:unset!important;font-size:unset!important;box-shadow:unset!important;width:-webkit-fill-available}:host:focus{box-shadow:unset!important}input:focus-visible{outline:none!important}input{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:inherit;text-indent:inherit;text-shadow:inherit;text-overflow:inherit;text-rendering:inherit;text-size-adjust:inherit;text-align-last:inherit}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}@keyframes onAutoFillStart{}input:-webkit-autofill{animation-name:onAutoFillStart}"){constructor(){if(super(),this.id="",this.label="",this.type="text",this.name=`name_${Date.now()}`,this.placeholder="",this.value="",this.required=!1,this.disabled=!1,this.readonly=!1,this.clickable=!1,this.spellcheck=!1,this.align="left",this.autofocus=!1,this.autocomplete="on",this.tabIndex=0,this.error=!1,this.inputRef=f.createRef(),"attachInternals"in this)try{this.internals=this.attachInternals()}catch{this.internals=void 0}}willUpdate(t){this.id||(this.id="schmancy-input-"+e._idCounter++),super.willUpdate(t)}get form(){var t;return((t=this.internals)==null?void 0:t.form)??null}updated(t){var n,p,a;super.updated(t),t.has("value")&&((n=this.internals)==null||n.setFormValue(this.value)),t.has("error")&&(this.error?(p=this.internals)==null||p.setValidity({customError:!0},"Invalid input",this.inputElement):(a=this.internals)==null||a.setValidity({}))}checkValidity(){var t;return((t=this.inputRef.value)==null?void 0:t.checkValidity())??!0}reportValidity(){var t;return((t=this.inputRef.value)==null?void 0:t.reportValidity())??!0}setCustomValidity(t){var n;(n=this.inputRef.value)==null||n.setCustomValidity(t)}firstUpdated(){this.autofocus&&this.focus(),o.fromEvent(this.inputElement,"input").pipe(o.map(t=>t.target.value),o.distinctUntilChanged(),o.takeUntil(this.disconnecting)).subscribe(t=>{this.value=t,this.dispatchEvent(new CustomEvent("input",{detail:{value:t},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{value:t},bubbles:!0,composed:!0}))}),o.fromEvent(this.inputElement,"change").pipe(o.map(t=>t.target.value),o.distinctUntilChanged(),o.takeUntil(this.disconnecting)).subscribe(t=>{this.value=t,this.dispatchEvent(new CustomEvent("change",{detail:{value:t},bubbles:!0,composed:!0}))}),o.fromEvent(this.inputElement,"keyup").pipe(o.filter(t=>t.key==="Enter"),o.takeUntil(this.disconnecting)).subscribe(t=>{const{value:n}=t.target;this.value=n,this.dispatchEvent(new CustomEvent("enter",{detail:{value:n},bubbles:!0,composed:!0}))}),o.fromEvent(this.inputElement,"animationstart").pipe(o.filter(t=>t.animationName==="onAutoFillStart"),o.takeUntil(this.disconnecting)).subscribe(t=>{const{value:n}=t.target;this.value=n,this.dispatchEvent(new CustomEvent("change",{detail:{value:n},bubbles:!0,composed:!0}))})}select(){var t;return(t=this.inputRef.value)==null?void 0:t.select()}getValidity(){var t;return(t=this.inputRef.value)==null?void 0:t.validity}focus(t){var n;(n=this.inputRef.value)==null||n.focus(t),this.dispatchEvent(new Event("focus"))}click(){var t;(t=this.inputRef.value)==null||t.click(),this.dispatchEvent(new Event("click"))}blur(){var t;(t=this.inputRef.value)==null||t.blur(),this.dispatchEvent(new Event("blur"))}render(){const t={"w-full flex-1 h-[50px] rounded-[8px] border-0 px-[8px] sm:px-[12px] md:px-[16px]":!0,"outline-secondary-default focus:outline-1 ":!0,"disabled:opacity-40 disabled:cursor-not-allowed":!0,"placeholder:text-muted":!0,"ring-0 ring-inset focus:ring-1 focus:ring-inset":!0,"ring-secondary-default ring-outline focus:ring-secondary-default":!this.error,"ring-error-default focus:ring-error-default":this.error,"caret-transparent focus:outline-hidden cursor-pointer text-select-none":this.readonly,"cursor-pointer":this.clickable,"text-center":this.align==="center","text-right":this.align==="right"},n={"opacity-40":this.disabled,"block mb-[4px]":!0};return u.html`
|
|
2
|
-
${b.when(this.label,()=>u.html`
|
|
3
|
-
<label
|
|
4
|
-
for=${this.id}
|
|
5
|
-
id="label-${this.id}"
|
|
6
|
-
class=${m.classMap(n)}
|
|
7
|
-
${y.color({color:this.error?h.SchmancyTheme.sys.color.error.default:h.SchmancyTheme.sys.color.primary.default})}
|
|
8
|
-
>
|
|
9
|
-
<schmancy-typography type="label" token="lg">${this.label}</schmancy-typography>
|
|
10
|
-
</label>
|
|
11
|
-
`)}
|
|
12
|
-
|
|
13
|
-
<input
|
|
14
|
-
${y.color({bgColor:h.SchmancyTheme.sys.color.surface.highest,color:h.SchmancyTheme.sys.color.surface.on})}
|
|
15
|
-
${f.ref(this.inputRef)}
|
|
16
|
-
id=${this.id}
|
|
17
|
-
name=${this.name}
|
|
18
|
-
class=${m.classMap(t)}
|
|
19
|
-
.value=${this.value}
|
|
20
|
-
.type=${this.type}
|
|
21
|
-
.autocomplete=${this.autocomplete}
|
|
22
|
-
.spellcheck=${this.spellcheck}
|
|
23
|
-
placeholder=${this.placeholder}
|
|
24
|
-
inputmode=${s.ifDefined(this.inputmode)}
|
|
25
|
-
pattern=${s.ifDefined(this.pattern)}
|
|
26
|
-
step=${s.ifDefined(this.step)}
|
|
27
|
-
minlength=${s.ifDefined(this.minlength)}
|
|
28
|
-
maxlength=${s.ifDefined(this.maxlength)}
|
|
29
|
-
min=${s.ifDefined(this.min)}
|
|
30
|
-
max=${s.ifDefined(this.max)}
|
|
31
|
-
?required=${this.required}
|
|
32
|
-
?disabled=${this.disabled}
|
|
33
|
-
?readonly=${this.readonly}
|
|
34
|
-
aria-invalid=${this.error?"true":"false"}
|
|
35
|
-
aria-required=${this.required?"true":"false"}
|
|
36
|
-
aria-labelledby=${this.label?`label-${this.id}`:u.nothing}
|
|
37
|
-
aria-describedby=${this.hint?`hint-${this.id}`:u.nothing}
|
|
38
|
-
aria-label=${s.ifDefined(this.label?void 0:this.placeholder||"Input")}
|
|
39
|
-
/>
|
|
40
|
-
|
|
41
|
-
${b.when(this.hint,()=>u.html`
|
|
42
|
-
<div
|
|
43
|
-
id="hint-${this.id}"
|
|
44
|
-
class="pt-[2px]"
|
|
45
|
-
${y.color({color:this.error?h.SchmancyTheme.sys.color.error.default:h.SchmancyTheme.sys.color.primary.default})}
|
|
46
|
-
>
|
|
47
|
-
<schmancy-typography align="left" type="label"> ${this.hint} </schmancy-typography>
|
|
48
|
-
</div>
|
|
49
|
-
`)}
|
|
50
|
-
`}};e._idCounter=0,e.formAssociated=!0,e.shadowRootOptions={...u.LitElement.shadowRootOptions,delegatesFocus:!0},r([i.property({reflect:!0})],e.prototype,"id",2),r([i.property({type:String})],e.prototype,"label",2),r([i.property({reflect:!0})],e.prototype,"type",2),r([i.property()],e.prototype,"name",2),r([i.property()],e.prototype,"placeholder",2),r([i.property({type:String,reflect:!0})],e.prototype,"value",2),r([i.property({type:String,reflect:!0})],e.prototype,"pattern",2),r([i.property({type:Boolean,reflect:!0})],e.prototype,"required",2),r([i.property({type:Boolean,reflect:!0})],e.prototype,"disabled",2),r([i.property({type:Boolean,reflect:!0})],e.prototype,"readonly",2),r([i.property({type:Boolean,reflect:!0})],e.prototype,"clickable",2),r([i.property({type:Boolean,reflect:!0})],e.prototype,"spellcheck",2),r([i.property({type:String,reflect:!0})],e.prototype,"align",2),r([i.property()],e.prototype,"inputmode",2),r([i.property({type:Number})],e.prototype,"minlength",2),r([i.property({type:Number})],e.prototype,"maxlength",2),r([i.property()],e.prototype,"min",2),r([i.property()],e.prototype,"max",2),r([i.property({type:Number,reflect:!0})],e.prototype,"step",2),r([i.property({type:Boolean})],e.prototype,"autofocus",2),r([i.property({type:String,reflect:!0})],e.prototype,"autocomplete",2),r([i.property({type:Number,reflect:!0})],e.prototype,"tabIndex",2),r([i.property()],e.prototype,"hint",2),r([i.property({type:Boolean,reflect:!0})],e.prototype,"error",2),r([i.query("input")],e.prototype,"inputElement",2),e=r([i.customElement("schmancy-input")],e);
|
|
51
|
-
//# sourceMappingURL=input-DibJxeWY.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input-DibJxeWY.cjs","sources":["../src/input/input.ts"],"sourcesContent":["import { html, LitElement, nothing, PropertyValueMap } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { when } from 'lit/directives/when.js'\nimport { distinctUntilChanged, filter, fromEvent, map, takeUntil } from 'rxjs'\n\nimport { TailwindElement } from '@mixins/index'\n\n// color directive + theme interface\nimport { color } from '@schmancy/directives'\nimport { SchmancyTheme } from '@schmancy/theme/theme.interface'\nimport style from './input.scss?inline'\n// If you want to be form-associated, define the type on `ElementInternals`.\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-input': SchmancyInput\n\t}\n}\n\ntype EventDetails = {\n\tvalue: string\n}\n\n/**\n * Custom events the component may emit:\n * - 'input': on every keystroke\n * - 'change': on native blur/change\n * - 'enter': specifically when user presses Enter\n */\nexport type SchmancyInputInputEvent = CustomEvent<EventDetails>\nexport type SchmancyInputChangeEvent = CustomEvent<EventDetails>\nexport type SchmancyInputEnterEvent = CustomEvent<EventDetails>\n\n@customElement('schmancy-input')\nexport default class SchmancyInput extends TailwindElement(style) {\n\t// ----------------------------\n\t// A) Public properties\n\t// ----------------------------\n\n\t/** If user does NOT set `id`, we'll autogenerate one. */\n\tstatic _idCounter = 0\n\n\t@property({ reflect: true })\n\tpublic override id = ''\n\n\t/**\n\t * The label for the control. If populated, we render a `<label for=\"...\">`.\n\t * If empty, we add an `aria-label` to the <input> for better screenreader support.\n\t */\n\t@property({ type: String }) label = ''\n\n\t/**\n\t * The type of input. (e.g. 'text', 'password', 'email', etc.)\n\t */\n\t@property({ reflect: true })\n\tpublic type: HTMLInputElement['type'] = 'text'\n\n\t/**\n\t * Name attribute (for form submissions). By default, a unique fallback.\n\t */\n\t@property()\n\tpublic name = `name_${Date.now()}`\n\n\t@property()\n\tpublic placeholder = ''\n\n\t/** Current value of the input. */\n\t@property({ type: String, reflect: true })\n\tpublic value = ''\n\n\t/** Pattern validation attribute. */\n\t@property({ type: String, reflect: true })\n\tpublic pattern?: string\n\n\t/** Whether the control is required for form validation. */\n\t@property({ type: Boolean, reflect: true })\n\tpublic required = false\n\n\t/** Whether the control is disabled. */\n\t@property({ type: Boolean, reflect: true })\n\tpublic disabled = false\n\n\t/** Whether the input is read-only. */\n\t@property({ type: Boolean, reflect: true })\n\tpublic readonly = false\n\n\t/** If true, we visually show a pointer cursor even if readOnly. */\n\t@property({ type: Boolean, reflect: true }) public clickable = false\n\n\t/** Whether browser spellcheck is enabled. */\n\t@property({ type: Boolean, reflect: true })\n\tpublic spellcheck = false\n\n\t/**\n\t * Text alignment within the input.\n\t * - 'left' | 'center' | 'right'\n\t */\n\t@property({ type: String, reflect: true })\n\tpublic align: 'left' | 'center' | 'right' = 'left'\n\n\t/** inputmode attribute (affects on-screen keyboards in mobile). */\n\t@property()\n\tpublic inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'\n\n\t@property({ type: Number })\n\tpublic minlength?: number\n\n\t@property({ type: Number })\n\tpublic maxlength?: number\n\n\t@property()\n\tpublic min?: string\n\n\t@property()\n\tpublic max?: string\n\n\t@property({ type: Number, reflect: true })\n\tpublic step?: number\n\n\t/** If true, auto-focus this input on first render. */\n\t@property({ type: Boolean })\n\tpublic autofocus = false\n\n\t/** Autocomplete/autofill hints. */\n\t@property({ type: String, reflect: true })\n\tpublic autocomplete: AutoFill = 'on'\n\n\t/**\n\t * tabIndex for focusing by tab key. Typically 0 or -1.\n\t */\n\t@property({ type: Number, reflect: true })\n\tpublic tabIndex = 0\n\n\t/**\n\t * A small hint text or error message to display under the input.\n\t */\n\t@property()\n\tpublic hint?: string\n\n\t/**\n\t * If true, we style the input as an error state, and possibly display\n\t * the hint as an error message.\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tpublic error = false\n\n\t// ----------------------------\n\t// B) Queries & Refs\n\t// ----------------------------\n\t@query('input') private inputElement!: HTMLInputElement\n\tprivate inputRef = createRef<HTMLInputElement>()\n\n\t// ----------------------------\n\t// C) Form-associated logic\n\t// ----------------------------\n\tstatic formAssociated = true\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true, // so focus() goes to <input>\n\t}\n\n\tprivate internals?: ElementInternals\n\n\tconstructor() {\n\t\tsuper()\n\t\tif ('attachInternals' in this) {\n\t\t\ttry {\n\t\t\t\tthis.internals = this.attachInternals()\n\t\t\t} catch {\n\t\t\t\t// no-op for older browsers / polyfills\n\t\t\t\tthis.internals = undefined\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * If user did not provide an ID, auto-generate one so <label for=\"...\">\n\t * and various aria-* attributes can reference it.\n\t */\n\tprotected override willUpdate(changedProps: PropertyValueMap<any> | Map<PropertyKey, unknown>) {\n\t\tif (!this.id) {\n\t\t\tthis.id = `schmancy-input-${SchmancyInput._idCounter++}`\n\t\t}\n\t\tsuper.willUpdate(changedProps)\n\t}\n\n\t/** The form this element is associated with, if any. */\n\tget form() {\n\t\treturn this.internals?.form ?? null\n\t}\n\n\tprotected override updated(changedProps: Map<string, unknown>) {\n\t\tsuper.updated(changedProps)\n\t\tif (changedProps.has('value')) {\n\t\t\t// Reflect the current value to the form internals, so it’s submitted.\n\t\t\tthis.internals?.setFormValue(this.value)\n\t\t}\n\n\t\tif (changedProps.has('error')) {\n\t\t\t// If we have an error state, we can set custom error validity, or none if resolved.\n\t\t\tif (this.error) {\n\t\t\t\tthis.internals?.setValidity({ customError: true }, 'Invalid input', this.inputElement)\n\t\t\t} else {\n\t\t\t\tthis.internals?.setValidity({})\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Native form methods:\n\t * - checkValidity()\n\t * - reportValidity()\n\t * - setCustomValidity()\n\t */\n\tpublic checkValidity() {\n\t\treturn this.inputRef.value?.checkValidity() ?? true\n\t}\n\tpublic reportValidity() {\n\t\treturn this.inputRef.value?.reportValidity() ?? true\n\t}\n\tpublic setCustomValidity(message: string) {\n\t\tthis.inputRef.value?.setCustomValidity(message)\n\t}\n\n\t// ----------------------------\n\t// D) Lifecycle Hooks\n\t// ----------------------------\n\tfirstUpdated() {\n\t\t// Autofocus if desired\n\t\tif (this.autofocus) {\n\t\t\tthis.focus()\n\t\t}\n\n\t\t// 1) Subscribe to 'input' events (every keystroke)\n\t\tfromEvent<InputEvent>(this.inputElement, 'input')\n\t\t\t.pipe(\n\t\t\t\tmap(ev => (ev.target as HTMLInputElement).value),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(value => {\n\t\t\t\tthis.value = value\n\t\t\t\t// Fire custom 'input' event with details\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('input', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t\t// dispatch change event\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('change', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t})\n\n\t\t// 2) Subscribe to 'change' events (native behavior, usually on blur)\n\t\tfromEvent<Event>(this.inputElement, 'change')\n\t\t\t.pipe(\n\t\t\t\tmap(ev => (ev.target as HTMLInputElement).value),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(value => {\n\t\t\t\tthis.value = value\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('change', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t})\n\n\t\t// 3) Emit a custom 'enter' event when user presses Enter\n\t\tfromEvent<KeyboardEvent>(this.inputElement, 'keyup')\n\t\t\t.pipe(\n\t\t\t\tfilter(ev => ev.key === 'Enter'),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(ev => {\n\t\t\t\tconst { value } = ev.target as HTMLInputElement\n\t\t\t\tthis.value = value\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('enter', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t})\n\n\t\t// 4) Detect autofill animation (Chrome, etc.)\n\t\tfromEvent<AnimationEvent>(this.inputElement, 'animationstart')\n\t\t\t.pipe(\n\t\t\t\tfilter(ev => ev.animationName === 'onAutoFillStart'),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(ev => {\n\t\t\t\tconst { value } = ev.target as HTMLInputElement\n\t\t\t\tthis.value = value\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent<EventDetails>('change', {\n\t\t\t\t\t\tdetail: { value },\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}),\n\t\t\t\t)\n\t\t\t})\n\t}\n\n\t// ----------------------------\n\t// E) Utility Methods\n\t// ----------------------------\n\t/** Selects all text within the input. */\n\tpublic select() {\n\t\treturn this.inputRef.value?.select()\n\t}\n\n\t/** Returns the native validity state of the inner <input>. */\n\tpublic getValidity(): ValidityState | undefined {\n\t\treturn this.inputRef.value?.validity\n\t}\n\n\t/**\n\t * Override to forward focus to the internal <input>.\n\t * Also dispatch a 'focus' event for external listeners.\n\t */\n\tpublic override focus(options?: FocusOptions) {\n\t\tthis.inputRef.value?.focus(options)\n\t\tthis.dispatchEvent(new Event('focus'))\n\t}\n\n\t/**\n\t * Override to forward clicks to the internal <input>.\n\t * Also dispatch a 'click' event for external listeners.\n\t */\n\tpublic override click() {\n\t\tthis.inputRef.value?.click()\n\t\tthis.dispatchEvent(new Event('click'))\n\t}\n\n\t/** Forward blur to the internal <input>. */\n\tpublic override blur() {\n\t\tthis.inputRef.value?.blur()\n\t\tthis.dispatchEvent(new Event('blur'))\n\t}\n\n\t// ----------------------------\n\t// F) Rendering\n\t// ----------------------------\n\tprotected override render() {\n\t\tconst inputClasses = {\n\t\t\t'w-full flex-1 h-[50px] rounded-[8px] border-0 px-[8px] sm:px-[12px] md:px-[16px]': true,\n\t\t\t'outline-secondary-default focus:outline-1 ': true,\n\t\t\t'disabled:opacity-40 disabled:cursor-not-allowed': true,\n\t\t\t'placeholder:text-muted': true,\n\t\t\t'ring-0 ring-inset focus:ring-1 focus:ring-inset': true,\n\t\t\t// If not in error state, use standard ring color:\n\t\t\t'ring-secondary-default ring-outline focus:ring-secondary-default': !this.error,\n\t\t\t// Error ring override:\n\t\t\t'ring-error-default focus:ring-error-default': this.error,\n\t\t\t// If read-only but \"clickable\" is true, show pointer. Otherwise normal text cursor.\n\t\t\t'caret-transparent focus:outline-hidden cursor-pointer text-select-none': this.readonly,\n\t\t\t'cursor-pointer': this.clickable,\n\t\t\t// Alignment classes:\n\t\t\t'text-center': this.align === 'center',\n\t\t\t'text-right': this.align === 'right',\n\t\t}\n\n\t\tconst labelClasses = {\n\t\t\t'opacity-40': this.disabled,\n\t\t\t'block mb-[4px]': true,\n\t\t}\n\n\t\t/**\n\t\t * - If `this.label` is present, we render a proper `<label for=\"${this.id}\">`.\n\t\t * - If not, we add an aria-label to the <input> for better accessibility.\n\t\t * - If there's a `hint`, we reference it via aria-describedby.\n\t\t * - If there's an error, we set aria-invalid and could set aria-errormessage.\n\t\t */\n\t\treturn html`\n\t\t\t${when(\n\t\t\t\tthis.label,\n\t\t\t\t() => html`\n\t\t\t\t\t<label\n\t\t\t\t\t\tfor=${this.id}\n\t\t\t\t\t\tid=\"label-${this.id}\"\n\t\t\t\t\t\tclass=${classMap(labelClasses)}\n\t\t\t\t\t\t${color({\n\t\t\t\t\t\t\tcolor: this.error ? SchmancyTheme.sys.color.error.default : SchmancyTheme.sys.color.primary.default,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t<schmancy-typography type=\"label\" token=\"lg\">${this.label}</schmancy-typography>\n\t\t\t\t\t</label>\n\t\t\t\t`,\n\t\t\t)}\n\n\t\t\t<input\n\t\t\t\t${color({\n\t\t\t\t\tbgColor: SchmancyTheme.sys.color.surface.highest,\n\t\t\t\t\tcolor: SchmancyTheme.sys.color.surface.on,\n\t\t\t\t})}\n\t\t\t\t${ref(this.inputRef)}\n\t\t\t\tid=${this.id}\n\t\t\t\tname=${this.name}\n\t\t\t\tclass=${classMap(inputClasses)}\n\t\t\t\t.value=${this.value}\n\t\t\t\t.type=${this.type}\n\t\t\t\t.autocomplete=${this.autocomplete}\n\t\t\t\t.spellcheck=${this.spellcheck}\n\t\t\t\tplaceholder=${this.placeholder}\n\t\t\t\tinputmode=${ifDefined(this.inputmode)}\n\t\t\t\tpattern=${ifDefined(this.pattern)}\n\t\t\t\tstep=${ifDefined(this.step)}\n\t\t\t\tminlength=${ifDefined(this.minlength)}\n\t\t\t\tmaxlength=${ifDefined(this.maxlength)}\n\t\t\t\tmin=${ifDefined(this.min)}\n\t\t\t\tmax=${ifDefined(this.max)}\n\t\t\t\t?required=${this.required}\n\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t?readonly=${this.readonly}\n\t\t\t\taria-invalid=${this.error ? 'true' : 'false'}\n\t\t\t\taria-required=${this.required ? 'true' : 'false'}\n\t\t\t\taria-labelledby=${this.label ? `label-${this.id}` : nothing}\n\t\t\t\taria-describedby=${this.hint ? `hint-${this.id}` : nothing}\n\t\t\t\taria-label=${ifDefined(!this.label ? this.placeholder || 'Input' : undefined)}\n\t\t\t/>\n\n\t\t\t${when(\n\t\t\t\tthis.hint,\n\t\t\t\t() => html`\n\t\t\t\t\t<div\n\t\t\t\t\t\tid=\"hint-${this.id}\"\n\t\t\t\t\t\tclass=\"pt-[2px]\"\n\t\t\t\t\t\t${color({\n\t\t\t\t\t\t\tcolor: this.error ? SchmancyTheme.sys.color.error.default : SchmancyTheme.sys.color.primary.default,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t<schmancy-typography align=\"left\" type=\"label\"> ${this.hint} </schmancy-typography>\n\t\t\t\t\t</div>\n\t\t\t\t`,\n\t\t\t)}\n\t\t`\n\t}\n}\n"],"names":["SchmancyInput","TailwindElement","constructor","super","this","id","label","type","name","Date","now","placeholder","value","required","disabled","readonly","clickable","spellcheck","align","autofocus","autocomplete","tabIndex","error","inputRef","createRef","internals","attachInternals","changedProps","_idCounter","willUpdate","form","updated","has","setFormValue","setValidity","customError","inputElement","checkValidity","reportValidity","message","setCustomValidity","focus","fromEvent","pipe","map","ev","target","distinctUntilChanged","takeUntil","disconnecting","subscribe","dispatchEvent","CustomEvent","detail","bubbles","composed","filter","key","animationName","select","validity","options","Event","click","blur","render","inputClasses","labelClasses","html","when","classMap","color","SchmancyTheme","sys","default","primary","bgColor","surface","highest","on","ref","ifDefined","inputmode","pattern","step","minlength","maxlength","min","max","nothing","hint","formAssociated","shadowRootOptions","LitElement","delegatesFocus","__decorateClass","property","reflect","prototype","String","Boolean","Number","query","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"select-DRi9CB_N.js","sources":["../src/select/select.ts"],"sourcesContent":["import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'\nimport { $LitElement } from '@mixins/index'\nimport { color } from '@schmancy/directives'\nimport SchmancyInput from '@schmancy/input/input'\nimport SchmancyOption from '@schmancy/option/option'\nimport { SchmancyTheme } from '@schmancy/theme/theme.interface'\nimport { css, html, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nexport type SchmancySelectChangeEvent = CustomEvent<{\n\tvalue: string | string[]\n}>\n\n@customElement('schmancy-select')\nexport class SchmancySelect extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t}\n\n\t[role='listbox'] {\n\t\toverflow-y: auto;\n\t\toutline: none;\n\t}\n`) {\n\t// Form association setup\n\tstatic formAssociated = true\n\tprivate internals?: ElementInternals\n\n\t// API\n\t@property({ type: String }) name: string | undefined\n\t@property({ type: Boolean, reflect: true }) required = false\n\t@property({ type: String }) placeholder = ''\n\t@property({ type: String, reflect: true }) value: string | string[] = '' // for single-select or multi-select\n\t@property({ type: Boolean }) multi = false\n\t@property({ type: String }) label = ''\n\t@property({ type: String }) hint = ''\n\n\t// Internal states\n\t@state() private isOpen = false\n\t@state() private valueLabel = ''\n\t@state() private isValid = true\n\t@property({ type: String }) validationMessage = ''\n\n\t@query('ul') private ul!: HTMLUListElement\n\t@query('schmancy-input') private inputRef!: SchmancyInput\n\t@queryAssignedElements({ flatten: true }) private options!: SchmancyOption[]\n\tprivate cleanupPositioner?: () => void\n\n\tconstructor() {\n\t\tsuper()\n\t\t// Initialize ElementInternals for form association\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch (e) {\n\t\t\tconsole.warn('FormAssociated elements not supported in this browser', e)\n\t\t}\n\t}\n\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tif (!this.id) {\n\t\t\tthis.id = `schmancy-select-${Math.random().toString(36).substr(2, 9)}`\n\t\t}\n\t\tthis.addEventListener('keydown', this.handleKeyDown)\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.removeEventListener('keydown', this.handleKeyDown)\n\t\tthis.cleanupPositioner?.()\n\t}\n\n\tfirstUpdated() {\n\t\tthis.syncSelection()\n\t\tthis.setupOptionsAccessibility()\n\t}\n\n\tupdated(changedProps: PropertyValues) {\n\t\tsuper.updated(changedProps)\n\n\t\tif (changedProps.has('value')) {\n\t\t\t// Update form value when component value changes\n\t\t\tconst formValue = Array.isArray(this.value) ? this.value.join(',') : this.value\n\t\t\tthis.internals?.setFormValue(formValue)\n\n\t\t\t// Check validity after value changes\n\t\t\tif (this.required) {\n\t\t\t\tthis.checkValidity()\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate syncSelection() {\n\t\tif (this.multi) {\n\t\t\tconst selectedValues = Array.isArray(this.value) ? this.value : []\n\t\t\tthis.options.forEach(o => (o.selected = selectedValues.includes(o.value))) // Update option selected state\n\t\t\tthis.valueLabel =\n\t\t\t\tselectedValues.length > 0\n\t\t\t\t\t? this.options\n\t\t\t\t\t\t\t.filter(o => selectedValues.includes(o.value))\n\t\t\t\t\t\t\t.map(o => o.label)\n\t\t\t\t\t\t\t.join(', ')\n\t\t\t\t\t: this.placeholder\n\t\t} else {\n\t\t\tconst selectedOption = this.options.find(o => o.value === this.value)\n\t\t\tthis.valueLabel = selectedOption?.label || this.placeholder\n\t\t}\n\t}\n\n\tprivate setupOptionsAccessibility() {\n\t\tthis.options.forEach((option, index) => {\n\t\t\toption.setAttribute('role', 'option')\n\t\t\tif (!option.id) {\n\t\t\t\toption.id = `${this.id}-option-${index}`\n\t\t\t}\n\t\t\toption.tabIndex = -1\n\t\t\tconst selectedValues = Array.isArray(this.value) ? this.value : []\n\n\t\t\toption.setAttribute(\n\t\t\t\t'aria-selected',\n\t\t\t\tString(this.multi ? selectedValues.includes(option.value) : option.value === this.value),\n\t\t\t)\n\t\t})\n\t}\n\n\tprivate async positionDropdown() {\n\t\tconst reference = this.renderRoot.querySelector('.trigger') as HTMLElement\n\t\tif (!reference || !this.ul) return\n\n\t\t// Get the available height\n\t\tconst availableHeight = window.innerHeight - reference.getBoundingClientRect().bottom - 10 // 10px buffer\n\t\tthis.ul.style.maxHeight = `${availableHeight}px` // Set max height\n\n\t\tthis.cleanupPositioner = autoUpdate(reference, this.ul, async () => {\n\t\t\tconst { x, y } = await computePosition(reference, this.ul, {\n\t\t\t\tplacement: 'bottom-start',\n\t\t\t\tmiddleware: [offset(5), flip(), shift({ padding: 5 })],\n\t\t\t})\n\n\t\t\tObject.assign(this.ul.style, {\n\t\t\t\tleft: `${x}px`,\n\t\t\t\ttop: `${y}px`,\n\t\t\t\tposition: 'absolute',\n\t\t\t})\n\t\t})\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (!this.isOpen) {\n\t\t\tif (['Enter', ' ', 'ArrowDown'].includes(e.key)) {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.openDropdown(false)\n\t\t\t}\n\t\t\treturn\n\t\t}\n\n\t\tconst current = this.options.findIndex(o => o.matches(':focus')) ?? -1\n\n\t\tswitch (e.key) {\n\t\t\tcase 'Escape':\n\t\t\t\tthis.closeDropdown()\n\t\t\t\tbreak\n\t\t\tcase 'ArrowDown':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(this.options, Math.min(current + 1, this.options.length - 1))\n\t\t\t\tbreak\n\t\t\tcase 'ArrowUp':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(this.options, Math.max(current - 1, 0))\n\t\t\t\tbreak\n\t\t\tcase 'Enter':\n\t\t\tcase ' ':\n\t\t\t\te.preventDefault()\n\t\t\t\tif (current >= 0) this.handleOptionSelect(this.options[current].value)\n\t\t\t\tbreak\n\t\t\tcase 'Tab':\n\t\t\t\tthis.closeDropdown()\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tprivate focusOption(options: HTMLElement[], index: number) {\n\t\tconst option = options[index]\n\t\tif (option) {\n\t\t\toption.focus()\n\t\t\tconst combobox = this.renderRoot.querySelector('.trigger')\n\t\t\tcombobox?.setAttribute('aria-activedescendant', option.id)\n\t\t}\n\t}\n\n\tprivate async openDropdown(report = false) {\n\t\tthis.isOpen = true\n\t\tawait this.updateComplete\n\n\t\tthis.positionDropdown()\n\t\tthis.setupOptionsAccessibility()\n\n\t\tconst options = Array.from(this.ul.querySelectorAll('[role=\"option\"]')) as HTMLElement[]\n\t\tconst selectedIndex = this.multi ? 0 : options.findIndex(o => o.getAttribute('value') === this.value)\n\t\tthis.focusOption(options, Math.max(selectedIndex, 0))\n\t\tif (report) this.reportValidity()\n\t}\n\n\tprivate closeDropdown() {\n\t\tthis.isOpen = false\n\t\tthis.cleanupPositioner?.()\n\t\tconst combobox = this.renderRoot.querySelector<HTMLElement>('.trigger')\n\t\tcombobox?.removeAttribute('aria-activedescendant')\n\t\tcombobox?.focus()\n\t}\n\n\tprivate handleOptionSelect(value: string) {\n\t\tif (this.multi) {\n\t\t\tconst option = this.options.find(o => o.value === value)\n\t\t\tif (!option) return\n\n\t\t\toption.selected = !option.selected\n\t\t\tlet selectedValues = Array.isArray(this.value) ? [...this.value] : []\n\n\t\t\tif (option.selected) {\n\t\t\t\tselectedValues = [...selectedValues, value]\n\t\t\t} else {\n\t\t\t\tselectedValues = selectedValues.filter(v => v !== value)\n\t\t\t}\n\n\t\t\tthis.value = selectedValues\n\n\t\t\tthis.valueLabel =\n\t\t\t\tselectedValues.length > 0\n\t\t\t\t\t? this.options\n\t\t\t\t\t\t\t.filter(o => selectedValues.includes(o.value))\n\t\t\t\t\t\t\t.map(o => o.label)\n\t\t\t\t\t\t\t.join(', ')\n\t\t\t\t\t: this.placeholder\n\n\t\t\tthis.dispatchChange(selectedValues)\n\t\t} else {\n\t\t\tthis.options.forEach(o => (o.selected = o.value === value))\n\t\t\tthis.value = value\n\t\t\tthis.valueLabel = this.options.find(o => o.value === value)?.label || this.placeholder\n\t\t\tthis.dispatchChange(value)\n\t\t\tthis.closeDropdown()\n\t\t}\n\n\t\tthis.setupOptionsAccessibility()\n\t\tthis.checkValidity()\n\t}\n\n\tprivate dispatchChange(value: string | string[]) {\n\t\tthis.isValid = true // Reset validation on change\n\t\tthis.validationMessage = ''\n\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent<SchmancySelectChangeEvent['detail']>('change', {\n\t\t\t\tdetail: { value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t\t// Also dispatch a standard change event for better form compatibility\n\t\tthis.dispatchEvent(new Event('change', { bubbles: true }))\n\t}\n\n\tpublic checkValidity(): boolean {\n\t\tconst isEmpty = this.multi ? !Array.isArray(this.value) || this.value.length === 0 : !this.value\n\n\t\tthis.isValid = !(this.required && isEmpty)\n\n\t\tif (!this.isValid) {\n\t\t\tthis.validationMessage = 'Please select an option.'\n\t\t\tthis.internals?.setValidity({ valueMissing: true }, 'Please select an option.', this.inputRef)\n\t\t} else {\n\t\t\tthis.validationMessage = ''\n\t\t\tthis.internals?.setValidity({})\n\t\t}\n\n\t\treturn this.isValid\n\t}\n\n\tpublic reportValidity(): boolean {\n\t\tconst valid = this.checkValidity()\n\n\t\tif (!valid && this.required) {\n\t\t\t// If invalid, make sure the input shows it\n\t\t\tthis.inputRef.required = true\n\t\t\tthis.inputRef.reportValidity()\n\n\t\t\t// Optionally open the dropdown to show options\n\t\t\tif (!this.isOpen) {\n\t\t\t\tthis.openDropdown(false)\n\t\t\t}\n\t\t}\n\n\t\treturn valid\n\t}\n\n\tpublic setCustomValidity(message: string) {\n\t\tthis.validationMessage = message\n\t\tthis.internals?.setValidity(message ? { customError: true } : {}, message, this.inputRef)\n\t}\n\n\tpublic reset() {\n\t\tthis.value = ''\n\t\tthis.valueLabel = this.placeholder\n\t\tthis.isValid = true\n\t\tthis.validationMessage = ''\n\t\tthis.internals?.setValidity({})\n\t\tthis.options.forEach(o => (o.selected = false))\n\t}\n\n\trender(): TemplateResult {\n\t\treturn html`\n\t\t\t<div class=\"relative\">\n\t\t\t\t<schmancy-input\n\t\t\t\t\t.name=${this.name}\n\t\t\t\t\ttabIndex=\"0\"\n\t\t\t\t\tclass=\"trigger\"\n\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\taria-expanded=${this.isOpen}\n\t\t\t\t\taria-controls=\"options\"\n\t\t\t\t\taria-autocomplete=\"none\"\n\t\t\t\t\taria-required=${this.required}\n\t\t\t\t\t.label=${this.label}\n\t\t\t\t\t.placeholder=${this.placeholder}\n\t\t\t\t\t.value=${this.valueLabel}\n\t\t\t\t\t.required=${this.required}\n\t\t\t\t\t.hint=${this.hint || this.validationMessage}\n\t\t\t\t\t.error=${!this.isValid}\n\t\t\t\t\treadonly\n\t\t\t\t\t@click=${() => (this.isOpen ? this.closeDropdown() : this.openDropdown(true))}\n\t\t\t\t></schmancy-input>\n\n\t\t\t\t<div\n\t\t\t\t\tid=\"overlay\"\n\t\t\t\t\tclass=\"fixed inset-0\"\n\t\t\t\t\t?hidden=${!this.isOpen}\n\t\t\t\t\t@click=${this.closeDropdown}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t></div>\n\n\t\t\t\t<ul\n\t\t\t\t\tid=\"options\"\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\taria-multiselectable=${this.multi}\n\t\t\t\t\tclass=${classMap({\n\t\t\t\t\t\t'absolute z-[1000] mt-1 w-full rounded-md shadow-sm': true,\n\t\t\t\t\t\thidden: !this.isOpen,\n\t\t\t\t\t})}\n\t\t\t\t\t${color({ bgColor: SchmancyTheme.sys.color.surface.container })}\n\t\t\t\t\t@click=${(e: Event) => {\n\t\t\t\t\t\tconst customEvt = e as CustomEvent\n\t\t\t\t\t\tconst detailVal = customEvt.detail?.value\n\t\t\t\t\t\tif (detailVal) {\n\t\t\t\t\t\t\tthis.handleOptionSelect(detailVal)\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<slot\n\t\t\t\t\t\t@slotchange=${() => {\n\t\t\t\t\t\t\tthis.syncSelection()\n\t\t\t\t\t\t\tthis.setupOptionsAccessibility()\n\t\t\t\t\t\t}}\n\t\t\t\t\t></slot>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-select': SchmancySelect\n\t}\n}\n"],"names":["SchmancySelect","$LitElement","css","super","this","required","placeholder","value","multi","label","hint","isOpen","valueLabel","isValid","validationMessage","handleKeyDown","e","includes","key","preventDefault","openDropdown","current","options","findIndex","o","matches","closeDropdown","focusOption","Math","min","length","max","handleOptionSelect","internals","attachInternals","form","connectedCallback","id","random","toString","substr","addEventListener","disconnectedCallback","removeEventListener","cleanupPositioner","syncSelection","setupOptionsAccessibility","changedProps","updated","has","formValue","Array","isArray","join","setFormValue","checkValidity","selectedValues","forEach","selected","filter","map","selectedOption","find","option","index","setAttribute","tabIndex","String","reference","renderRoot","querySelector","ul","availableHeight","window","innerHeight","getBoundingClientRect","bottom","style","maxHeight","autoUpdate","async","x","y","computePosition","placement","middleware","offset","flip","shift","padding","Object","assign","left","top","position","focus","combobox","report","updateComplete","positionDropdown","from","querySelectorAll","selectedIndex","getAttribute","reportValidity","removeAttribute","v","dispatchChange","dispatchEvent","CustomEvent","detail","bubbles","composed","Event","isEmpty","setValidity","valueMissing","inputRef","valid","message","customError","render","html","name","classMap","hidden","color","bgColor","SchmancyTheme","sys","surface","container","customEvt","detailVal","formAssociated","__decorateClass","property","type","prototype","Boolean","reflect","state","query","queryAssignedElements","flatten","customElement"],"mappings":"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"}
|
package/dist/select-SQOIioEy.cjs
DELETED
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
"use strict";const r=require("@floating-ui/dom");require("rxjs");const p=require("lit/directives/class-map.js");require("lit/directives/style-map.js");const u=require("./litElement.mixin-D_oDZMIO.cjs");require("./tailwind.mixin-CduPdozY.cjs");const d=require("./color-D8r6dpWm.cjs");require("./ripple-B_wT0zgD.cjs");const y=require("./theme.interface-Xg5Zi46a.cjs"),h=require("lit"),a=require("lit/decorators.js");var v=Object.defineProperty,m=Object.getOwnPropertyDescriptor,o=(e,t,i,s)=>{for(var n,l=s>1?void 0:s?m(t,i):t,c=e.length-1;c>=0;c--)(n=e[c])&&(l=(s?n(t,i,l):n(l))||l);return s&&l&&v(t,i,l),l};exports.SchmancySelect=class extends u.$LitElement(h.css`
|
|
2
|
-
:host {
|
|
3
|
-
display: block;
|
|
4
|
-
position: relative;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
[role='listbox'] {
|
|
8
|
-
overflow-y: auto;
|
|
9
|
-
outline: none;
|
|
10
|
-
}
|
|
11
|
-
`){constructor(){super(),this.required=!1,this.placeholder="",this.value="",this.multi=!1,this.label="",this.hint="",this.isOpen=!1,this.valueLabel="",this.isValid=!0,this.validationMessage="",this.handleKeyDown=e=>{if(!this.isOpen)return void(["Enter"," ","ArrowDown"].includes(e.key)&&(e.preventDefault(),this.openDropdown(!1)));const t=this.options.findIndex(i=>i.matches(":focus"))??-1;switch(e.key){case"Escape":case"Tab":this.closeDropdown();break;case"ArrowDown":e.preventDefault(),this.focusOption(this.options,Math.min(t+1,this.options.length-1));break;case"ArrowUp":e.preventDefault(),this.focusOption(this.options,Math.max(t-1,0));break;case"Enter":case" ":e.preventDefault(),t>=0&&this.handleOptionSelect(this.options[t].value)}};try{this.internals=this.attachInternals()}catch{}}get form(){var e;return(e=this.internals)==null?void 0:e.form}connectedCallback(){super.connectedCallback(),this.id||(this.id=`schmancy-select-${Math.random().toString(36).substr(2,9)}`),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){var e;super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeyDown),(e=this.cleanupPositioner)==null||e.call(this)}firstUpdated(){this.syncSelection(),this.setupOptionsAccessibility()}updated(e){var t;if(super.updated(e),e.has("value")){const i=Array.isArray(this.value)?this.value.join(","):this.value;(t=this.internals)==null||t.setFormValue(i),this.required&&this.checkValidity()}}syncSelection(){if(this.multi){const e=Array.isArray(this.value)?this.value:[];this.options.forEach(t=>t.selected=e.includes(t.value)),this.valueLabel=e.length>0?this.options.filter(t=>e.includes(t.value)).map(t=>t.label).join(", "):this.placeholder}else{const e=this.options.find(t=>t.value===this.value);this.valueLabel=(e==null?void 0:e.label)||this.placeholder}}setupOptionsAccessibility(){this.options.forEach((e,t)=>{e.setAttribute("role","option"),e.id||(e.id=`${this.id}-option-${t}`),e.tabIndex=-1;const i=Array.isArray(this.value)?this.value:[];e.setAttribute("aria-selected",String(this.multi?i.includes(e.value):e.value===this.value))})}async positionDropdown(){const e=this.renderRoot.querySelector(".trigger");if(!e||!this.ul)return;const t=window.innerHeight-e.getBoundingClientRect().bottom-10;this.ul.style.maxHeight=`${t}px`,this.cleanupPositioner=r.autoUpdate(e,this.ul,async()=>{const{x:i,y:s}=await r.computePosition(e,this.ul,{placement:"bottom-start",middleware:[r.offset(5),r.flip(),r.shift({padding:5})]});Object.assign(this.ul.style,{left:`${i}px`,top:`${s}px`,position:"absolute"})})}focusOption(e,t){const i=e[t];if(i){i.focus();const s=this.renderRoot.querySelector(".trigger");s==null||s.setAttribute("aria-activedescendant",i.id)}}async openDropdown(e=!1){this.isOpen=!0,await this.updateComplete,this.positionDropdown(),this.setupOptionsAccessibility();const t=Array.from(this.ul.querySelectorAll('[role="option"]')),i=this.multi?0:t.findIndex(s=>s.getAttribute("value")===this.value);this.focusOption(t,Math.max(i,0)),e&&this.reportValidity()}closeDropdown(){var t;this.isOpen=!1,(t=this.cleanupPositioner)==null||t.call(this);const e=this.renderRoot.querySelector(".trigger");e==null||e.removeAttribute("aria-activedescendant"),e==null||e.focus()}handleOptionSelect(e){var t;if(this.multi){const i=this.options.find(n=>n.value===e);if(!i)return;i.selected=!i.selected;let s=Array.isArray(this.value)?[...this.value]:[];s=i.selected?[...s,e]:s.filter(n=>n!==e),this.value=s,this.valueLabel=s.length>0?this.options.filter(n=>s.includes(n.value)).map(n=>n.label).join(", "):this.placeholder,this.dispatchChange(s)}else this.options.forEach(i=>i.selected=i.value===e),this.value=e,this.valueLabel=((t=this.options.find(i=>i.value===e))==null?void 0:t.label)||this.placeholder,this.dispatchChange(e),this.closeDropdown();this.setupOptionsAccessibility(),this.checkValidity()}dispatchChange(e){this.isValid=!0,this.validationMessage="",this.dispatchEvent(new CustomEvent("change",{detail:{value:e},bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0}))}checkValidity(){var t,i;const e=this.multi?!Array.isArray(this.value)||this.value.length===0:!this.value;return this.isValid=!(this.required&&e),this.isValid?(this.validationMessage="",(t=this.internals)==null||t.setValidity({})):(this.validationMessage="Please select an option.",(i=this.internals)==null||i.setValidity({valueMissing:!0},"Please select an option.",this.inputRef)),this.isValid}reportValidity(){const e=this.checkValidity();return!e&&this.required&&(this.inputRef.required=!0,this.inputRef.reportValidity(),this.isOpen||this.openDropdown(!1)),e}setCustomValidity(e){var t;this.validationMessage=e,(t=this.internals)==null||t.setValidity(e?{customError:!0}:{},e,this.inputRef)}reset(){var e;this.value="",this.valueLabel=this.placeholder,this.isValid=!0,this.validationMessage="",(e=this.internals)==null||e.setValidity({}),this.options.forEach(t=>t.selected=!1)}render(){return h.html`
|
|
12
|
-
<div class="relative">
|
|
13
|
-
<schmancy-input
|
|
14
|
-
.name=${this.name}
|
|
15
|
-
tabIndex="0"
|
|
16
|
-
class="trigger"
|
|
17
|
-
role="combobox"
|
|
18
|
-
aria-haspopup="listbox"
|
|
19
|
-
aria-expanded=${this.isOpen}
|
|
20
|
-
aria-controls="options"
|
|
21
|
-
aria-autocomplete="none"
|
|
22
|
-
aria-required=${this.required}
|
|
23
|
-
.label=${this.label}
|
|
24
|
-
.placeholder=${this.placeholder}
|
|
25
|
-
.value=${this.valueLabel}
|
|
26
|
-
.required=${this.required}
|
|
27
|
-
.hint=${this.hint||this.validationMessage}
|
|
28
|
-
.error=${!this.isValid}
|
|
29
|
-
readonly
|
|
30
|
-
@click=${()=>this.isOpen?this.closeDropdown():this.openDropdown(!0)}
|
|
31
|
-
></schmancy-input>
|
|
32
|
-
|
|
33
|
-
<div
|
|
34
|
-
id="overlay"
|
|
35
|
-
class="fixed inset-0"
|
|
36
|
-
?hidden=${!this.isOpen}
|
|
37
|
-
@click=${this.closeDropdown}
|
|
38
|
-
tabindex="-1"
|
|
39
|
-
aria-hidden="true"
|
|
40
|
-
></div>
|
|
41
|
-
|
|
42
|
-
<ul
|
|
43
|
-
id="options"
|
|
44
|
-
role="listbox"
|
|
45
|
-
aria-multiselectable=${this.multi}
|
|
46
|
-
class=${p.classMap({"absolute z-[1000] mt-1 w-full rounded-md shadow-sm":!0,hidden:!this.isOpen})}
|
|
47
|
-
${d.color({bgColor:y.SchmancyTheme.sys.color.surface.container})}
|
|
48
|
-
@click=${e=>{var s;const t=e,i=(s=t.detail)==null?void 0:s.value;i&&this.handleOptionSelect(i)}}
|
|
49
|
-
>
|
|
50
|
-
<slot
|
|
51
|
-
@slotchange=${()=>{this.syncSelection(),this.setupOptionsAccessibility()}}
|
|
52
|
-
></slot>
|
|
53
|
-
</ul>
|
|
54
|
-
</div>
|
|
55
|
-
`}},exports.SchmancySelect.formAssociated=!0,o([a.property({type:String})],exports.SchmancySelect.prototype,"name",2),o([a.property({type:Boolean,reflect:!0})],exports.SchmancySelect.prototype,"required",2),o([a.property({type:String})],exports.SchmancySelect.prototype,"placeholder",2),o([a.property({type:String,reflect:!0})],exports.SchmancySelect.prototype,"value",2),o([a.property({type:Boolean})],exports.SchmancySelect.prototype,"multi",2),o([a.property({type:String})],exports.SchmancySelect.prototype,"label",2),o([a.property({type:String})],exports.SchmancySelect.prototype,"hint",2),o([a.state()],exports.SchmancySelect.prototype,"isOpen",2),o([a.state()],exports.SchmancySelect.prototype,"valueLabel",2),o([a.state()],exports.SchmancySelect.prototype,"isValid",2),o([a.property({type:String})],exports.SchmancySelect.prototype,"validationMessage",2),o([a.query("ul")],exports.SchmancySelect.prototype,"ul",2),o([a.query("schmancy-input")],exports.SchmancySelect.prototype,"inputRef",2),o([a.queryAssignedElements({flatten:!0})],exports.SchmancySelect.prototype,"options",2),exports.SchmancySelect=o([a.customElement("schmancy-select")],exports.SchmancySelect);
|
|
56
|
-
//# sourceMappingURL=select-SQOIioEy.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"select-SQOIioEy.cjs","sources":["../src/select/select.ts"],"sourcesContent":["import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'\nimport { $LitElement } from '@mixins/index'\nimport { color } from '@schmancy/directives'\nimport SchmancyInput from '@schmancy/input/input'\nimport SchmancyOption from '@schmancy/option/option'\nimport { SchmancyTheme } from '@schmancy/theme/theme.interface'\nimport { css, html, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nexport type SchmancySelectChangeEvent = CustomEvent<{\n\tvalue: string | string[]\n}>\n\n@customElement('schmancy-select')\nexport class SchmancySelect extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t}\n\n\t[role='listbox'] {\n\t\toverflow-y: auto;\n\t\toutline: none;\n\t}\n`) {\n\t// Form association setup\n\tstatic formAssociated = true\n\tprivate internals?: ElementInternals\n\n\t// API\n\t@property({ type: String }) name: string | undefined\n\t@property({ type: Boolean, reflect: true }) required = false\n\t@property({ type: String }) placeholder = ''\n\t@property({ type: String, reflect: true }) value: string | string[] = '' // for single-select or multi-select\n\t@property({ type: Boolean }) multi = false\n\t@property({ type: String }) label = ''\n\t@property({ type: String }) hint = ''\n\n\t// Internal states\n\t@state() private isOpen = false\n\t@state() private valueLabel = ''\n\t@state() private isValid = true\n\t@property({ type: String }) validationMessage = ''\n\n\t@query('ul') private ul!: HTMLUListElement\n\t@query('schmancy-input') private inputRef!: SchmancyInput\n\t@queryAssignedElements({ flatten: true }) private options!: SchmancyOption[]\n\tprivate cleanupPositioner?: () => void\n\n\tconstructor() {\n\t\tsuper()\n\t\t// Initialize ElementInternals for form association\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch (e) {\n\t\t\tconsole.warn('FormAssociated elements not supported in this browser', e)\n\t\t}\n\t}\n\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tif (!this.id) {\n\t\t\tthis.id = `schmancy-select-${Math.random().toString(36).substr(2, 9)}`\n\t\t}\n\t\tthis.addEventListener('keydown', this.handleKeyDown)\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.removeEventListener('keydown', this.handleKeyDown)\n\t\tthis.cleanupPositioner?.()\n\t}\n\n\tfirstUpdated() {\n\t\tthis.syncSelection()\n\t\tthis.setupOptionsAccessibility()\n\t}\n\n\tupdated(changedProps: PropertyValues) {\n\t\tsuper.updated(changedProps)\n\n\t\tif (changedProps.has('value')) {\n\t\t\t// Update form value when component value changes\n\t\t\tconst formValue = Array.isArray(this.value) ? this.value.join(',') : this.value\n\t\t\tthis.internals?.setFormValue(formValue)\n\n\t\t\t// Check validity after value changes\n\t\t\tif (this.required) {\n\t\t\t\tthis.checkValidity()\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate syncSelection() {\n\t\tif (this.multi) {\n\t\t\tconst selectedValues = Array.isArray(this.value) ? this.value : []\n\t\t\tthis.options.forEach(o => (o.selected = selectedValues.includes(o.value))) // Update option selected state\n\t\t\tthis.valueLabel =\n\t\t\t\tselectedValues.length > 0\n\t\t\t\t\t? this.options\n\t\t\t\t\t\t\t.filter(o => selectedValues.includes(o.value))\n\t\t\t\t\t\t\t.map(o => o.label)\n\t\t\t\t\t\t\t.join(', ')\n\t\t\t\t\t: this.placeholder\n\t\t} else {\n\t\t\tconst selectedOption = this.options.find(o => o.value === this.value)\n\t\t\tthis.valueLabel = selectedOption?.label || this.placeholder\n\t\t}\n\t}\n\n\tprivate setupOptionsAccessibility() {\n\t\tthis.options.forEach((option, index) => {\n\t\t\toption.setAttribute('role', 'option')\n\t\t\tif (!option.id) {\n\t\t\t\toption.id = `${this.id}-option-${index}`\n\t\t\t}\n\t\t\toption.tabIndex = -1\n\t\t\tconst selectedValues = Array.isArray(this.value) ? this.value : []\n\n\t\t\toption.setAttribute(\n\t\t\t\t'aria-selected',\n\t\t\t\tString(this.multi ? selectedValues.includes(option.value) : option.value === this.value),\n\t\t\t)\n\t\t})\n\t}\n\n\tprivate async positionDropdown() {\n\t\tconst reference = this.renderRoot.querySelector('.trigger') as HTMLElement\n\t\tif (!reference || !this.ul) return\n\n\t\t// Get the available height\n\t\tconst availableHeight = window.innerHeight - reference.getBoundingClientRect().bottom - 10 // 10px buffer\n\t\tthis.ul.style.maxHeight = `${availableHeight}px` // Set max height\n\n\t\tthis.cleanupPositioner = autoUpdate(reference, this.ul, async () => {\n\t\t\tconst { x, y } = await computePosition(reference, this.ul, {\n\t\t\t\tplacement: 'bottom-start',\n\t\t\t\tmiddleware: [offset(5), flip(), shift({ padding: 5 })],\n\t\t\t})\n\n\t\t\tObject.assign(this.ul.style, {\n\t\t\t\tleft: `${x}px`,\n\t\t\t\ttop: `${y}px`,\n\t\t\t\tposition: 'absolute',\n\t\t\t})\n\t\t})\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (!this.isOpen) {\n\t\t\tif (['Enter', ' ', 'ArrowDown'].includes(e.key)) {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.openDropdown(false)\n\t\t\t}\n\t\t\treturn\n\t\t}\n\n\t\tconst current = this.options.findIndex(o => o.matches(':focus')) ?? -1\n\n\t\tswitch (e.key) {\n\t\t\tcase 'Escape':\n\t\t\t\tthis.closeDropdown()\n\t\t\t\tbreak\n\t\t\tcase 'ArrowDown':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(this.options, Math.min(current + 1, this.options.length - 1))\n\t\t\t\tbreak\n\t\t\tcase 'ArrowUp':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(this.options, Math.max(current - 1, 0))\n\t\t\t\tbreak\n\t\t\tcase 'Enter':\n\t\t\tcase ' ':\n\t\t\t\te.preventDefault()\n\t\t\t\tif (current >= 0) this.handleOptionSelect(this.options[current].value)\n\t\t\t\tbreak\n\t\t\tcase 'Tab':\n\t\t\t\tthis.closeDropdown()\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tprivate focusOption(options: HTMLElement[], index: number) {\n\t\tconst option = options[index]\n\t\tif (option) {\n\t\t\toption.focus()\n\t\t\tconst combobox = this.renderRoot.querySelector('.trigger')\n\t\t\tcombobox?.setAttribute('aria-activedescendant', option.id)\n\t\t}\n\t}\n\n\tprivate async openDropdown(report = false) {\n\t\tthis.isOpen = true\n\t\tawait this.updateComplete\n\n\t\tthis.positionDropdown()\n\t\tthis.setupOptionsAccessibility()\n\n\t\tconst options = Array.from(this.ul.querySelectorAll('[role=\"option\"]')) as HTMLElement[]\n\t\tconst selectedIndex = this.multi ? 0 : options.findIndex(o => o.getAttribute('value') === this.value)\n\t\tthis.focusOption(options, Math.max(selectedIndex, 0))\n\t\tif (report) this.reportValidity()\n\t}\n\n\tprivate closeDropdown() {\n\t\tthis.isOpen = false\n\t\tthis.cleanupPositioner?.()\n\t\tconst combobox = this.renderRoot.querySelector<HTMLElement>('.trigger')\n\t\tcombobox?.removeAttribute('aria-activedescendant')\n\t\tcombobox?.focus()\n\t}\n\n\tprivate handleOptionSelect(value: string) {\n\t\tif (this.multi) {\n\t\t\tconst option = this.options.find(o => o.value === value)\n\t\t\tif (!option) return\n\n\t\t\toption.selected = !option.selected\n\t\t\tlet selectedValues = Array.isArray(this.value) ? [...this.value] : []\n\n\t\t\tif (option.selected) {\n\t\t\t\tselectedValues = [...selectedValues, value]\n\t\t\t} else {\n\t\t\t\tselectedValues = selectedValues.filter(v => v !== value)\n\t\t\t}\n\n\t\t\tthis.value = selectedValues\n\n\t\t\tthis.valueLabel =\n\t\t\t\tselectedValues.length > 0\n\t\t\t\t\t? this.options\n\t\t\t\t\t\t\t.filter(o => selectedValues.includes(o.value))\n\t\t\t\t\t\t\t.map(o => o.label)\n\t\t\t\t\t\t\t.join(', ')\n\t\t\t\t\t: this.placeholder\n\n\t\t\tthis.dispatchChange(selectedValues)\n\t\t} else {\n\t\t\tthis.options.forEach(o => (o.selected = o.value === value))\n\t\t\tthis.value = value\n\t\t\tthis.valueLabel = this.options.find(o => o.value === value)?.label || this.placeholder\n\t\t\tthis.dispatchChange(value)\n\t\t\tthis.closeDropdown()\n\t\t}\n\n\t\tthis.setupOptionsAccessibility()\n\t\tthis.checkValidity()\n\t}\n\n\tprivate dispatchChange(value: string | string[]) {\n\t\tthis.isValid = true // Reset validation on change\n\t\tthis.validationMessage = ''\n\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent<SchmancySelectChangeEvent['detail']>('change', {\n\t\t\t\tdetail: { value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t\t// Also dispatch a standard change event for better form compatibility\n\t\tthis.dispatchEvent(new Event('change', { bubbles: true }))\n\t}\n\n\tpublic checkValidity(): boolean {\n\t\tconst isEmpty = this.multi ? !Array.isArray(this.value) || this.value.length === 0 : !this.value\n\n\t\tthis.isValid = !(this.required && isEmpty)\n\n\t\tif (!this.isValid) {\n\t\t\tthis.validationMessage = 'Please select an option.'\n\t\t\tthis.internals?.setValidity({ valueMissing: true }, 'Please select an option.', this.inputRef)\n\t\t} else {\n\t\t\tthis.validationMessage = ''\n\t\t\tthis.internals?.setValidity({})\n\t\t}\n\n\t\treturn this.isValid\n\t}\n\n\tpublic reportValidity(): boolean {\n\t\tconst valid = this.checkValidity()\n\n\t\tif (!valid && this.required) {\n\t\t\t// If invalid, make sure the input shows it\n\t\t\tthis.inputRef.required = true\n\t\t\tthis.inputRef.reportValidity()\n\n\t\t\t// Optionally open the dropdown to show options\n\t\t\tif (!this.isOpen) {\n\t\t\t\tthis.openDropdown(false)\n\t\t\t}\n\t\t}\n\n\t\treturn valid\n\t}\n\n\tpublic setCustomValidity(message: string) {\n\t\tthis.validationMessage = message\n\t\tthis.internals?.setValidity(message ? { customError: true } : {}, message, this.inputRef)\n\t}\n\n\tpublic reset() {\n\t\tthis.value = ''\n\t\tthis.valueLabel = this.placeholder\n\t\tthis.isValid = true\n\t\tthis.validationMessage = ''\n\t\tthis.internals?.setValidity({})\n\t\tthis.options.forEach(o => (o.selected = false))\n\t}\n\n\trender(): TemplateResult {\n\t\treturn html`\n\t\t\t<div class=\"relative\">\n\t\t\t\t<schmancy-input\n\t\t\t\t\t.name=${this.name}\n\t\t\t\t\ttabIndex=\"0\"\n\t\t\t\t\tclass=\"trigger\"\n\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\taria-expanded=${this.isOpen}\n\t\t\t\t\taria-controls=\"options\"\n\t\t\t\t\taria-autocomplete=\"none\"\n\t\t\t\t\taria-required=${this.required}\n\t\t\t\t\t.label=${this.label}\n\t\t\t\t\t.placeholder=${this.placeholder}\n\t\t\t\t\t.value=${this.valueLabel}\n\t\t\t\t\t.required=${this.required}\n\t\t\t\t\t.hint=${this.hint || this.validationMessage}\n\t\t\t\t\t.error=${!this.isValid}\n\t\t\t\t\treadonly\n\t\t\t\t\t@click=${() => (this.isOpen ? this.closeDropdown() : this.openDropdown(true))}\n\t\t\t\t></schmancy-input>\n\n\t\t\t\t<div\n\t\t\t\t\tid=\"overlay\"\n\t\t\t\t\tclass=\"fixed inset-0\"\n\t\t\t\t\t?hidden=${!this.isOpen}\n\t\t\t\t\t@click=${this.closeDropdown}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t></div>\n\n\t\t\t\t<ul\n\t\t\t\t\tid=\"options\"\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\taria-multiselectable=${this.multi}\n\t\t\t\t\tclass=${classMap({\n\t\t\t\t\t\t'absolute z-[1000] mt-1 w-full rounded-md shadow-sm': true,\n\t\t\t\t\t\thidden: !this.isOpen,\n\t\t\t\t\t})}\n\t\t\t\t\t${color({ bgColor: SchmancyTheme.sys.color.surface.container })}\n\t\t\t\t\t@click=${(e: Event) => {\n\t\t\t\t\t\tconst customEvt = e as CustomEvent\n\t\t\t\t\t\tconst detailVal = customEvt.detail?.value\n\t\t\t\t\t\tif (detailVal) {\n\t\t\t\t\t\t\tthis.handleOptionSelect(detailVal)\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<slot\n\t\t\t\t\t\t@slotchange=${() => {\n\t\t\t\t\t\t\tthis.syncSelection()\n\t\t\t\t\t\t\tthis.setupOptionsAccessibility()\n\t\t\t\t\t\t}}\n\t\t\t\t\t></slot>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-select': SchmancySelect\n\t}\n}\n"],"names":["SchmancySelect","$LitElement","css","super","this","required","placeholder","value","multi","label","hint","isOpen","valueLabel","isValid","validationMessage","handleKeyDown","e","includes","key","preventDefault","openDropdown","current","options","findIndex","o","matches","closeDropdown","focusOption","Math","min","length","max","handleOptionSelect","internals","attachInternals","form","connectedCallback","id","random","toString","substr","addEventListener","disconnectedCallback","removeEventListener","cleanupPositioner","firstUpdated","syncSelection","setupOptionsAccessibility","changedProps","updated","has","formValue","Array","isArray","join","setFormValue","checkValidity","selectedValues","forEach","selected","filter","map","selectedOption","find","option","index","setAttribute","tabIndex","String","reference","renderRoot","querySelector","ul","availableHeight","window","innerHeight","getBoundingClientRect","bottom","style","maxHeight","autoUpdate","async","x","y","computePosition","placement","middleware","offset","flip","shift","padding","Object","assign","left","top","position","focus","combobox","report","updateComplete","positionDropdown","from","querySelectorAll","selectedIndex","getAttribute","reportValidity","removeAttribute","v","dispatchChange","dispatchEvent","CustomEvent","detail","bubbles","composed","Event","isEmpty","setValidity","valueMissing","inputRef","valid","message","customError","html","name","classMap","hidden","color","bgColor","SchmancyTheme","sys","surface","container","customEvt","detailVal","formAssociated","__decorateClass","property","type","prototype","Boolean","reflect","state","query","queryAssignedElements","flatten","customElement"],"mappings":"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"}
|