@sula-tech/webcomponents 0.8.0 → 0.9.0

package/dist/collection/components/sula-modal/sula-modal.stories.js

@@ -0,0 +1,193 @@
+import { SulaModalType, SulaModalSlotOverflow } from "./model/sula-modal.model";
+export default {
+    title: 'Components/sula-modal',
+    tags: ['autodocs'],
+    argTypes: {
+        opened: {
+            control: 'boolean',
+            description: 'Controla se a modal está aberta',
+        },
+        type: {
+            control: { type: 'select' },
+            options: Object.values(SulaModalType),
+        },
+        modalTitle: {
+            control: 'text',
+            description: 'Título da modal',
+        },
+        subTitle: {
+            control: 'text',
+            description: 'Subtítulo da modal',
+        },
+        headerIcon: {
+            control: 'text',
+            description: 'Ícone do header',
+        },
+        promoImage: {
+            control: 'text',
+            description: 'URL da imagem promocional (para modal promo)',
+        },
+        primaryButtonText: {
+            control: 'text',
+            description: 'Texto do botão primário',
+        },
+        secondaryButtonText: {
+            control: 'text',
+            description: 'Texto do botão secundário',
+        },
+        slotOverflow: {
+            control: { type: 'select' },
+            options: Object.values(SulaModalSlotOverflow),
+        },
+        blockBodyScroll: {
+            control: 'boolean',
+            description: 'Bloqueia o scroll do body',
+        },
+        closeOnClickOutside: {
+            control: 'boolean',
+            description: 'Fecha ao clicar fora',
+        },
+        modalClosed: {
+            action: 'modalClosed',
+            description: 'Evento emitido ao fechar a modal',
+        },
+        primaryButtonClicked: {
+            action: 'primaryButtonClicked',
+            description: 'Evento emitido ao clicar no botão primário',
+        },
+        secondaryButtonClicked: {
+            action: 'secondaryButtonClicked',
+            description: 'Evento emitido ao clicar no botão secundário',
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: `
+O componente **Sula Modal** é utilizado para exibir conteúdos em destaque sobrepostos à interface principal.
+### Características principais:
+ - Suporte a diferentes tipos de modal (alerta, custom, promo, side, etc)
+ - Título, subtítulo, ícone e imagem promocional
+ - Botões primário e secundário
+ - Controle de overflow e scroll
+ - Eventos de fechamento e clique nos botões
+				`,
+            },
+        },
+    },
+};
+const Template = args => {
+    const container = document.createElement('div');
+    container.style.margin = '20px';
+    container.style.display = 'flex';
+    container.style.alignItems = 'center';
+    container.style.justifyContent = 'center';
+    container.style.minHeight = '80vh';
+    const el = document.createElement('sula-modal');
+    el.setAttribute('opened', args.opened ? 'true' : 'false');
+    el.setAttribute('type', args.type);
+    if (args.modalTitle)
+        el.setAttribute('modal-title', args.modalTitle);
+    if (args.subTitle)
+        el.setAttribute('sub-title', args.subTitle);
+    if (args.headerIcon)
+        el.setAttribute('header-icon', args.headerIcon);
+    if (args.promoImage)
+        el.setAttribute('promo-image', args.promoImage);
+    if (args.primaryButtonText)
+        el.setAttribute('primary-button-text', args.primaryButtonText);
+    if (args.secondaryButtonText)
+        el.setAttribute('secondary-button-text', args.secondaryButtonText);
+    el.setAttribute('slot-overflow', args.slotOverflow);
+    el.setAttribute('block-body-scroll', args.blockBodyScroll ? 'true' : 'false');
+    el.setAttribute('close-on-click-outside', args.closeOnClickOutside ? 'true' : 'false');
+    el.addEventListener('modalClosed', args.modalClosed);
+    el.addEventListener('primaryButtonClicked', args.primaryButtonClicked);
+    el.addEventListener('secondaryButtonClicked', args.secondaryButtonClicked);
+    // Conteúdo customizável para slot
+    if (args.slotContent) {
+        const slotDiv = document.createElement('div');
+        slotDiv.innerHTML = args.slotContent;
+        el.appendChild(slotDiv);
+    }
+    container.appendChild(el);
+    return container;
+};
+export const Playground = Template.bind({});
+Playground.args = {
+    opened: true,
+    type: SulaModalType.Custom,
+    modalTitle: 'Título da Modal',
+    subTitle: 'Subtítulo explicativo',
+    headerIcon: 'ph ph-info',
+    primaryButtonText: 'Confirmar',
+    secondaryButtonText: 'Cancelar',
+    slotOverflow: SulaModalSlotOverflow.Auto,
+    blockBodyScroll: true,
+    closeOnClickOutside: true,
+    slotContent: '<p>Conteúdo customizável da modal.</p>',
+};
+export const AlertType = Template.bind({});
+AlertType.args = Object.assign(Object.assign({}, Playground.args), { type: SulaModalType.Alert, modalTitle: 'Atenção', subTitle: 'Esta é uma modal de alerta.', headerIcon: 'ph ph-warning', primaryButtonText: 'OK', secondaryButtonText: '', slotContent: '' });
+AlertType.parameters = {
+    docs: {
+        description: {
+            story: 'Modal do tipo alerta, com ícone e botão primário.',
+        },
+    },
+};
+export const PromoType = Template.bind({});
+PromoType.args = Object.assign(Object.assign({}, Playground.args), { type: SulaModalType.Promo, promoImage: 'https://picsum.photos/600/800', modalTitle: 'Promoção Especial', subTitle: 'Aproveite esta oferta!', slotContent: '<p>Conteúdo promocional.</p>' });
+PromoType.parameters = {
+    docs: {
+        description: {
+            story: 'Modal promocional com imagem e conteúdo customizável.',
+        },
+    },
+};
+export const SideType = Template.bind({});
+SideType.args = Object.assign(Object.assign({}, Playground.args), { type: SulaModalType.Side, modalTitle: 'Menu Lateral', subTitle: '', slotContent: '<ul><li>Item 1</li><li>Item 2</li></ul>' });
+SideType.parameters = {
+    docs: {
+        description: {
+            story: 'Modal lateral (side modal) para navegação ou menus.',
+        },
+    },
+};
+export const ListType = Template.bind({});
+ListType.args = Object.assign(Object.assign({}, Playground.args), { type: SulaModalType.List, modalTitle: 'Lista de Itens', subTitle: 'Modal para exibir listas.', slotContent: '<ol><li>Primeiro item</li><li>Segundo item</li><li>Terceiro item</li></ol>' });
+ListType.parameters = {
+    docs: {
+        description: {
+            story: 'Modal do tipo lista, ideal para exibir listas de itens.',
+        },
+    },
+};
+export const CustomFullType = Template.bind({});
+CustomFullType.args = Object.assign(Object.assign({}, Playground.args), { type: SulaModalType.CustomFull, modalTitle: 'Modal Custom Full', subTitle: 'Modal customizada em tela cheia.', slotContent: '<div style="height:300px;display:flex;align-items:center;justify-content:center"><h2>Conteúdo Full</h2></div>' });
+CustomFullType.parameters = {
+    docs: {
+        description: {
+            story: 'Modal customizada ocupando toda a tela.',
+        },
+    },
+};
+export const SpecialSideType = Template.bind({});
+SpecialSideType.args = Object.assign(Object.assign({}, Playground.args), { type: SulaModalType.SpecialSide, modalTitle: 'Modal Lateral Especial', subTitle: 'Modal lateral com layout especial.', promoImage: 'https://picsum.photos/1920/1080', slotContent: '<div style="padding:24px"><h3>Conteúdo Especial</h3><p>Layout diferenciado para casos especiais.</p></div>' });
+SpecialSideType.parameters = {
+    docs: {
+        description: {
+            story: 'Modal lateral especial para layouts diferenciados.',
+        },
+    },
+};
+export const WithCustomSlot = Template.bind({});
+WithCustomSlot.args = Object.assign(Object.assign({}, Playground.args), { type: SulaModalType.Custom, slotContent: '<div style="padding:16px"><h3>Slot Customizado</h3><p>Qualquer conteúdo pode ser inserido aqui.</p></div>' });
+WithCustomSlot.parameters = {
+    docs: {
+        description: {
+            story: 'Exemplo de modal custom com conteúdo via slot.',
+        },
+    },
+};
+//# sourceMappingURL=sula-modal.stories.js.map

