@sula-tech/webcomponents 0.9.2 → 0.11.0

package/dist/collection/components/sula-icon/sula-icon.js

@@ -7,7 +7,7 @@ export class SulaIcon {
         this.customClass = '';
     }
     render() {
-        return (h(Host, { key: 'af529bb71c5a3b6c3fb6f506043dcdcbf9b5021d' }, h("i", { key: 'dd1481528ecde8e52fc82fc7063874b2dc3f8ade', class: `${this.icon} ${this.customClass} sula-icon` })));
+        return (h(Host, { key: 'ed3e8bbf3b6b0850a11ec9f06cc7ee970d003588' }, h("i", { key: '60ff6cb3fce52bfd14b54ecc51d912ccac05fe3f', class: `${this.icon} ${this.customClass} sula-icon` })));
     }
     static get is() { return "sula-icon"; }
     static get originalStyleUrls() {

package/dist/collection/components/sula-loader/sula-loader.js

@@ -45,7 +45,7 @@ export class SulaLoader {
     }
     render() {
         const { width, height } = this.getDimensions();
-        return (h(Host, { key: '5c79b6c8feb1215744c3dbac5c3dfb1e815c5bed' }, h("div", { key: '0cd095a75035f7a94edb666d9195387183ebd120', ref: el => (this.containerRef = el), style: {
+        return (h(Host, { key: 'abd6665256f4e7173603ccc791b20f884bf9e9b6' }, h("div", { key: '41f9fb073388d7fc2a1585231fb8c257e5996847', ref: el => (this.containerRef = el), style: {
                 width: width,
                 height: height,
             } })));

package/dist/collection/components/sula-menu-select-list/sula-menu-select-list.js

@@ -14,7 +14,7 @@ export class SulaMenuSelectList {
         };
     }
     render() {
-        return (h(Host, { key: '787efb60140a2addce05156295c8447dc5a189be' }, h("ul", { key: 'df41690a6003fe215e0dc7fd7adfa7296bca5b35', class: {
+        return (h(Host, { key: 'e2ebd128ad92b6e8a88a068f2b50797c2388659d' }, h("ul", { key: '4609da5d501bf2ee036ef846f26476c94e6a1910', class: {
                 'bg-surface-body border border-line-general sula-menu-select-list rounded-sm py-12 max-h-[260px] overflow-auto': true,
                 'w-300': !this.fullWidth,
                 'w-full': this.fullWidth,

package/dist/collection/components/sula-progress-bar/sula-progress-bar.js

@@ -53,10 +53,10 @@ export class SulaProgressBar {
         }
     }
     render() {
-        return (h(Host, { key: '5f7922714d99330253ee04dbfe197b8cffb60e33' }, h("div", { key: '5246d62bfcb514b5976d698bb07699e9df7ae864', class: "flex flex-col w-full space-y-8" }, h("div", { key: '5f46e226f9c515d0640bafb42bb882580254e747', class: "flex justify-between items-center" }, h("label", { key: 'f61b7f5a837961a03ea1e4e72d803831c40189c5', class: "text-sm text-text-secondary leading-[14px]" }, this.topLabel), this.getProgressBarStateElement()), h("div", { key: 'b8631511218ace18082299186507c924d34da696', style: { width: `${this.progress}%` }, class: {
+        return (h(Host, { key: 'd584c2e2c020ec016a426650fa48fcd843f0c523' }, h("div", { key: 'f2b4e9940cde1280934377ad3db3bab063a5d28d', class: "flex flex-col w-full space-y-8" }, h("div", { key: '8b597aa608fdb404d98f2cbf8022efb539bf999d', class: "flex justify-between items-center" }, h("label", { key: '73763e3827e31b967310142c65b67a0587691711', class: "text-sm text-text-secondary leading-[14px]" }, this.topLabel), this.getProgressBarStateElement()), h("div", { key: 'd240b3850e4dfccea231fbdda5bd8366c8c0cc05', style: { width: `${this.progress}%` }, class: {
                 'h-12 rounded-xxl': true,
                 [this.getProgressBarStyle()]: true,
-            } }), h("label", { key: '1d73f69f9868c2ae1be227d00c17b348021e1bb7', class: "text-sm text-text-secondary leading-[14px]" }, this.bottomLabel))));
+            } }), h("label", { key: 'ffe21db4a0c39f1272370acc780b2d3ba061cd53', class: "text-sm text-text-secondary leading-[14px]" }, this.bottomLabel))));
     }
     static get is() { return "sula-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sula-radio-button/sula-radio-button.js

@@ -34,14 +34,14 @@ export class SulaRadioButton {
         };
     }
     render() {
-        return (h(Host, { key: 'ec9162a63e7ef550bad0fac4f50201c545e36b7a' }, h("div", { key: '2acbb141714c47d79ef1517b25125d57d7773a43', class: { 'w-fit': true, 'flex items-center': !!this.label }, onClick: this.handleClick }, h("div", { key: 'fe8c9b23d3e43981e36d199e951128c07bfdef98', class: {
+        return (h(Host, { key: '5427806e9da1752271b0b4be480ab0a2039a8ee0' }, h("div", { key: '0f6a35b1263d47bd28aa54dd895976abe8d48159', class: { 'w-fit': true, 'flex items-center': !!this.label }, onClick: this.handleClick }, h("div", { key: 'cf61f1205714408193621f4c8455adecf2798dcb', class: {
                 'min-w-[30px] min-h-[30px] rounded-full flex justify-center items-center outline-none': true,
                 'active:bg-states-empty-bg-pressed cursor-pointer': !this.disabled,
                 'bg-brand-primary': this.checked,
                 'border border-line-input': !this.checked,
                 'container-focus': this.radioIsFocus,
                 'bg-states-bg-disabled border-2 border-states-bg-disabled cursor-not-allowed': this.disabled,
-            }, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleFocusOut }, this.checked && h("div", { key: 'e82a794f53e8771171008696a19c176594e36c29', class: "bg-transparent border-2 border-negative-negative-1 w-[18px] h-[18px] rounded-full" })), this.label && h("label", { key: '77844f1c95772931153a75298dc871f787e60dde', class: { 'ml-16 text-base text-text-primary': true, 'cursor-pointer': !this.disabled } }, this.label))));
+            }, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleFocusOut }, this.checked && h("div", { key: 'e8c87ab372235aac8ce7258d1a91081b63a519eb', class: "bg-transparent border-2 border-negative-negative-1 w-[18px] h-[18px] rounded-full" })), this.label && h("label", { key: 'b7fdb7bdf9e8aaa5e5049cac408b24e912a4399a', class: { 'ml-16 text-base text-text-primary': true, 'cursor-pointer': !this.disabled } }, this.label))));
     }
     static get is() { return "sula-radio-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sula-search-bar/sula-search-bar.js

@@ -43,11 +43,11 @@ export class SulaSearchBar {
         return style[this.searchBarStyle];
     }
     render() {
-        return (h(Host, { key: '7ac3cb2028df077a2489a7343c7618f04976e211' }, h("div", { key: '720808c66eb0b5eeaaf38384e9c954ce2a2f42ff', class: {
+        return (h(Host, { key: 'e5d8f7608d743e75d2071dde601f3bbb295cc415' }, h("div", { key: '84e01e17c71129cce09372b1a76ed486ce3d168b', class: {
                 'flex flex-row items-center space-x-12 px-16 rounded-xxl h-44 caret-brand-primary outline-none group': true,
                 [this.getStyleClass()]: true,
                 'search-bar-focus': this.isFocused,
-            }, tabIndex: 0, onFocus: this.handleInputFocus, onClick: this.handleInputFocus }, !this.isFocused && this.leftIcon && (h("div", { key: '0d5668fc5b271feb3c7b5aea735652c2f2abdeb1', class: "flex justify-center items-center leading-6" }, h("sula-icon", { key: '0f61816afeef7db9f9c36fed903c87ea9d71edc5', icon: this.leftIcon, customClass: "text-2xl text-icon-primary group-hover:text-brand-primary" }))), h("input", { key: '27f2199404e9c197fb8d31cc8a8ab53c32f38c2e', ref: node => (this.inputElement = node), type: "text", class: "outline-none border-none w-full bg-transparent text-text-primary", placeholder: this.placeholder, onBlur: this.handleInputBlur, value: this.value, onInput: this.handleValueChanges }), this.rightIcon && (h("div", { key: 'c47335437563eb82df68215411f6add6f91c41a7', class: "flex justify-center items-center leading-6 cursor-pointer", onClick: this.handleRightIconClick, onMouseDown: e => e.preventDefault() }, h("sula-icon", { key: '83759286dee48cea835b9a16a970d4bc16c33f83', icon: this.rightIcon, customClass: "text-2xl text-icon-primary" }))))));
+            }, tabIndex: 0, onFocus: this.handleInputFocus, onClick: this.handleInputFocus }, !this.isFocused && this.leftIcon && (h("div", { key: 'f8f61d01078eea0273ca1eabdea401f841a7931a', class: "flex justify-center items-center leading-6" }, h("sula-icon", { key: '6567a11f541d140dac9303607371c7e2f8b04f96', icon: this.leftIcon, customClass: "text-2xl text-icon-primary group-hover:text-brand-primary" }))), h("input", { key: '69dc721e94529cb2f6c22baa9fd917754d7e0dff', ref: node => (this.inputElement = node), type: "text", class: "outline-none border-none w-full bg-transparent text-text-primary", placeholder: this.placeholder, onBlur: this.handleInputBlur, value: this.value, onInput: this.handleValueChanges }), this.rightIcon && (h("div", { key: '5b3b9aca94cf85dcef78605738e05900838efcf6', class: "flex justify-center items-center leading-6 cursor-pointer", onClick: this.handleRightIconClick, onMouseDown: e => e.preventDefault() }, h("sula-icon", { key: '04a65741683ccf50852e3015c085ffc5714bb0f6', icon: this.rightIcon, customClass: "text-2xl text-icon-primary" }))))));
     }
     static get is() { return "sula-search-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sula-segmented-control/model/sula-segmented-control.model.js

@@ -0,0 +1,16 @@
+export var SulaSegmentedControlType;
+(function (SulaSegmentedControlType) {
+    SulaSegmentedControlType["Icon"] = "icon";
+    SulaSegmentedControlType["Text"] = "text";
+})(SulaSegmentedControlType || (SulaSegmentedControlType = {}));
+export var SulaSegmentedControlSize;
+(function (SulaSegmentedControlSize) {
+    SulaSegmentedControlSize["Small"] = "small";
+    SulaSegmentedControlSize["Default"] = "default";
+})(SulaSegmentedControlSize || (SulaSegmentedControlSize = {}));
+export var SulaSegmentedControlColor;
+(function (SulaSegmentedControlColor) {
+    SulaSegmentedControlColor["White"] = "white";
+    SulaSegmentedControlColor["Gray"] = "gray";
+})(SulaSegmentedControlColor || (SulaSegmentedControlColor = {}));
+//# sourceMappingURL=sula-segmented-control.model.js.map

package/dist/collection/components/sula-segmented-control/model/sula-segmented-control.model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sula-segmented-control.model.js","sourceRoot":"","sources":["../../../../src/components/sula-segmented-control/model/sula-segmented-control.model.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,wBAGX;AAHD,WAAY,wBAAwB;IAClC,yCAAa,CAAA;IACb,yCAAa,CAAA;AACf,CAAC,EAHW,wBAAwB,KAAxB,wBAAwB,QAGnC;AAED,MAAM,CAAN,IAAY,wBAGX;AAHD,WAAY,wBAAwB;IAClC,2CAAe,CAAA;IACf,+CAAmB,CAAA;AACrB,CAAC,EAHW,wBAAwB,KAAxB,wBAAwB,QAGnC;AAED,MAAM,CAAN,IAAY,yBAGX;AAHD,WAAY,yBAAyB;IACnC,4CAAe,CAAA;IACf,0CAAa,CAAA;AACf,CAAC,EAHW,yBAAyB,KAAzB,yBAAyB,QAGpC","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"]}

package/dist/collection/components/sula-segmented-control/sula-segmented-control.css

@@ -0,0 +1 @@
+*,: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-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--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;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;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-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--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;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! 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)}

package/dist/collection/components/sula-segmented-control/sula-segmented-control.js

@@ -0,0 +1,241 @@
+import { Host, h } from "@stencil/core";
+import { SulaSegmentedControlColor, SulaSegmentedControlSize, SulaSegmentedControlType } from "./model/sula-segmented-control.model";
+export class SulaSegmentedControl {
+    constructor() {
+        /**
+         * Items for the segmented control.
+         */
+        this.items = [];
+        /**
+         * Segmented control type.
+         */
+        this.type = SulaSegmentedControlType.Text;
+        /**
+         * Segmented control size.
+         */
+        this.size = SulaSegmentedControlSize.Default;
+        /**
+         * Segmented control color.
+         */
+        this.color = SulaSegmentedControlColor.White;
+    }
+    handleItemClick(selectedItem) {
+        this.items = this.items.map(item => (Object.assign(Object.assign({}, item), { selected: item.value === selectedItem.value })));
+        this.itemClicked.emit(Object.assign(Object.assign({}, selectedItem), { selected: true }));
+    }
+    handleItemHover(hoveredItem) {
+        this.itemHovered.emit(hoveredItem);
+    }
+    handleItemBlur(blurredItem) {
+        this.itemBlur.emit(blurredItem);
+    }
+    getCaretIconClass(item) {
+        if (this.type === SulaSegmentedControlType.Icon) {
+            return item.selected ? 'text-negative-negative-1' : 'text-icon-primary';
+        }
+        return item.selected ? 'text-brand-primary' : 'text-text-primary';
+    }
+    render() {
+        return (h(Host, { key: '047229bea44614f1b7570d405d342c1924e7f368' }, h("div", { key: '14df0e4cf5316c609a5961c7b5a9e2adf75efdda', class: {
+                'flex flex-row items-center rounded-xxl p-2 w-fit backdrop-blur-[20px]': true,
+                'bg-opacity-on-body': this.color === SulaSegmentedControlColor.Gray,
+                'bg-opacity-body': this.color === SulaSegmentedControlColor.White,
+            } }, this.items.map(item => (h("div", { class: {
+                'rounded-3xl flex justify-center items-center cursor-pointer transition': true,
+                'py-12 px-20': this.size === SulaSegmentedControlSize.Default,
+                'py-8 px-16': this.size === SulaSegmentedControlSize.Small,
+                'bg-box-shadow-body': this.type === SulaSegmentedControlType.Text && item.selected,
+                'bg-brand-primary': this.type === SulaSegmentedControlType.Icon && item.selected,
+                'hover:bg-box-shadow-body': !item.selected,
+            }, onClick: () => this.handleItemClick(item), onMouseEnter: () => this.handleItemHover(item), onMouseLeave: () => this.handleItemBlur(item) }, this.type === SulaSegmentedControlType.Text ? (h("span", { class: {
+                'text-brand-primary text-label-medium-bold leading-5': item.selected,
+                'text-text-secondary text-paragraph-medium-regular leading-5': !item.selected,
+            } }, 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` })))))));
+    }
+    static get is() { return "sula-segmented-control"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sula-segmented-control.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sula-segmented-control.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "attribute": "items",
+                "mutable": true,
+                "complexType": {
+                    "original": "SulaSegmentedControlOption[]",
+                    "resolved": "SulaSegmentedControlOption[]",
+                    "references": {
+                        "SulaSegmentedControlOption": {
+                            "location": "import",
+                            "path": "./model/sula-segmented-control.model",
+                            "id": "src/components/sula-segmented-control/model/sula-segmented-control.model.ts::SulaSegmentedControlOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Items for the segmented control."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": true,
+                "complexType": {
+                    "original": "SulaSegmentedControlType",
+                    "resolved": "SulaSegmentedControlType.Icon | SulaSegmentedControlType.Text",
+                    "references": {
+                        "SulaSegmentedControlType": {
+                            "location": "import",
+                            "path": "./model/sula-segmented-control.model",
+                            "id": "src/components/sula-segmented-control/model/sula-segmented-control.model.ts::SulaSegmentedControlType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Segmented control type."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SulaSegmentedControlType.Text"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": true,
+                "complexType": {
+                    "original": "SulaSegmentedControlSize",
+                    "resolved": "SulaSegmentedControlSize.Default | SulaSegmentedControlSize.Small",
+                    "references": {
+                        "SulaSegmentedControlSize": {
+                            "location": "import",
+                            "path": "./model/sula-segmented-control.model",
+                            "id": "src/components/sula-segmented-control/model/sula-segmented-control.model.ts::SulaSegmentedControlSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Segmented control size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SulaSegmentedControlSize.Default"
+            },
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": true,
+                "complexType": {
+                    "original": "SulaSegmentedControlColor",
+                    "resolved": "SulaSegmentedControlColor.Gray | SulaSegmentedControlColor.White",
+                    "references": {
+                        "SulaSegmentedControlColor": {
+                            "location": "import",
+                            "path": "./model/sula-segmented-control.model",
+                            "id": "src/components/sula-segmented-control/model/sula-segmented-control.model.ts::SulaSegmentedControlColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Segmented control color."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SulaSegmentedControlColor.White"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemClicked",
+                "name": "itemClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an item is clicked."
+                },
+                "complexType": {
+                    "original": "SulaSegmentedControlOption",
+                    "resolved": "SulaSegmentedControlOption",
+                    "references": {
+                        "SulaSegmentedControlOption": {
+                            "location": "import",
+                            "path": "./model/sula-segmented-control.model",
+                            "id": "src/components/sula-segmented-control/model/sula-segmented-control.model.ts::SulaSegmentedControlOption"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemHovered",
+                "name": "itemHovered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an item is hovered."
+                },
+                "complexType": {
+                    "original": "SulaSegmentedControlOption",
+                    "resolved": "SulaSegmentedControlOption",
+                    "references": {
+                        "SulaSegmentedControlOption": {
+                            "location": "import",
+                            "path": "./model/sula-segmented-control.model",
+                            "id": "src/components/sula-segmented-control/model/sula-segmented-control.model.ts::SulaSegmentedControlOption"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemBlur",
+                "name": "itemBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an item is blurred."
+                },
+                "complexType": {
+                    "original": "SulaSegmentedControlOption",
+                    "resolved": "SulaSegmentedControlOption",
+                    "references": {
+                        "SulaSegmentedControlOption": {
+                            "location": "import",
+                            "path": "./model/sula-segmented-control.model",
+                            "id": "src/components/sula-segmented-control/model/sula-segmented-control.model.ts::SulaSegmentedControlOption"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=sula-segmented-control.js.map

package/dist/collection/components/sula-segmented-control/sula-segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sula-segmented-control.js","sourceRoot":"","sources":["../../../src/components/sula-segmented-control/sula-segmented-control.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}