@sula-tech/webcomponents 0.9.2 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/{sula-avatar_19.cjs.entry.js → sula-avatar_20.cjs.entry.js} +98 -20
  3. package/dist/cjs/sula-avatar_20.cjs.entry.js.map +1 -0
  4. package/dist/cjs/webcomponents.cjs.js +1 -1
  5. package/dist/collection/collection-manifest.json +1 -0
  6. package/dist/collection/components/sula-icon/sula-icon.css +1 -1
  7. package/dist/collection/components/sula-segmented-control/model/sula-segmented-control.model.js +16 -0
  8. package/dist/collection/components/sula-segmented-control/model/sula-segmented-control.model.js.map +1 -0
  9. package/dist/collection/components/sula-segmented-control/sula-segmented-control.css +1 -0
  10. package/dist/collection/components/sula-segmented-control/sula-segmented-control.js +241 -0
  11. package/dist/collection/components/sula-segmented-control/sula-segmented-control.js.map +1 -0
  12. package/dist/collection/components/sula-segmented-control/sula-segmented-control.stories.js +352 -0
  13. package/dist/collection/components/sula-segmented-control/sula-segmented-control.stories.js.map +1 -0
  14. package/dist/collection/components/sula-switch/sula-switch.js +4 -4
  15. package/dist/collection/components/sula-tag/sula-tag.js +3 -3
  16. package/dist/collection/components/sula-textarea/sula-textarea.js +6 -6
  17. package/dist/collection/components/sula-textfield/sula-textfield.js +2 -2
  18. package/dist/collection/components/sula-tiles/sula-tiles.js +1 -1
  19. package/dist/collection/components/sula-timeline-list/sula-timeline-list.js +1 -1
  20. package/dist/collection/testing/e2e-setup.js +47 -0
  21. package/dist/collection/testing/e2e-setup.js.map +1 -0
  22. package/dist/components/{p-Bgqd8BiV.js → p-BZgImhEG.js} +3 -3
  23. package/dist/components/{p-Bgqd8BiV.js.map → p-BZgImhEG.js.map} +1 -1
  24. package/dist/components/{p-Uq6L0wCA.js → p-BuA_ueQn.js} +3 -3
  25. package/dist/components/{p-Uq6L0wCA.js.map → p-BuA_ueQn.js.map} +1 -1
  26. package/dist/components/sula-avatar.js +1 -1
  27. package/dist/components/sula-badge.js +1 -1
  28. package/dist/components/sula-button.js +1 -1
  29. package/dist/components/sula-checkbox.js +1 -1
  30. package/dist/components/sula-chip.js +1 -1
  31. package/dist/components/sula-dropdown.js +1 -1
  32. package/dist/components/sula-icon.js +1 -1
  33. package/dist/components/sula-modal.js +2 -2
  34. package/dist/components/sula-progress-bar.js +1 -1
  35. package/dist/components/sula-search-bar.js +1 -1
  36. package/dist/components/sula-segmented-control.d.ts +11 -0
  37. package/dist/components/sula-segmented-control.js +113 -0
  38. package/dist/components/sula-segmented-control.js.map +1 -0
  39. package/dist/components/sula-switch.js +4 -4
  40. package/dist/components/sula-tag.js +4 -4
  41. package/dist/components/sula-textarea.js +6 -6
  42. package/dist/components/sula-textfield.js +3 -3
  43. package/dist/components/sula-tiles.js +2 -2
  44. package/dist/components/sula-timeline-list.js +2 -2
  45. package/dist/esm/loader.js +1 -1
  46. package/dist/esm/{sula-avatar_19.entry.js → sula-avatar_20.entry.js} +98 -21
  47. package/dist/esm/sula-avatar_20.entry.js.map +1 -0
  48. package/dist/esm/webcomponents.js +1 -1
  49. package/dist/types/components/sula-segmented-control/model/sula-segmented-control.model.d.ts +19 -0
  50. package/dist/types/components/sula-segmented-control/sula-segmented-control.d.ts +37 -0
  51. package/dist/types/components/sula-segmented-control/sula-segmented-control.stories.d.ts +136 -0
  52. package/dist/types/components.d.ts +84 -0
  53. package/dist/types/testing/e2e-setup.d.ts +1 -0
  54. package/dist/webcomponents/{p-9f81911a.entry.js → p-fbc8b4d8.entry.js} +186 -83
  55. package/dist/webcomponents/p-fbc8b4d8.entry.js.map +1 -0
  56. package/dist/webcomponents/webcomponents.esm.js +6 -1
  57. package/package.json +5 -2
  58. package/dist/cjs/sula-avatar_19.cjs.entry.js.map +0 -1
  59. package/dist/esm/sula-avatar_19.entry.js.map +0 -1
  60. package/dist/webcomponents/p-9f81911a.entry.js.map +0 -1
package/dist/components/sula-avatar.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, h, a as Host } from './index.js';
2
- import { d as defineCustomElement$2 } from './p-Uq6L0wCA.js';
2
+ import { d as defineCustomElement$2 } from './p-BuA_ueQn.js';
3
3
 
4
4
  var SulaAvatarSize;