package/dist/collection/components/sula-modal/sula-modal.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sula-modal.stories.js","sourceRoot":"","sources":["../../../src/components/sula-modal/sula-modal.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SulaModalType, SulaModalSlotOverflow } from './model/sula-modal.model';\n\nexport default {\n  title: 'Components/sula-modal',\n  tags: ['autodocs'],\n  argTypes: {\n    opened: {\n      control: 'boolean',\n      description: 'Controla se a modal está aberta',\n    },\n    type: {\n      control: { type: 'select' },\n      options: Object.values(SulaModalType),\n    },\n    modalTitle: {\n      control: 'text',\n      description: 'Título da modal',\n    },\n    subTitle: {\n      control: 'text',\n      description: 'Subtítulo da modal',\n    },\n    headerIcon: {\n      control: 'text',\n      description: 'Ícone do header',\n    },\n    promoImage: {\n      control: 'text',\n      description: 'URL da imagem promocional (para modal promo)',\n    },\n    primaryButtonText: {\n      control: 'text',\n      description: 'Texto do botão primário',\n    },\n    secondaryButtonText: {\n      control: 'text',\n      description: 'Texto do botão secundário',\n    },\n    slotOverflow: {\n      control: { type: 'select' },\n      options: Object.values(SulaModalSlotOverflow),\n    },\n    blockBodyScroll: {\n      control: 'boolean',\n      description: 'Bloqueia o scroll do body',\n    },\n    closeOnClickOutside: {\n      control: 'boolean',\n      description: 'Fecha ao clicar fora',\n    },\n    modalClosed: {\n      action: 'modalClosed',\n      description: 'Evento emitido ao fechar a modal',\n    },\n    primaryButtonClicked: {\n      action: 'primaryButtonClicked',\n      description: 'Evento emitido ao clicar no botão primário',\n    },\n    secondaryButtonClicked: {\n      action: 'secondaryButtonClicked',\n      description: 'Evento emitido ao clicar no botão secundário',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: `\nO componente **Sula Modal** é utilizado para exibir conteúdos em destaque sobrepostos à interface principal.\n### Características principais:\n - Suporte a diferentes tipos de modal (alerta, custom, promo, side, etc)\n - Título, subtítulo, ícone e imagem promocional\n - Botões primário e secundário\n - Controle de overflow e scroll\n - Eventos de fechamento e clique nos botões\n\t\t\t\t`,\n      },\n    },\n  },\n};\n\nconst Template = args => {\n  const container = document.createElement('div');\n  container.style.margin = '20px';\n  container.style.display = 'flex';\n  container.style.alignItems = 'center';\n  container.style.justifyContent = 'center';\n  container.style.minHeight = '80vh';\n  const el = document.createElement('sula-modal');\n\n  el.setAttribute('opened', args.opened ? 'true' : 'false');\n  el.setAttribute('type', args.type);\n  if (args.modalTitle) el.setAttribute('modal-title', args.modalTitle);\n  if (args.subTitle) el.setAttribute('sub-title', args.subTitle);\n  if (args.headerIcon) el.setAttribute('header-icon', args.headerIcon);\n  if (args.promoImage) el.setAttribute('promo-image', args.promoImage);\n  if (args.primaryButtonText) el.setAttribute('primary-button-text', args.primaryButtonText);\n  if (args.secondaryButtonText) el.setAttribute('secondary-button-text', args.secondaryButtonText);\n  el.setAttribute('slot-overflow', args.slotOverflow);\n  el.setAttribute('block-body-scroll', args.blockBodyScroll ? 'true' : 'false');\n  el.setAttribute('close-on-click-outside', args.closeOnClickOutside ? 'true' : 'false');\n\n  el.addEventListener('modalClosed', args.modalClosed);\n  el.addEventListener('primaryButtonClicked', args.primaryButtonClicked);\n  el.addEventListener('secondaryButtonClicked', args.secondaryButtonClicked);\n\n  // Conteúdo customizável para slot\n  if (args.slotContent) {\n    const slotDiv = document.createElement('div');\n    slotDiv.innerHTML = args.slotContent;\n    el.appendChild(slotDiv);\n  }\n\n  container.appendChild(el);\n  return container;\n};\n\nexport const Playground = Template.bind({});\nPlayground.args = {\n  opened: true,\n  type: SulaModalType.Custom,\n  modalTitle: 'Título da Modal',\n  subTitle: 'Subtítulo explicativo',\n  headerIcon: 'ph ph-info',\n  primaryButtonText: 'Confirmar',\n  secondaryButtonText: 'Cancelar',\n  slotOverflow: SulaModalSlotOverflow.Auto,\n  blockBodyScroll: true,\n  closeOnClickOutside: true,\n  slotContent: '<p>Conteúdo customizável da modal.</p>',\n};\nexport const AlertType = Template.bind({});\nAlertType.args = {\n  ...Playground.args,\n  type: SulaModalType.Alert,\n  modalTitle: 'Atenção',\n  subTitle: 'Esta é uma modal de alerta.',\n  headerIcon: 'ph ph-warning',\n  primaryButtonText: 'OK',\n  secondaryButtonText: '',\n  slotContent: '',\n};\nAlertType.parameters = {\n  docs: {\n    description: {\n      story: 'Modal do tipo alerta, com ícone e botão primário.',\n    },\n  },\n};\nexport const PromoType = Template.bind({});\nPromoType.args = {\n  ...Playground.args,\n  type: SulaModalType.Promo,\n  promoImage: 'https://picsum.photos/600/800',\n  modalTitle: 'Promoção Especial',\n  subTitle: 'Aproveite esta oferta!',\n  slotContent: '<p>Conteúdo promocional.</p>',\n};\nPromoType.parameters = {\n  docs: {\n    description: {\n      story: 'Modal promocional com imagem e conteúdo customizável.',\n    },\n  },\n};\nexport const SideType = Template.bind({});\nSideType.args = {\n  ...Playground.args,\n  type: SulaModalType.Side,\n  modalTitle: 'Menu Lateral',\n  subTitle: '',\n  slotContent: '<ul><li>Item 1</li><li>Item 2</li></ul>',\n};\nSideType.parameters = {\n  docs: {\n    description: {\n      story: 'Modal lateral (side modal) para navegação ou menus.',\n    },\n  },\n};\n\nexport const ListType = Template.bind({});\nListType.args = {\n  ...Playground.args,\n  type: SulaModalType.List,\n  modalTitle: 'Lista de Itens',\n  subTitle: 'Modal para exibir listas.',\n  slotContent: '<ol><li>Primeiro item</li><li>Segundo item</li><li>Terceiro item</li></ol>',\n};\nListType.parameters = {\n  docs: {\n    description: {\n      story: 'Modal do tipo lista, ideal para exibir listas de itens.',\n    },\n  },\n};\n\nexport const CustomFullType = Template.bind({});\nCustomFullType.args = {\n  ...Playground.args,\n  type: SulaModalType.CustomFull,\n  modalTitle: 'Modal Custom Full',\n  subTitle: 'Modal customizada em tela cheia.',\n  slotContent: '<div style=\"height:300px;display:flex;align-items:center;justify-content:center\"><h2>Conteúdo Full</h2></div>',\n};\nCustomFullType.parameters = {\n  docs: {\n    description: {\n      story: 'Modal customizada ocupando toda a tela.',\n    },\n  },\n};\n\nexport const SpecialSideType = Template.bind({});\nSpecialSideType.args = {\n  ...Playground.args,\n  type: SulaModalType.SpecialSide,\n  modalTitle: 'Modal Lateral Especial',\n  subTitle: 'Modal lateral com layout especial.',\n  promoImage: 'https://picsum.photos/1920/1080',\n  slotContent: '<div style=\"padding:24px\"><h3>Conteúdo Especial</h3><p>Layout diferenciado para casos especiais.</p></div>',\n};\nSpecialSideType.parameters = {\n  docs: {\n    description: {\n      story: 'Modal lateral especial para layouts diferenciados.',\n    },\n  },\n};\nexport const WithCustomSlot = Template.bind({});\nWithCustomSlot.args = {\n  ...Playground.args,\n  type: SulaModalType.Custom,\n  slotContent: '<div style=\"padding:16px\"><h3>Slot Customizado</h3><p>Qualquer conteúdo pode ser inserido aqui.</p></div>',\n};\nWithCustomSlot.parameters = {\n  docs: {\n    description: {\n      story: 'Exemplo de modal custom com conteúdo via slot.',\n    },\n  },\n};\n"]}

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

@@ -53,10 +53,10 @@ export class SulaProgressBar {
         }
     }
     render() {
-        return (h(Host, { key: '1ad9ff8449cb58eee5064aa925668761a0ff39b1' }, h("div", { key: '00d3cd84503e4692d31e6a1831957bf7442972aa', class: "flex flex-col w-full space-y-8" }, h("div", { key: '3b98e59266848cef57ed6e81e8ee4dd0671826c6', class: "flex justify-between items-center" }, h("label", { key: '1c008e6734f01f6390a591e36ed8f84c1d10f9e2', class: "text-sm text-text-secondary leading-[14px]" }, this.topLabel), this.getProgressBarStateElement()), h("div", { key: '12c79bd68d673c6a7dfeb8fc9136529d8937d137', style: { width: `${this.progress}%` }, class: {
+        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: {
                 'h-12 rounded-xxl': true,
                 [this.getProgressBarStyle()]: true,
-            } }), h("label", { key: 'cbb3870b08995c13f202413ab06c4e3d54f3bd6c', class: "text-sm text-text-secondary leading-[14px]" }, this.bottomLabel))));
+            } }), h("label", { key: '1d73f69f9868c2ae1be227d00c17b348021e1bb7', 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: 'd2899b9a6aeb8d81ecb0eb28c4d415b42ad75af5' }, h("div", { key: 'db1003e3d7923491bad2bd7c2cf2871dd87874f0', class: { 'w-fit': true, 'flex items-center': !!this.label }, onClick: this.handleClick }, h("div", { key: '835101bafd897ff0a557555d6b8b0b934fa06071', class: {
+        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: {
                 '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: '5770f4d5e4c59f6df73974e083e3f6dd4761d897', class: "bg-transparent border-2 border-negative-negative-1 w-[18px] h-[18px] rounded-full" })), this.label && h("label", { key: '5e148846e64adc3d001457f8a677dfed3fd376ed', 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: '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))));
     }
     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: 'd4d90e7c772577043a926f5c4da9940cb5540fb9' }, h("div", { key: '9d99122174667fca977c37e3cd707571f2fb5d54', class: {
+        return (h(Host, { key: '7ac3cb2028df077a2489a7343c7618f04976e211' }, h("div", { key: '720808c66eb0b5eeaaf38384e9c954ce2a2f42ff', 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: 'c95b9cdde31fcae4c990a9b1fd31e26354925903', class: "flex justify-center items-center leading-6" }, h("sula-icon", { key: '7c8087041097973cbef0a2b694c80e17545b1667', icon: this.leftIcon, customClass: "text-2xl text-icon-primary group-hover:text-brand-primary" }))), h("input", { key: '394b9eec2b9ebaa7f6ad0a622e6e9176bfc8c440', 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: 'b5f7d07b3b2f100306a2cf3d8ae0f217afcf48c2', class: "flex justify-center items-center leading-6 cursor-pointer", onClick: this.handleRightIconClick, onMouseDown: e => e.preventDefault() }, h("sula-icon", { key: '7031e6bbd4b828c7697fa3b9659a76d1ca8e344a', icon: this.rightIcon, customClass: "text-2xl text-icon-primary" }))))));
+            }, 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" }))))));
     }
     static get is() { return "sula-search-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,23 +35,23 @@ export class SulaSwitch {
         };
     }
     render() {
-        return (h(Host, { key: 'e920dbb868a5bdde5e34ac4d015529aef08a8e3d' }, h("div", { key: '7552191cc1632d04c0c496f382fdbbb166547236', class: {
+        return (h(Host, { key: 'bbc4902ea0d731995e0c8600243018a171b65120' }, h("div", { key: 'b7e277261642fb9c909a8549dfe7a6295cb4dc01', class: {
                 'outline-none': true,
                 'flex items-center space-x-12': !!this.label && this.type === SulaSwitchType.Default,
                 'flex items-center justify-between bg-surface-on-body rounded-md w-[280px] min-h-[85px] px-24 py-16': this.type === SulaSwitchType.List,
                 'hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed cursor-pointer': this.type === SulaSwitchType.List && !this.disabled,
                 'container-focus': this.isFocus && this.type === SulaSwitchType.List,
-            }, 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: {
+            }, 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: {
                 'switch-container w-56 h-32 flex items-center rounded-xxl p-2 outline-none': true,
                 'switch-on bg-brand-primary justify-end': this.active,
                 'switch-off bg-neutral-neutral-3 justify-start': !this.active,
                 'cursor-not-allowed bg-states-bg-disabled': this.disabled,
                 'switch-focus': this.isFocus && this.type === SulaSwitchType.Default,
-            }, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'ae01eb32010e93fbc3fb652c0fdd653df57b7835', class: {
+            }, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'a10f04862c4257df7a1753d0569dc32e8c0cd099', class: {
                 'switch-thumb w-[28px] h-[28px] rounded-full flex justify-center items-center': true,
                 'bg-negative-negative-1': !this.disabled,
                 'bg-states-bg-disabled shadow-md': this.disabled,
-            } }, h("div", { key: 'f965f1fa8af298f87383c8549a82990a9daeafee', class: {
+            } }, h("div", { key: '50c1173d038c8db02559aa6041bffc42a318964a', class: {
                 'switch-indicator rounded-full': true,
                 'switch-indicator-on w-12 h-12 bg-brand-primary': this.active,
                 'switch-indicator-off w-[10px] h-4 bg-neutral-neutral-4': !this.active,

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

@@ -72,14 +72,14 @@ export class SulaTag {
         return iconStatusStyles[this.iconStatus];
     }
     render() {
-        return (h(Host, { key: 'ea42eeb4ee80620a790938eb08c6322fa4dee214' }, h("div", { key: '29745dd127c152c8e2e74534f8fa53cc8d305534', class: {
+        return (h(Host, { key: 'ef5f2947ea5a21a8f924a6b5140ea9382c268ac4' }, h("div", { key: 'bd55eb96395012c1a3634d193e14069a88be1b2d', class: {
                 'flex items-center rounded-xxl w-fit': true,
                 [this.getSizeClass()]: true,
                 [this.getAppearanceClass()]: true,
-            } }, this.icon && (h("div", { key: '2eb1b3d506d98a12b5513c947237289fcacfe035', class: {
+            } }, this.icon && (h("div", { key: '6c37c84e7a215d0bb8f29048c0e53f4f0fa7953e', class: {
                 'flex justify-center items-center mr-8 rounded-full leading-4 px-2 py-1': true,
                 [this.getIconStatusClass()]: true,
-            } }, h("sula-icon", { key: 'b3daed5248632ce22ee43f9d64987939a3682242', icon: this.icon, "custom-class": "text-base text-negative-negative-1 leading-4" }))), h("span", { key: 'd436740cbce0feab73152447b7694818fe87f90e', class: {
+            } }, h("sula-icon", { key: 'f5ce8b83627858d804b67b15372173a94d1d4695', icon: this.icon, "custom-class": "text-base text-negative-negative-1 leading-4" }))), h("span", { key: 'ca436796841e583b7e5d80278cd3d0d7138678f3', class: {
                 'text-base leading-4': true,
                 [this.getTextColorClass()]: true,
                 [this.getTextWeightClass()]: true,

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

@@ -124,32 +124,32 @@ export class SulaTextarea {
     }
     render() {
         const containerHeight = this.rows * 24 + 48;
-        return (h(Host, { key: '0586b5e31d5bda244cc4c1f993f883eb785f39b3', ref: node => (this.node = node) }, h("div", { key: '28d230964948161540ba96b948a4d7a63ecd8748' }, h("div", { key: '478bf00ea0f45407ecc36708bcfe4fb95fe49619', id: "textarea-container", class: {
+        return (h(Host, { key: '2fcc7b99d23820764799bcf3eed0a7605c9d2f72', ref: node => (this.node = node) }, h("div", { key: '5b6fecfaef896755b1862cf8468fb31297169885' }, h("div", { key: 'ed641bb610135c66bd663bfa284f0d81e7e1738d', id: "textarea-container", class: {
                 'relative border rounded-sm px-16 py-12 outline-none caret-brand-primary': true,
                 'textarea-focus': this.textareaIsFocused && !this.disabled && this.status === SulaTextareaStatus.Default,
                 'textarea-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
                 'bg-surface-body border-line-input cursor-text': !this.disabled,
-            }, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h("label", { key: 'c0450390c2d40f2a3e0e4b486fc9580c369bf912', class: {
+            }, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h("label", { key: '69ad1cd86d7395ecdeb7a6aeac02273370a10fef', class: {
                 'text-base top-16 left-12 absolute transition-all duration-200 ease-in-out pointer-events-none z-10 w-[85%]': true,
                 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
                 'text-text-disabled': this.disabled,
                 'bg-surface-body': !this.disabled && this.isActive,
-            }, ref: node => (this.labelElement = node) }, this.label), h("label", { key: '2d73abbc98c3cb70d0234f9629b392cb1cd8f83e', class: {
+            }, ref: node => (this.labelElement = node) }, this.label), h("label", { key: '0352260db567f497becd5f8f347cf206aecb595b', class: {
                 'absolute font-bold transition-all duration-200 ease-in-out pointer-events-none z-10 active-label hidden from-down': true,
                 'text-sm top-12 left-16': this.isActive,
                 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
                 'text-text-disabled': this.disabled,
                 'bg-surface-body': !this.disabled && this.isActive,
-            }, 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: {
+            }, 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: {
                 'w-full h-full outline-none text-base bg-transparent border-none resize-none': true,
                 'text-text-primary': !this.disabled,
                 'text-text-disabled cursor-not-allowed overflow-hidden': this.disabled,
-            }, 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: {
+            }, 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: {
                 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
                 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'text-text-disabled': this.disabled,
-            } }, this.helpText)), this.maxLength && (h("div", { key: '29ab1273eef5520bb5436aaa0baa767cd24644c4', id: "max-length-container", class: {
+            } }, this.helpText)), this.maxLength && (h("div", { key: '4e73a6934d1b959c86fa2c9f4cfb5dadaf20e943', id: "max-length-container", class: {
                 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
                 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'text-text-disabled': this.disabled,

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

@@ -129,14 +129,14 @@ export class SulaTextfield {
         return this.icon;
     }
     render() {
-        return (h(Host, { key: '2287b38b1441da7fcab2caa4dd495bc593a4e268', ref: node => (this.node = node) }, h("div", { key: '1e9538652f7a57c1f8a99760028a45726d4cf1b8' }, h("div", { key: '48b038746bbe3ba11ea374c7cc5e28cae65d5d30', id: "button-container", class: {
+        return (h(Host, { key: '7f3d6752bea3a556fa77a52513eabe0655d9234d', ref: node => (this.node = node) }, h("div", { key: 'cd9cbc06a0244161c06e770d87834ddd7311ada3' }, h("div", { key: 'b66f4f6f2a5cfdcbc212264d500d219b4deb335e', id: "button-container", class: {
                 'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,
                 'flex-row justify-between': !!this.icon || this.type === SulaTextfieldType.Password,
                 'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,
                 'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,
                 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
                 'bg-surface-body border-line-input cursor-pointer': !this.disabled,
-            }, 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)))))));
+            }, 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)))))));
     }
     static get is() { return "sula-textfield"; }
     static get encapsulation() { return "shadow"; }

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

@@ -121,7 +121,7 @@ export class SulaTiles {
         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))));
     }
     render() {
-        return (h(Host, { key: 'bd93893ff89e978258ceb3621a260b305de320f5' }, h("div", { key: '661f7050d9a816aa3437e2d1c0de179cfb9d605d', class: this.getContainerClasses(), tabIndex: this.getTabIndex(this.isSquare), onClick: this.handleClick }, this.renderIcon(), this.renderText())));
+        return (h(Host, { key: '32ee3b19743f75052428014a010545e4a6c9098b' }, h("div", { key: '09384829c191d1ec6518e0ccbc3ac4c290e1e798', class: this.getContainerClasses(), tabIndex: this.getTabIndex(this.isSquare), onClick: this.handleClick }, this.renderIcon(), this.renderText())));
     }
     static get is() { return "sula-tiles"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sula-timeline-list/sula-timeline-list.js

@@ -37,7 +37,7 @@ export class SulaTimelineList {
         return iconByStatus[status];
     }
     render() {
-        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) => {
+        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) => {
             const isLastItem = index === this.sulaTimelineList.length - 1;
             return (h("div", { class: {
                     'relative timeline-item': true,

package/dist/components/index.js

@@ -748,10 +748,17 @@ var insertBefore = (parent, newNode, reference) => {
 };
 var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const hostElm = hostRef.$hostElement$;
+  const cmpMeta = hostRef.$cmpMeta$;
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
   const isHostElement = isHost(renderFnResults);
   const rootVnode = isHostElement ? renderFnResults : h(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
+  if (cmpMeta.$attrsToReflect$) {
+    rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+    cmpMeta.$attrsToReflect$.map(
+      ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
+    );
+  }
   if (isInitialLoad && rootVnode.$attrs$) {
     for (const key of Object.keys(rootVnode.$attrs$)) {
       if (hostElm.hasAttribute(key) && !["key", "ref", "style", "class"].includes(key)) {
@@ -1063,8 +1070,12 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         /* @__PURE__ */ new Set([
           ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
           ...members.filter(([_, m]) => m[0] & 15 /* HasAttribute */).map(([propName, m]) => {
+            var _a2;
             const attrName = m[1] || propName;
             attrNameToPropName.set(attrName, propName);
+            if (m[0] & 512 /* ReflectAttr */) {
+              (_a2 = cmpMeta.$attrsToReflect$) == null ? void 0 : _a2.push([propName, attrName]);
+            }
             return attrName;
           })
         ])
@@ -1179,6 +1190,9 @@ var proxyCustomElement = (Cstr, compactMeta) => {
   {
     cmpMeta.$watchers$ = Cstr.$watchers$;
   }
+  {
+    cmpMeta.$attrsToReflect$ = [];
+  }
   const originalConnectedCallback = Cstr.prototype.connectedCallback;
   const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;
   Object.assign(Cstr.prototype, {
@@ -1259,7 +1273,12 @@ var setPlatformOptions = (opts) => Object.assign(plt, opts);
 
 // src/runtime/render.ts
 function render(vnode, container) {
+  const cmpMeta = {
+    $flags$: 0,
+    $tagName$: container.tagName
+  };
   const ref = {
+    $cmpMeta$: cmpMeta,
     $hostElement$: container
   };
   renderVdom(ref, vnode);