@scouterna/ui-webc 2.2.2 → 2.2.4

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 (94) hide show
  1. package/dist/cjs/scout-app-bar.cjs.entry.js +1 -1
  2. package/dist/cjs/scout-app-bar.entry.cjs.js.map +1 -1
  3. package/dist/cjs/scout-button.cjs.entry.js +3 -3
  4. package/dist/cjs/scout-button.entry.cjs.js.map +1 -1
  5. package/dist/cjs/scout-checkbox.scout-radio-button.entry.cjs.js.map +1 -1
  6. package/dist/cjs/scout-checkbox_2.cjs.entry.js +2 -2
  7. package/dist/cjs/scout-field.cjs.entry.js +1 -1
  8. package/dist/cjs/scout-field.entry.cjs.js.map +1 -1
  9. package/dist/cjs/scout-input.cjs.entry.js +1 -1
  10. package/dist/cjs/scout-input.entry.cjs.js.map +1 -1
  11. package/dist/cjs/scout-select.cjs.entry.js +1 -1
  12. package/dist/cjs/scout-select.entry.cjs.js.map +1 -1
  13. package/dist/cjs/scout-switch.cjs.entry.js +1 -1
  14. package/dist/cjs/scout-switch.entry.cjs.js.map +1 -1
  15. package/dist/collection/components/app-bar/app-bar.js +6 -1
  16. package/dist/collection/components/app-bar/app-bar.js.map +1 -1
  17. package/dist/collection/components/button/button.css +4 -0
  18. package/dist/collection/components/button/button.js +5 -3
  19. package/dist/collection/components/button/button.js.map +1 -1
  20. package/dist/collection/components/checkbox/checkbox.js +7 -1
  21. package/dist/collection/components/checkbox/checkbox.js.map +1 -1
  22. package/dist/collection/components/field/field.js +6 -1
  23. package/dist/collection/components/field/field.js.map +1 -1
  24. package/dist/collection/components/input/input.js +7 -1
  25. package/dist/collection/components/input/input.js.map +1 -1
  26. package/dist/collection/components/radio-button/radio-button.js +6 -1
  27. package/dist/collection/components/radio-button/radio-button.js.map +1 -1
  28. package/dist/collection/components/select/select.js +6 -1
  29. package/dist/collection/components/select/select.js.map +1 -1
  30. package/dist/collection/components/switch/switch.js +6 -1
  31. package/dist/collection/components/switch/switch.js.map +1 -1
  32. package/dist/components/{p-BkrRT31y.js → p-B_lll43e.js} +3 -3
  33. package/dist/components/{p-BkrRT31y.js.map → p-B_lll43e.js.map} +1 -1
  34. package/dist/components/{p-C2_wl40t.js → p-CwrP_ZZM.js} +3 -3
  35. package/dist/components/{p-C2_wl40t.js.map → p-CwrP_ZZM.js.map} +1 -1
  36. package/dist/components/scout-app-bar.js +1 -1
  37. package/dist/components/scout-app-bar.js.map +1 -1
  38. package/dist/components/scout-button.js +3 -3
  39. package/dist/components/scout-button.js.map +1 -1
  40. package/dist/components/scout-checkbox.js +1 -1
  41. package/dist/components/scout-field.js +1 -1
  42. package/dist/components/scout-field.js.map +1 -1
  43. package/dist/components/scout-input.js +1 -1
  44. package/dist/components/scout-input.js.map +1 -1
  45. package/dist/components/scout-list-view-item.js +2 -2
  46. package/dist/components/scout-radio-button.js +1 -1
  47. package/dist/components/scout-select.js +1 -1
  48. package/dist/components/scout-select.js.map +1 -1
  49. package/dist/components/scout-switch.js +1 -1
  50. package/dist/components/scout-switch.js.map +1 -1
  51. package/dist/custom-elements.json +9 -9
  52. package/dist/esm/scout-app-bar.entry.js +1 -1
  53. package/dist/esm/scout-app-bar.entry.js.map +1 -1
  54. package/dist/esm/scout-button.entry.js +3 -3
  55. package/dist/esm/scout-button.entry.js.map +1 -1
  56. package/dist/esm/scout-checkbox.scout-radio-button.entry.js.map +1 -1
  57. package/dist/esm/scout-checkbox_2.entry.js +2 -2
  58. package/dist/esm/scout-field.entry.js +1 -1
  59. package/dist/esm/scout-field.entry.js.map +1 -1
  60. package/dist/esm/scout-input.entry.js +1 -1
  61. package/dist/esm/scout-input.entry.js.map +1 -1
  62. package/dist/esm/scout-select.entry.js +1 -1
  63. package/dist/esm/scout-select.entry.js.map +1 -1
  64. package/dist/esm/scout-switch.entry.js +1 -1
  65. package/dist/esm/scout-switch.entry.js.map +1 -1
  66. package/dist/types/components/app-bar/app-bar.d.ts +5 -0
  67. package/dist/types/components/button/button.d.ts +3 -1
  68. package/dist/types/components/field/field.d.ts +5 -0
  69. package/dist/types/components.d.ts +160 -4
  70. package/dist/ui-webc/{p-1a701759.entry.js → p-45b65a28.entry.js} +2 -2
  71. package/dist/ui-webc/{p-e4f5dad7.entry.js → p-531dc32a.entry.js} +2 -2
  72. package/dist/ui-webc/{p-479ae616.entry.js → p-78b6c86b.entry.js} +2 -2
  73. package/dist/ui-webc/{p-4616484e.entry.js → p-e4ba9bd7.entry.js} +2 -2
  74. package/dist/ui-webc/{p-d8084e5c.entry.js → p-ee497882.entry.js} +2 -2
  75. package/dist/ui-webc/p-f01605ca.entry.js +2 -0
  76. package/dist/ui-webc/{p-3e750355.entry.js.map → p-f01605ca.entry.js.map} +1 -1
  77. package/dist/ui-webc/p-faaf9da5.entry.js +2 -0
  78. package/dist/ui-webc/scout-app-bar.entry.esm.js.map +1 -1
  79. package/dist/ui-webc/scout-button.entry.esm.js.map +1 -1
  80. package/dist/ui-webc/scout-checkbox.scout-radio-button.entry.esm.js.map +1 -1
  81. package/dist/ui-webc/scout-field.entry.esm.js.map +1 -1
  82. package/dist/ui-webc/scout-input.entry.esm.js.map +1 -1
  83. package/dist/ui-webc/scout-select.entry.esm.js.map +1 -1
  84. package/dist/ui-webc/scout-switch.entry.esm.js.map +1 -1
  85. package/dist/ui-webc/ui-webc.esm.js +1 -1
  86. package/package.json +4 -3
  87. package/dist/ui-webc/p-3e750355.entry.js +0 -2
  88. package/dist/ui-webc/p-d999b8d6.entry.js +0 -2
  89. /package/dist/ui-webc/{p-1a701759.entry.js.map → p-45b65a28.entry.js.map} +0 -0
  90. /package/dist/ui-webc/{p-e4f5dad7.entry.js.map → p-531dc32a.entry.js.map} +0 -0
  91. /package/dist/ui-webc/{p-479ae616.entry.js.map → p-78b6c86b.entry.js.map} +0 -0
  92. /package/dist/ui-webc/{p-4616484e.entry.js.map → p-e4ba9bd7.entry.js.map} +0 -0
  93. /package/dist/ui-webc/{p-d8084e5c.entry.js.map → p-ee497882.entry.js.map} +0 -0
  94. /package/dist/ui-webc/{p-d999b8d6.entry.js.map → p-faaf9da5.entry.js.map} +0 -0
