@getflip/swirl-components 0.389.0 → 0.390.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/components.json +161 -1
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/swirl-color-input.cjs.entry.js +2 -2
  4. package/dist/cjs/swirl-components.cjs.js +1 -1
  5. package/dist/cjs/swirl-date-input.cjs.entry.js +17 -8
  6. package/dist/cjs/swirl-form-control.cjs.entry.js +16 -2
  7. package/dist/cjs/swirl-resource-list-section.cjs.entry.js +1 -1
  8. package/dist/cjs/swirl-separator.cjs.entry.js +5 -1
  9. package/dist/cjs/swirl-text-input.cjs.entry.js +4 -4
  10. package/dist/cjs/swirl-time-input.cjs.entry.js +1 -1
  11. package/dist/collection/components/swirl-color-input/swirl-color-input.js +21 -2
  12. package/dist/collection/components/swirl-date-input/swirl-date-input.js +37 -9
  13. package/dist/collection/components/swirl-form-control/swirl-form-control.css +6 -16
  14. package/dist/collection/components/swirl-form-control/swirl-form-control.js +36 -1
  15. package/dist/collection/components/swirl-resource-list-section/swirl-resource-list-section.js +1 -1
  16. package/dist/collection/components/swirl-separator/swirl-separator.js +31 -1
  17. package/dist/collection/components/swirl-text-input/swirl-text-input.css +1 -5
  18. package/dist/collection/components/swirl-text-input/swirl-text-input.js +22 -3
  19. package/dist/collection/components/swirl-time-input/swirl-time-input.js +20 -1
  20. package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
  21. package/dist/components/swirl-color-input.js +4 -3
  22. package/dist/components/swirl-date-input.js +19 -9
  23. package/dist/components/swirl-form-control.js +18 -2
  24. package/dist/components/swirl-resource-list-section.js +1 -1
  25. package/dist/components/swirl-separator2.js +6 -1
  26. package/dist/components/swirl-text-input2.js +5 -4
  27. package/dist/components/swirl-time-input.js +2 -1
  28. package/dist/esm/loader.js +1 -1
  29. package/dist/esm/swirl-color-input.entry.js +2 -2
  30. package/dist/esm/swirl-components.js +1 -1
  31. package/dist/esm/swirl-date-input.entry.js +17 -8
  32. package/dist/esm/swirl-form-control.entry.js +16 -2
  33. package/dist/esm/swirl-resource-list-section.entry.js +1 -1
  34. package/dist/esm/swirl-separator.entry.js +5 -1
  35. package/dist/esm/swirl-text-input.entry.js +4 -4
  36. package/dist/esm/swirl-time-input.entry.js +1 -1
  37. package/dist/swirl-components/p-180ed63e.entry.js +1 -0
  38. package/dist/swirl-components/{p-a320aae9.entry.js → p-3cb7f345.entry.js} +1 -1
  39. package/dist/swirl-components/{p-87554dba.entry.js → p-57dfce0c.entry.js} +1 -1
  40. package/dist/swirl-components/p-81b2e380.entry.js +1 -0
  41. package/dist/swirl-components/p-81ee71b8.entry.js +1 -0
  42. package/dist/swirl-components/p-83cb302b.entry.js +1 -0
  43. package/dist/swirl-components/p-b243a736.entry.js +1 -0
  44. package/dist/swirl-components/swirl-components.esm.js +1 -1
  45. package/dist/types/components/swirl-color-input/swirl-color-input.d.ts +1 -0
  46. package/dist/types/components/swirl-date-input/swirl-date-input.d.ts +3 -2
  47. package/dist/types/components/swirl-form-control/swirl-form-control.d.ts +2 -0
  48. package/dist/types/components/swirl-separator/swirl-separator.d.ts +2 -0
  49. package/dist/types/components/swirl-text-input/swirl-text-input.d.ts +1 -0
  50. package/dist/types/components/swirl-time-input/swirl-time-input.d.ts +1 -0
  51. package/dist/types/components.d.ts +20 -2
  52. package/package.json +1 -1
  53. package/vscode-data.json +32 -0
  54. package/dist/swirl-components/p-5dd8a1b1.entry.js +0 -1
  55. package/dist/swirl-components/p-5f5034b5.entry.js +0 -1
  56. package/dist/swirl-components/p-90243eec.entry.js +0 -1
  57. package/dist/swirl-components/p-d17cd35b.entry.js +0 -1
  58. package/dist/swirl-components/p-fc54fadf.entry.js +0 -1
@@ -56,7 +56,7 @@ import { SwirlRadioState, SwirlRadioVariant } from "./components/swirl-radio/swi
56
56
  import { SwirlBoxPadding as SwirlBoxPadding1, SwirlResourceListSemantics } from "./components/swirl-resource-list/swirl-resource-list";
57
57
  import { SwirlResourceListItemLabelWeight } from "./components/swirl-resource-list-item/swirl-resource-list-item";
58
58
  import { SwirlSearchVariant } from "./components/swirl-search/swirl-search";
59
- import { SwirlSeparatorColor, SwirlSeparatorOrientation, SwirlSeparatorSpacing as SwirlSeparatorSpacing1 } from "./components/swirl-separator/swirl-separator";
59
+ import { SwirlSeparatorColor, SwirlSeparatorOrientation, SwirlSeparatorSemantics, SwirlSeparatorSpacing as SwirlSeparatorSpacing1 } from "./components/swirl-separator/swirl-separator";
60
60
  import { SwirlShellLayoutSecondaryNavGridItemVariant } from "./components/swirl-shell-layout/swirl-shell-layout";
61
61
  import { SwirlLabelColor, SwirlShellNavigationItemVariant } from "./components/swirl-shell-navigation-item/swirl-shell-navigation-item";