5
5
  (function (SulaAvatarSize) {
package/dist/components/sula-badge.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, h, a as Host } from './index.js';
2
- import { d as defineCustomElement$2 } from './p-Uq6L0wCA.js';
2
+ import { d as defineCustomElement$2 } from './p-BuA_ueQn.js';
3
3
 
4
4
  var SulaBadgeStatus;
5
5
  (function (SulaBadgeStatus) {
package/dist/components/sula-button.js CHANGED
@@ -1,4 +1,4 @@
1
- import { S as SulaButton$1, d as defineCustomElement$1 } from './p-Bgqd8BiV.js';
1
+ import { S as SulaButton$1, d as defineCustomElement$1 } from './p-BZgImhEG.js';
2
2
 
3
3
  const SulaButton = SulaButton$1;
4
4
  const defineCustomElement = defineCustomElement$1;
package/dist/components/sula-checkbox.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
2
- import { d as defineCustomElement$2 } from './p-Uq6L0wCA.js';
2
+ import { d as defineCustomElement$2 } from './p-BuA_ueQn.js';
3
3
 
4
4
  var SulaCheckboxType;
5
5
  (function (SulaCheckboxType) {
package/dist/components/sula-chip.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
2
- import { d as defineCustomElement$3 } from './p-Uq6L0wCA.js';
2
+ import { d as defineCustomElement$3 } from './p-BuA_ueQn.js';
3
3
  import { d as defineCustomElement$2 } from './p-QU2wuzIe.js';
4
4
 
5
5
  var SulaChipAppearance;
package/dist/components/sula-dropdown.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
2
- import { d as defineCustomElement$3 } from './p-Uq6L0wCA.js';
2
+ import { d as defineCustomElement$3 } from './p-BuA_ueQn.js';
3
3
  import { d as defineCustomElement$2 } from './p-QU2wuzIe.js';
4
4
 
5
5
  const sulaDropdownCss = "*,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}.outline{outline-style:solid}:host{display:block}.dropdown-focus{outline:2px solid var(--color-feedback-informational)!important;outline-offset:2px!important}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#012b15;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#330d00;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#402705;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#401204;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#402301;--color-gray-50:#fff;--color-gray-100:#f3f4f4;--color-gray-200:#e5e6e6;--color-gray-300:#bfc0c0;--color-gray-400:#acaeae;--color-gray-500:#949595;--color-gray-600:#737575;--color-gray-700:#6c6e6e;--color-gray-800:#313333;--color-gray-900:#272929;--color-gray-950:#191d1d;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#071e40;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:rgba(25,29,29,.02);--color-black-opacity-100:rgba(25,29,29,.05);--color-black-opacity-200:rgba(25,29,29,.11);--color-black-opacity-300:rgba(25,29,29,.28);--color-black-opacity-400:rgba(25,29,29,.36);--color-black-opacity-500:rgba(25,29,29,.44);--color-black-opacity-600:rgba(25,29,29,.62);--color-black-opacity-700:rgba(25,29,29,.64);--color-black-opacity-800:rgba(25,29,29,.72);--color-black-opacity-900:rgba(25,29,29,.8);--color-black-opacity-950:rgba(25,29,29,.96);--color-shadow-opacity-50:rgba(0,0,0,.04);--color-shadow-opacity-100:rgba(0,0,0,.06);--color-shadow-opacity-200:rgba(0,0,0,.12);--color-shadow-opacity-300:rgba(0,0,0,.2);--color-shadow-opacity-400:rgba(0,0,0,.32);--color-shadow-opacity-500:rgba(0,0,0,.5);--color-shadow-opacity-600:rgba(0,0,0,.55);--color-shadow-opacity-700:rgba(0,0,0,.64);--color-shadow-opacity-800:rgba(0,0,0,.73);--color-shadow-opacity-900:rgba(0,0,0,.8);--color-shadow-opacity-950:rgba(0,0,0,.91);--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f3f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#313333;--color-text-secondary:#6c6e6e;--color-text-disabled:#949595;--color-text-link:#1355b4;--color-states-empty-bg-hover:rgba(25,29,29,.05);--color-states-empty-bg-pressed:rgba(25,29,29,.11);--color-states-bg-disabled:rgba(25,29,29,.02);--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e5e6e6;--color-states-negative-pressed:#bfc0c0;--color-icon-primary:#6c6e6e;--color-icon-secondary:#fff;--color-icon-tertiary:#b30404;--color-icon-disabled:#acaeae;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f3f4f4;--color-neutral-neutral-3:#acaeae;--color-neutral-neutral-4:#949595;--color-neutral-neutral-5:#737575;--color-neutral-neutral-6:#6c6e6e;--color-neutral-neutral-7:#313333;--color-neutral-neutral-8:#272929;--color-negative-negative-1:#fff;--color-negative-negative-2:#313333;--color-opacity-body:#fffc;--color-opacity-on-body:rgba(25,29,29,.02);--color-opacity-overlay:rgba(25,29,29,.62);--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949595;--color-line-general-strong:#bfc0c0;--color-line-general:#e5e6e6;--color-line-hair:rgba(25,29,29,.05);--color-box-shadow-body:#fff;--color-box-shadow-shadow-color-1:rgba(0,0,0,.04);--color-box-shadow-shadow-color-2:rgba(0,0,0,.06)}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.top-\\[72px\\]{top:72px}.z-50{z-index:50}.m-0{margin:0}.ml-8{margin-left:.5rem}.flex{display:flex}.h-\\[72px\\]{height:72px}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-sm,.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-none{border-style:none}.border-line-general{border-color:var(--color-line-general)}.border-line-input{border-color:var(--color-line-input)}.bg-states-bg-disabled{background-color:var(--color-states-bg-disabled)}.bg-surface-body{background-color:var(--color-surface-body)}.bg-transparent{background-color:transparent}.p-0{padding:0}.px-16{padding-left:1rem;padding-right:1rem}.px-24{padding-left:1.5rem;padding-right:1.5rem}.py-16{padding-bottom:1rem;padding-top:1rem}.pt-4{padding-top:.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.leading-4{line-height:1rem}.leading-6{line-height:1.5rem}.text-icon-disabled{color:var(--color-icon-disabled)}.text-text-disabled{color:var(--color-text-disabled)}.text-text-primary{color:var(--color-text-primary)}.text-text-secondary{color:var(--color-text-secondary)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.placeholder\\:text-text-secondary::placeholder{color:var(--color-text-secondary)}.max-h-\\[260px\\]{max-height:260px}.overflow-auto{overflow:auto}.rounded-sm{border-radius:.75rem}.py-12{padding-bottom:.75rem;padding-top:.75rem}.text-text-brand{color:var(--color-text-brand)}.hover\\:bg-states-empty-bg-hover:hover{background-color:var(--color-states-empty-bg-hover)}";
package/dist/components/sula-icon.js CHANGED
@@ -1,4 +1,4 @@
1
- import { S as SulaIcon$1, d as defineCustomElement$1 } from './p-Uq6L0wCA.js';
1
+ import { S as SulaIcon$1, d as defineCustomElement$1 } from './p-BuA_ueQn.js';
2
2
 
3
3
  const SulaIcon = SulaIcon$1;
4
4
  const defineCustomElement = defineCustomElement$1;
package/dist/components/sula-modal.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
2
- import { d as defineCustomElement$4, a as SulaButtonAppearance } from './p-Bgqd8BiV.js';
3
- import { d as defineCustomElement$3 } from './p-Uq6L0wCA.js';
2
+ import { d as defineCustomElement$4, a as SulaButtonAppearance } from './p-BZgImhEG.js';
3
+ import { d as defineCustomElement$3 } from './p-BuA_ueQn.js';
4
4
  import { d as defineCustomElement$2 } from './p-BUnU7bjf.js';
5
5
 
6
6
  var SulaModalType;
package/dist/components/sula-progress-bar.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, h, a as Host } from './index.js';
2
- import { d as defineCustomElement$2 } from './p-Uq6L0wCA.js';
2
+ import { d as defineCustomElement$2 } from './p-BuA_ueQn.js';
3
3
 
4
4
  var SulaProgressBarAppearance;
5
5
  (function (SulaProgressBarAppearance) {
package/dist/components/sula-search-bar.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
2
- import { d as defineCustomElement$2 } from './p-Uq6L0wCA.js';
2
+ import { d as defineCustomElement$2 } from './p-BuA_ueQn.js';
3
3
 
4
4
  var SulaSearchBarStyle;
5
5
  (function (SulaSearchBarStyle) {
package/dist/components/sula-segmented-control.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import type { Components, JSX } from "../types/components";
2
+
3
+ interface SulaSegmentedControl extends Components.SulaSegmentedControl, HTMLElement {}
4
+ export const SulaSegmentedControl: {
5
+ prototype: SulaSegmentedControl;
6
+ new (): SulaSegmentedControl;
7
+ };
8
+ /**
9
+ * Used to define this component and all nested components recursively.
10
+ */
11
+ export const defineCustomElement: () => void;
package/dist/components/sula-segmented-control.js ADDED
@@ -0,0 +1,113 @@
1
+ import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
2
+ import { d as defineCustomElement$2 } from './p-BuA_ueQn.js';
3
+
4
+ var SulaSegmentedControlType;
5
+ (function (SulaSegmentedControlType) {
6
+ SulaSegmentedControlType["Icon"] = "icon";
7
+ SulaSegmentedControlType["Text"] = "text";
8
+ })(SulaSegmentedControlType || (SulaSegmentedControlType = {}));
9
+ var SulaSegmentedControlSize;
10
+ (function (SulaSegmentedControlSize) {
11
+ SulaSegmentedControlSize["Small"] = "small";
12
+ SulaSegmentedControlSize["Default"] = "default";
13
+ })(SulaSegmentedControlSize || (SulaSegmentedControlSize = {}));
14
+ var SulaSegmentedControlColor;
15
+ (function (SulaSegmentedControlColor) {
16
+ SulaSegmentedControlColor["White"] = "white";
17
+ SulaSegmentedControlColor["Gray"] = "gray";
18
+ })(SulaSegmentedControlColor || (SulaSegmentedControlColor = {}));
19
+
20
+ const sulaSegmentedControlCss = "*,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{display:block}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#012b15;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#330d00;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#402705;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#401204;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#402301;--color-gray-50:#fff;--color-gray-100:#f3f4f4;--color-gray-200:#e5e6e6;--color-gray-300:#bfc0c0;--color-gray-400:#acaeae;--color-gray-500:#949595;--color-gray-600:#737575;--color-gray-700:#6c6e6e;--color-gray-800:#313333;--color-gray-900:#272929;--color-gray-950:#191d1d;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#071e40;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:rgba(25,29,29,.02);--color-black-opacity-100:rgba(25,29,29,.05);--color-black-opacity-200:rgba(25,29,29,.11);--color-black-opacity-300:rgba(25,29,29,.28);--color-black-opacity-400:rgba(25,29,29,.36);--color-black-opacity-500:rgba(25,29,29,.44);--color-black-opacity-600:rgba(25,29,29,.62);--color-black-opacity-700:rgba(25,29,29,.64);--color-black-opacity-800:rgba(25,29,29,.72);--color-black-opacity-900:rgba(25,29,29,.8);--color-black-opacity-950:rgba(25,29,29,.96);--color-shadow-opacity-50:rgba(0,0,0,.04);--color-shadow-opacity-100:rgba(0,0,0,.06);--color-shadow-opacity-200:rgba(0,0,0,.12);--color-shadow-opacity-300:rgba(0,0,0,.2);--color-shadow-opacity-400:rgba(0,0,0,.32);--color-shadow-opacity-500:rgba(0,0,0,.5);--color-shadow-opacity-600:rgba(0,0,0,.55);--color-shadow-opacity-700:rgba(0,0,0,.64);--color-shadow-opacity-800:rgba(0,0,0,.73);--color-shadow-opacity-900:rgba(0,0,0,.8);--color-shadow-opacity-950:rgba(0,0,0,.91);--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f3f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#313333;--color-text-secondary:#6c6e6e;--color-text-disabled:#949595;--color-text-link:#1355b4;--color-states-empty-bg-hover:rgba(25,29,29,.05);--color-states-empty-bg-pressed:rgba(25,29,29,.11);--color-states-bg-disabled:rgba(25,29,29,.02);--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e5e6e6;--color-states-negative-pressed:#bfc0c0;--color-icon-primary:#6c6e6e;--color-icon-secondary:#fff;--color-icon-tertiary:#b30404;--color-icon-disabled:#acaeae;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f3f4f4;--color-neutral-neutral-3:#acaeae;--color-neutral-neutral-4:#949595;--color-neutral-neutral-5:#737575;--color-neutral-neutral-6:#6c6e6e;--color-neutral-neutral-7:#313333;--color-neutral-neutral-8:#272929;--color-negative-negative-1:#fff;--color-negative-negative-2:#313333;--color-opacity-body:#fffc;--color-opacity-on-body:rgba(25,29,29,.02);--color-opacity-overlay:rgba(25,29,29,.62);--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949595;--color-line-general-strong:#bfc0c0;--color-line-general:#e5e6e6;--color-line-hair:rgba(25,29,29,.05);--color-box-shadow-body:#fff;--color-box-shadow-shadow-color-1:rgba(0,0,0,.04);--color-box-shadow-shadow-color-2:rgba(0,0,0,.06)}.static{position:static}.ml-4{margin-left:.25rem}.flex{display:flex}.w-fit{width:fit-content}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-3xl{border-radius:1.5rem}.rounded-xxl{border-radius:18.75rem}.bg-box-shadow-body{background-color:var(--color-box-shadow-body)}.bg-brand-primary{background-color:var(--color-brand-primary)}.bg-opacity-body{background-color:var(--color-opacity-body)}.bg-opacity-on-body{background-color:var(--color-opacity-on-body)}.p-2{padding:.125rem}.px-16{padding-left:1rem;padding-right:1rem}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-12{padding-bottom:.75rem;padding-top:.75rem}.py-8{padding-bottom:.5rem;padding-top:.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-label-medium-bold{font-size:1rem;font-weight:700;letter-spacing:0;line-height:20px}.text-paragraph-medium-regular{font-size:1rem;font-weight:400;letter-spacing:0;line-height:24px}.text-xl{font-size:1.25rem;line-height:1.75rem}.leading-4{line-height:1rem}.leading-5{line-height:1.25rem}.text-brand-primary{color:var(--color-brand-primary)}.text-icon-primary{color:var(--color-icon-primary)}.text-negative-negative-1{color:var(--color-negative-negative-1)}.text-text-primary{color:var(--color-text-primary)}.text-text-secondary{color:var(--color-text-secondary)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.backdrop-blur-\\[20px\\]{--tw-backdrop-blur:blur(20px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:bg-box-shadow-body:hover{background-color:var(--color-box-shadow-body)}";
21
+
22
+ const SulaSegmentedControl$1 = /*@__PURE__*/ proxyCustomElement(class SulaSegmentedControl extends H {
23
+ constructor() {
24
+ super();
25
+ this.__registerHost();
26
+ this.__attachShadow();
27
+ this.itemClicked = createEvent(this, "itemClicked");
28
+ this.itemHovered = createEvent(this, "itemHovered");
29
+ this.itemBlur = createEvent(this, "itemBlur");
30
+ /**
31
+ * Items for the segmented control.
32
+ */
33
+ this.items = [];
34
+ /**
35
+ * Segmented control type.
36
+ */
37
+ this.type = SulaSegmentedControlType.Text;
38
+ /**
39
+ * Segmented control size.
40
+ */
41
+ this.size = SulaSegmentedControlSize.Default;
42
+ /**
43
+ * Segmented control color.
44
+ */
45
+ this.color = SulaSegmentedControlColor.White;
46
+ }
47
+ handleItemClick(selectedItem) {
48
+ this.items = this.items.map(item => (Object.assign(Object.assign({}, item), { selected: item.value === selectedItem.value })));
49
+ this.itemClicked.emit(Object.assign(Object.assign({}, selectedItem), { selected: true }));
50
+ }
51
+ handleItemHover(hoveredItem) {
52
+ this.itemHovered.emit(hoveredItem);
53
+ }
54
+ handleItemBlur(blurredItem) {
55
+ this.itemBlur.emit(blurredItem);
56
+ }
57
+ getCaretIconClass(item) {
58
+ if (this.type === SulaSegmentedControlType.Icon) {
59
+ return item.selected ? 'text-negative-negative-1' : 'text-icon-primary';
60
+ }
61
+ return item.selected ? 'text-brand-primary' : 'text-text-primary';
62
+ }
63
+ render() {
64
+ return (h(Host, { key: 'e1dfe69feaf9d299a87c3006849751fb053e1410' }, h("div", { key: '77ce9955a1ed4a99c3dc35c76b4367a90b2dad61', class: {
65
+ 'flex flex-row items-center rounded-xxl p-2 w-fit backdrop-blur-[20px]': true,
66
+ 'bg-opacity-on-body': this.color === SulaSegmentedControlColor.Gray,
67
+ 'bg-opacity-body': this.color === SulaSegmentedControlColor.White,
68
+ } }, this.items.map(item => (h("div", { class: {
69
+ 'rounded-3xl flex justify-center items-center cursor-pointer transition': true,
70
+ 'py-12 px-20': this.size === SulaSegmentedControlSize.Default,
71
+ 'py-8 px-16': this.size === SulaSegmentedControlSize.Small,
72
+ 'bg-box-shadow-body': this.type === SulaSegmentedControlType.Text && item.selected,
73
+ 'bg-brand-primary': this.type === SulaSegmentedControlType.Icon && item.selected,
74
+ 'hover:bg-box-shadow-body': !item.selected,
75
+ }, onClick: () => this.handleItemClick(item), onMouseEnter: () => this.handleItemHover(item), onMouseLeave: () => this.handleItemBlur(item) }, this.type === SulaSegmentedControlType.Text ? (h("span", { class: {
76
+ 'text-brand-primary text-label-medium-bold leading-5': item.selected,
77
+ 'text-text-secondary text-paragraph-medium-regular leading-5': !item.selected,
78
+ } }, item.label)) : (h("sula-icon", { class: "flex items-center justify-center", icon: item.icon, customClass: `${item.selected ? 'text-negative-negative-1' : 'text-icon-primary'} text-xl leading-4` })), item.addChevron && h("sula-icon", { class: "ml-4 flex", icon: "ph-bold ph-caret-down", customClass: `${this.getCaretIconClass(item)} text-base leading-4` })))))));
79
+ }
80
+ static get style() { return sulaSegmentedControlCss; }
81
+ }, [1, "sula-segmented-control", {
82
+ "items": [1040],
83
+ "type": [1025],
84
+ "size": [1025],
85
+ "color": [1025]
86
+ }]);
87
+ function defineCustomElement$1() {
88
+ if (typeof customElements === "undefined") {
89
+ return;
90
+ }
91
+ const components = ["sula-segmented-control", "sula-icon"];
92
+ components.forEach(tagName => { switch (tagName) {
93
+ case "sula-segmented-control":
94
+ if (!customElements.get(tagName)) {
95
+ customElements.define(tagName, SulaSegmentedControl$1);
96
+ }
97
+ break;
98
+ case "sula-icon":
99
+ if (!customElements.get(tagName)) {
100
+ defineCustomElement$2();
101
+ }
102
+ break;
103
+ } });
104
+ }
105
+ defineCustomElement$1();
106
+
107
+ const SulaSegmentedControl = SulaSegmentedControl$1;
108
+ const defineCustomElement = defineCustomElement$1;
109
+
110
+ export { SulaSegmentedControl, defineCustomElement };
111
+ //# sourceMappingURL=sula-segmented-control.js.map
112
+
113
+ //# sourceMappingURL=sula-segmented-control.js.map
package/dist/components/sula-segmented-control.js.map ADDED
@@ -0,0 +1 @@
1
+ {"file":"sula-segmented-control.js","mappings":"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","names":["SulaSegmentedControl","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sula-segmented-control/model/sula-segmented-control.model.ts","src/components/sula-segmented-control/sula-segmented-control.scss?tag=sula-segmented-control&encapsulation=shadow","src/components/sula-segmented-control/sula-segmented-control.tsx"],"sourcesContent":["export enum SulaSegmentedControlType {\n Icon = 'icon',\n Text = 'text',\n}\n\nexport enum SulaSegmentedControlSize {\n Small = 'small',\n Default = 'default',\n}\n\nexport enum SulaSegmentedControlColor {\n White = 'white',\n Gray = 'gray',\n}\n\nexport interface SulaSegmentedControlOption {\n label?: string;\n addChevron?: boolean;\n value: string | number;\n icon?: string;\n selected?: boolean;\n}\n",":host {\n display: block;\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { SulaSegmentedControlColor, SulaSegmentedControlOption, SulaSegmentedControlSize, SulaSegmentedControlType } from './model/sula-segmented-control.model';\n\n@Component({\n tag: 'sula-segmented-control',\n styleUrl: 'sula-segmented-control.scss',\n shadow: true,\n})\nexport class SulaSegmentedControl {\n /**\n * Items for the segmented control.\n */\n @Prop({ mutable: true })\n items: SulaSegmentedControlOption[] = [];\n\n /**\n * Segmented control type.\n */\n @Prop({ mutable: true })\n type: SulaSegmentedControlType = SulaSegmentedControlType.Text;\n\n /**\n * Segmented control size.\n */\n @Prop({ mutable: true })\n size: SulaSegmentedControlSize = SulaSegmentedControlSize.Default;\n\n /**\n * Segmented control color.\n */\n @Prop({ mutable: true })\n color: SulaSegmentedControlColor = SulaSegmentedControlColor.White;\n\n /**\n * Emitted when an item is clicked.\n */\n @Event()\n itemClicked: EventEmitter<SulaSegmentedControlOption>;\n\n /**\n * Emitted when an item is hovered.\n */\n @Event()\n itemHovered: EventEmitter<SulaSegmentedControlOption>;\n\n /**\n * Emitted when an item is blurred.\n */\n @Event()\n itemBlur: EventEmitter<SulaSegmentedControlOption>;\n\n handleItemClick(selectedItem: SulaSegmentedControlOption) {\n this.items = this.items.map(item => ({\n ...item,\n selected: item.value === selectedItem.value,\n }));\n\n this.itemClicked.emit({ ...selectedItem, selected: true });\n }\n\n handleItemHover(hoveredItem: SulaSegmentedControlOption) {\n this.itemHovered.emit(hoveredItem);\n }\n\n handleItemBlur(blurredItem: SulaSegmentedControlOption) {\n this.itemBlur.emit(blurredItem);\n }\n\n getCaretIconClass(item: SulaSegmentedControlOption) {\n if (this.type === SulaSegmentedControlType.Icon) {\n return item.selected ? 'text-negative-negative-1' : 'text-icon-primary';\n }\n return item.selected ? 'text-brand-primary' : 'text-text-primary';\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'flex flex-row items-center rounded-xxl p-2 w-fit backdrop-blur-[20px]': true,\n 'bg-opacity-on-body': this.color === SulaSegmentedControlColor.Gray,\n 'bg-opacity-body': this.color === SulaSegmentedControlColor.White,\n }}\n >\n {this.items.map(item => (\n <div\n class={{\n 'rounded-3xl flex justify-center items-center cursor-pointer transition': true,\n 'py-12 px-20': this.size === SulaSegmentedControlSize.Default,\n 'py-8 px-16': this.size === SulaSegmentedControlSize.Small,\n 'bg-box-shadow-body': this.type === SulaSegmentedControlType.Text && item.selected,\n 'bg-brand-primary': this.type === SulaSegmentedControlType.Icon && item.selected,\n 'hover:bg-box-shadow-body': !item.selected,\n }}\n onClick={() => this.handleItemClick(item)}\n onMouseEnter={() => this.handleItemHover(item)}\n onMouseLeave={() => this.handleItemBlur(item)}\n >\n {this.type === SulaSegmentedControlType.Text ? (\n <span\n class={{\n 'text-brand-primary text-label-medium-bold leading-5': item.selected,\n 'text-text-secondary text-paragraph-medium-regular leading-5': !item.selected,\n }}\n >\n {item.label}\n </span>\n ) : (\n <sula-icon\n class=\"flex items-center justify-center\"\n icon={item.icon}\n customClass={`${item.selected ? 'text-negative-negative-1' : 'text-icon-primary'} text-xl leading-4`}\n ></sula-icon>\n )}\n {item.addChevron && <sula-icon class=\"ml-4 flex\" icon=\"ph-bold ph-caret-down\" customClass={`${this.getCaretIconClass(item)} text-base leading-4`}></sula-icon>}\n </div>\n ))}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/components/sula-switch.js CHANGED
@@ -49,23 +49,23 @@ const SulaSwitch$1 = /*@__PURE__*/ proxyCustomElement(class SulaSwitch extends H
49
49
  };
50
50
  }
51
51
  render() {
52
- return (h(Host, { key: 'bbc4902ea0d731995e0c8600243018a171b65120' }, h("div", { key: 'b7e277261642fb9c909a8549dfe7a6295cb4dc01', class: {
52
+ return (h(Host, { key: 'e920dbb868a5bdde5e34ac4d015529aef08a8e3d' }, h("div", { key: '7552191cc1632d04c0c496f382fdbbb166547236', class: {
53
53
  'outline-none': true,
54
54
  'flex items-center space-x-12': !!this.label && this.type === SulaSwitchType.Default,
55
55
  'flex items-center justify-between bg-surface-on-body rounded-md w-[280px] min-h-[85px] px-24 py-16': this.type === SulaSwitchType.List,
56
56
  'hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed cursor-pointer': this.type === SulaSwitchType.List && !this.disabled,
57
57
  'container-focus': this.isFocus && this.type === SulaSwitchType.List,
58
- }, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, tabIndex: 0 }, this.type === SulaSwitchType.List && (h("div", { key: 'd15acc295e424576ab121dd5419465539ecfe440', class: "flex flex-col flex-1 mr-16 overflow-hidden" }, !!this.label && h("label", { key: '01e72df5708151314ff0155bcf7d9a7fafbd55e2', class: "text-text-primary font-bold text-base cursor-pointer break-words" }, this.label), !!this.subTitle && h("span", { key: 'c6871b59d4fe3094196bff0c78463910a2c900bd', class: "text-text-secondary text-base break-words" }, this.subTitle))), h("div", { key: 'ec2df308d747f232d71dc9d3dbd6fc99c25f85d8', class: {
58
+ }, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, tabIndex: 0 }, this.type === SulaSwitchType.List && (h("div", { key: '322c268b6e010f49cb1b61509398d9f7a1b9b8a1', class: "flex flex-col flex-1 mr-16 overflow-hidden" }, !!this.label && h("label", { key: '0da8b536c781a7d0fdfc1539b115c11171328455', class: "text-text-primary font-bold text-base cursor-pointer break-words" }, this.label), !!this.subTitle && h("span", { key: '8ff30bb13d52d759c6b2a2892ec608d14e9ece86', class: "text-text-secondary text-base break-words" }, this.subTitle))), h("div", { key: 'cec3a0d3f3620af6e25c2ae1e6ac771eb7acaef2', class: {
59
59
  'switch-container w-56 h-32 flex items-center rounded-xxl p-2 outline-none': true,
60
60
  'switch-on bg-brand-primary justify-end': this.active,
61
61
  'switch-off bg-neutral-neutral-3 justify-start': !this.active,
62
62
  'cursor-not-allowed bg-states-bg-disabled': this.disabled,
63
63
  'switch-focus': this.isFocus && this.type === SulaSwitchType.Default,
64
- }, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'a10f04862c4257df7a1753d0569dc32e8c0cd099', class: {
64
+ }, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'ae01eb32010e93fbc3fb652c0fdd653df57b7835', class: {
65
65
  'switch-thumb w-[28px] h-[28px] rounded-full flex justify-center items-center': true,
66
66
  'bg-negative-negative-1': !this.disabled,
67
67
  'bg-states-bg-disabled shadow-md': this.disabled,
68
- } }, h("div", { key: '50c1173d038c8db02559aa6041bffc42a318964a', class: {
68
+ } }, h("div", { key: 'f965f1fa8af298f87383c8549a82990a9daeafee', class: {
69
69
  'switch-indicator rounded-full': true,
70
70
  'switch-indicator-on w-12 h-12 bg-brand-primary': this.active,
71
71
  'switch-indicator-off w-[10px] h-4 bg-neutral-neutral-4': !this.active,
package/dist/components/sula-tag.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, h, a as Host } from './index.js';
2
- import { d as defineCustomElement$2 } from './p-Uq6L0wCA.js';
2
+ import { d as defineCustomElement$2 } from './p-BuA_ueQn.js';
3
3
 
4
4
  var SulaTagSize;
5
5
  (function (SulaTagSize) {
@@ -106,14 +106,14 @@ const SulaTag$1 = /*@__PURE__*/ proxyCustomElement(class SulaTag extends H {
106
106
  return iconStatusStyles[this.iconStatus];
107
107
  }
108
108
  render() {
109
- return (h(Host, { key: 'ef5f2947ea5a21a8f924a6b5140ea9382c268ac4' }, h("div", { key: 'bd55eb96395012c1a3634d193e14069a88be1b2d', class: {
109
+ return (h(Host, { key: 'ea42eeb4ee80620a790938eb08c6322fa4dee214' }, h("div", { key: '29745dd127c152c8e2e74534f8fa53cc8d305534', class: {
110
110
  'flex items-center rounded-xxl w-fit': true,
111
111
  [this.getSizeClass()]: true,
112
112
  [this.getAppearanceClass()]: true,
113
- } }, this.icon && (h("div", { key: '6c37c84e7a215d0bb8f29048c0e53f4f0fa7953e', class: {
113
+ } }, this.icon && (h("div", { key: '2eb1b3d506d98a12b5513c947237289fcacfe035', class: {
114
114
  'flex justify-center items-center mr-8 rounded-full leading-4 px-2 py-1': true,
115
115
  [this.getIconStatusClass()]: true,
116
- } }, h("sula-icon", { key: 'f5ce8b83627858d804b67b15372173a94d1d4695', icon: this.icon, "custom-class": "text-base text-negative-negative-1 leading-4" }))), h("span", { key: 'ca436796841e583b7e5d80278cd3d0d7138678f3', class: {
116
+ } }, h("sula-icon", { key: 'b3daed5248632ce22ee43f9d64987939a3682242', icon: this.icon, "custom-class": "text-base text-negative-negative-1 leading-4" }))), h("span", { key: 'd436740cbce0feab73152447b7694818fe87f90e', class: {
117
117
  'text-base leading-4': true,
118
118
  [this.getTextColorClass()]: true,
119
119
  [this.getTextWeightClass()]: true,
package/dist/components/sula-textarea.js CHANGED
@@ -138,32 +138,32 @@ const SulaTextarea$1 = /*@__PURE__*/ proxyCustomElement(class SulaTextarea exten
138
138
  }
139
139
  render() {
140
140
  const containerHeight = this.rows * 24 + 48;
141
- return (h(Host, { key: '2fcc7b99d23820764799bcf3eed0a7605c9d2f72', ref: node => (this.node = node) }, h("div", { key: '5b6fecfaef896755b1862cf8468fb31297169885' }, h("div", { key: 'ed641bb610135c66bd663bfa284f0d81e7e1738d', id: "textarea-container", class: {
141
+ return (h(Host, { key: '0586b5e31d5bda244cc4c1f993f883eb785f39b3', ref: node => (this.node = node) }, h("div", { key: '28d230964948161540ba96b948a4d7a63ecd8748' }, h("div", { key: '478bf00ea0f45407ecc36708bcfe4fb95fe49619', id: "textarea-container", class: {
142
142
  'relative border rounded-sm px-16 py-12 outline-none caret-brand-primary': true,
143
143
  'textarea-focus': this.textareaIsFocused && !this.disabled && this.status === SulaTextareaStatus.Default,
144
144
  'textarea-error': this.status === SulaTextareaStatus.Error && !this.disabled,
145
145
  'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
146
146
  'bg-surface-body border-line-input cursor-text': !this.disabled,
147
- }, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h("label", { key: '69ad1cd86d7395ecdeb7a6aeac02273370a10fef', class: {
147
+ }, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h("label", { key: 'c0450390c2d40f2a3e0e4b486fc9580c369bf912', class: {
148
148
  'text-base top-16 left-12 absolute transition-all duration-200 ease-in-out pointer-events-none z-10 w-[85%]': true,
149
149
  'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
150
150
  'text-text-disabled': this.disabled,
151
151
  'bg-surface-body': !this.disabled && this.isActive,
152
- }, ref: node => (this.labelElement = node) }, this.label), h("label", { key: '0352260db567f497becd5f8f347cf206aecb595b', class: {
152
+ }, ref: node => (this.labelElement = node) }, this.label), h("label", { key: '2d73abbc98c3cb70d0234f9629b392cb1cd8f83e', class: {
153
153
  'absolute font-bold transition-all duration-200 ease-in-out pointer-events-none z-10 active-label hidden from-down': true,
154
154
  'text-sm top-12 left-16': this.isActive,
155
155
  'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
156
156
  'text-text-disabled': this.disabled,
157
157
  'bg-surface-body': !this.disabled && this.isActive,
158
- }, ref: node => (this.activeLabelElement = node) }, this.label), h("textarea", { key: 'edeacd0e14078081c1d5986e60852b8ed5b6a6a6', ref: node => (this.textareaElement = node), placeholder: this.isActive ? this.placeholder : '', rows: this.rows, maxLength: this.maxLength, disabled: this.disabled, class: {
158
+ }, ref: node => (this.activeLabelElement = node) }, this.label), h("textarea", { key: 'ce8af45adb97d797dbc07a557235c47378a10bb2', ref: node => (this.textareaElement = node), placeholder: this.isActive ? this.placeholder : '', rows: this.rows, maxLength: this.maxLength, disabled: this.disabled, class: {
159
159
  'w-full h-full outline-none text-base bg-transparent border-none resize-none': true,
160
160
  'text-text-primary': !this.disabled,
161
161
  'text-text-disabled cursor-not-allowed overflow-hidden': this.disabled,
162
- }, style: { paddingTop: this.isActive ? `${this.labelPadding}px` : '0' }, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h("div", { key: 'f1036cde3cf5bbd60fba5938fc2054d12d110624', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: 'db55a3ae78e63964a9d26a8cd44a71874a500004', id: "textarea-help-text", class: {
162
+ }, style: { paddingTop: this.isActive ? `${this.labelPadding}px` : '0' }, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h("div", { key: '676e2be41409e297c350dd95a715014f0589594c', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: '69a22552f623c03a458137f3bfa4f92a2fb0a62d', id: "textarea-help-text", class: {
163
163
  'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
164
164
  'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
165
165
  'text-text-disabled': this.disabled,
166
- } }, this.helpText)), this.maxLength && (h("div", { key: '4e73a6934d1b959c86fa2c9f4cfb5dadaf20e943', id: "max-length-container", class: {
166
+ } }, this.helpText)), this.maxLength && (h("div", { key: '29ab1273eef5520bb5436aaa0baa767cd24644c4', id: "max-length-container", class: {
167
167
  'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
168
168
  'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
169
169
  'text-text-disabled': this.disabled,
package/dist/components/sula-textfield.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
2
2
  import { g as getDefaultExportFromCjs } from './p-B85MJLTf.js';
3
- import { d as defineCustomElement$2 } from './p-Uq6L0wCA.js';
3
+ import { d as defineCustomElement$2 } from './p-BuA_ueQn.js';
4
4
 
5
5
  var SulaTextfieldType;
6
6
  (function (SulaTextfieldType) {
@@ -384,14 +384,14 @@ const SulaTextfield$1 = /*@__PURE__*/ proxyCustomElement(class SulaTextfield ext
384
384
  return this.icon;
385
385
  }
386
386
  render() {
387
- return (h(Host, { key: '7f3d6752bea3a556fa77a52513eabe0655d9234d', ref: node => (this.node = node) }, h("div", { key: 'cd9cbc06a0244161c06e770d87834ddd7311ada3' }, h("div", { key: 'b66f4f6f2a5cfdcbc212264d500d219b4deb335e', id: "button-container", class: {
387
+ return (h(Host, { key: '2287b38b1441da7fcab2caa4dd495bc593a4e268', ref: node => (this.node = node) }, h("div", { key: '1e9538652f7a57c1f8a99760028a45726d4cf1b8' }, h("div", { key: '48b038746bbe3ba11ea374c7cc5e28cae65d5d30', id: "button-container", class: {
388
388
  'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,
389
389
  'flex-row justify-between': !!this.icon || this.type === SulaTextfieldType.Password,
390
390
  'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,
391
391
  'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,
392
392
  'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
393
393
  'bg-surface-body border-line-input cursor-pointer': !this.disabled,
394
- }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (h("div", { key: '79eabd37134b96bbb5a315ca73d81d0c8be01ce4', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h("label", { key: 'd24af603a0e365d1482daea31b75fa8e86fd5e8a', class: "font-bold text-sm text-text-primary from-down" }, this.label), h("input", { key: 'aea523483b4a39f31b0d2c9506001d69c397da70', type: this.type, ref: node => (this.inputElement = node), placeholder: this.placeholder, class: "outline-none text-base text-text-primary bg-transparent", onInput: this.handleInputChanges, onFocus: this.handleInputFocus, value: this.textValue }))), h("div", { key: '2e3d9fbe37ba1dc5aceea8e8ce7e6152f740a955', id: "textfield-label", class: { 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }, ref: node => (this.labelElement = node) }, this.label), (!!this.icon || this.type === SulaTextfieldType.Password) && (h("div", { key: 'd6f5aacd486e093d64307117d8c6b0bfea460f49', class: "flex items-center justify-center", onClick: this.handleIconClick }, h("sula-icon", { key: 'cfc400df76f2c487a09b641c101543a3e2895bd1', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (h("div", { key: '8d450abc836ba702aeda16f4f6c1d379373ee698', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: 'e0d25ac6878865510a0afc793d81b07d8a016bb5', id: "textfield-help-text", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.helpText)), this.maxLength && (h("div", { key: '6384a6d5468b03bef0ddf2e0345438efe1b5fd32', id: "max-length-container", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.textValue ? this.textValue.length : 0, "/", this.maxLength)))))));
394
+ }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (h("div", { key: '9c4a9e1e7017593db75a77585c1392125b1a98b9', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h("label", { key: 'd07846ebd85fff94f477f59b512304e00102bb58', class: "font-bold text-sm text-text-primary from-down" }, this.label), h("input", { key: '92955b96950cae398681755cec9fcbf0a8327695', type: this.type, ref: node => (this.inputElement = node), placeholder: this.placeholder, class: "outline-none text-base text-text-primary bg-transparent", onInput: this.handleInputChanges, onFocus: this.handleInputFocus, value: this.textValue }))), h("div", { key: 'cadc6f4d64f3e85dee539b9bf270a839709c1bfa', id: "textfield-label", class: { 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }, ref: node => (this.labelElement = node) }, this.label), (!!this.icon || this.type === SulaTextfieldType.Password) && (h("div", { key: '5f0fee95a1d89743084c86f9b9bdec69b3976da5', class: "flex items-center justify-center", onClick: this.handleIconClick }, h("sula-icon", { key: 'a41969ee7b207c6fdcaf43c0345e927a19b58d1c', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (h("div", { key: '14e36d4ee992aeb3ab3341f030fc05231c803e3d', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: 'e4286e8635c5b6f8fc3032359567cbdba2479748', id: "textfield-help-text", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.helpText)), this.maxLength && (h("div", { key: 'd2813e234f057e952f85ded243510a4a12a43654', id: "max-length-container", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.textValue ? this.textValue.length : 0, "/", this.maxLength)))))));
395
395
  }
396
396
  static get watchers() { return {
397
397
  "value": ["watchValueHandler"]
package/dist/components/sula-tiles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
2
- import { d as defineCustomElement$2 } from './p-Uq6L0wCA.js';
2
+ import { d as defineCustomElement$2 } from './p-BuA_ueQn.js';
3
3
 
4
4
  var SulaTilesType;
5
5
  (function (SulaTilesType) {
@@ -139,7 +139,7 @@ const SulaTiles$1 = /*@__PURE__*/ proxyCustomElement(class SulaTiles extends H {
139
139
  return (h("div", { class: this.getTextContainerClasses() }, h("span", { class: this.getTextClasses(true), title: this.ellipsis ? this.text : undefined }, this.text), this.hasSubText && (h("span", { class: this.getTextClasses(false), title: this.ellipsis ? this.subText : undefined }, this.subText))));
140
140
  }
141
141
  render() {
142
- return (h(Host, { key: '32ee3b19743f75052428014a010545e4a6c9098b' }, h("div", { key: '09384829c191d1ec6518e0ccbc3ac4c290e1e798', class: this.getContainerClasses(), tabIndex: this.getTabIndex(this.isSquare), onClick: this.handleClick }, this.renderIcon(), this.renderText())));
142
+ return (h(Host, { key: 'bd93893ff89e978258ceb3621a260b305de320f5' }, h("div", { key: '661f7050d9a816aa3437e2d1c0de179cfb9d605d', class: this.getContainerClasses(), tabIndex: this.getTabIndex(this.isSquare), onClick: this.handleClick }, this.renderIcon(), this.renderText())));
143
143
  }
144
144
  static get style() { return sulaTilesCss; }
145
145
  }, [1, "sula-tiles", {
package/dist/components/sula-timeline-list.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
2
- import { d as defineCustomElement$2 } from './p-Uq6L0wCA.js';
2
+ import { d as defineCustomElement$2 } from './p-BuA_ueQn.js';
3
3
 
4
4
  var SulaTimelineListItemIconStatus;
5
5
  (function (SulaTimelineListItemIconStatus) {
@@ -51,7 +51,7 @@ const SulaTimelineList$1 = /*@__PURE__*/ proxyCustomElement(class SulaTimelineLi
51
51
  return iconByStatus[status];
52
52
  }
53
53
  render() {
54
- return (h(Host, { key: '61a3d229e04aa2935ef1d03fca3aa519aa21d13b' }, h("div", { key: 'cd8c1483e94ea8f8cf2e0c51e400528f83fcf9f5', class: "flex flex-col bg-surface-on-body px-24 py-32 w-fit rounded-md" }, this.sulaTimelineList.map((item, index) => {
54
+ return (h(Host, { key: 'be18bb7bcb5cff8b45b1dc33fe9f4a14b6e21d5e' }, h("div", { key: '1a2bd5e50d78223c0ef3824beef028b0d6b8fa27', class: "flex flex-col bg-surface-on-body px-24 py-32 w-fit rounded-md" }, this.sulaTimelineList.map((item, index) => {
55
55
  const isLastItem = index === this.sulaTimelineList.length - 1;
56
56
  return (h("div", { class: {
57
57
  'relative timeline-item': true,
package/dist/esm/loader.js CHANGED
@@ -4,7 +4,7 @@ export { s as setNonce } from './index-CrFclBiX.js';
4
4
  const defineCustomElements = async (win, options) => {
5
5
  if (typeof window === 'undefined') return undefined;
6
6
  await globalScripts();
7
- return bootstrapLazy([["sula-avatar_19",[[1,"sula-modal",{"opened":[1028],"blockBodyScroll":[1028,"block-body-scroll"],"closeOnClickOutside":[1028,"close-on-click-outside"],"type":[1],"headerIcon":[1,"header-icon"],"modalTitle":[1,"modal-title"],"promoImage":[1,"promo-image"],"subTitle":[1,"sub-title"],"primaryButtonText":[1,"primary-button-text"],"secondaryButtonText":[1,"secondary-button-text"],"slotOverflow":[1,"slot-overflow"],"isAnimating":[32],"shouldRender":[32]},null,{"opened":["handleOpenedChange"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"searchable":[516],"selectedItem":[32],"showItems":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32]},[[4,"click","handleDocumentClick"]],{"value":["handleValueChange"],"showItems":["handleShowItemsChange"]}],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"maskPattern":[1,"mask-pattern"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"isFocus":[32]}],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32],"labelPadding":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
7
+ return bootstrapLazy([["sula-avatar_20",[[1,"sula-modal",{"opened":[1028],"blockBodyScroll":[1028,"block-body-scroll"],"closeOnClickOutside":[1028,"close-on-click-outside"],"type":[1],"headerIcon":[1,"header-icon"],"modalTitle":[1,"modal-title"],"promoImage":[1,"promo-image"],"subTitle":[1,"sub-title"],"primaryButtonText":[1,"primary-button-text"],"secondaryButtonText":[1,"secondary-button-text"],"slotOverflow":[1,"slot-overflow"],"isAnimating":[32],"shouldRender":[32]},null,{"opened":["handleOpenedChange"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"searchable":[516],"selectedItem":[32],"showItems":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32]},[[4,"click","handleDocumentClick"]],{"value":["handleValueChange"],"showItems":["handleShowItemsChange"]}],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-segmented-control",{"items":[1040],"type":[1025],"size":[1025],"color":[1025]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"maskPattern":[1,"mask-pattern"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"isFocus":[32]}],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32],"labelPadding":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
8
8
  };
9
9
 
10
10
  export { defineCustomElements };