package/dist/ui-webc/{p-e4f5dad7.entry.js → p-531dc32a.entry.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{r as e,h as t}from"./p-ksA_9NPe.js";const a=":host{display:flex;width:100%}::slotted(scout-button){height:100%}.container{display:flex;flex:1;height:var(--spacing-14);background-color:var(--color-white);border-bottom:1px solid var(--color-neutral-100);color:var(--color-text-brand-base);padding:var(--spacing-1)}.title{flex:1;display:flex;align-items:center;font:var(--type-body-lg);font-weight:500;padding:0 var(--spacing-2)}";const r=class{constructor(t){e(this,t)}titleText;render(){return t("header",{key:"041b27816bb20c69b19b27ef90515c2cec8f2131",class:"container"},t("slot",{key:"0171b39a13600bc784df175ad4499891415a58b2",name:"prefix"}),t("div",{key:"43c4905c019583a11ae290e4c049f1ccb7c08242",class:"title"},this.titleText),t("slot",{key:"26741e8d7ec8559a720dd52a152d939ef857e2b5",name:"suffix"}))}static get delegatesFocus(){return true}};r.style=a;export{r as scout_app_bar};
2
- //# sourceMappingURL=p-e4f5dad7.entry.js.map
1
+ import{r as e,h as t}from"./p-ksA_9NPe.js";const a=":host{display:flex;width:100%}::slotted(scout-button){height:100%}.container{display:flex;flex:1;height:var(--spacing-14);background-color:var(--color-white);border-bottom:1px solid var(--color-neutral-100);color:var(--color-text-brand-base);padding:var(--spacing-1)}.title{flex:1;display:flex;align-items:center;font:var(--type-body-lg);font-weight:500;padding:0 var(--spacing-2)}";const r=class{constructor(t){e(this,t)}titleText;render(){return t("header",{key:"32779c0aa2d189ea43d2ad14dd920e6b7c4b3e17",class:"container"},t("slot",{key:"0e6b6e66c1f129cb9833335e87298b7c99a6f35c",name:"prefix"}),t("div",{key:"9f1e2ac9696717a2defe268dd85eb35b641918f9",class:"title"},this.titleText),t("slot",{key:"b6b0405705921bfd0bdd17ca76bfee97f9bc6105",name:"suffix"}))}static get delegatesFocus(){return true}};r.style=a;export{r as scout_app_bar};
2
+ //# sourceMappingURL=p-531dc32a.entry.js.map
package/dist/ui-webc/{p-479ae616.entry.js → p-78b6c86b.entry.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{M as t,r as s,c as i,h as o}from"./p-ksA_9NPe.js";import{i as a}from"./p-BzgciO7w.js";const r=".input.sc-scout-input{height:var(--spacing-10);padding:var(--spacing-2);font:var(--type-body-base);border:1px solid var(--color-gray-300);border-radius:var(--spacing-2);background-color:var(--color-white);color:var(--color-text-base)}.input.sc-scout-input:disabled{background-color:var(--color-gray-100);color:var(--color-gray-700);cursor:not-allowed}";const e=class extends(t(a)){constructor(t){super();s(this,t);this.scoutInputChange=i(this,"scoutInputChange");this.scoutBlur=i(this,"scoutBlur");this._scoutValidate=i(this,"_scoutValidate");this._scoutInvalid=i(this,"_scoutInvalid");this._scoutFieldId=i(this,"_scoutFieldId")}type="text";inputmode;pattern;value="";name;disabled=false;render(){return o("input",{key:"15b07e42a3bd97ccc5bfb2d35c97db4a63aa98b9",ref:t=>this.setInputRef(t),id:this.ariaId,type:this.type,name:this.name,inputMode:this.inputmode,pattern:this.pattern,class:"input",value:this.value,disabled:this.disabled,onInput:()=>this.onInput(),onBlur:()=>this.onBlur(),onInvalid:()=>this.onInvalid()})}};e.style=r;export{e as scout_input};
2
- //# sourceMappingURL=p-479ae616.entry.js.map
1
+ import{M as t,r as s,c as i,h as o}from"./p-ksA_9NPe.js";import{i as r}from"./p-BzgciO7w.js";const a=".input.sc-scout-input{height:var(--spacing-10);padding:var(--spacing-2);font:var(--type-body-base);border:1px solid var(--color-gray-300);border-radius:var(--spacing-2);background-color:var(--color-white);color:var(--color-text-base)}.input.sc-scout-input:disabled{background-color:var(--color-gray-100);color:var(--color-gray-700);cursor:not-allowed}";const e=class extends(t(r)){constructor(t){super();s(this,t);this.scoutInputChange=i(this,"scoutInputChange");this.scoutBlur=i(this,"scoutBlur");this._scoutValidate=i(this,"_scoutValidate");this._scoutInvalid=i(this,"_scoutInvalid");this._scoutFieldId=i(this,"_scoutFieldId")}type="text";inputmode;pattern;value="";name;disabled=false;render(){return o("input",{key:"91a90ed63063ef5533308ff1cb61840aec0bb1d3",ref:t=>this.setInputRef(t),id:this.ariaId,type:this.type,name:this.name,inputMode:this.inputmode,pattern:this.pattern,class:"input",value:this.value,disabled:this.disabled,onInput:()=>this.onInput(),onBlur:()=>this.onBlur(),onInvalid:()=>this.onInvalid()})}};e.style=a;export{e as scout_input};
2
+ //# sourceMappingURL=p-78b6c86b.entry.js.map
package/dist/ui-webc/{p-4616484e.entry.js → p-e4ba9bd7.entry.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{M as o,r as e,c as a,h as r}from"./p-ksA_9NPe.js";import{i as c}from"./p-BzgciO7w.js";const t="data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItY2hlY2siCj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNNSAxMmw1IDVsMTAgLTEwIiAvPgo8L3N2Zz4=";const s='.checkbox.sc-scout-checkbox{width:var(--spacing-6);height:var(--spacing-6);-moz-appearance:none;appearance:none;-webkit-appearance:none;display:flex;align-content:center;justify-content:center;border-radius:3px;background-color:var(--color-text-brand-inverse);border:2px solid var(--color-gray-300);position:relative}.checkbox.sc-scout-checkbox:hover{border:2px solid var(--color-gray-400);box-shadow:inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);cursor:pointer}.checkbox.sc-scout-checkbox:active{background-color:var(--color-background-brand-subtle-pressed)}.checkbox.sc-scout-checkbox:checked:hover{background-color:var(--color-background-brand-hovered);border-color:var(--color-background-brand-hovered);box-shadow:none}.checkbox.sc-scout-checkbox:checked{background-color:var(--color-background-brand-base);border-color:var(--color-background-brand-base)}.checkbox.sc-scout-checkbox::after{content:"";position:absolute;width:var(--spacing-10);height:var(--spacing-10);top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox.sc-scout-checkbox:checked::before{content:"";background-color:var(--color-text-brand-inverse);width:var(--spacing-6);height:var(--spacing-6);position:absolute;top:50%;left:50%;right:0;bottom:0;transform:translate(-50%, -50%);-webkit-mask-image:var(--icon-checkbox);mask-image:var(--icon-checkbox);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.checkbox.sc-scout-checkbox:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}label.sc-scout-checkbox{display:flex;align-items:center;gap:var(--spacing-2);font:var(--type-label-base);color:var(--color-text-base)}';const i=class extends(o(c)){constructor(o){super();e(this,o);this.scoutInputChange=a(this,"scoutInputChange");this.scoutBlur=a(this,"scoutBlur");this._scoutValidate=a(this,"_scoutValidate");this._scoutInvalid=a(this,"_scoutInvalid");this._scoutFieldId=a(this,"_scoutFieldId");this.scoutChecked=a(this,"scoutChecked")}checked=false;disabled=false;ariaLabelledby;label;value;name;scoutChecked;onChange(o){const e=o.target;this.scoutChecked.emit({checked:e.checked,element:e})}render(){const o=this.label?.length?"label":"div";return r(o,{key:"6c0a45c9c34f6d2e7dd972186d4fa51b15bbe318"},r("input",{key:"3649ab29a57824ff4b7f56bee0be1aa48dec8371",ref:o=>this.setInputRef(o),id:this.ariaId,type:"checkbox",value:this.value,name:this.name,class:"checkbox",style:{"--icon-checkbox":`url(${t})`},"aria-labelledby":this.ariaLabelledby,"aria-disabled":this.disabled,disabled:this.disabled,checked:this.checked,onChange:o=>{this.onInput();this.onChange(o)},onBlur:()=>this.onBlur(),onInvalid:()=>this.onInvalid()}),this.label)}};i.style=s;const n='.radio.sc-scout-radio-button{width:var(--spacing-6);height:var(--spacing-6);-moz-appearance:none;appearance:none;-webkit-appearance:none;display:flex;align-content:center;justify-content:center;border-radius:100%;background-color:var(--color-white);border:2px solid var(--color-gray-300);position:relative}.radio.sc-scout-radio-button:hover{border:2px solid var(--color-gray-400);box-shadow:inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);cursor:pointer}.radio.sc-scout-radio-button:active{background-color:var(--color-background-brand-subtle-pressed)}.radio.sc-scout-radio-button:checked:hover{border-color:var(--color-background-brand-hovered);box-shadow:none}.radio.sc-scout-radio-button:checked:hover::before{background-color:var(--color-background-brand-hovered)}.radio.sc-scout-radio-button:checked{border-color:var(--color-background-brand-base)}.radio.sc-scout-radio-button::after{content:"";position:absolute;width:var(--spacing-10);height:var(--spacing-10);top:50%;left:50%;transform:translate(-50%, -50%)}.radio.sc-scout-radio-button:checked::before{content:"";background-color:var(--color-background-brand-base);width:var(--spacing-4);height:var(--spacing-4);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:100%}.radio.sc-scout-radio-button:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}label.sc-scout-radio-button{display:flex;align-items:center;gap:var(--spacing-2);font:var(--type-label-base);color:var(--color-text-base)}';const d=class extends(o(c)){constructor(o){super();e(this,o);this.scoutInputChange=a(this,"scoutInputChange");this.scoutBlur=a(this,"scoutBlur");this._scoutValidate=a(this,"_scoutValidate");this._scoutInvalid=a(this,"_scoutInvalid");this._scoutFieldId=a(this,"_scoutFieldId");this.scoutChecked=a(this,"scoutChecked")}checked=false;disabled=false;ariaLabelledby;label;value;name;scoutChecked;onChange(o){const e=o.target;this.scoutChecked.emit({checked:e.checked,element:e})}render(){const o=this.label?.length?"label":"div";return r(o,{key:"0ce220559e5097e536928a27273f683600ee305b"},r("input",{key:"cb844c7a4751184aa253f73fca67211049f19a01",ref:o=>this.setInputRef(o),id:this.ariaId,type:"radio",value:this.value,name:this.name,class:"radio","aria-labelledby":this.ariaLabelledby,"aria-disabled":this.disabled,disabled:this.disabled,checked:this.checked,onChange:o=>{this.onInput();this.onChange(o)},onBlur:()=>this.onBlur(),onInvalid:()=>this.onInvalid()}),this.label)}};d.style=n;export{i as scout_checkbox,d as scout_radio_button};
2
- //# sourceMappingURL=p-4616484e.entry.js.map
1
+ import{M as o,r as e,c as a,h as c}from"./p-ksA_9NPe.js";import{i as r}from"./p-BzgciO7w.js";const t="data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItY2hlY2siCj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNNSAxMmw1IDVsMTAgLTEwIiAvPgo8L3N2Zz4=";const s='.checkbox.sc-scout-checkbox{width:var(--spacing-6);height:var(--spacing-6);-moz-appearance:none;appearance:none;-webkit-appearance:none;display:flex;align-content:center;justify-content:center;border-radius:3px;background-color:var(--color-text-brand-inverse);border:2px solid var(--color-gray-300);position:relative}.checkbox.sc-scout-checkbox:hover{border:2px solid var(--color-gray-400);box-shadow:inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);cursor:pointer}.checkbox.sc-scout-checkbox:active{background-color:var(--color-background-brand-subtle-pressed)}.checkbox.sc-scout-checkbox:checked:hover{background-color:var(--color-background-brand-hovered);border-color:var(--color-background-brand-hovered);box-shadow:none}.checkbox.sc-scout-checkbox:checked{background-color:var(--color-background-brand-base);border-color:var(--color-background-brand-base)}.checkbox.sc-scout-checkbox::after{content:"";position:absolute;width:var(--spacing-10);height:var(--spacing-10);top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox.sc-scout-checkbox:checked::before{content:"";background-color:var(--color-text-brand-inverse);width:var(--spacing-6);height:var(--spacing-6);position:absolute;top:50%;left:50%;right:0;bottom:0;transform:translate(-50%, -50%);-webkit-mask-image:var(--icon-checkbox);mask-image:var(--icon-checkbox);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.checkbox.sc-scout-checkbox:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}label.sc-scout-checkbox{display:flex;align-items:center;gap:var(--spacing-2);font:var(--type-label-base);color:var(--color-text-base)}';const i=class extends(o(r)){constructor(o){super();e(this,o);this.scoutInputChange=a(this,"scoutInputChange");this.scoutBlur=a(this,"scoutBlur");this._scoutValidate=a(this,"_scoutValidate");this._scoutInvalid=a(this,"_scoutInvalid");this._scoutFieldId=a(this,"_scoutFieldId");this.scoutChecked=a(this,"scoutChecked")}checked=false;disabled=false;ariaLabelledby;label;value;name;scoutChecked;onChange(o){const e=o.target;this.scoutChecked.emit({checked:e.checked,element:e})}render(){const o=this.label?.length?"label":"div";return c(o,{key:"156e87e7a0d74f3cbc84b9c14a4ecce5b97e2912"},c("input",{key:"6c70374d9e1f2605d7a0ec3b2216f8b055175e41",ref:o=>this.setInputRef(o),id:this.ariaId,type:"checkbox",value:this.value,name:this.name,class:"checkbox",style:{"--icon-checkbox":`url(${t})`},"aria-labelledby":this.ariaLabelledby,"aria-disabled":this.disabled,disabled:this.disabled,checked:this.checked,onChange:o=>{this.onInput();this.onChange(o)},onBlur:()=>this.onBlur(),onInvalid:()=>this.onInvalid()}),this.label)}};i.style=s;const n='.radio.sc-scout-radio-button{width:var(--spacing-6);height:var(--spacing-6);-moz-appearance:none;appearance:none;-webkit-appearance:none;display:flex;align-content:center;justify-content:center;border-radius:100%;background-color:var(--color-white);border:2px solid var(--color-gray-300);position:relative}.radio.sc-scout-radio-button:hover{border:2px solid var(--color-gray-400);box-shadow:inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);cursor:pointer}.radio.sc-scout-radio-button:active{background-color:var(--color-background-brand-subtle-pressed)}.radio.sc-scout-radio-button:checked:hover{border-color:var(--color-background-brand-hovered);box-shadow:none}.radio.sc-scout-radio-button:checked:hover::before{background-color:var(--color-background-brand-hovered)}.radio.sc-scout-radio-button:checked{border-color:var(--color-background-brand-base)}.radio.sc-scout-radio-button::after{content:"";position:absolute;width:var(--spacing-10);height:var(--spacing-10);top:50%;left:50%;transform:translate(-50%, -50%)}.radio.sc-scout-radio-button:checked::before{content:"";background-color:var(--color-background-brand-base);width:var(--spacing-4);height:var(--spacing-4);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:100%}.radio.sc-scout-radio-button:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}label.sc-scout-radio-button{display:flex;align-items:center;gap:var(--spacing-2);font:var(--type-label-base);color:var(--color-text-base)}';const d=class extends(o(r)){constructor(o){super();e(this,o);this.scoutInputChange=a(this,"scoutInputChange");this.scoutBlur=a(this,"scoutBlur");this._scoutValidate=a(this,"_scoutValidate");this._scoutInvalid=a(this,"_scoutInvalid");this._scoutFieldId=a(this,"_scoutFieldId");this.scoutChecked=a(this,"scoutChecked")}checked=false;disabled=false;ariaLabelledby;label;value;name;scoutChecked;onChange(o){const e=o.target;this.scoutChecked.emit({checked:e.checked,element:e})}render(){const o=this.label?.length?"label":"div";return c(o,{key:"9d30a566a03bfa1b49411878fbaa6bc07d53d2f6"},c("input",{key:"e2f2c58a2ec00fce35d27860e6fa37e23d09d040",ref:o=>this.setInputRef(o),id:this.ariaId,type:"radio",value:this.value,name:this.name,class:"radio","aria-labelledby":this.ariaLabelledby,"aria-disabled":this.disabled,disabled:this.disabled,checked:this.checked,onChange:o=>{this.onInput();this.onChange(o)},onBlur:()=>this.onBlur(),onInvalid:()=>this.onInvalid()}),this.label)}};d.style=n;export{i as scout_checkbox,d as scout_radio_button};
2
+ //# sourceMappingURL=p-e4ba9bd7.entry.js.map
package/dist/ui-webc/{p-d8084e5c.entry.js → p-ee497882.entry.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{M as e,r as a,c as s,h as c}from"./p-ksA_9NPe.js";import{i as t}from"./p-BzgciO7w.js";const o="data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItY2hldnJvbi1kb3duIgo+CiAgPHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgPHBhdGggZD0iTTYgOWw2IDZsNiAtNiIgLz4KPC9zdmc+";const i=".select-wrapper.sc-scout-select{position:relative;display:inline-flex;width:100%}.select.sc-scout-select{width:100%;height:var(--spacing-10);padding:var(--spacing-2);padding-right:var(--spacing-8);font:var(--type-body-base);border:1px solid var(--color-gray-300);border-radius:var(--spacing-2);background-color:var(--color-white);color:var(--color-text-base);-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer}.select.sc-scout-select:hover:not(:disabled){border-color:var(--color-gray-400)}.select.sc-scout-select:focus{outline:2px solid var(--color-background-brand-base);outline-offset:1px}.select.sc-scout-select:disabled{background-color:var(--color-gray-100);color:var(--color-gray-700);cursor:not-allowed}.select-icon.sc-scout-select{position:absolute;right:var(--spacing-2);top:50%;transform:translateY(-50%);width:var(--spacing-5);height:var(--spacing-5);background-color:var(--color-text-base);-webkit-mask-image:var(--icon-chevron);mask-image:var(--icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;pointer-events:none}.select.sc-scout-select:disabled+.select-icon.sc-scout-select{background-color:var(--color-gray-500)}";const r=class extends(e(t)){constructor(e){super();a(this,e);this.scoutInputChange=s(this,"scoutInputChange");this.scoutBlur=s(this,"scoutBlur");this._scoutValidate=s(this,"_scoutValidate");this._scoutInvalid=s(this,"_scoutInvalid");this._scoutFieldId=s(this,"_scoutFieldId")}value="";disabled=false;name;render(){return c("div",{key:"df8da542b4f1b6a90c1899ae2ebe3f1c24328d82",class:"select-wrapper"},c("select",{key:"ece339ed62a6395c282766f534a0290a25e10f03",id:this.ariaId,name:this.name,class:"select",disabled:this.disabled,onChange:()=>this.onInput(),onBlur:()=>this.onBlur(),onInvalid:()=>this.onInvalid()},c("slot",{key:"53baa52177e1a72c4b0f40ceda8f5de227958c38"})),c("span",{key:"b19185c3f2152e3ee4abcab0e61c1a9f17fa2442",class:"select-icon",style:{"--icon-chevron":`url(${o})`},"aria-hidden":"true"}))}};r.style=i;export{r as scout_select};
2
- //# sourceMappingURL=p-d8084e5c.entry.js.map
1
+ import{M as e,r as s,c as a,h as c}from"./p-ksA_9NPe.js";import{i as t}from"./p-BzgciO7w.js";const o="data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItY2hldnJvbi1kb3duIgo+CiAgPHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgPHBhdGggZD0iTTYgOWw2IDZsNiAtNiIgLz4KPC9zdmc+";const i=".select-wrapper.sc-scout-select{position:relative;display:inline-flex;width:100%}.select.sc-scout-select{width:100%;height:var(--spacing-10);padding:var(--spacing-2);padding-right:var(--spacing-8);font:var(--type-body-base);border:1px solid var(--color-gray-300);border-radius:var(--spacing-2);background-color:var(--color-white);color:var(--color-text-base);-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer}.select.sc-scout-select:hover:not(:disabled){border-color:var(--color-gray-400)}.select.sc-scout-select:focus{outline:2px solid var(--color-background-brand-base);outline-offset:1px}.select.sc-scout-select:disabled{background-color:var(--color-gray-100);color:var(--color-gray-700);cursor:not-allowed}.select-icon.sc-scout-select{position:absolute;right:var(--spacing-2);top:50%;transform:translateY(-50%);width:var(--spacing-5);height:var(--spacing-5);background-color:var(--color-text-base);-webkit-mask-image:var(--icon-chevron);mask-image:var(--icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;pointer-events:none}.select.sc-scout-select:disabled+.select-icon.sc-scout-select{background-color:var(--color-gray-500)}";const r=class extends(e(t)){constructor(e){super();s(this,e);this.scoutInputChange=a(this,"scoutInputChange");this.scoutBlur=a(this,"scoutBlur");this._scoutValidate=a(this,"_scoutValidate");this._scoutInvalid=a(this,"_scoutInvalid");this._scoutFieldId=a(this,"_scoutFieldId")}value="";disabled=false;name;render(){return c("div",{key:"15e5237281f534b083659425bb6a0944e9b296eb",class:"select-wrapper"},c("select",{key:"5f8ba02781864c041bfeaffbcdcf6fc4185c45f5",id:this.ariaId,name:this.name,class:"select",disabled:this.disabled,onChange:()=>this.onInput(),onBlur:()=>this.onBlur(),onInvalid:()=>this.onInvalid()},c("slot",{key:"0f593e02a74e59aef1a2c2647df42712a7558d96"})),c("span",{key:"37b45aa85cf7cc9a3dbbcc5b575ff824942875da",class:"select-icon",style:{"--icon-chevron":`url(${o})`},"aria-hidden":"true"}))}};r.style=i;export{r as scout_select};
2
+ //# sourceMappingURL=p-ee497882.entry.js.map
package/dist/ui-webc/p-f01605ca.entry.js ADDED
@@ -0,0 +1,2 @@
1
+ import{r as o,c as t,h as c}from"./p-ksA_9NPe.js";const r=".sc-scout-button-h{display:inline-block}.button.sc-scout-button{flex:1;display:inline-flex;height:var(--spacing-10);align-items:center;justify-content:center;gap:var(--spacing-3);padding:0 var(--spacing-4);font:var(--type-body-base);border-radius:var(--spacing-2);border:1px solid transparent;cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.icon.sc-scout-button{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}.icon.sc-scout-button svg.sc-scout-button{width:100%;height:100%}.button.icon-only.sc-scout-button{aspect-ratio:1 / 1;justify-content:center;padding:0}.button.icon-only.sc-scout-button .icon.sc-scout-button{margin:0}.button.icon-only.sc-scout-button .content.sc-scout-button{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.button.primary.sc-scout-button{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}.button.primary.sc-scout-button:hover{background-color:var(--color-background-brand-hovered)}.button.primary.sc-scout-button:active{background-color:var(--color-background-brand-pressed)}.button.outlined.sc-scout-button{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}.button.outlined.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.outlined.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.text.sc-scout-button{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}.button.text.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.text.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.caution.sc-scout-button{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}.button.caution.sc-scout-button:hover{background-color:var(--color-background-caution-bold-hovered)}.button.caution.sc-scout-button:active{background-color:var(--color-background-caution-bold-pressed)}.button.danger.sc-scout-button{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}.button.danger.sc-scout-button:hover{background-color:var(--color-background-danger-bold-hovered)}.button.danger.sc-scout-button:active{background-color:var(--color-background-danger-bold-pressed)}";const n=class{constructor(c){o(this,c);this.scoutClick=t(this,"scoutClick")}type="button";href;target;rel;variant="outlined";icon;iconPosition="after";iconOnly=false;scoutClick;render(){const o=this.type==="link"?"a":"button";const t=this.type==="link"?{href:this.href,target:this.target,rel:this.rel??(this.target==="_blank"?"noopener noreferrer":undefined)}:{type:this.type};const r=this.icon&&c("span",{key:"8f27b9e6a50427afef8d323212742f031f70db94",class:"icon",innerHTML:this.icon});return c(o,{key:"8f59580f38d9eafc86ac2ce9a0243cf94e1e87e0",class:`button ${this.variant} ${this.iconOnly?"icon-only":""}`,onClick:()=>this.scoutClick.emit(),...t},this.iconPosition==="before"&&r,c("span",{key:"c6a68e20086b2da562324d4a15a973ba24fca90d",class:"content"},c("slot",{key:"4d52b30c5addf5389494c994d91ab7f35a51d734"})),this.iconPosition==="after"&&r)}};n.style=r;export{n as scout_button};
2
+ //# sourceMappingURL=p-f01605ca.entry.js.map
package/dist/ui-webc/{p-3e750355.entry.js.map → p-f01605ca.entry.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"names":["registerInstance","createEvent","h","buttonCss","ScoutButton","constructor","hostRef","this","scoutClick","type","href","target","rel","variant","icon","iconPosition","iconOnly","render","Tag","props","undefined","key","class","innerHTML","onClick","emit","style"],"sources":["0"],"mappings":"YAAcA,OAAuBC,OAAaC,MAAS,kBAE3D,MAAMC,EAAY,s5EAElB,MAAMC,EAAc,MAChB,WAAAC,CAAYC,GACRN,EAAiBO,KAAMD,GACvBC,KAAKC,WAAaP,EAAYM,KAAM,aACxC,CACAE,KAAO,SACPC,KACAC,OACAC,IAIAC,QAAU,WAIVC,KACAC,aAAe,QACfC,SAAW,MACXR,WACA,MAAAS,GACI,MAAMC,EAAMX,KAAKE,OAAS,OAAS,IAAM,SACzC,MAAMU,EAAQZ,KAAKE,OAAS,OACtB,CACEC,KAAMH,KAAKG,KACXC,OAAQJ,KAAKI,OAEbC,IAAKL,KAAKK,MACLL,KAAKI,SAAW,SAAW,sBAAwBS,YAE1D,CACEX,KAAMF,KAAKE,MAEnB,MAAMK,EAAOP,KAAKO,MAAQZ,EAAE,OAAQ,CAAEmB,IAAK,2CAA4CC,MAAO,OAAQC,UAAWhB,KAAKO,OACtH,OAAQZ,EAAEgB,EAAK,CAAEG,IAAK,2CAA4CC,MAAO,UAAUf,KAAKM,WAAWN,KAAKS,SAAW,YAAc,KAAMQ,QAAS,IAAMjB,KAAKC,WAAWiB,UAAWN,GAASZ,KAAKQ,eAAiB,UAAYD,EAAMZ,EAAE,OAAQ,CAAEmB,IAAK,2CAA4CC,MAAO,WAAapB,EAAE,OAAQ,CAAEmB,IAAK,8CAAgDd,KAAKQ,eAAiB,SAAWD,EACzZ,GAEJV,EAAYsB,MAAQvB,SAEXC","ignoreList":[]}
1
+ {"version":3,"names":["registerInstance","createEvent","h","buttonCss","ScoutButton","constructor","hostRef","this","scoutClick","type","href","target","rel","variant","icon","iconPosition","iconOnly","render","Tag","props","undefined","key","class","innerHTML","onClick","emit","style"],"sources":["0"],"mappings":"YAAcA,OAAuBC,OAAaC,MAAS,kBAE3D,MAAMC,EAAY,87EAElB,MAAMC,EAAc,MAChB,WAAAC,CAAYC,GACRN,EAAiBO,KAAMD,GACvBC,KAAKC,WAAaP,EAAYM,KAAM,aACxC,CACAE,KAAO,SACPC,KACAC,OACAC,IAIAC,QAAU,WAIVC,KACAC,aAAe,QACfC,SAAW,MACXR,WACA,MAAAS,GACI,MAAMC,EAAMX,KAAKE,OAAS,OAAS,IAAM,SACzC,MAAMU,EAAQZ,KAAKE,OAAS,OACtB,CACEC,KAAMH,KAAKG,KACXC,OAAQJ,KAAKI,OAEbC,IAAKL,KAAKK,MACLL,KAAKI,SAAW,SAAW,sBAAwBS,YAE1D,CACEX,KAAMF,KAAKE,MAEnB,MAAMK,EAAOP,KAAKO,MAAQZ,EAAE,OAAQ,CAAEmB,IAAK,2CAA4CC,MAAO,OAAQC,UAAWhB,KAAKO,OACtH,OAAQZ,EAAEgB,EAAK,CAAEG,IAAK,2CAA4CC,MAAO,UAAUf,KAAKM,WAAWN,KAAKS,SAAW,YAAc,KAAMQ,QAAS,IAAMjB,KAAKC,WAAWiB,UAAWN,GAASZ,KAAKQ,eAAiB,UAAYD,EAAMZ,EAAE,OAAQ,CAAEmB,IAAK,2CAA4CC,MAAO,WAAapB,EAAE,OAAQ,CAAEmB,IAAK,8CAAgDd,KAAKQ,eAAiB,SAAWD,EACzZ,GAEJV,EAAYsB,MAAQvB,SAEXC","ignoreList":[]}
package/dist/ui-webc/p-faaf9da5.entry.js ADDED
@@ -0,0 +1,2 @@
1
+ import{r as e,a as t,h as s}from"./p-ksA_9NPe.js";const l=".field.sc-scout-field{display:flex;flex-direction:column}.label.sc-scout-field{font:var(--type-label-sm);font-weight:600;color:var(--color-text-base)}.error-text.sc-scout-field{font:var(--type-label-sm);color:var(--color-text-danger-base);margin:var(--spacing-1) 0 0 0}.error-text.sc-scout-field:empty{margin:0}.help-text.sc-scout-field{font:var(--type-label-sm);color:var(--color-gray-600);margin:var(--spacing-1) 0 0 0}";const a=class{constructor(t){e(this,t)}label;helpText;inputId;errorText=null;errorHidden=false;get hostElement(){return t(this)}catchFieldId(e){e.stopPropagation();this.inputId=e.detail}handleValidation(e){const{element:t}=e.detail;this.errorHidden=true;if(t.validity.valid){this.errorText=null}else{this.errorText=t.validationMessage}}showError(){this.errorHidden=false}render(){return s("div",{key:"9205b4607dc3805cb2df4434abf6fa3adc5ce63a",class:"field"},s("label",{key:"ac4a5e25d0e7742244a2e50c9627b77cedaf456a",htmlFor:this.inputId,class:"label"},this.label),s("slot",{key:"f1ec47e560f3ed6e528cefef95a21d3ca28232bb"}),s("p",{key:"2b6de5c916264287019f1cbd5c73966eff4a9bbd",class:"error-text","aria-live":"polite"},!this.errorHidden&&this.errorText),this.helpText&&s("p",{key:"7cb1582085194921f8dde1ecc138fa048cc6fd75",class:"help-text"},this.helpText))}};a.style=l;export{a as scout_field};
2
+ //# sourceMappingURL=p-faaf9da5.entry.js.map
package/dist/ui-webc/scout-app-bar.entry.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"scout-app-bar.entry.esm.js","sources":["src/components/app-bar/app-bar.css?tag=scout-app-bar&encapsulation=shadow","src/components/app-bar/app-bar.tsx"],"sourcesContent":[":host {\n display: flex;\n width: 100%;\n}\n\n::slotted(scout-button) {\n height: 100%;\n}\n\n.container {\n display: flex;\n flex: 1;\n height: var(--spacing-14);\n background-color: var(--color-white);\n border-bottom: 1px solid var(--color-neutral-100);\n color: var(--color-text-brand-base);\n padding: var(--spacing-1);\n}\n\n.title {\n flex: 1;\n display: flex;\n align-items: center;\n font: var(--type-body-lg);\n font-weight: 500;\n padding: 0 var(--spacing-2);\n}\n","import { Component, h, Prop } from \"@stencil/core\";\n\n@Component({\n tag: \"scout-app-bar\",\n styleUrl: \"app-bar.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ScoutAppBar {\n @Prop() titleText?: string;\n\n render() {\n return (\n <header class=\"container\">\n <slot name=\"prefix\" />\n <div class=\"title\">{this.titleText}</div>\n <slot name=\"suffix\" />\n </header>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,+XAA+X;;MCSpY,WAAW,GAAA,MAAA;;;;AACd,IAAA,SAAS;IAEjB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,WAAW,EAAA,EACvB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAG,CAAA,EACtB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAO,EACzC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAG,CAAA,CACf;;;;;;;;"}
1
+ {"version":3,"file":"scout-app-bar.entry.esm.js","sources":["src/components/app-bar/app-bar.css?tag=scout-app-bar&encapsulation=shadow","src/components/app-bar/app-bar.tsx"],"sourcesContent":[":host {\n display: flex;\n width: 100%;\n}\n\n::slotted(scout-button) {\n height: 100%;\n}\n\n.container {\n display: flex;\n flex: 1;\n height: var(--spacing-14);\n background-color: var(--color-white);\n border-bottom: 1px solid var(--color-neutral-100);\n color: var(--color-text-brand-base);\n padding: var(--spacing-1);\n}\n\n.title {\n flex: 1;\n display: flex;\n align-items: center;\n font: var(--type-body-lg);\n font-weight: 500;\n padding: 0 var(--spacing-2);\n}\n","import { Component, h, Prop } from \"@stencil/core\";\n\n/**\n * The App Bar component is used at the top of a page to display a title and\n * optional prefix and suffix actions. It's typically used to provide a\n * native-like navigation experience.\n */\n@Component({\n tag: \"scout-app-bar\",\n styleUrl: \"app-bar.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ScoutAppBar {\n @Prop() titleText?: string;\n\n render() {\n return (\n <header class=\"container\">\n <slot name=\"prefix\" />\n <div class=\"title\">{this.titleText}</div>\n <slot name=\"suffix\" />\n </header>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,+XAA+X;;MCcpY,WAAW,GAAA,MAAA;;;;AACd,IAAA,SAAS;IAEjB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,WAAW,EAAA,EACvB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAG,CAAA,EACtB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAO,EACzC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAG,CAAA,CACf;;;;;;;;"}
package/dist/ui-webc/scout-button.entry.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"scout-button.entry.esm.js","sources":["src/components/button/button.css?tag=scout-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":[".button {\n flex: 1;\n display: inline-flex;\n height: var(--spacing-10);\n align-items: center;\n justify-content: center;\n gap: var(--spacing-3);\n padding: 0 var(--spacing-4);\n font: var(--type-body-base);\n border-radius: var(--spacing-2);\n border: 1px solid transparent;\n cursor: pointer;\n text-decoration: none;\n}\n\n.icon {\n width: var(--spacing-5);\n height: var(--spacing-5);\n margin: 0 calc(var(--spacing-1) * -1);\n}\n\n.icon svg {\n width: 100%;\n height: 100%;\n}\n\n.button.icon-only {\n aspect-ratio: 1 / 1;\n justify-content: center;\n padding: 0;\n}\n\n.button.icon-only .icon {\n margin: 0;\n}\n\n.button.icon-only .content {\n /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.button.primary {\n background-color: var(--color-background-brand-base);\n color: var(--color-text-brand-inverse);\n\n &:hover {\n background-color: var(--color-background-brand-hovered);\n }\n\n &:active {\n background-color: var(--color-background-brand-pressed);\n }\n}\n\n.button.outlined {\n background-color: transparent;\n border-color: var(--color-background-brand-subtle-base);\n color: var(--color-text-brand-base);\n\n &:hover {\n background-color: var(--color-background-brand-subtle-hovered);\n }\n\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.text {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-text-brand-base);\n\n &:hover {\n background-color: var(--color-background-brand-subtle-hovered);\n }\n\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.caution {\n background-color: var(--color-background-caution-bold-base);\n color: var(--color-text-caution-bold-base);\n\n &:hover {\n background-color: var(--color-background-caution-bold-hovered);\n }\n\n &:active {\n background-color: var(--color-background-caution-bold-pressed);\n }\n}\n\n.button.danger {\n background-color: var(--color-background-danger-bold-base);\n color: var(--color-text-danger-bold-base);\n\n &:hover {\n background-color: var(--color-background-danger-bold-hovered);\n }\n\n &:active {\n background-color: var(--color-background-danger-bold-pressed);\n }\n}\n","import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\n\nexport type Variant = \"primary\" | \"outlined\" | \"text\" | \"caution\" | \"danger\";\n\n/**\n * A simple button component.\n */\n@Component({\n tag: \"scout-button\",\n styleUrl: \"button.css\",\n scoped: true,\n})\nexport class ScoutButton {\n @Prop() type: \"button\" | \"submit\" | \"reset\" | \"link\" = \"button\";\n\n @Prop() href?: string;\n @Prop() target?: string;\n @Prop() rel?: string;\n\n /**\n * The variant primarily affects the color of the button.\n */\n @Prop() variant: Variant = \"outlined\";\n\n /**\n * An optional icon to display alongside the button text. Must be an SVG string.\n */\n @Prop() icon?: string;\n @Prop() iconPosition: \"before\" | \"after\" = \"after\";\n @Prop() iconOnly: boolean = false;\n\n @Event() scoutClick: EventEmitter<void>;\n\n render() {\n const Tag = this.type === \"link\" ? \"a\" : \"button\";\n\n const props =\n this.type === \"link\"\n ? {\n href: this.href,\n target: this.target,\n // This might not be our job, but better safe than sorry.\n rel:\n this.rel ??\n (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n }\n : {\n type: this.type,\n };\n\n const icon = this.icon && <span class=\"icon\" innerHTML={this.icon} />;\n\n return (\n <Tag\n class={`button ${this.variant} ${this.iconOnly ? \"icon-only\" : \"\"}`}\n onClick={() => this.scoutClick.emit()}\n {...props}\n >\n {this.iconPosition === \"before\" && icon}\n <span class=\"content\">\n <slot />\n </span>\n {this.iconPosition === \"after\" && icon}\n </Tag>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,q5EAAq5E;;MCY15E,WAAW,GAAA,MAAA;;;;;IACd,IAAI,GAA2C,QAAQ;AAEvD,IAAA,IAAI;AACJ,IAAA,MAAM;AACN,IAAA,GAAG;AAEX;;AAEG;IACK,OAAO,GAAY,UAAU;AAErC;;AAEG;AACK,IAAA,IAAI;IACJ,YAAY,GAAuB,OAAO;IAC1C,QAAQ,GAAY,KAAK;AAExB,IAAA,UAAU;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,GAAG,GAAG,GAAG,QAAQ;AAEjD,QAAA,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;;gBAEnB,GAAG,EACD,IAAI,CAAC,GAAG;AACR,qBAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC;AACjE;AACH,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;QAEP,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;AAErE,QAAA,QACE,CAAC,CAAA,GAAG,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAA,CAAE,EACnE,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK,EAAA,EAER,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,EACvC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACN,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAClC;;;;;;;"}
1
+ {"version":3,"file":"scout-button.entry.esm.js","sources":["src/components/button/button.css?tag=scout-button&encapsulation=scoped","src/components/button/button.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.button {\n flex: 1;\n display: inline-flex;\n height: var(--spacing-10);\n align-items: center;\n justify-content: center;\n gap: var(--spacing-3);\n padding: 0 var(--spacing-4);\n font: var(--type-body-base);\n border-radius: var(--spacing-2);\n border: 1px solid transparent;\n cursor: pointer;\n text-decoration: none;\n}\n\n.icon {\n width: var(--spacing-5);\n height: var(--spacing-5);\n margin: 0 calc(var(--spacing-1) * -1);\n}\n\n.icon svg {\n width: 100%;\n height: 100%;\n}\n\n.button.icon-only {\n aspect-ratio: 1 / 1;\n justify-content: center;\n padding: 0;\n}\n\n.button.icon-only .icon {\n margin: 0;\n}\n\n.button.icon-only .content {\n /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.button.primary {\n background-color: var(--color-background-brand-base);\n color: var(--color-text-brand-inverse);\n\n &:hover {\n background-color: var(--color-background-brand-hovered);\n }\n\n &:active {\n background-color: var(--color-background-brand-pressed);\n }\n}\n\n.button.outlined {\n background-color: transparent;\n border-color: var(--color-background-brand-subtle-base);\n color: var(--color-text-brand-base);\n\n &:hover {\n background-color: var(--color-background-brand-subtle-hovered);\n }\n\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.text {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-text-brand-base);\n\n &:hover {\n background-color: var(--color-background-brand-subtle-hovered);\n }\n\n &:active {\n background-color: var(--color-background-brand-subtle-pressed);\n }\n}\n\n.button.caution {\n background-color: var(--color-background-caution-bold-base);\n color: var(--color-text-caution-bold-base);\n\n &:hover {\n background-color: var(--color-background-caution-bold-hovered);\n }\n\n &:active {\n background-color: var(--color-background-caution-bold-pressed);\n }\n}\n\n.button.danger {\n background-color: var(--color-background-danger-bold-base);\n color: var(--color-text-danger-bold-base);\n\n &:hover {\n background-color: var(--color-background-danger-bold-hovered);\n }\n\n &:active {\n background-color: var(--color-background-danger-bold-pressed);\n }\n}\n","import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\n\nexport type Variant = \"primary\" | \"outlined\" | \"text\" | \"caution\" | \"danger\";\n\n/**\n * A button component that can be used either as a normal button or as a link.\n * Will render a `<button>` element when the `type` is set to \"button\",\n * \"submit\", or \"reset\", and an `<a>` element when the `type` is set to \"link\".\n */\n@Component({\n tag: \"scout-button\",\n styleUrl: \"button.css\",\n scoped: true,\n})\nexport class ScoutButton {\n @Prop() type: \"button\" | \"submit\" | \"reset\" | \"link\" = \"button\";\n\n @Prop() href?: string;\n @Prop() target?: string;\n @Prop() rel?: string;\n\n /**\n * The variant primarily affects the color of the button.\n */\n @Prop() variant: Variant = \"outlined\";\n\n /**\n * An optional icon to display alongside the button text. Must be an SVG string.\n */\n @Prop() icon?: string;\n @Prop() iconPosition: \"before\" | \"after\" = \"after\";\n @Prop() iconOnly: boolean = false;\n\n @Event() scoutClick: EventEmitter<void>;\n\n render() {\n const Tag = this.type === \"link\" ? \"a\" : \"button\";\n\n const props =\n this.type === \"link\"\n ? {\n href: this.href,\n target: this.target,\n // This might not be our job, but better safe than sorry.\n rel:\n this.rel ??\n (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n }\n : {\n type: this.type,\n };\n\n const icon = this.icon && <span class=\"icon\" innerHTML={this.icon} />;\n\n return (\n <Tag\n class={`button ${this.variant} ${this.iconOnly ? \"icon-only\" : \"\"}`}\n onClick={() => this.scoutClick.emit()}\n {...props}\n >\n {this.iconPosition === \"before\" && icon}\n <span class=\"content\">\n <slot />\n </span>\n {this.iconPosition === \"after\" && icon}\n </Tag>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,67EAA67E;;MCcl8E,WAAW,GAAA,MAAA;;;;;IACd,IAAI,GAA2C,QAAQ;AAEvD,IAAA,IAAI;AACJ,IAAA,MAAM;AACN,IAAA,GAAG;AAEX;;AAEG;IACK,OAAO,GAAY,UAAU;AAErC;;AAEG;AACK,IAAA,IAAI;IACJ,YAAY,GAAuB,OAAO;IAC1C,QAAQ,GAAY,KAAK;AAExB,IAAA,UAAU;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,GAAG,GAAG,GAAG,QAAQ;AAEjD,QAAA,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK;AACZ,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;;gBAEnB,GAAG,EACD,IAAI,CAAC,GAAG;AACR,qBAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC;AACjE;AACH,cAAE;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;QAEP,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;AAErE,QAAA,QACE,CAAC,CAAA,GAAG,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAA,CAAE,EACnE,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK,EAAA,EAER,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,EACvC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACN,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAClC;;;;;;;"}
package/dist/ui-webc/scout-checkbox.scout-radio-button.entry.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"scout-checkbox.scout-radio-button.entry.esm.js","sources":["../../node_modules/.pnpm/@tabler+icons@3.35.0/node_modules/@tabler/icons/icons/outline/check.svg","src/components/checkbox/checkbox.css?tag=scout-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx","src/components/radio-button/radio-button.css?tag=scout-radio-button&encapsulation=scoped","src/components/radio-button/radio-button.tsx"],"sourcesContent":["<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-check\"\n>\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n <path d=\"M5 12l5 5l10 -10\" />\n</svg>",".checkbox {\n width: var(--spacing-6);\n height: var(--spacing-6);\n appearance: none;\n -webkit-appearance: none;\n display: flex;\n align-content: center;\n justify-content: center;\n border-radius: 3px;\n background-color: var(--color-text-brand-inverse);\n border: 2px solid var(--color-gray-300);\n position: relative;\n}\n\n.checkbox:hover {\n border: 2px solid var(--color-gray-400);\n box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);\n cursor: pointer;\n}\n\n.checkbox:active {\n background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.checkbox:checked:hover {\n background-color: var(--color-background-brand-hovered);\n border-color: var(--color-background-brand-hovered);\n box-shadow: none;\n}\n\n.checkbox:checked {\n background-color: var(--color-background-brand-base);\n border-color: var(--color-background-brand-base);\n}\n\n.checkbox::after {\n content: \"\";\n position: absolute;\n width: var(--spacing-10);\n height: var(--spacing-10);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.checkbox:checked::before {\n content: \"\";\n background-color: var(--color-text-brand-inverse);\n width: var(--spacing-6);\n height: var(--spacing-6);\n position: absolute;\n /* Needed because of the border */\n top: 50%;\n left: 50%;\n right: 0;\n bottom: 0;\n transform: translate(-50%, -50%);\n mask-image: var(--icon-checkbox);\n mask-repeat: no-repeat;\n}\n\n.checkbox:disabled {\n pointer-events: none;\n background-color: var(--color-gray-100);\n border-color: var(--color-gray-100);\n}\n\nlabel {\n display: flex;\n align-items: center;\n gap: var(--spacing-2);\n font: var(--type-label-base);\n color: var(--color-text-base);\n}\n","import {\n Component,\n type ComponentInterface,\n Event,\n type EventEmitter,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport checkIcon from \"@tabler/icons/outline/check.svg\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n@Component({\n tag: \"scout-checkbox\",\n styleUrl: \"checkbox.css\",\n scoped: true,\n})\nexport class ScoutCheckbox\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n @Prop() checked: boolean = false;\n\n @Prop() disabled: boolean = false;\n\n /**\n * Use this prop if you need to connect your checkbox with another element describing its use, other than the property label.\n */\n @Prop() ariaLabelledby: string;\n\n @Prop() label: string;\n\n @Prop() value: string;\n\n @Prop() name: string;\n\n @Event() scoutChecked: EventEmitter<{\n checked: boolean;\n element: HTMLInputElement;\n }>;\n\n onChange(event: Event) {\n const checkbox = event.target as HTMLInputElement;\n\n this.scoutChecked.emit({\n checked: checkbox.checked,\n element: checkbox,\n });\n }\n\n render() {\n const Tag = this.label?.length ? \"label\" : \"div\";\n return (\n <Tag>\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type=\"checkbox\"\n value={this.value}\n name={this.name}\n class=\"checkbox\"\n style={{ \"--icon-checkbox\": `url(${checkIcon})` }}\n aria-labelledby={this.ariaLabelledby}\n aria-disabled={this.disabled}\n disabled={this.disabled}\n checked={this.checked}\n onChange={(event) => {\n this.onInput();\n this.onChange(event);\n }}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n {this.label}\n </Tag>\n );\n }\n}\n",".radio {\n width: var(--spacing-6);\n height: var(--spacing-6);\n appearance: none;\n -webkit-appearance: none;\n display: flex;\n align-content: center;\n justify-content: center;\n border-radius: 100%;\n background-color: var(--color-white);\n border: 2px solid var(--color-gray-300);\n position: relative;\n}\n\n.radio:hover {\n border: 2px solid var(--color-gray-400);\n box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);\n cursor: pointer;\n}\n\n.radio:active {\n background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.radio:checked:hover {\n border-color: var(--color-background-brand-hovered);\n box-shadow: none;\n}\n\n.radio:checked:hover::before {\n background-color: var(--color-background-brand-hovered);\n}\n\n.radio:checked {\n border-color: var(--color-background-brand-base);\n}\n\n.radio::after {\n content: \"\";\n position: absolute;\n width: var(--spacing-10);\n height: var(--spacing-10);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.radio:checked::before {\n content: \"\";\n background-color: var(--color-background-brand-base);\n width: var(--spacing-4);\n height: var(--spacing-4);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 100%;\n}\n\n.radio:disabled {\n pointer-events: none;\n background-color: var(--color-gray-100);\n border-color: var(--color-gray-100);\n}\n\nlabel {\n display: flex;\n align-items: center;\n gap: var(--spacing-2);\n font: var(--type-label-base);\n color: var(--color-text-base);\n}\n","import {\n Component,\n type ComponentInterface,\n Event,\n type EventEmitter,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n@Component({\n tag: \"scout-radio-button\",\n styleUrl: \"radio-button.css\",\n scoped: true,\n})\nexport class ScoutRadioButton\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n @Prop() checked: boolean = false;\n\n @Prop() disabled: boolean = false;\n\n /**\n * Use this prop if you need to connect your radio button with another element describing its use, other than the property label.\n */\n @Prop() ariaLabelledby: string;\n\n @Prop() label: string;\n\n @Prop() value: string;\n\n @Prop() name: string;\n\n @Event() scoutChecked: EventEmitter<{\n checked: boolean;\n element: HTMLInputElement;\n }>;\n\n onChange(event: Event) {\n const radio = event.target as HTMLInputElement;\n\n this.scoutChecked.emit({\n checked: radio.checked,\n element: radio,\n });\n }\n\n render() {\n const Tag = this.label?.length ? \"label\" : \"div\";\n return (\n <Tag>\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type=\"radio\"\n value={this.value}\n name={this.name}\n class=\"radio\"\n aria-labelledby={this.ariaLabelledby}\n aria-disabled={this.disabled}\n disabled={this.disabled}\n checked={this.checked}\n onChange={(event) => {\n this.onInput();\n this.onChange(event);\n }}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n {this.label}\n </Tag>\n );\n }\n}\n"],"names":["checkIcon"],"mappings":"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","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"scout-checkbox.scout-radio-button.entry.esm.js","sources":["../../node_modules/.pnpm/@tabler+icons@3.35.0/node_modules/@tabler/icons/icons/outline/check.svg","src/components/checkbox/checkbox.css?tag=scout-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx","src/components/radio-button/radio-button.css?tag=scout-radio-button&encapsulation=scoped","src/components/radio-button/radio-button.tsx"],"sourcesContent":["<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-check\"\n>\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n <path d=\"M5 12l5 5l10 -10\" />\n</svg>",".checkbox {\n width: var(--spacing-6);\n height: var(--spacing-6);\n appearance: none;\n -webkit-appearance: none;\n display: flex;\n align-content: center;\n justify-content: center;\n border-radius: 3px;\n background-color: var(--color-text-brand-inverse);\n border: 2px solid var(--color-gray-300);\n position: relative;\n}\n\n.checkbox:hover {\n border: 2px solid var(--color-gray-400);\n box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);\n cursor: pointer;\n}\n\n.checkbox:active {\n background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.checkbox:checked:hover {\n background-color: var(--color-background-brand-hovered);\n border-color: var(--color-background-brand-hovered);\n box-shadow: none;\n}\n\n.checkbox:checked {\n background-color: var(--color-background-brand-base);\n border-color: var(--color-background-brand-base);\n}\n\n.checkbox::after {\n content: \"\";\n position: absolute;\n width: var(--spacing-10);\n height: var(--spacing-10);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.checkbox:checked::before {\n content: \"\";\n background-color: var(--color-text-brand-inverse);\n width: var(--spacing-6);\n height: var(--spacing-6);\n position: absolute;\n /* Needed because of the border */\n top: 50%;\n left: 50%;\n right: 0;\n bottom: 0;\n transform: translate(-50%, -50%);\n mask-image: var(--icon-checkbox);\n mask-repeat: no-repeat;\n}\n\n.checkbox:disabled {\n pointer-events: none;\n background-color: var(--color-gray-100);\n border-color: var(--color-gray-100);\n}\n\nlabel {\n display: flex;\n align-items: center;\n gap: var(--spacing-2);\n font: var(--type-label-base);\n color: var(--color-text-base);\n}\n","import {\n Component,\n type ComponentInterface,\n Event,\n type EventEmitter,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport checkIcon from \"@tabler/icons/outline/check.svg\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n/**\n * The checkbox component is used to let users select one or more options from a\n * set. For toggling a single option, consider using the Switch component\n * instead. When used in a form, make sure to wrap it in a Field component to\n * display a label, help text, and error messages.\n */\n@Component({\n tag: \"scout-checkbox\",\n styleUrl: \"checkbox.css\",\n scoped: true,\n})\nexport class ScoutCheckbox\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n @Prop() checked: boolean = false;\n\n @Prop() disabled: boolean = false;\n\n /**\n * Use this prop if you need to connect your checkbox with another element describing its use, other than the property label.\n */\n @Prop() ariaLabelledby: string;\n\n @Prop() label: string;\n\n @Prop() value: string;\n\n @Prop() name: string;\n\n @Event() scoutChecked: EventEmitter<{\n checked: boolean;\n element: HTMLInputElement;\n }>;\n\n onChange(event: Event) {\n const checkbox = event.target as HTMLInputElement;\n\n this.scoutChecked.emit({\n checked: checkbox.checked,\n element: checkbox,\n });\n }\n\n render() {\n const Tag = this.label?.length ? \"label\" : \"div\";\n return (\n <Tag>\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type=\"checkbox\"\n value={this.value}\n name={this.name}\n class=\"checkbox\"\n style={{ \"--icon-checkbox\": `url(${checkIcon})` }}\n aria-labelledby={this.ariaLabelledby}\n aria-disabled={this.disabled}\n disabled={this.disabled}\n checked={this.checked}\n onChange={(event) => {\n this.onInput();\n this.onChange(event);\n }}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n {this.label}\n </Tag>\n );\n }\n}\n",".radio {\n width: var(--spacing-6);\n height: var(--spacing-6);\n appearance: none;\n -webkit-appearance: none;\n display: flex;\n align-content: center;\n justify-content: center;\n border-radius: 100%;\n background-color: var(--color-white);\n border: 2px solid var(--color-gray-300);\n position: relative;\n}\n\n.radio:hover {\n border: 2px solid var(--color-gray-400);\n box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);\n cursor: pointer;\n}\n\n.radio:active {\n background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.radio:checked:hover {\n border-color: var(--color-background-brand-hovered);\n box-shadow: none;\n}\n\n.radio:checked:hover::before {\n background-color: var(--color-background-brand-hovered);\n}\n\n.radio:checked {\n border-color: var(--color-background-brand-base);\n}\n\n.radio::after {\n content: \"\";\n position: absolute;\n width: var(--spacing-10);\n height: var(--spacing-10);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.radio:checked::before {\n content: \"\";\n background-color: var(--color-background-brand-base);\n width: var(--spacing-4);\n height: var(--spacing-4);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 100%;\n}\n\n.radio:disabled {\n pointer-events: none;\n background-color: var(--color-gray-100);\n border-color: var(--color-gray-100);\n}\n\nlabel {\n display: flex;\n align-items: center;\n gap: var(--spacing-2);\n font: var(--type-label-base);\n color: var(--color-text-base);\n}\n","import {\n Component,\n type ComponentInterface,\n Event,\n type EventEmitter,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n/**\n * The radio button component is used to let users select one option from a set.\n * When used in a form, make sure to wrap it in a Field component to display a\n * label, help text, and error messages.\n */\n@Component({\n tag: \"scout-radio-button\",\n styleUrl: \"radio-button.css\",\n scoped: true,\n})\nexport class ScoutRadioButton\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n @Prop() checked: boolean = false;\n\n @Prop() disabled: boolean = false;\n\n /**\n * Use this prop if you need to connect your radio button with another element describing its use, other than the property label.\n */\n @Prop() ariaLabelledby: string;\n\n @Prop() label: string;\n\n @Prop() value: string;\n\n @Prop() name: string;\n\n @Event() scoutChecked: EventEmitter<{\n checked: boolean;\n element: HTMLInputElement;\n }>;\n\n onChange(event: Event) {\n const radio = event.target as HTMLInputElement;\n\n this.scoutChecked.emit({\n checked: radio.checked,\n element: radio,\n });\n }\n\n render() {\n const Tag = this.label?.length ? \"label\" : \"div\";\n return (\n <Tag>\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type=\"radio\"\n value={this.value}\n name={this.name}\n class=\"radio\"\n aria-labelledby={this.ariaLabelledby}\n aria-disabled={this.disabled}\n disabled={this.disabled}\n checked={this.checked}\n onChange={(event) => {\n this.onInput();\n this.onChange(event);\n }}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n {this.label}\n </Tag>\n );\n }\n}\n"],"names":["checkIcon"],"mappings":"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","x_google_ignoreList":[0]}
package/dist/ui-webc/scout-field.entry.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"scout-field.entry.esm.js","sources":["src/components/field/field.css?tag=scout-field&encapsulation=scoped","src/components/field/field.tsx"],"sourcesContent":[".field {\n display: flex;\n flex-direction: column;\n}\n\n.label {\n font: var(--type-label-sm);\n font-weight: 600;\n color: var(--color-text-base);\n}\n\n.error-text {\n font: var(--type-label-sm);\n color: var(--color-text-danger-base);\n margin: var(--spacing-1) 0 0 0;\n}\n\n.error-text:empty {\n margin: 0;\n}\n\n.help-text {\n font: var(--type-label-sm);\n color: var(--color-gray-600);\n margin: var(--spacing-1) 0 0 0;\n}\n","import { Component, Element, h, Listen, Prop, State } from \"@stencil/core\";\n\n@Component({\n tag: \"scout-field\",\n styleUrl: \"field.css\",\n scoped: true,\n})\nexport class ScoutField {\n /**\n * Label shown above the field.\n */\n @Prop() label!: string;\n\n /**\n * Help text shown below the field.\n */\n @Prop() helpText?: string;\n\n @State() inputId: string;\n @State() errorText: string | null = null;\n @State() errorHidden: boolean = false;\n\n @Element() hostElement!: HTMLElement;\n\n @Listen(\"_scoutFieldId\")\n catchFieldId(event: CustomEvent<string>) {\n event.stopPropagation();\n this.inputId = event.detail;\n }\n\n @Listen(\"_scoutValidate\")\n handleValidation(\n event: CustomEvent<{\n element:\n | HTMLButtonElement\n | HTMLInputElement\n | HTMLOutputElement\n | HTMLSelectElement\n | HTMLTextAreaElement;\n }>,\n ) {\n const { element } = event.detail;\n\n this.errorHidden = true;\n if (element.validity.valid) {\n this.errorText = null;\n } else {\n this.errorText = element.validationMessage;\n }\n }\n\n @Listen(\"scoutBlur\")\n @Listen(\"_scoutInvalid\")\n showError() {\n this.errorHidden = false;\n }\n\n render() {\n return (\n <div class=\"field\">\n <label htmlFor={this.inputId} class=\"label\">\n {this.label}\n </label>\n <slot />\n <p class=\"error-text\" aria-live=\"polite\">\n {!this.errorHidden && this.errorText}\n </p>\n {this.helpText && <p class=\"help-text\">{this.helpText}</p>}\n </div>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,uaAAua;;MCO3a,UAAU,GAAA,MAAA;;;;AACrB;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,QAAQ;AAEP,IAAA,OAAO;IACP,SAAS,GAAkB,IAAI;IAC/B,WAAW,GAAY,KAAK;;AAKrC,IAAA,YAAY,CAAC,KAA0B,EAAA;QACrC,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM;;AAI7B,IAAA,gBAAgB,CACd,KAOE,EAAA;AAEF,QAAA,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM;AAEhC,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,QAAA,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,EAAE;AAC1B,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;;aAChB;AACL,YAAA,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,iBAAiB;;;IAM9C,SAAS,GAAA;AACP,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;;IAG1B,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAA,EAChB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,OAAO,EAAA,EACxC,IAAI,CAAC,KAAK,CACL,EACR,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACR,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,YAAY,EAAA,WAAA,EAAW,QAAQ,EACrC,EAAA,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAClC,EACH,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,WAAW,EAAE,EAAA,IAAI,CAAC,QAAQ,CAAK,CACtD;;;;;;;"}
1
+ {"version":3,"file":"scout-field.entry.esm.js","sources":["src/components/field/field.css?tag=scout-field&encapsulation=scoped","src/components/field/field.tsx"],"sourcesContent":[".field {\n display: flex;\n flex-direction: column;\n}\n\n.label {\n font: var(--type-label-sm);\n font-weight: 600;\n color: var(--color-text-base);\n}\n\n.error-text {\n font: var(--type-label-sm);\n color: var(--color-text-danger-base);\n margin: var(--spacing-1) 0 0 0;\n}\n\n.error-text:empty {\n margin: 0;\n}\n\n.help-text {\n font: var(--type-label-sm);\n color: var(--color-gray-600);\n margin: var(--spacing-1) 0 0 0;\n}\n","import { Component, Element, h, Listen, Prop, State } from \"@stencil/core\";\n\n/**\n * The field component is used to wrap form fields with a label, help text, and\n * error messages. It automatically captures validation events from its child\n * input components and displays error messages accordingly.\n */\n@Component({\n tag: \"scout-field\",\n styleUrl: \"field.css\",\n scoped: true,\n})\nexport class ScoutField {\n /**\n * Label shown above the field.\n */\n @Prop() label!: string;\n\n /**\n * Help text shown below the field.\n */\n @Prop() helpText?: string;\n\n @State() inputId: string;\n @State() errorText: string | null = null;\n @State() errorHidden: boolean = false;\n\n @Element() hostElement!: HTMLElement;\n\n @Listen(\"_scoutFieldId\")\n catchFieldId(event: CustomEvent<string>) {\n event.stopPropagation();\n this.inputId = event.detail;\n }\n\n @Listen(\"_scoutValidate\")\n handleValidation(\n event: CustomEvent<{\n element:\n | HTMLButtonElement\n | HTMLInputElement\n | HTMLOutputElement\n | HTMLSelectElement\n | HTMLTextAreaElement;\n }>,\n ) {\n const { element } = event.detail;\n\n this.errorHidden = true;\n if (element.validity.valid) {\n this.errorText = null;\n } else {\n this.errorText = element.validationMessage;\n }\n }\n\n @Listen(\"scoutBlur\")\n @Listen(\"_scoutInvalid\")\n showError() {\n this.errorHidden = false;\n }\n\n render() {\n return (\n <div class=\"field\">\n <label htmlFor={this.inputId} class=\"label\">\n {this.label}\n </label>\n <slot />\n <p class=\"error-text\" aria-live=\"polite\">\n {!this.errorHidden && this.errorText}\n </p>\n {this.helpText && <p class=\"help-text\">{this.helpText}</p>}\n </div>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,uaAAua;;MCY3a,UAAU,GAAA,MAAA;;;;AACrB;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,QAAQ;AAEP,IAAA,OAAO;IACP,SAAS,GAAkB,IAAI;IAC/B,WAAW,GAAY,KAAK;;AAKrC,IAAA,YAAY,CAAC,KAA0B,EAAA;QACrC,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM;;AAI7B,IAAA,gBAAgB,CACd,KAOE,EAAA;AAEF,QAAA,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM;AAEhC,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,QAAA,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,EAAE;AAC1B,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;;aAChB;AACL,YAAA,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,iBAAiB;;;IAM9C,SAAS,GAAA;AACP,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;;IAG1B,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAA,EAChB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,OAAO,EAAA,EACxC,IAAI,CAAC,KAAK,CACL,EACR,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACR,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,YAAY,EAAA,WAAA,EAAW,QAAQ,EACrC,EAAA,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAClC,EACH,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,WAAW,EAAE,EAAA,IAAI,CAAC,QAAQ,CAAK,CACtD;;;;;;;"}
package/dist/ui-webc/scout-input.entry.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"scout-input.entry.esm.js","sources":["src/components/input/input.css?tag=scout-input&encapsulation=scoped","src/components/input/input.tsx"],"sourcesContent":[".input {\n height: var(--spacing-10);\n padding: var(--spacing-2);\n font: var(--type-body-base);\n border: 1px solid var(--color-gray-300);\n border-radius: var(--spacing-2);\n background-color: var(--color-white);\n color: var(--color-text-base);\n}\n\n.input:disabled {\n background-color: var(--color-gray-100);\n color: var(--color-gray-700);\n cursor: not-allowed;\n}\n","import {\n Component,\n type ComponentInterface,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\nexport type InputType =\n | \"text\"\n | \"password\"\n | \"email\"\n | \"number\"\n | \"tel\"\n | \"url\"\n // Hack to suggest above value but still allow any other string value\n | (string & {});\n\nexport type InputMode =\n | \"none\"\n | \"text\"\n | \"decimal\"\n | \"numeric\"\n | \"tel\"\n | \"search\"\n | \"email\"\n | \"url\"\n // Hack to suggest above value but still allow any other string value\n | (string & {});\n\n@Component({\n tag: \"scout-input\",\n styleUrl: \"input.css\",\n scoped: true,\n})\nexport class ScoutInput\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n /**\n * Type of input element. If you need a number input, read the accessibility\n * section of this MDN article first:\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility\n */\n @Prop() type: InputType = \"text\";\n\n /**\n * Input mode hints for devices with dynamic keyboards.\n */\n @Prop() inputmode?: InputMode;\n\n /**\n * Regex pattern for input validation.\n */\n @Prop() pattern?: string;\n\n /**\n * Value of the input element, in case you want to control it yourself.\n */\n @Prop() value: string = \"\";\n\n @Prop() name: string;\n\n /**\n * Whether the input is disabled. Disabled inputs are not editable, excluded\n * from tab order and are not validated.\n */\n @Prop() disabled: boolean = false;\n\n render() {\n return (\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type={this.type}\n name={this.name}\n inputMode={this.inputmode}\n pattern={this.pattern}\n class=\"input\"\n value={this.value}\n disabled={this.disabled}\n onInput={() => this.onInput()}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,QAAQ,GAAG,iWAAiW;;ACoCrW,MAAA,UACX,GAAA,cAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;AAGzB;;;;AAIG;IACK,IAAI,GAAc,MAAM;AAEhC;;AAEG;AACK,IAAA,SAAS;AAEjB;;AAEG;AACK,IAAA,OAAO;AAEf;;AAEG;IACK,KAAK,GAAW,EAAE;AAElB,IAAA,IAAI;AAEZ;;;AAGG;IACK,QAAQ,GAAY,KAAK;IAEjC,MAAM,GAAA;QACJ,QACE,8DACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAC7B,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EACjC,CAAA;;;;;;;"}
1
+ {"version":3,"file":"scout-input.entry.esm.js","sources":["src/components/input/input.css?tag=scout-input&encapsulation=scoped","src/components/input/input.tsx"],"sourcesContent":[".input {\n height: var(--spacing-10);\n padding: var(--spacing-2);\n font: var(--type-body-base);\n border: 1px solid var(--color-gray-300);\n border-radius: var(--spacing-2);\n background-color: var(--color-white);\n color: var(--color-text-base);\n}\n\n.input:disabled {\n background-color: var(--color-gray-100);\n color: var(--color-gray-700);\n cursor: not-allowed;\n}\n","import {\n Component,\n type ComponentInterface,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\nexport type InputType =\n | \"text\"\n | \"password\"\n | \"email\"\n | \"number\"\n | \"tel\"\n | \"url\"\n // Hack to suggest above value but still allow any other string value\n | (string & {});\n\nexport type InputMode =\n | \"none\"\n | \"text\"\n | \"decimal\"\n | \"numeric\"\n | \"tel\"\n | \"search\"\n | \"email\"\n | \"url\"\n // Hack to suggest above value but still allow any other string value\n | (string & {});\n\n/**\n * The input component is a basic text input field that can be used to capture\n * user input. It supports various types and input modes for different use\n * cases. When used in a form, make sure to wrap it in a Field component to\n * display a label, help text, and error messages.\n */\n@Component({\n tag: \"scout-input\",\n styleUrl: \"input.css\",\n scoped: true,\n})\nexport class ScoutInput\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n /**\n * Type of input element. If you need a number input, read the accessibility\n * section of this MDN article first:\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility\n */\n @Prop() type: InputType = \"text\";\n\n /**\n * Input mode hints for devices with dynamic keyboards.\n */\n @Prop() inputmode?: InputMode;\n\n /**\n * Regex pattern for input validation.\n */\n @Prop() pattern?: string;\n\n /**\n * Value of the input element, in case you want to control it yourself.\n */\n @Prop() value: string = \"\";\n\n @Prop() name: string;\n\n /**\n * Whether the input is disabled. Disabled inputs are not editable, excluded\n * from tab order and are not validated.\n */\n @Prop() disabled: boolean = false;\n\n render() {\n return (\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type={this.type}\n name={this.name}\n inputMode={this.inputmode}\n pattern={this.pattern}\n class=\"input\"\n value={this.value}\n disabled={this.disabled}\n onInput={() => this.onInput()}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,QAAQ,GAAG,iWAAiW;;AC0CrW,MAAA,UACX,GAAA,cAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;AAGzB;;;;AAIG;IACK,IAAI,GAAc,MAAM;AAEhC;;AAEG;AACK,IAAA,SAAS;AAEjB;;AAEG;AACK,IAAA,OAAO;AAEf;;AAEG;IACK,KAAK,GAAW,EAAE;AAElB,IAAA,IAAI;AAEZ;;;AAGG;IACK,QAAQ,GAAY,KAAK;IAEjC,MAAM,GAAA;QACJ,QACE,8DACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAC7B,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EACjC,CAAA;;;;;;;"}
package/dist/ui-webc/scout-select.entry.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"scout-select.entry.esm.js","sources":["../../node_modules/.pnpm/@tabler+icons@3.35.0/node_modules/@tabler/icons/icons/outline/chevron-down.svg","src/components/select/select.css?tag=scout-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-down\"\n>\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n <path d=\"M6 9l6 6l6 -6\" />\n</svg>",".select-wrapper {\n position: relative;\n display: inline-flex;\n width: 100%;\n}\n\n.select {\n width: 100%;\n height: var(--spacing-10);\n padding: var(--spacing-2);\n padding-right: var(--spacing-8);\n font: var(--type-body-base);\n border: 1px solid var(--color-gray-300);\n border-radius: var(--spacing-2);\n background-color: var(--color-white);\n color: var(--color-text-base);\n appearance: none;\n -webkit-appearance: none;\n cursor: pointer;\n}\n\n.select:hover:not(:disabled) {\n border-color: var(--color-gray-400);\n}\n\n.select:focus {\n outline: 2px solid var(--color-background-brand-base);\n outline-offset: 1px;\n}\n\n.select:disabled {\n background-color: var(--color-gray-100);\n color: var(--color-gray-700);\n cursor: not-allowed;\n}\n\n.select-icon {\n position: absolute;\n right: var(--spacing-2);\n top: 50%;\n transform: translateY(-50%);\n width: var(--spacing-5);\n height: var(--spacing-5);\n background-color: var(--color-text-base);\n mask-image: var(--icon-chevron);\n mask-repeat: no-repeat;\n mask-position: center;\n mask-size: contain;\n pointer-events: none;\n}\n\n.select:disabled + .select-icon {\n background-color: var(--color-gray-500);\n}\n","import {\n Component,\n type ComponentInterface,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport chevronIcon from \"@tabler/icons/outline/chevron-down.svg\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n@Component({\n tag: \"scout-select\",\n styleUrl: \"select.css\",\n scoped: true,\n})\nexport class ScoutSelect\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n /**\n * Value of the select element, in case you want to control it yourself.\n */\n @Prop() value: string = \"\";\n\n /**\n * Whether the select is disabled. Disabled selects are not editable, excluded\n * from tab order and are not validated.\n */\n @Prop() disabled: boolean = false;\n\n @Prop() name: string;\n\n render() {\n return (\n <div class=\"select-wrapper\">\n <select\n id={this.ariaId}\n name={this.name}\n class=\"select\"\n disabled={this.disabled}\n onChange={() => this.onInput()}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n >\n <slot />\n </select>\n <span\n class=\"select-icon\"\n style={{ \"--icon-chevron\": `url(${chevronIcon})` }}\n aria-hidden=\"true\"\n />\n </div>\n );\n }\n}\n"],"names":["chevronIcon"],"mappings":";;;AAAA,MAAM,cAAc,GAAG,ggBAAggB;;ACAvhB,MAAM,SAAS,GAAG,mvCAAmvC;;ACexvC,MAAA,WACX,GAAA,cAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;AAGzB;;AAEG;IACK,KAAK,GAAW,EAAE;AAE1B;;;AAGG;IACK,QAAQ,GAAY,KAAK;AAEzB,IAAA,IAAI;IAEZ,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzB,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAC9B,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAA,EAEjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACT,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,EAAE,gBAAgB,EAAE,CAAO,IAAA,EAAAA,cAAW,CAAG,CAAA,CAAA,EAAE,EAAA,aAAA,EACtC,MAAM,EAClB,CAAA,CACE;;;;;;;","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"scout-select.entry.esm.js","sources":["../../node_modules/.pnpm/@tabler+icons@3.35.0/node_modules/@tabler/icons/icons/outline/chevron-down.svg","src/components/select/select.css?tag=scout-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-down\"\n>\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n <path d=\"M6 9l6 6l6 -6\" />\n</svg>",".select-wrapper {\n position: relative;\n display: inline-flex;\n width: 100%;\n}\n\n.select {\n width: 100%;\n height: var(--spacing-10);\n padding: var(--spacing-2);\n padding-right: var(--spacing-8);\n font: var(--type-body-base);\n border: 1px solid var(--color-gray-300);\n border-radius: var(--spacing-2);\n background-color: var(--color-white);\n color: var(--color-text-base);\n appearance: none;\n -webkit-appearance: none;\n cursor: pointer;\n}\n\n.select:hover:not(:disabled) {\n border-color: var(--color-gray-400);\n}\n\n.select:focus {\n outline: 2px solid var(--color-background-brand-base);\n outline-offset: 1px;\n}\n\n.select:disabled {\n background-color: var(--color-gray-100);\n color: var(--color-gray-700);\n cursor: not-allowed;\n}\n\n.select-icon {\n position: absolute;\n right: var(--spacing-2);\n top: 50%;\n transform: translateY(-50%);\n width: var(--spacing-5);\n height: var(--spacing-5);\n background-color: var(--color-text-base);\n mask-image: var(--icon-chevron);\n mask-repeat: no-repeat;\n mask-position: center;\n mask-size: contain;\n pointer-events: none;\n}\n\n.select:disabled + .select-icon {\n background-color: var(--color-gray-500);\n}\n","import {\n Component,\n type ComponentInterface,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport chevronIcon from \"@tabler/icons/outline/chevron-down.svg\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n/**\n * The select component is a dropdown menu that allows users to select one\n * option from a list. When used in a form, make sure to wrap it in a Field\n * component to display a label, help text, and error messages.\n */\n@Component({\n tag: \"scout-select\",\n styleUrl: \"select.css\",\n scoped: true,\n})\nexport class ScoutSelect\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n /**\n * Value of the select element, in case you want to control it yourself.\n */\n @Prop() value: string = \"\";\n\n /**\n * Whether the select is disabled. Disabled selects are not editable, excluded\n * from tab order and are not validated.\n */\n @Prop() disabled: boolean = false;\n\n @Prop() name: string;\n\n render() {\n return (\n <div class=\"select-wrapper\">\n <select\n id={this.ariaId}\n name={this.name}\n class=\"select\"\n disabled={this.disabled}\n onChange={() => this.onInput()}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n >\n <slot />\n </select>\n <span\n class=\"select-icon\"\n style={{ \"--icon-chevron\": `url(${chevronIcon})` }}\n aria-hidden=\"true\"\n />\n </div>\n );\n }\n}\n"],"names":["chevronIcon"],"mappings":";;;AAAA,MAAM,cAAc,GAAG,ggBAAggB;;ACAvhB,MAAM,SAAS,GAAG,mvCAAmvC;;ACoBxvC,MAAA,WACX,GAAA,cAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;AAGzB;;AAEG;IACK,KAAK,GAAW,EAAE;AAE1B;;;AAGG;IACK,QAAQ,GAAY,KAAK;AAEzB,IAAA,IAAI;IAEZ,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzB,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAC9B,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAA,EAEjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACT,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,EAAE,gBAAgB,EAAE,CAAO,IAAA,EAAAA,cAAW,CAAG,CAAA,CAAA,EAAE,EAAA,aAAA,EACtC,MAAM,EAClB,CAAA,CACE;;;;;;;","x_google_ignoreList":[0]}
package/dist/ui-webc/scout-switch.entry.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"scout-switch.entry.esm.js","sources":["src/components/switch/switch.css?tag=scout-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":[".switch {\n width: var(--spacing-10);\n height: var(--spacing-6);\n appearance: none;\n -webkit-appearance: none;\n border-radius: var(--spacing-8);\n background-color: var(--color-text-brand-inverse);\n border: 2px solid var(--color-gray-300);\n position: relative;\n display: flex;\n align-content: center;\n justify-content: center;\n transition-property: border-color;\n transition-duration: 0.3s;\n transition-timing-function: ease-in-out;\n cursor: pointer;\n --switch-ball-padding: calc(var(--spacing-1) / 4);\n --switch-ball-size: calc(var(--spacing-5) - var(--switch-ball-padding) * 2);\n}\n\n.switch:hover {\n transition-property: none;\n border-color: var(--color-gray-400);\n background-color: var(--color-background-brand-subtle-hovered);\n}\n\n.switch:active {\n background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.switch:checked {\n border-color: var(--color-background-brand-base);\n}\n\n.switch:hover::before {\n background-color: var(--color-gray-400);\n}\n\n.switch::before {\n content: \"\";\n background-color: var(--color-gray-300);\n width: var(--switch-ball-size);\n height: var(--switch-ball-size);\n border-radius: 50%;\n position: absolute;\n top: var(--switch-ball-padding);\n left: var(--switch-ball-padding);\n transition-duration: 0.3s;\n transition-property: left, right;\n}\n.switch:checked::before {\n content: \"\";\n background-color: var(--color-background-brand-base);\n left: calc(100% - calc(var(--switch-ball-size) + var(--switch-ball-padding)));\n}\n\n.switch:disabled {\n pointer-events: none;\n background-color: var(--color-gray-100);\n border-color: var(--color-gray-100);\n}\n\n.switch:disabled::before {\n background-color: var(--color-gray-300);\n}\n\nlabel {\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n font: var(--type-label-base);\n color: var(--color-text-base);\n}\n\n.inlineDivider {\n width: var(--spacing-2);\n}\n","import {\n Component,\n type ComponentInterface,\n Event,\n type EventEmitter,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n@Component({\n tag: \"scout-switch\",\n styleUrl: \"switch.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ScoutSwitch\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n /**\n * Indicates whether the switch is toggled on or off.\n */\n @Prop() toggled: boolean = false;\n\n @Prop() disabled: boolean = false;\n\n /**\n * Use this prop if you need to connect your switch with another element describing its use, other than the property label.\n */\n @Prop() ariaLabelledby: string;\n\n @Prop() label: string;\n\n @Event() scoutChecked: EventEmitter<{\n checked: boolean;\n element: HTMLInputElement;\n }>;\n\n onChange(event: Event) {\n const checkbox = event.target as HTMLInputElement;\n\n this.scoutChecked.emit({\n checked: checkbox.checked,\n element: checkbox,\n });\n }\n\n render() {\n const Tag = this.label?.length ? \"label\" : \"div\";\n return (\n <Tag>\n {this.label}\n <span class=\"inlineDivider\"></span>\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type=\"checkbox\"\n class=\"switch\"\n aria-labelledby={this.ariaLabelledby}\n aria-disabled={this.disabled}\n disabled={this.disabled}\n checked={this.toggled}\n onChange={(event) => {\n this.onInput();\n this.onChange(event);\n }}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n </Tag>\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,SAAS,GAAG,ktDAAktD;;ACkBvtD,MAAA,WACX,GAAA,cAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;;AAGzB;;AAEG;IACK,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEJ,IAAA,YAAY;AAKrB,IAAA,QAAQ,CAAC,KAAY,EAAA;AACnB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B;AAEjD,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,OAAO,EAAE,QAAQ,CAAC,OAAO;AACzB,YAAA,OAAO,EAAE,QAAQ;AAClB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK;QAChD,QACE,EAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,IAAI,CAAC,KAAK,EACX,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAQ,CAAA,EACnC,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,QAAQ,EACG,iBAAA,EAAA,IAAI,CAAC,cAAc,EACrB,eAAA,EAAA,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,KAAI;gBAClB,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;aACrB,EACD,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAA,CACjC,CACE;;;;;;;;"}
1
+ {"version":3,"file":"scout-switch.entry.esm.js","sources":["src/components/switch/switch.css?tag=scout-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":[".switch {\n width: var(--spacing-10);\n height: var(--spacing-6);\n appearance: none;\n -webkit-appearance: none;\n border-radius: var(--spacing-8);\n background-color: var(--color-text-brand-inverse);\n border: 2px solid var(--color-gray-300);\n position: relative;\n display: flex;\n align-content: center;\n justify-content: center;\n transition-property: border-color;\n transition-duration: 0.3s;\n transition-timing-function: ease-in-out;\n cursor: pointer;\n --switch-ball-padding: calc(var(--spacing-1) / 4);\n --switch-ball-size: calc(var(--spacing-5) - var(--switch-ball-padding) * 2);\n}\n\n.switch:hover {\n transition-property: none;\n border-color: var(--color-gray-400);\n background-color: var(--color-background-brand-subtle-hovered);\n}\n\n.switch:active {\n background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.switch:checked {\n border-color: var(--color-background-brand-base);\n}\n\n.switch:hover::before {\n background-color: var(--color-gray-400);\n}\n\n.switch::before {\n content: \"\";\n background-color: var(--color-gray-300);\n width: var(--switch-ball-size);\n height: var(--switch-ball-size);\n border-radius: 50%;\n position: absolute;\n top: var(--switch-ball-padding);\n left: var(--switch-ball-padding);\n transition-duration: 0.3s;\n transition-property: left, right;\n}\n.switch:checked::before {\n content: \"\";\n background-color: var(--color-background-brand-base);\n left: calc(100% - calc(var(--switch-ball-size) + var(--switch-ball-padding)));\n}\n\n.switch:disabled {\n pointer-events: none;\n background-color: var(--color-gray-100);\n border-color: var(--color-gray-100);\n}\n\n.switch:disabled::before {\n background-color: var(--color-gray-300);\n}\n\nlabel {\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n font: var(--type-label-base);\n color: var(--color-text-base);\n}\n\n.inlineDivider {\n width: var(--spacing-2);\n}\n","import {\n Component,\n type ComponentInterface,\n Event,\n type EventEmitter,\n h,\n Mixin,\n Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n/**\n * The switch component is used to toggle between two states, on and off.\n * Behaves like a checkbox. When used in a form, make sure to wrap it in a Field\n * component to display a label, help text, and error messages.\n */\n@Component({\n tag: \"scout-switch\",\n styleUrl: \"switch.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class ScoutSwitch\n extends Mixin(inputMixin)\n implements ComponentInterface\n{\n /**\n * Indicates whether the switch is toggled on or off.\n */\n @Prop() toggled: boolean = false;\n\n @Prop() disabled: boolean = false;\n\n /**\n * Use this prop if you need to connect your switch with another element describing its use, other than the property label.\n */\n @Prop() ariaLabelledby: string;\n\n @Prop() label: string;\n\n @Event() scoutChecked: EventEmitter<{\n checked: boolean;\n element: HTMLInputElement;\n }>;\n\n onChange(event: Event) {\n const checkbox = event.target as HTMLInputElement;\n\n this.scoutChecked.emit({\n checked: checkbox.checked,\n element: checkbox,\n });\n }\n\n render() {\n const Tag = this.label?.length ? \"label\" : \"div\";\n return (\n <Tag>\n {this.label}\n <span class=\"inlineDivider\"></span>\n <input\n ref={(el) => this.setInputRef(el)}\n id={this.ariaId}\n type=\"checkbox\"\n class=\"switch\"\n aria-labelledby={this.ariaLabelledby}\n aria-disabled={this.disabled}\n disabled={this.disabled}\n checked={this.toggled}\n onChange={(event) => {\n this.onInput();\n this.onChange(event);\n }}\n onBlur={() => this.onBlur()}\n onInvalid={() => this.onInvalid()}\n />\n </Tag>\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,SAAS,GAAG,ktDAAktD;;ACuBvtD,MAAA,WACX,GAAA,cAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;;AAGzB;;AAEG;IACK,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEJ,IAAA,YAAY;AAKrB,IAAA,QAAQ,CAAC,KAAY,EAAA;AACnB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B;AAEjD,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,OAAO,EAAE,QAAQ,CAAC,OAAO;AACzB,YAAA,OAAO,EAAE,QAAQ;AAClB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK;QAChD,QACE,EAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,IAAI,CAAC,KAAK,EACX,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAQ,CAAA,EACnC,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,QAAQ,EACG,iBAAA,EAAA,IAAI,CAAC,cAAc,EACrB,eAAA,EAAA,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,KAAI;gBAClB,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;aACrB,EACD,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAA,CACjC,CACE;;;;;;;;"}
package/dist/ui-webc/ui-webc.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,g as a,b as t}from"./p-ksA_9NPe.js";export{s as setNonce}from"./p-ksA_9NPe.js";var l=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};l().then((async e=>{await a();return t([["p-3018f46f",[[785,"scout-list-view-item",{icon:[1],primary:[1],secondary:[1],type:[1],href:[1],target:[1],rel:[1],name:[1],value:[1],checked:[4]}]]],["p-e4f5dad7",[[785,"scout-app-bar",{titleText:[1,"title-text"]}]]],["p-50112773",[[273,"scout-bottom-bar"]]],["p-c2c5857d",[[785,"scout-bottom-bar-item",{type:[1],href:[1],target:[1],rel:[1],icon:[1],label:[1],active:[4]}]]],["p-3e750355",[[774,"scout-button",{type:[1],href:[1],target:[1],rel:[1],variant:[1],icon:[1],iconPosition:[1,"icon-position"],iconOnly:[4,"icon-only"]}]]],["p-97f9cf0a",[[273,"scout-card"]]],["p-ac65f104",[[273,"scout-divider"]]],["p-d999b8d6",[[774,"scout-field",{label:[1],helpText:[1,"help-text"],inputId:[32],errorText:[32],errorHidden:[32]},[[0,"_scoutFieldId","catchFieldId"],[0,"_scoutValidate","handleValidation"],[0,"scoutBlur","showError"],[0,"_scoutInvalid","showError"]]]]],["p-479ae616",[[770,"scout-input",{validate:[16],type:[1],inputmode:[1],pattern:[1],value:[1],name:[1],disabled:[4],ariaId:[32]}]]],["p-1efd7b9a",[[785,"scout-link",{href:[1],label:[1],rel:[1],linkAriaLabel:[1,"link-aria-label"],type:[1],target:[1]}]]],["p-e2288570",[[273,"scout-list-view",null,[[0,"scoutChecked","onScoutChecked"]]]]],["p-02c211ea",[[785,"scout-list-view-subheader",{text:[1],headingLevel:[1,"heading-level"]}]]],["p-97956c4f",[[769,"scout-loader",{text:[1],size:[1]}]]],["p-d8084e5c",[[774,"scout-select",{validate:[16],value:[1],disabled:[4],name:[1],ariaId:[32]}]]],["p-974e8415",[[785,"scout-stack",{direction:[1],gapSize:[1,"gap-size"]}]]],["p-1a701759",[[785,"scout-switch",{validate:[16],toggled:[4],disabled:[4],ariaLabelledby:[1,"aria-labelledby"],label:[1],ariaId:[32]}]]],["p-4616484e",[[770,"scout-checkbox",{validate:[16],checked:[4],disabled:[4],ariaLabelledby:[1,"aria-labelledby"],label:[1],value:[1],name:[1],ariaId:[32]}],[770,"scout-radio-button",{validate:[16],checked:[4],disabled:[4],ariaLabelledby:[1,"aria-labelledby"],label:[1],value:[1],name:[1],ariaId:[32]}]]]],e)}));
1
+ import{p as e,g as a,b as t}from"./p-ksA_9NPe.js";export{s as setNonce}from"./p-ksA_9NPe.js";var l=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};l().then((async e=>{await a();return t([["p-3018f46f",[[785,"scout-list-view-item",{icon:[1],primary:[1],secondary:[1],type:[1],href:[1],target:[1],rel:[1],name:[1],value:[1],checked:[4]}]]],["p-531dc32a",[[785,"scout-app-bar",{titleText:[1,"title-text"]}]]],["p-50112773",[[273,"scout-bottom-bar"]]],["p-c2c5857d",[[785,"scout-bottom-bar-item",{type:[1],href:[1],target:[1],rel:[1],icon:[1],label:[1],active:[4]}]]],["p-f01605ca",[[774,"scout-button",{type:[1],href:[1],target:[1],rel:[1],variant:[1],icon:[1],iconPosition:[1,"icon-position"],iconOnly:[4,"icon-only"]}]]],["p-97f9cf0a",[[273,"scout-card"]]],["p-ac65f104",[[273,"scout-divider"]]],["p-faaf9da5",[[774,"scout-field",{label:[1],helpText:[1,"help-text"],inputId:[32],errorText:[32],errorHidden:[32]},[[0,"_scoutFieldId","catchFieldId"],[0,"_scoutValidate","handleValidation"],[0,"scoutBlur","showError"],[0,"_scoutInvalid","showError"]]]]],["p-78b6c86b",[[770,"scout-input",{validate:[16],type:[1],inputmode:[1],pattern:[1],value:[1],name:[1],disabled:[4],ariaId:[32]}]]],["p-1efd7b9a",[[785,"scout-link",{href:[1],label:[1],rel:[1],linkAriaLabel:[1,"link-aria-label"],type:[1],target:[1]}]]],["p-e2288570",[[273,"scout-list-view",null,[[0,"scoutChecked","onScoutChecked"]]]]],["p-02c211ea",[[785,"scout-list-view-subheader",{text:[1],headingLevel:[1,"heading-level"]}]]],["p-97956c4f",[[769,"scout-loader",{text:[1],size:[1]}]]],["p-ee497882",[[774,"scout-select",{validate:[16],value:[1],disabled:[4],name:[1],ariaId:[32]}]]],["p-974e8415",[[785,"scout-stack",{direction:[1],gapSize:[1,"gap-size"]}]]],["p-45b65a28",[[785,"scout-switch",{validate:[16],toggled:[4],disabled:[4],ariaLabelledby:[1,"aria-labelledby"],label:[1],ariaId:[32]}]]],["p-e4ba9bd7",[[770,"scout-checkbox",{validate:[16],checked:[4],disabled:[4],ariaLabelledby:[1,"aria-labelledby"],label:[1],value:[1],name:[1],ariaId:[32]}],[770,"scout-radio-button",{validate:[16],checked:[4],disabled:[4],ariaLabelledby:[1,"aria-labelledby"],label:[1],value:[1],name:[1],ariaId:[32]}]]]],e)}));
2
2
  //# sourceMappingURL=ui-webc.esm.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scouterna/ui-webc",
3
- "version": "2.2.2",
3
+ "version": "2.2.4",
4
4
  "type": "module",
5
5
  "description": "Scouterna Design System Web Components",
6
6
  "main": "dist/index.cjs.js",
@@ -34,7 +34,8 @@
34
34
  },
35
35
  "repository": {
36
36
  "type": "git",
37
- "url": "https://github.com/Scouterna/j26-components.git"
37
+ "url": "https://github.com/Scouterna/j26-components.git",
38
+ "directory": "packages/ui-webc"
38
39
  },
39
40
  "files": [
40
41
  "dist/",
@@ -46,7 +47,7 @@
46
47
  "clsx": "^2.1.1",
47
48
  "iconoir": "^7.11.0",
48
49
  "@tabler/icons": "^3.35.0",
49
- "@scouterna/design-tokens": "^0.0.4"
50
+ "@scouterna/design-tokens": "^0.0.5"
50
51
  },
51
52
  "devDependencies": {
52
53
  "@stencil-community/postcss": "^2.2.0",
package/dist/ui-webc/p-3e750355.entry.js DELETED
@@ -1,2 +0,0 @@
1
- import{r as o,c as t,h as c}from"./p-ksA_9NPe.js";const r=".button.sc-scout-button{flex:1;display:inline-flex;height:var(--spacing-10);align-items:center;justify-content:center;gap:var(--spacing-3);padding:0 var(--spacing-4);font:var(--type-body-base);border-radius:var(--spacing-2);border:1px solid transparent;cursor:pointer;-webkit-text-decoration:none;text-decoration:none}.icon.sc-scout-button{width:var(--spacing-5);height:var(--spacing-5);margin:0 calc(var(--spacing-1) * -1)}.icon.sc-scout-button svg.sc-scout-button{width:100%;height:100%}.button.icon-only.sc-scout-button{aspect-ratio:1 / 1;justify-content:center;padding:0}.button.icon-only.sc-scout-button .icon.sc-scout-button{margin:0}.button.icon-only.sc-scout-button .content.sc-scout-button{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.button.primary.sc-scout-button{background-color:var(--color-background-brand-base);color:var(--color-text-brand-inverse)}.button.primary.sc-scout-button:hover{background-color:var(--color-background-brand-hovered)}.button.primary.sc-scout-button:active{background-color:var(--color-background-brand-pressed)}.button.outlined.sc-scout-button{background-color:transparent;border-color:var(--color-background-brand-subtle-base);color:var(--color-text-brand-base)}.button.outlined.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.outlined.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.text.sc-scout-button{background-color:transparent;border-color:transparent;color:var(--color-text-brand-base)}.button.text.sc-scout-button:hover{background-color:var(--color-background-brand-subtle-hovered)}.button.text.sc-scout-button:active{background-color:var(--color-background-brand-subtle-pressed)}.button.caution.sc-scout-button{background-color:var(--color-background-caution-bold-base);color:var(--color-text-caution-bold-base)}.button.caution.sc-scout-button:hover{background-color:var(--color-background-caution-bold-hovered)}.button.caution.sc-scout-button:active{background-color:var(--color-background-caution-bold-pressed)}.button.danger.sc-scout-button{background-color:var(--color-background-danger-bold-base);color:var(--color-text-danger-bold-base)}.button.danger.sc-scout-button:hover{background-color:var(--color-background-danger-bold-hovered)}.button.danger.sc-scout-button:active{background-color:var(--color-background-danger-bold-pressed)}";const n=class{constructor(c){o(this,c);this.scoutClick=t(this,"scoutClick")}type="button";href;target;rel;variant="outlined";icon;iconPosition="after";iconOnly=false;scoutClick;render(){const o=this.type==="link"?"a":"button";const t=this.type==="link"?{href:this.href,target:this.target,rel:this.rel??(this.target==="_blank"?"noopener noreferrer":undefined)}:{type:this.type};const r=this.icon&&c("span",{key:"4a3e7eb143e3cf53d6a6327163be00947d3cf370",class:"icon",innerHTML:this.icon});return c(o,{key:"d7807c803a4032c6a48c9ffbc08ea1b4bb845058",class:`button ${this.variant} ${this.iconOnly?"icon-only":""}`,onClick:()=>this.scoutClick.emit(),...t},this.iconPosition==="before"&&r,c("span",{key:"f89787ee6e018587d87c1656d32c1b438263d8c9",class:"content"},c("slot",{key:"31567811c1d3151aaa74546df5c50fc01a41d582"})),this.iconPosition==="after"&&r)}};n.style=r;export{n as scout_button};
2
- //# sourceMappingURL=p-3e750355.entry.js.map
package/dist/ui-webc/p-d999b8d6.entry.js DELETED
@@ -1,2 +0,0 @@
1
- import{r as e,a as t,h as a}from"./p-ksA_9NPe.js";const s=".field.sc-scout-field{display:flex;flex-direction:column}.label.sc-scout-field{font:var(--type-label-sm);font-weight:600;color:var(--color-text-base)}.error-text.sc-scout-field{font:var(--type-label-sm);color:var(--color-text-danger-base);margin:var(--spacing-1) 0 0 0}.error-text.sc-scout-field:empty{margin:0}.help-text.sc-scout-field{font:var(--type-label-sm);color:var(--color-gray-600);margin:var(--spacing-1) 0 0 0}";const l=class{constructor(t){e(this,t)}label;helpText;inputId;errorText=null;errorHidden=false;get hostElement(){return t(this)}catchFieldId(e){e.stopPropagation();this.inputId=e.detail}handleValidation(e){const{element:t}=e.detail;this.errorHidden=true;if(t.validity.valid){this.errorText=null}else{this.errorText=t.validationMessage}}showError(){this.errorHidden=false}render(){return a("div",{key:"faca4ec5b46ef2e8f30ba1d83c9541454c6c42af",class:"field"},a("label",{key:"38f84753a62d401c34aa5626dfecd7bbb80e24d8",htmlFor:this.inputId,class:"label"},this.label),a("slot",{key:"328f3c36f3241eae23a0918ad8a1c8eaa7e27027"}),a("p",{key:"b200a60b5e1948fca8b6922f5046ee3e898ebde6",class:"error-text","aria-live":"polite"},!this.errorHidden&&this.errorText),this.helpText&&a("p",{key:"09b0acb16e4faefb3eb681ea0eb5229f305a163c",class:"help-text"},this.helpText))}};l.style=s;export{l as scout_field};
2
- //# sourceMappingURL=p-d999b8d6.entry.js.map