62
62
  import { SwirlSkeletonBoxBorderRadius } from "./components/swirl-skeleton-box/swirl-skeleton-box";
@@ -135,7 +135,7 @@ export { SwirlRadioState, SwirlRadioVariant } from "./components/swirl-radio/swi
135
135
  export { SwirlBoxPadding as SwirlBoxPadding1, SwirlResourceListSemantics } from "./components/swirl-resource-list/swirl-resource-list";
136
136
  export { SwirlResourceListItemLabelWeight } from "./components/swirl-resource-list-item/swirl-resource-list-item";
137
137
  export { SwirlSearchVariant } from "./components/swirl-search/swirl-search";
138
- export { SwirlSeparatorColor, SwirlSeparatorOrientation, SwirlSeparatorSpacing as SwirlSeparatorSpacing1 } from "./components/swirl-separator/swirl-separator";
138
+ export { SwirlSeparatorColor, SwirlSeparatorOrientation, SwirlSeparatorSemantics, SwirlSeparatorSpacing as SwirlSeparatorSpacing1 } from "./components/swirl-separator/swirl-separator";
139
139
  export { SwirlShellLayoutSecondaryNavGridItemVariant } from "./components/swirl-shell-layout/swirl-shell-layout";
140
140
  export { SwirlLabelColor, SwirlShellNavigationItemVariant } from "./components/swirl-shell-navigation-item/swirl-shell-navigation-item";
141
141
  export { SwirlSkeletonBoxBorderRadius } from "./components/swirl-skeleton-box/swirl-skeleton-box";
@@ -745,6 +745,7 @@ export namespace Components {
745
745
  */
746
746
  "pickerLabel"?: string;
747
747
  "placeholder"?: string;
748
+ "readonly"?: boolean;
748
749
  "required"?: boolean;
749
750
  "swirlAriaDescribedby"?: string;
750
751
  "value"?: string;
@@ -843,6 +844,7 @@ export namespace Components {
843
844
  * @default "input"
844
845
  */
845
846
  "preferredInputMode"?: "input" | "pick";
847
+ "readonly"?: boolean;
846
848
  "required"?: boolean;
847
849
  "swirlAriaDescribedby"?: string;
848
850
  "value"?: string;
@@ -1198,6 +1200,7 @@ export namespace Components {
1198
1200
  * @default "inside"
1199
1201
  */
1200
1202
  "labelPosition"?: SwirlFormControlLabelPosition;
1203
+ "readonly"?: boolean;
1201
1204
  "secondaryLabel"?: string;
1202
1205
  "tooltip"?: string;
1203
1206
  }
@@ -3632,6 +3635,10 @@ export namespace Components {
3632
3635
  * @default "horizontal"
3633
3636
  */
3634
3637
  "orientation"?: SwirlSeparatorOrientation;
3638
+ /**
3639
+ * @default "separator"
3640
+ */
3641
+ "semantics"?: SwirlSeparatorSemantics;
3635
3642
  /**
3636
3643
  * @default "8"
3637
3644
  */
@@ -4758,6 +4765,7 @@ export namespace Components {
4758
4765
  "passwordToggleLabel"?: string;
4759
4766
  "placeholder"?: string;
4760
4767
  "prefixLabel"?: string;
4768
+ "readonly"?: boolean;
4761
4769
  "required"?: boolean;
4762
4770
  /**
4763
4771
  * @default 1
@@ -4846,6 +4854,7 @@ export namespace Components {
4846
4854
  * @default "hh:mm"
4847
4855
  */
4848
4856
  "placeholder"?: string;
4857
+ "readonly"?: boolean;
4849
4858
  "required"?: boolean;
4850
4859
  "swirlAriaDescribedby"?: string;
4851
4860
  "value"?: string;
@@ -9764,6 +9773,7 @@ declare namespace LocalJSX {
9764
9773
  */
9765
9774
  "pickerLabel"?: string;
9766
9775
  "placeholder"?: string;
9776
+ "readonly"?: boolean;
9767
9777
  "required"?: boolean;
9768
9778
  "swirlAriaDescribedby"?: string;
9769
9779
  "value"?: string;
@@ -9850,6 +9860,7 @@ declare namespace LocalJSX {
9850
9860
  * @default "input"
9851
9861
  */
9852
9862
  "preferredInputMode"?: "input" | "pick";
9863
+ "readonly"?: boolean;
9853
9864
  "required"?: boolean;
9854
9865
  "swirlAriaDescribedby"?: string;
9855
9866
  "value"?: string;
@@ -10175,6 +10186,7 @@ declare namespace LocalJSX {
10175
10186
  * @default "inside"
10176
10187
  */
10177
10188
  "labelPosition"?: SwirlFormControlLabelPosition;
10189
+ "readonly"?: boolean;
10178
10190
  "secondaryLabel"?: string;
10179
10191
  "tooltip"?: string;
10180
10192
  }
@@ -12551,6 +12563,10 @@ declare namespace LocalJSX {
12551
12563
  * @default "horizontal"
12552
12564
  */
12553
12565
  "orientation"?: SwirlSeparatorOrientation;
12566
+ /**
12567
+ * @default "separator"
12568
+ */
12569
+ "semantics"?: SwirlSeparatorSemantics;
12554
12570
  /**
12555
12571
  * @default "8"
12556
12572
  */
@@ -13666,6 +13682,7 @@ declare namespace LocalJSX {
13666
13682
  "passwordToggleLabel"?: string;
13667
13683
  "placeholder"?: string;
13668
13684
  "prefixLabel"?: string;
13685
+ "readonly"?: boolean;
13669
13686
  "required"?: boolean;
13670
13687
  /**
13671
13688
  * @default 1
@@ -13744,6 +13761,7 @@ declare namespace LocalJSX {
13744
13761
  * @default "hh:mm"
13745
13762
  */
13746
13763
  "placeholder"?: string;
13764
+ "readonly"?: boolean;
13747
13765
  "required"?: boolean;
13748
13766
  "swirlAriaDescribedby"?: string;
13749
13767
  "value"?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@getflip/swirl-components",
3
- "version": "0.389.0",
3
+ "version": "0.390.0",
4
4
  "description": "Swirl Design System Web Component Library",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
package/vscode-data.json CHANGED
@@ -2265,6 +2265,10 @@
2265
2265
  "name": "placeholder",
2266
2266
  "description": ""
2267
2267
  },
2268
+ {
2269
+ "name": "readonly",
2270
+ "description": ""
2271
+ },
2268
2272
  {
2269
2273
  "name": "required",
2270
2274
  "description": ""
@@ -2450,6 +2454,10 @@
2450
2454
  }
2451
2455
  ]
2452
2456
  },
2457
+ {
2458
+ "name": "readonly",
2459
+ "description": ""
2460
+ },
2453
2461
  {
2454
2462
  "name": "required",
2455
2463
  "description": ""
@@ -3177,6 +3185,10 @@
3177
3185
  }
3178
3186
  ]
3179
3187
  },
3188
+ {
3189
+ "name": "readonly",
3190
+ "description": ""
3191
+ },
3180
3192
  {
3181
3193
  "name": "secondary-label",
3182
3194
  "description": ""
@@ -18852,6 +18864,18 @@
18852
18864
  }
18853
18865
  ]
18854
18866
  },
18867
+ {
18868
+ "name": "semantics",
18869
+ "description": "",
18870
+ "values": [
18871
+ {
18872
+ "name": "none"
18873
+ },
18874
+ {
18875
+ "name": "separator"
18876
+ }
18877
+ ]
18878
+ },
18855
18879
  {
18856
18880
  "name": "spacing",
18857
18881
  "description": "",
@@ -21948,6 +21972,10 @@
21948
21972
  "name": "prefix-label",
21949
21973
  "description": ""
21950
21974
  },
21975
+ {
21976
+ "name": "readonly",
21977
+ "description": ""
21978
+ },
21951
21979
  {
21952
21980
  "name": "required",
21953
21981
  "description": ""
@@ -22168,6 +22196,10 @@
22168
22196
  "name": "placeholder",
22169
22197
  "description": ""
22170
22198
  },
22199
+ {
22200
+ "name": "readonly",
22201
+ "description": ""
22202
+ },
22171
22203
  {
22172
22204
  "name": "required",
22173
22205
  "description": ""
@@ -1 +0,0 @@
1
- import{r as t,c as i,h as e,H as s,d as a}from"./p-CWOhMVtL.js";import{c as n}from"./p-orsBiyT_.js";import{f as o,I as d,p as r,i as h}from"./p-D3UoejeY.js";import{D as c}from"./p-DJ2FyZeW.js";import{i as p}from"./p-DytJsmhr.js";const l="yyyy-MM-dd",u=class{constructor(e){t(this,e),this.invalidInput=i(this,"invalidInput",7),this.valueChange=i(this,"valueChange",7),this.datePickerDisableDate=()=>!1,this.datePickerLabel="Date picker",this.datePickerTriggerLabel="Open date picker",this.firstDayOfWeek=0,this.format="yyyy-MM-dd",this.locale="en-US",this.placeholder="yyyy-mm-dd",this.preferredInputMode="input",this.iconSize=24,this.readonly=!1,this.mediaQueryUnsubscribe=()=>{},this.onClick=t=>{t.preventDefault(),"pick"===this.preferredInputMode&&(this.pickerPopover.open(this.el),p()||this.focus())},this.onMouseDown=()=>{"pick"===this.preferredInputMode&&this.pickerPopover.close()},this.onFocus=t=>{this.handleAutoSelect(t)},this.onBlur=t=>{const i=this.pickerPopover.contains(t.relatedTarget);this.setReadOnly(!i)},this.onPickDate=t=>{const i=t.detail,e=o(i,l);this.value=e,this.inputEl.value=o(i,this.pattern),this.mask.updateValue(),this.setReadOnly(!0),this.pickerPopover.close()}}componentWillLoad(){const t=Array.from(document.querySelectorAll("swirl-date-input")).indexOf(this.el);this.id=`swirl-date-input-${t}`,this.setReadOnly(!0)}componentDidLoad(){this.setupMask(),this.mediaQueryUnsubscribe=c.subscribe((t=>{this.updateIconSize(t)})),this.autoFocus&&this.focus()}disconnectedCallback(){this.mask?.destroy(),this.mediaQueryUnsubscribe()}watchFormat(){this.setupMask()}watchValue(t,i){t!==i&&this.updateValue()}async openPicker(){this.pickerPopover.open(this.el)}focus(){setTimeout((()=>{this.inputEl.focus()}))}updateIconSize(t){this.iconSize=t?20:24}handleAutoSelect(t){this.autoSelect?t.target&&t.target instanceof HTMLInputElement&&t.target.select():setTimeout((()=>{t.target&&t.target instanceof HTMLInputElement&&t.target.setSelectionRange&&t.target.setSelectionRange(0,0)}))}setReadOnly(t){this.readonly=!("pick"!==this.preferredInputMode||!p())&&t}setupMask(){this.mask?.destroy(),this.pattern=this.format.replace(/(?<!d)d(?!d)/g,"dd").replace(/(?<!M)M(?!M)/g,"MM").replace(/(?<!y)y(?!y)/g,"yyyy").replace(/(?<!y)yyy(?!y)/g,"yyyy"),this.pattern||(this.pattern=l),this.mask=d(this.inputEl,{mask:Date,pattern:this.pattern.replace(/([^A-Za-z0-9])/g,"$1`"),autofix:"pad",lazy:!0,overwrite:!0,eager:"append",blocks:{dd:{mask:d.MaskedRange,from:1,to:31,maxLength:2},MM:{mask:d.MaskedRange,from:1,to:12,maxLength:2},yy:{mask:d.MaskedRange,from:0,to:99,maxLength:2},yyyy:{mask:d.MaskedRange,from:1e3,to:9999,maxLength:4}},format:t=>{const i=o(t,this.pattern);return h(t)?(this.value=o(t,l),i):(this.invalidInput.emit(t.toString()),"")},parse:t=>r(t,this.pattern,new Date)}),this.updateValue()}updateValue(){if(this.value){const t=r(this.value,l,new Date);if(h(t)){const i=o(t,this.pattern);this.mask.value=i,this.valueChange.emit(this.value)}else this.invalidInput.emit(this.value)}}render(){const t=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,i=Boolean(this.value)?r(this.value,l,new Date):void 0,a=h(i)?i:void 0,o=n("date-input",{"date-input--inline":this.inline});return e(s,{key:"51241cb0dff5d8e8b7c3cc8fe39fdfae86b181a5"},e("div",{key:"9aac1ceb57193aeba07095b1803ea16c78327299",class:o},e("input",{key:"92482145c65ae9f26d26b67ff8f8d19940597343","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":t,autoFocus:this.autoFocus,class:"date-input__input",disabled:this.disabled,readonly:this.readonly,id:this.id,inputmode:"numeric",onClick:this.onClick,onMouseDown:this.onMouseDown,onFocus:this.onFocus,onBlur:this.onBlur,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,type:"text"}),e("swirl-popover-trigger",{key:"01858bcbf69fc53c104078b29519e6f3f82dd817",swirlPopover:`popover-${this.id}`},e("button",{key:"ca5f4439bdc472d0ccb6ec08b3ba7601989741bb","aria-label":this.datePickerTriggerLabel,class:"date-input__date-picker-button",disabled:this.disabled,type:"button"},e("swirl-icon-today",{key:"163ce2213128112171caa82e6eb063f1dedcc660",size:this.iconSize})))),!this.disabled&&e("swirl-popover",{key:"d5c45765009f3c890acd248e3c2f08ba18ac17ac",animation:"scale-in-y",class:"date-input__date-picker-popover",id:`popover-${this.id}`,label:this.datePickerLabel,placement:"bottom-end",ref:t=>this.pickerPopover=t},e("swirl-date-picker",{key:"392f80f035dbcc6ee0644d00a2b6743d87e53067",disableDate:this.datePickerDisableDate,firstDayOfWeek:this.firstDayOfWeek,labels:this.labels,locale:this.locale,onValueChange:this.onPickDate,value:a,startDate:a})))}get el(){return a(this)}static get watchers(){return{format:["watchFormat"],value:["watchValue"]}}};u.style=".sc-swirl-date-input-h{display:flex;width:100%}.sc-swirl-date-input-h *.sc-swirl-date-input{box-sizing:border-box}.date-input.sc-swirl-date-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:0}}.date-input__input.sc-swirl-date-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.date-input__input.sc-swirl-date-input:focus{outline:none}.date-input__input.sc-swirl-date-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__input.sc-swirl-date-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-input__date-picker-button.sc-swirl-date-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.date-input__date-picker-button.sc-swirl-date-input:focus:not(:focus-visible){outline:none}.date-input__date-picker-button.sc-swirl-date-input:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-input__date-picker-button.sc-swirl-date-input:disabled{color:var(--s-icon-disabled);cursor:default}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__date-picker-button.sc-swirl-date-input{top:-0.625rem}}@media (max-width: 767px){.date-input__date-picker-popover.sc-swirl-date-input{position:fixed}}";export{u as swirl_date_input}
@@ -1 +0,0 @@
1
- import{r as e,h as s,H as i,d as t}from"./p-CWOhMVtL.js";const a=class{constructor(s){e(this,s),this.separatorSpacing="4",this.spacing="0",this.hasSeparator=!1}render(){const e=this.el.closest('[role="grid"]')?"rowgroup":"listitem",t="listitem"===e?"list":void 0;return s(i,{key:"883825134d9bd2ef376418bbc4d5d522991bb62c"},this.hasSeparator&&s("swirl-separator",{key:"662efab489907df3a412ca3a32848bb7ca1ce9c4",spacing:this.separatorSpacing}),s("div",{key:"fe7c0fc60712f61fe25df1cf5ffaff6d92ab1f09","aria-labelledby":"label",role:e},s("span",{key:"a2a979a7ae7755b503adb3f223d1f36384577f2f",id:"label",class:"resource-list-section-label",part:"resource-list-section-label"},this.label),s("swirl-stack",{key:"09db142145c506ee525ba5f91bca7ea371bcaa24",spacing:this.spacing,swirlAriaRole:t},s("slot",{key:"b2bed66500e858fc44d4be875afc5d67ccc4dd32"}))))}get el(){return t(this)}};a.style=":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-section-label{display:flex;padding:var(--s-space-8);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);font-size:var(--s-font-size-base);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-section-label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";export{a as swirl_resource_list_section}
@@ -1 +0,0 @@
1
- import{r as o,h as r,H as t,d as l}from"./p-CWOhMVtL.js";import{c as s}from"./p-orsBiyT_.js";import{j as e,k as i}from"./p-DytJsmhr.js";const n=class{constructor(r){o(this,r),this.fontSize="default",this.labelPosition="inside",this.descriptionId=`form-control-description-${Math.round(1e5*Math.random())}`,this.labelId=`form-control-label-${Math.round(1e5*Math.random())}`,this.listenToInputValueChanges=()=>{this.inputEl.addEventListener("valueChange",this.checkInputValue)},this.checkInputValue=()=>{this.inputValue=this.inputEl?.value},this.onFocusIn=()=>{this.hasFocus=!0},this.onFocusOut=()=>{this.hasFocus=!1},this.onKeyDown=o=>{"Tab"===o.key&&setTimeout((()=>{e(i(),this.el)||(this.hasFocus=!1)}))},this.onLabelClick=()=>{Boolean(this.inputEl.getAttribute("contenteditable"))&&this.inputEl.focus()}}componentWillLoad(){this.inputEl=this.el.firstElementChild,this.associateDescriptionWithInputElement(),this.associateLabelWithInputElement(),this.setInputElementDisabledState(),this.setInputElementInlineState(),this.setInputElementInvalidState(),this.setInputElementLabel(),this.checkInputValue(),this.listenToInputValueChanges()}componentDidRender(){this.checkInputValue()}watchDescription(){this.associateDescriptionWithInputElement()}watchErrorMessage(){this.associateDescriptionWithInputElement()}setInputElementDisabledState(){Boolean(this.inputEl)&&(this.disabled?this.inputEl.setAttribute("disabled","true"):this.inputEl.removeAttribute("disabled"))}setInputElementInlineState(){Boolean(this.inputEl)&&(this.inline||"outside"===this.labelPosition?this.inputEl.setAttribute("inline","true"):this.inputEl.removeAttribute("inline"))}setInputElementInvalidState(){Boolean(this.inputEl)&&(this.invalid?this.inputEl.setAttribute("invalid","true"):this.inputEl.removeAttribute("invalid"))}setInputElementLabel(){if(!Boolean(this.inputEl))return;let o=this.label;this.secondaryLabel&&(o+=` ${this.secondaryLabel}`),this.inputEl.setAttribute("label",o)}onWindowClick(o){this.hasFocus&&(this.el.contains(o.target)||(o.stopPropagation(),this.hasFocus=!1))}associateLabelWithInputElement(){Boolean(this.inputEl.getAttribute("contenteditable"))&&(this.inputEl.setAttribute("aria-labelledby",this.labelId),this.inputEl.setAttribute("aria-describedby",this.descriptionId))}associateDescriptionWithInputElement(){Boolean(this.inputEl)&&(Boolean(this.description)||Boolean(this.errorMessage)?Boolean(this.inputEl.getAttribute("contenteditable"))?this.inputEl.setAttribute("aria-describedby",this.descriptionId):this.inputEl.setAttribute("swirl-aria-describedby",this.descriptionId):(this.inputEl.removeAttribute("aria-describedby"),this.inputEl.removeAttribute("swirl-aria-describedby")))}render(){const o=Boolean(this.errorMessage),l=Boolean(this.description)&&!o,e=Boolean(this.inputEl.getAttribute("contenteditable")),i=Boolean(this.el.querySelector('[slot="prefix"]')),n=Boolean(this.icon),c=Array.isArray(this.inputValue)?this.inputValue.length>0:Boolean(this.inputValue)||e&&Boolean(this.inputEl.innerHTML),a=Boolean(this.inputEl.getAttribute("show-character-counter")),f=Boolean(this.inputEl.getAttribute("placeholder"))||Boolean(this.inputEl.placeholder),m=s("form-control",`form-control--font-size-${this.fontSize}`,`form-control--label-position-${this.labelPosition}`,{"form-control--disabled":this.disabled,"form-control--has-character-counter":a,"form-control--has-focus":this.hasFocus,"form-control--has-placeholder":f,"form-control--has-prefix":i,"form-control--has-icon":n,"form-control--has-value":c,"form-control--hide-label":this.hideLabel,"form-control--inline":this.inline,"form-control--invalid":this.invalid,"form-control--is-select":"SWIRL-SELECT"===this.inputEl.tagName}),d=e?"div":"label";return r(t,{key:"13d2a3e34d0519deb13fc0c48bdcd50e5c998afa",onFocusin:this.onFocusIn,onFocusout:this.onFocusOut,onKeyDown:this.onKeyDown},r("div",{key:"fa2959507fcbb63ff9b46e3a5250b24a5b8e3020",class:m,role:"group"},r("span",{key:"5da5d74a5a29102e15bf5075b696f0cc53712830",class:"form-control__controls"},r("span",{key:"7dd1a58fdac4a4b4ef6932d8c92068a5a77b58bb",class:"form-control__prefix"},r("slot",{key:"78928c653468ce923e22d73f7f3db1f048a5d066",name:"prefix"})),r(d,{key:"5b632cf43b54e83db9e908d76120119696b351b8",class:"form-control__label",onClick:this.onLabelClick},n&&r("span",{key:"9f3dd8179cd5a9ab2f373f360676002c3f375b30",class:"form-control__icon"},r("swirl-icon",{key:"84f763010a68c9782cde47af8028ecba5ee21c0a",glyph:this.icon,size:20})),r("span",{key:"8525bb87b93fd1fcec6bf9299f77b66055f664d3",class:"form-control__label-text",id:this.labelId},this.label,this.secondaryLabel&&"outside"===this.labelPosition&&r("span",{key:"fd4ceb7d0951b4b5f6c8c1f9ccf1339789cc9d55",class:"form-control__secondary-label"},this.secondaryLabel),this.tooltip&&r("span",{key:"045855d7e63c2f3c63fa716f485c0248e8a08567",class:"form-control__tooltip"},r("swirl-tooltip",{key:"e9ff35f3bff49113de0535f62e9d80f7003fb962",content:this.tooltip,positioning:"fixed",position:"top"},r("swirl-icon-help",{key:"61d4d4df9d518d9294a510530003df16c0215dd5",size:16,tabindex:"0"})))),r("span",{key:"748d81f068640f3cbff2ab1b31a87046442c6521",class:"form-control__input"},r("slot",{key:"c395ac72ad7d609f88e91fa38cddab6b871e66ec"})))),l&&r("span",{key:"632118d7120ae262a52ca6eb3f8449c77a7288c9",class:"form-control__description",id:this.descriptionId},this.description),r("span",{key:"d9dc941f07cb0df699afbba834de82546f06b361","aria-live":"polite"},o&&r("span",{key:"c3f41f71bb570cbe08348205cbccf0170d4757e7",class:"form-control__error-message",id:this.descriptionId},r("swirl-inline-error",{key:"3b579f6ff3941f7cafedf0991022026b6ac9e5fd",message:this.errorMessage,size:"s"})))))}get el(){return l(this)}static get watchers(){return{description:["watchDescription"],errorMessage:["watchErrorMessage"],disabled:["setInputElementDisabledState"],inline:["setInputElementInlineState"],invalid:["setInputElementInvalidState"],label:["setInputElementLabel"]}}};n.style='.sc-swirl-form-control-h{display:block;width:100%}.sc-swirl-form-control-h *.sc-swirl-form-control{box-sizing:border-box}.form-control.sc-swirl-form-control{--swirl-autocomplete-tags-margin-top:var(--s-space-4);display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__input.sc-swirl-form-control{overflow:hidden;max-height:0}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder):not(.form-control--label-position-outside) .form-control__label-text.sc-swirl-form-control{position:absolute;top:0;bottom:0;display:flex;align-items:center;height:auto}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control--font-size-sm.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control--font-size-sm.sc-swirl-form-control .form-control__description.sc-swirl-form-control{font-size:var(--s-font-size-sm)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder).form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder).form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-swirl-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select:not(.form-control--label-position-outside) .form-control__label-text.sc-swirl-form-control{position:absolute;top:0;bottom:0;display:flex;align-items:center;height:auto;pointer-events:auto}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select.form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select.form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-base);--swirl-autocomplete-tags-margin-top:0;padding-top:calc(var(--s-line-height-sm) + var(--s-space-4))}.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--is-select) .form-control__label.sc-swirl-form-control{cursor:text}.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:calc(100% + var(--s-space-4));left:0;color:var(--s-text-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);transform:none;opacity:1}.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--label-position-outside.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--label-position-outside.form-control--font-size-base.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.form-control--font-size-base.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__label-text.sc-swirl-form-control{display:flex;align-items:center}}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control{display:none;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control{display:flex;position:relative;padding:var(--s-space-4);z-index:10}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control:hover{cursor:default}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control swirl-tooltip.sc-swirl-form-control::after{content:"";position:absolute;inset:calc(-1 * var(--s-space-4))}}.form-control--invalid.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-disabled);color:var(--s-text-disabled)}.form-control--disabled.sc-swirl-form-control .form-control__description.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--inline.sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.form-control--inline.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--hide-label.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}.form-control--has-prefix.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{position:static}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-highlight);border-right-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-top-left-radius:0;border-bottom-left-radius:0}.form-control--has-prefix.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{display:flex}.form-control__controls.sc-swirl-form-control{position:relative;display:flex;align-items:stretch}.form-control__label.sc-swirl-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__secondary-label.sc-swirl-form-control{font-weight:var(--s-font-weight-normal);color:var(--s-text-subdued);margin-left:var(--s-space-4)}.form-control__label-text.sc-swirl-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);text-align:start;white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__prefix.sc-swirl-form-control{z-index:1;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:center;align-items:center;border-top:var(--s-border-width-default) solid var(--s-border-strong);border-bottom:var(--s-border-width-default) solid var(--s-border-strong);border-left:var(--s-border-width-default) solid var(--s-border-strong);border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm);background-color:var(--s-surface-raised-default)}.form-control__prefix.sc-swirl-form-control-s>select{height:100%;margin-right:calc(-1 * var(--s-space-16));margin-left:calc(-1 * var(--s-space-16));padding-right:calc(var(--s-space-16) + 1.25rem);padding-left:var(--s-space-16);border:none;color:var(--s-text-default);background:url(\'data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 12.4579C9.88889 12.4579 9.78472 12.4404 9.6875 12.4054C9.59027 12.3709 9.5 12.312 9.41666 12.2287L5.5625 8.37453C5.40972 8.22175 5.33694 8.03064 5.34416 7.8012C5.35083 7.57231 5.43055 7.38148 5.58333 7.2287C5.73611 7.07592 5.93055 6.99953 6.16666 6.99953C6.40277 6.99953 6.59722 7.07592 6.75 7.2287L10 10.4787L13.2708 7.20787C13.4236 7.05509 13.6147 6.98203 13.8442 6.9887C14.0731 6.99592 14.2639 7.07592 14.4167 7.2287C14.5694 7.38148 14.6458 7.57592 14.6458 7.81203C14.6458 8.04814 14.5694 8.24259 14.4167 8.39537L10.5833 12.2287C10.5 12.312 10.4097 12.3709 10.3125 12.4054C10.2153 12.4404 10.1111 12.4579 10 12.4579Z" fill="%236E6E6E"/></svg>\');background-color:transparent;background-repeat:no-repeat;background-position:right var(--s-space-8) center;font:inherit;line-height:var(--s-line-height-base);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control__prefix.sc-swirl-form-control-s>select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__prefix.sc-swirl-form-control-s>select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control__icon.sc-swirl-form-control{position:absolute;top:0px;bottom:0px;margin:auto;display:flex;align-items:center;justify-content:center;width:var(--s-space-20)}.form-control--has-icon.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{margin-left:calc(var(--s-space-20) + var(--s-space-12))}.form-control--has-icon.sc-swirl-form-control .form-control__input.sc-swirl-form-control{margin-left:calc(var(--s-space-20) + var(--s-space-12))}.form-control__description.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-swirl-form-control{display:block;margin-top:var(--s-space-4)}.form-control__input.sc-swirl-form-control-s>[contenteditable]:focus{outline:none}.form-control__input.sc-swirl-form-control-s>[contenteditable]{width:100%;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__input.sc-swirl-form-control-s>[contenteditable]{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}';export{n as swirl_form_control}
@@ -1 +0,0 @@
1
- import{r as t,c as i,h as s,H as e}from"./p-CWOhMVtL.js";import{c as n}from"./p-orsBiyT_.js";import{D as r}from"./p-DJ2FyZeW.js";import"./p-DytJsmhr.js";const a=class{constructor(s){t(this,s),this.inputBlur=i(this,"inputBlur",7),this.inputFocus=i(this,"inputFocus",7),this.valueChange=i(this,"valueChange",7),this.autoComplete="on",this.characterCounterLabel="Used characters",this.clearButtonLabel="Clear input",this.fontSize="default",this.passwordToggleLabel="Toggle password display",this.rows=1,this.type="text",this.iconSize=24,this.showPassword=!1,this.mediaQueryUnsubscribe=()=>{},this.clear=()=>{this.inputEl.value="",this.value="",this.valueChange.emit(""),this.inputEl.focus()},this.onChange=t=>{this.value=t.target.value},this.onBlur=t=>{this.inputBlur.emit(t)},this.onFocus=t=>{this.inputFocus.emit(t),this.handleAutoSelect(t)},this.onInput=t=>{this.onChange(t)},this.onKeyPress=t=>{"number"===this.type&&["+","-","e"].includes(t.key)&&t.preventDefault()},this.decreaseValue=()=>{if("number"!==this.type)return;const t=this.step||1;let i=this.inputEl.valueAsNumber;isNaN(this.inputEl.valueAsNumber)&&(i=void 0!==this.min?this.min+1:1),this.value=String(Math.max(this.min||-1/0,i-t)),this.valueChange.emit(this.value)},this.increaseValue=()=>{if("number"!==this.type)return;const t=this.step||1;let i=this.inputEl.valueAsNumber;isNaN(this.inputEl.valueAsNumber)&&(i=void 0!==this.min?this.min-1:-1),this.value=String(Math.min(this.max||1/0,i+t)),this.valueChange.emit(this.value)},this.togglePassword=()=>{"password"===this.type&&(this.showPassword=!this.showPassword)}}componentDidLoad(){this.mediaQueryUnsubscribe=r.subscribe((t=>{this.updateIconSize(t)})),this.autoFocus&&setTimeout((()=>{this.inputEl.focus()}))}componentDidRender(){this.adjustInputSize()}disconnectedCallback(){this.mediaQueryUnsubscribe()}async blurInput(){this.inputEl.blur()}async focusInput(){this.inputEl.focus()}watchValue(t,i){t!==i&&this.valueChange.emit(t)}updateIconSize(t){this.iconSize=t?20:24}adjustInputSize(){(this.rows>1||this.autoGrow)&&(this.inputEl.style.width="",this.inputEl.style.height="",this.inputEl.style.height=Boolean(this.inputEl.scrollHeight)?this.inputEl.scrollHeight/16+"rem":""),1!==this.rows||this.autoGrow||(this.inputEl.style.height="",this.inputEl.style.width="",!this.suffixLabel||"password"===this.type||this.disableDynamicWidth||Boolean(this.placeholder)||(this.inputEl.style.width=this.inputEl.scrollWidth/16+"rem"))}handleAutoSelect(t){this.autoSelect&&t.target.select()}render(){const t=1!==this.rows||this.autoGrow?"textarea":"input",i=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,r="number"===this.type&&!this.disabled,a="password"===this.type&&!this.disabled,p=this.clearable&&!this.disabled&&Boolean(this.value)&&!a&&!r&&!this.showCharacterCounter,u="password"===this.type&&this.showPassword?"text":this.type,o=n("text-input",`text-input--font-size-${this.fontSize}`,`text-input--type-${this.type}`,{"text-input--auto-grow":this.autoGrow,"text-input--clearable":this.clearable,"text-input--disabled":this.disabled,"text-input--disable-dynamic-width":this.disableDynamicWidth||Boolean(this.placeholder),"text-input--has-suffix":Boolean(this.suffixLabel),"text-input--inline":this.inline,"text-input--show-password":"password"===this.type&&this.showPassword});return s(e,{key:"118c43993df15e8a56132135bd6e5bd7b20c7fa5"},s("div",{key:"b32019d666499025e823f65c84107090b3e0bdde",class:o},this.prefixLabel&&s("span",{key:"e92f359d218821987e795d91ba09de0a5ac83787",class:"text-input__prefix"},this.prefixLabel),s(t,{key:"311c606dc2c9b78965d35543c79c828bbf04939d","aria-autocomplete":this.swirlAriaAutocomplete,"aria-controls":this.swirlAriaControls,"aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-expanded":this.swirlAriaExpanded,"aria-invalid":i,autoComplete:this.autoComplete,autoFocus:this.autoFocus,class:"text-input__input",disabled:this.disabled,inputMode:this.mode,maxLength:this.maxLength,max:"number"===this.type?this.max:void 0,min:"number"===this.type?this.min:void 0,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,onKeyPress:this.onKeyPress,placeholder:Boolean(this.suffixLabel)?void 0:this.placeholder,ref:t=>this.inputEl=t,required:this.required,role:this.swirlRole,name:this.inputName,rows:this.rows>1?this.rows:this.autoGrow?1:void 0,spellcheck:this.spellCheck,step:"number"===this.type?this.step:void 0,type:u,value:this.value},this.rows>1&&this.value),this.suffixLabel&&s("span",{key:"2e2987f816f1a26b074ca67fc67d2b88031af88e",class:"text-input__suffix"},this.suffixLabel),p&&s("button",{key:"82218c372d0374651f5cb3a07a679c5f045dabfc","aria-label":this.clearButtonLabel,class:"text-input__clear-button",onClick:this.clear,part:"text-input__clear-button",type:"button"},s("swirl-icon-cancel",{key:"9c42c315b34e9a614a145d2e8a00da2b28fcc21e",size:this.iconSize})),a&&s("button",{key:"d78dcd286ba441a8d5df0a9d9e8b02c466dab617","aria-label":this.passwordToggleLabel,class:"text-input__password-toggle",onClick:this.togglePassword,type:"button"},s(this.showPassword?"swirl-icon-visibility-off":"swirl-icon-visibility",{size:this.iconSize})),r&&s("span",{key:"e29c6cb14c6bb8ff7ebf67800b2b267ca0208df9",class:"text-input__stepper"},s("button",{key:"6218def82164fd3b57015d3fb8c40391cefcf84d","aria-hidden":"true",class:"text-input__step-button",onClick:this.increaseValue,tabIndex:-1,type:"button"},s("swirl-icon-expand-less",{key:"9b338df89a94563b9f9fde0ba16cb1fae537c203",size:this.iconSize})),s("button",{key:"6d31cb2c37f9a2887c57f2350afe184a76dd09f8","aria-hidden":"true",class:"text-input__step-button",onClick:this.decreaseValue,tabIndex:-1,type:"button"},s("swirl-icon-expand-more",{key:"f2b7974999012a8ad29d84dd5df8a908605f57b4",size:this.iconSize}))),this.showCharacterCounter&&s("span",{key:"4dae89e8b35db216b513bbca04dff56c48b64696",class:"text-input__character-counter","aria-live":"polite"},s("swirl-visually-hidden",{key:"c48b6c6017b6b2a8524a2f3f5e9d2d8869026b3f"},this.characterCounterLabel),this.value?.length||0," ",Boolean(this.maxLength)?`/ ${this.maxLength}`:"")))}static get watchers(){return{value:["watchValue"]}}};a.style='.sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--disabled.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{color:var(--s-text-disabled)}.text-input--font-size-sm.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-sm.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--font-size-base.sc-swirl-text-input{--swirl-text-input-placeholder-size:var(--s-font-size-base);font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-base.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text-input--has-suffix.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:0.25rem;min-width:0.25rem}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-disabled);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type="number"].sc-swirl-text-input{-moz-appearance:textfield}.text-input__input.sc-swirl-text-input::-moz-placeholder{font-size:var(--swirl-text-input-placeholder-size)}.text-input__input.sc-swirl-text-input::placeholder{font-size:var(--swirl-text-input-placeholder-size)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}';export{a as swirl_text_input}
@@ -1 +0,0 @@
1
- import{r,h as a,F as t,H as e}from"./p-CWOhMVtL.js";import{c as o}from"./p-orsBiyT_.js";const s=class{constructor(a){r(this,a),this.borderColor="default",this.color="default",this.orientation="horizontal",this.spacing="8"}componentWillLoad(){this.forceColor()}forceColor(){"default"!==this.borderColor&&(console.warn('[Swirl] The "borderColor" prop of swirl-separator is deprecated and will be removed with the next major release. Please use the "color" prop to achieve the same result.'),this.color=this.borderColor)}render(){const r="horizontal"===this.orientation?{paddingTop:`var(--s-space-${this.spacing})`,paddingBottom:`var(--s-space-${this.spacing})`}:{paddingRight:`var(--s-space-${this.spacing})`,paddingLeft:`var(--s-space-${this.spacing})`},s=o("separator",`separator--color-${this.color}`,`separator--orientation-${this.orientation}`);return a(e,{key:"17b01a0eecb1f97564885965da64a90967730e14","aria-orientation":this.orientation,class:s,role:"separator",style:r},a("span",{key:"e9f7f71c5da01191f232455e8f5e6d9c39131a24",class:"separator__line"}),this.label&&a(t,{key:"1f9f5c1d0b16766ed8677d7657946c335a5ab8ac"},a("span",{key:"ae1e1cc3149d5f0be42ea4be999cfda0fcfb6def",class:"separator__label"},this.label),a("span",{key:"029ca069ba60923d67310941f464a92212e4fbd5",class:"separator__line"})))}};s.style=":host{display:flex;width:100%;align-items:center;gap:var(--s-space-8)}:host *{box-sizing:border-box}:host(.separator--orientation-vertical){display:inline-flex;width:auto;flex-direction:column}:host(.separator--orientation-vertical) .separator__line{width:var(--s-border-width-default);height:100%;min-height:1.125rem}:host(.separator--color-critical) .separator__line{background-color:var(--s-border-critical)}:host(.separator--color-critical) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-strong) .separator__line{background-color:var(--s-border-strong)}:host(.separator--color-strong) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-highlight) .separator__line{background-color:var(--s-border-highlight)}:host(.separator--color-highlight) .separator__label{color:var(--s-text-highlight)}.separator__line{display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-default)}.separator__label{flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:var(--s-font-size-sm);color:var(--s-text-disabled)}";export{s as swirl_separator}