npm - @sula-tech/webcomponents - Versions diffs - 0.14.1 → 0.16.0 - Mend

@sula-tech/webcomponents 0.14.1 → 0.16.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 (126) hide show

package/dist/collection/components/sula-table/model/sula-table.model.js ADDED Viewed

@@ -0,0 +1,8 @@
+export var SulaTableDensity;
+(function (SulaTableDensity) {
+    SulaTableDensity["Compact"] = "compact";
+    SulaTableDensity["Default"] = "default";
+    SulaTableDensity["Spaced"] = "spaced";
+    SulaTableDensity["Confortable"] = "comfortable";
+})(SulaTableDensity || (SulaTableDensity = {}));
+//# sourceMappingURL=sula-table.model.js.map

package/dist/collection/components/sula-table/model/sula-table.model.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sula-table.model.js","sourceRoot":"","sources":["../../../../src/components/sula-table/model/sula-table.model.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,gBAKX;AALD,WAAY,gBAAgB;IAC1B,uCAAmB,CAAA;IACnB,uCAAmB,CAAA;IACnB,qCAAiB,CAAA;IACjB,+CAA2B,CAAA;AAC7B,CAAC,EALW,gBAAgB,KAAhB,gBAAgB,QAK3B","sourcesContent":["export enum SulaTableDensity {\n Compact = 'compact',\n Default = 'default',\n Spaced = 'spaced',\n Confortable = 'comfortable',\n}\n"]}

package/dist/collection/components/sula-table/sula-table.css ADDED Viewed

@@ -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}: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}.box-border{box-sizing:border-box}.block{display:block}.table{display:table}.w-full{width:100%}.w-max{width:max-content}.min-w-full{min-width:100%}.max-w-full{max-width:100%}.table-fixed{table-layout:fixed}.border-collapse{border-collapse:collapse}.border-spacing-0{--tw-border-spacing-x:0px;--tw-border-spacing-y:0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.overflow-x-auto{overflow-x:auto}.container{width:100%}@media (min-width:22.5rem){.container{max-width:22.5rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}

package/dist/collection/components/sula-table/sula-table.js ADDED Viewed

@@ -0,0 +1,111 @@
+import { Host, h } from "@stencil/core";
+import { SulaTableDensity } from "./model/sula-table.model";
+export class SulaTable {
+    constructor() {
+        /**
+         * Density of the table
+         */
+        this.density = SulaTableDensity.Default;
+        /**
+         * If true, all columns will have equal width
+         */
+        this.equalWidth = true;
+        /**
+         * If true, the table will take the full width of its container
+         */
+        this.fullWidth = true;
+    }
+    render() {
+        return (h(Host, { key: 'f89ff123aa21b03dac2851520b1f4f9a456b733e', class: {
+                'block max-w-full overflow-x-auto': true,
+            } }, h("table", { key: 'fadb3c57fd65dc625799c6e4d9ceec9b810ec5b6', class: {
+                'w-full': this.fullWidth && this.equalWidth,
+                'w-max': !this.equalWidth,
+                'min-w-full': this.fullWidth && !this.equalWidth,
+                'table-fixed': this.equalWidth,
+                'border-collapse border-spacing-0 box-border': true,
+            } }, h("slot", { key: 'e6de13e3cd929e6ef4dd2bddafdbc3f0a57f4b7e' }))));
+    }
+    static get is() { return "sula-table"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sula-table.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sula-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "density": {
+                "type": "string",
+                "attribute": "density",
+                "mutable": false,
+                "complexType": {
+                    "original": "SulaTableDensity",
+                    "resolved": "SulaTableDensity.Compact | SulaTableDensity.Confortable | SulaTableDensity.Default | SulaTableDensity.Spaced",
+                    "references": {
+                        "SulaTableDensity": {
+                            "location": "import",
+                            "path": "./model/sula-table.model",
+                            "id": "src/components/sula-table/model/sula-table.model.ts::SulaTableDensity"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Density of the table"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SulaTableDensity.Default"
+            },
+            "equalWidth": {
+                "type": "boolean",
+                "attribute": "equal-width",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, all columns will have equal width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "attribute": "full-width",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the table will take the full width of its container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+}
+//# sourceMappingURL=sula-table.js.map

package/dist/collection/components/sula-table/sula-table.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sula-table.js","sourceRoot":"","sources":["../../../src/components/sula-table/sula-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAO5D,MAAM,OAAO,SAAS;IALtB;QAME;;WAEG;QAEH,YAAO,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAErD;;WAEG;QAEH,eAAU,GAAY,IAAI,CAAC;QAE3B;;WAEG;QAEH,cAAS,GAAY,IAAI,CAAC;KAuB3B;IArBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,kCAAkC,EAAE,IAAI;aACzC;YAED,8DACE,KAAK,EAAE;oBACL,QAAQ,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU;oBAC3C,OAAO,EAAE,CAAC,IAAI,CAAC,UAAU;oBACzB,YAAY,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,UAAU;oBAChD,aAAa,EAAE,IAAI,CAAC,UAAU;oBAC9B,6CAA6C,EAAE,IAAI;iBACpD;gBAED,8DAAa,CACP,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { SulaTableDensity } from './model/sula-table.model';\n\n@Component({\n tag: 'sula-table',\n styleUrl: 'sula-table.scss',\n shadow: false,\n})\nexport class SulaTable {\n /**\n * Density of the table\n */\n @Prop()\n density: SulaTableDensity = SulaTableDensity.Default;\n\n /**\n * If true, all columns will have equal width\n */\n @Prop()\n equalWidth: boolean = true;\n\n /**\n * If true, the table will take the full width of its container\n */\n @Prop()\n fullWidth: boolean = true;\n\n render() {\n return (\n <Host\n class={{\n 'block max-w-full overflow-x-auto': true,\n }}\n >\n <table\n class={{\n 'w-full': this.fullWidth && this.equalWidth,\n 'w-max': !this.equalWidth,\n 'min-w-full': this.fullWidth && !this.equalWidth,\n 'table-fixed': this.equalWidth,\n 'border-collapse border-spacing-0 box-border': true,\n }}\n >\n <slot></slot>\n </table>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/sula-table/sula-table.stories.js ADDED Viewed

@@ -0,0 +1,298 @@
+import { SulaTableDensity } from "./model/sula-table.model";
+export default {
+    title: 'Components/sula-table',
+    tags: ['autodocs'],
+    argTypes: {
+        density: {
+            control: { type: 'select' },
+            options: Object.values(SulaTableDensity),
+            description: 'Define a densidade visual da tabela e das células.',
+            table: {
+                type: { summary: 'SulaTableDensity' },
+                defaultValue: { summary: 'SulaTableDensity.Default' },
+            },
+        },
+        fullWidth: {
+            control: 'boolean',
+            description: 'Quando `true`, a tabela ocupa toda a largura disponível do container.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        equalWidth: {
+            control: 'boolean',
+            description: 'Quando `true`, distribui as colunas com a mesma largura.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: `
+As tabelas no Sula Design System são projetadas para apresentar dados de forma clara e organizada. Elas garantem uma estética harmoniosa e alinhada aos princípios design que valorizamos em nosso design.
+        `,
+            },
+        },
+    },
+};
+const HEADERS = ['Protocolo', 'Cliente', 'Status', 'Integração', 'Ação'];
+const createStoryContainer = (maxWidth = '960px') => {
+    const container = document.createElement('div');
+    container.style.margin = '20px auto';
+    container.style.maxWidth = maxWidth;
+    container.style.padding = '20px';
+    container.style.boxSizing = 'border-box';
+    return container;
+};
+const createTitle = (text, marginTop = '0') => {
+    const title = document.createElement('h3');
+    title.textContent = text;
+    title.style.margin = `${marginTop} 0 12px`;
+    title.style.fontSize = '18px';
+    title.style.fontWeight = '700';
+    title.style.color = '#2f3131';
+    return title;
+};
+const createDescription = (text) => {
+    const description = document.createElement('p');
+    description.textContent = text;
+    description.style.margin = '0 0 16px';
+    description.style.fontSize = '14px';
+    description.style.lineHeight = '20px';
+    description.style.color = '#6c6e6e';
+    return description;
+};
+const createHeadCell = (content) => {
+    const cell = document.createElement('sula-table-head-cell');
+    cell.textContent = content;
+    return cell;
+};
+const createBodyCell = (content) => {
+    const cell = document.createElement('sula-table-cell');
+    if (typeof content === 'string') {
+        cell.textContent = content;
+        return cell;
+    }
+    cell.appendChild(content);
+    return cell;
+};
+const createRow = (items, isHeader = false) => {
+    const row = document.createElement('sula-table-row');
+    items.forEach(item => {
+        row.appendChild(isHeader ? createHeadCell(item) : createBodyCell(item));
+    });
+    return row;
+};
+const createTable = (args, rows, headers = HEADERS) => {
+    const table = document.createElement('sula-table');
+    table.setAttribute('density', args.density);
+    table.setAttribute('full-width', args.fullWidth ? 'true' : 'false');
+    table.setAttribute('equal-width', args.equalWidth ? 'true' : 'false');
+    const header = document.createElement('sula-table-header');
+    header.appendChild(createRow(headers, true));
+    const body = document.createElement('sula-table-body');
+    rows.forEach(row => body.appendChild(createRow(row)));
+    table.appendChild(header);
+    table.appendChild(body);
+    return table;
+};
+const createCustomerContent = (name, email) => {
+    const content = document.createElement('div');
+    content.style.display = 'flex';
+    content.style.flexDirection = 'column';
+    content.style.gap = '4px';
+    const strong = document.createElement('strong');
+    strong.textContent = name;
+    strong.style.color = '#2f3131';
+    const span = document.createElement('span');
+    span.textContent = email;
+    span.style.fontSize = '12px';
+    span.style.color = '#6c6e6e';
+    content.appendChild(strong);
+    content.appendChild(span);
+    return content;
+};
+const createTag = (label, icon, iconStatus) => {
+    const tag = document.createElement('sula-tag');
+    tag.setAttribute('label', label);
+    tag.setAttribute('appearance', 'bordered');
+    tag.setAttribute('size', 'small');
+    tag.setAttribute('icon', icon);
+    tag.setAttribute('icon-status', iconStatus);
+    return tag;
+};
+const createLoaderContent = (text) => {
+    const content = document.createElement('div');
+    content.style.display = 'flex';
+    content.style.alignItems = 'center';
+    content.style.gap = '8px';
+    const loader = document.createElement('sula-loader');
+    loader.setAttribute('size', 'small');
+    const span = document.createElement('span');
+    span.textContent = text;
+    content.appendChild(loader);
+    content.appendChild(span);
+    return content;
+};
+const createActionButton = (text) => {
+    const button = document.createElement('sula-button');
+    button.setAttribute('text', text);
+    button.setAttribute('appearance', 'secondary');
+    return button;
+};
+const textRows = () => [
+    ['PRT-2024', 'Mariana Costa', 'Aprovado', 'Concluída', 'Ver detalhes'],
+    ['PRT-2025', 'Bruno Alves', 'Pendente', 'Sincronizando', 'Reprocessar'],
+    ['PRT-2026', 'Camila Rocha', 'Em análise', 'Aguardando retorno', 'Abrir'],
+];
+const customRows = () => [
+    [
+        'PRT-1024',
+        createCustomerContent('Mariana Costa', 'mariana@sula.com'),
+        createTag('Aprovado', 'ph-bold ph-check', 'success'),
+        createTag('Concluída', 'ph-bold ph-check', 'success'),
+        createActionButton('Ver detalhes'),
+    ],
+    [
+        'PRT-1025',
+        createCustomerContent('Bruno Alves', 'bruno@sula.com'),
+        createTag('Pendente', 'ph-bold ph-clock', 'warning'),
+        createLoaderContent('Sincronizando'),
+        createActionButton('Reprocessar'),
+    ],
+    [
+        'PRT-1026',
+        createCustomerContent('Camila Rocha', 'camila@sula.com'),
+        createTag('Em análise', 'ph-bold ph-hourglass-medium', 'info'),
+        createLoaderContent('Aguardando retorno'),
+        createActionButton('Abrir'),
+    ],
+];
+const longTextRows = () => [
+    [
+        'PRT-3001',
+        'Cliente com nome consideravelmente maior para testar a distribuição da largura',
+        'Pendente de revisão manual',
+        'Integração aguardando retorno do parceiro externo',
+        'Visualizar detalhes',
+    ],
+    ['PRT-3002', 'Operação padrão', 'Aprovado', 'Concluída', 'Abrir'],
+];
+const intrinsicWidthRows = () => [
+    ['PRT-4101', 'Mariana Costa', 'Aprovado'],
+    ['PRT-4102', 'Bruno Alves', 'Pendente'],
+    ['PRT-4103', 'Camila Rocha', 'Em análise'],
+];
+const PlaygroundTemplate = (args) => {
+    const container = createStoryContainer();
+    container.appendChild(createTable(args, customRows()));
+    return container;
+};
+const TextOnlyTemplate = (args) => {
+    const container = createStoryContainer();
+    container.appendChild(createTable(args, textRows()));
+    return container;
+};
+const EqualWidthTemplate = (args) => {
+    const container = createStoryContainer();
+    container.appendChild(createDescription('Use `equalWidth` para forçar a mesma largura entre colunas, mesmo quando o conteúdo é assimétrico.'));
+    container.appendChild(createTable(args, longTextRows(), ['Protocolo', 'Cliente', 'Status', 'Integração', 'Ação']));
+    return container;
+};
+const IntrinsicWidthTemplate = (args) => {
+    const container = createStoryContainer('1200px');
+    container.appendChild(createDescription('Com `fullWidth=false`, a tabela passa a respeitar a largura natural do conteúdo e não ocupa toda a área disponível.'));
+    container.appendChild(createTable(args, intrinsicWidthRows(), ['Protocolo', 'Cliente', 'Status']));
+    return container;
+};
+export const Playground = PlaygroundTemplate.bind({});
+Playground.args = {
+    density: SulaTableDensity.Confortable,
+    fullWidth: true,
+    equalWidth: false,
+};
+Playground.parameters = {
+    docs: {
+        description: {
+            story: 'Visão principal da tabela com composição de células de texto, tag, loader e botão.',
+        },
+    },
+};
+export const TextOnly = TextOnlyTemplate.bind({});
+TextOnly.args = {
+    density: SulaTableDensity.Confortable,
+    fullWidth: true,
+    equalWidth: false,
+};
+TextOnly.parameters = {
+    docs: {
+        description: {
+            story: 'Exemplo mínimo da tabela usando apenas textos nas células.',
+        },
+    },
+};
+export const CustomContent = PlaygroundTemplate.bind({});
+CustomContent.args = {
+    density: SulaTableDensity.Default,
+    fullWidth: true,
+    equalWidth: false,
+};
+CustomContent.parameters = {
+    docs: {
+        description: {
+            story: 'Exemplo com conteúdo rico via composição: blocos de texto, outros web components e conteúdo misto dentro das células.',
+        },
+    },
+};
+export const EqualWidthColumns = EqualWidthTemplate.bind({});
+EqualWidthColumns.args = {
+    density: SulaTableDensity.Default,
+    fullWidth: true,
+    equalWidth: true,
+};
+EqualWidthColumns.parameters = {
+    docs: {
+        description: {
+            story: 'Tabela com `equalWidth=true`, útil quando o layout precisa de colunas equilibradas.',
+        },
+    },
+};
+export const IntrinsicWidth = IntrinsicWidthTemplate.bind({});
+IntrinsicWidth.args = {
+    density: SulaTableDensity.Default,
+    fullWidth: false,
+    equalWidth: false,
+};
+IntrinsicWidth.parameters = {
+    docs: {
+        description: {
+            story: 'Tabela sem ocupar a largura total do container, deixando o tamanho ser guiado pelo conteúdo.',
+        },
+    },
+};
+export const DensityComparison = () => {
+    const container = createStoryContainer();
+    const densities = [
+        { title: 'Compact', density: SulaTableDensity.Compact },
+        { title: 'Default', density: SulaTableDensity.Default },
+        { title: 'Spaced', density: SulaTableDensity.Spaced },
+        { title: 'Comfortable', density: SulaTableDensity.Confortable },
+    ];
+    densities.forEach(({ title, density }, index) => {
+        container.appendChild(createTitle(title, index === 0 ? '0' : '28px'));
+        container.appendChild(createTable({ density, fullWidth: true, equalWidth: false }, textRows()));
+    });
+    return container;
+};
+DensityComparison.parameters = {
+    docs: {
+        description: {
+            story: 'Comparação entre as densidades disponíveis para validar alturas e espaçamentos das células.',
+        },
+    },
+};
+//# sourceMappingURL=sula-table.stories.js.map

package/dist/collection/components/sula-table/sula-table.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sula-table.stories.js","sourceRoot":"","sources":["../../../src/components/sula-table/sula-table.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SulaTableDensity } from './model/sula-table.model';\n\nexport default {\n title: 'Components/sula-table',\n tags: ['autodocs'],\n argTypes: {\n density: {\n control: { type: 'select' },\n options: Object.values(SulaTableDensity),\n description: 'Define a densidade visual da tabela e das células.',\n table: {\n type: { summary: 'SulaTableDensity' },\n defaultValue: { summary: 'SulaTableDensity.Default' },\n },\n },\n fullWidth: {\n control: 'boolean',\n description: 'Quando `true`, a tabela ocupa toda a largura disponível do container.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: 'true' },\n },\n },\n equalWidth: {\n control: 'boolean',\n description: 'Quando `true`, distribui as colunas com a mesma largura.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: 'true' },\n },\n },\n },\n parameters: {\n docs: {\n description: {\n component: `\nAs tabelas no Sula Design System são projetadas para apresentar dados de forma clara e organizada. Elas garantem uma estética harmoniosa e alinhada aos princípios design que valorizamos em nosso design.\n `,\n },\n },\n },\n};\n\ntype StoryArgs = {\n density: SulaTableDensity;\n fullWidth: boolean;\n equalWidth: boolean;\n};\n\ntype CellContent = string | Node;\n\nconst HEADERS = ['Protocolo', 'Cliente', 'Status', 'Integração', 'Ação'];\n\nconst createStoryContainer = (maxWidth = '960px') => {\n const container = document.createElement('div');\n container.style.margin = '20px auto';\n container.style.maxWidth = maxWidth;\n container.style.padding = '20px';\n container.style.boxSizing = 'border-box';\n return container;\n};\n\nconst createTitle = (text: string, marginTop = '0') => {\n const title = document.createElement('h3');\n title.textContent = text;\n title.style.margin = `${marginTop} 0 12px`;\n title.style.fontSize = '18px';\n title.style.fontWeight = '700';\n title.style.color = '#2f3131';\n return title;\n};\n\nconst createDescription = (text: string) => {\n const description = document.createElement('p');\n description.textContent = text;\n description.style.margin = '0 0 16px';\n description.style.fontSize = '14px';\n description.style.lineHeight = '20px';\n description.style.color = '#6c6e6e';\n return description;\n};\n\nconst createHeadCell = (content: string) => {\n const cell = document.createElement('sula-table-head-cell');\n cell.textContent = content;\n return cell;\n};\n\nconst createBodyCell = (content: CellContent) => {\n const cell = document.createElement('sula-table-cell');\n\n if (typeof content === 'string') {\n cell.textContent = content;\n return cell;\n }\n\n cell.appendChild(content);\n return cell;\n};\n\nconst createRow = (items: CellContent[], isHeader = false) => {\n const row = document.createElement('sula-table-row');\n\n items.forEach(item => {\n row.appendChild(isHeader ? createHeadCell(item as string) : createBodyCell(item));\n });\n\n return row;\n};\n\nconst createTable = (args: StoryArgs, rows: CellContent[][], headers = HEADERS) => {\n const table = document.createElement('sula-table');\n table.setAttribute('density', args.density);\n table.setAttribute('full-width', args.fullWidth ? 'true' : 'false');\n table.setAttribute('equal-width', args.equalWidth ? 'true' : 'false');\n\n const header = document.createElement('sula-table-header');\n header.appendChild(createRow(headers, true));\n\n const body = document.createElement('sula-table-body');\n rows.forEach(row => body.appendChild(createRow(row)));\n\n table.appendChild(header);\n table.appendChild(body);\n\n return table;\n};\n\nconst createCustomerContent = (name: string, email: string) => {\n const content = document.createElement('div');\n content.style.display = 'flex';\n content.style.flexDirection = 'column';\n content.style.gap = '4px';\n\n const strong = document.createElement('strong');\n strong.textContent = name;\n strong.style.color = '#2f3131';\n\n const span = document.createElement('span');\n span.textContent = email;\n span.style.fontSize = '12px';\n span.style.color = '#6c6e6e';\n\n content.appendChild(strong);\n content.appendChild(span);\n\n return content;\n};\n\nconst createTag = (label: string, icon: string, iconStatus: string) => {\n const tag = document.createElement('sula-tag');\n tag.setAttribute('label', label);\n tag.setAttribute('appearance', 'bordered');\n tag.setAttribute('size', 'small');\n tag.setAttribute('icon', icon);\n tag.setAttribute('icon-status', iconStatus);\n return tag;\n};\n\nconst createLoaderContent = (text: string) => {\n const content = document.createElement('div');\n content.style.display = 'flex';\n content.style.alignItems = 'center';\n content.style.gap = '8px';\n\n const loader = document.createElement('sula-loader');\n loader.setAttribute('size', 'small');\n\n const span = document.createElement('span');\n span.textContent = text;\n\n content.appendChild(loader);\n content.appendChild(span);\n\n return content;\n};\n\nconst createActionButton = (text: string) => {\n const button = document.createElement('sula-button');\n button.setAttribute('text', text);\n button.setAttribute('appearance', 'secondary');\n return button;\n};\n\nconst textRows = (): CellContent[][] => [\n ['PRT-2024', 'Mariana Costa', 'Aprovado', 'Concluída', 'Ver detalhes'],\n ['PRT-2025', 'Bruno Alves', 'Pendente', 'Sincronizando', 'Reprocessar'],\n ['PRT-2026', 'Camila Rocha', 'Em análise', 'Aguardando retorno', 'Abrir'],\n];\n\nconst customRows = (): CellContent[][] => [\n [\n 'PRT-1024',\n createCustomerContent('Mariana Costa', 'mariana@sula.com'),\n createTag('Aprovado', 'ph-bold ph-check', 'success'),\n createTag('Concluída', 'ph-bold ph-check', 'success'),\n createActionButton('Ver detalhes'),\n ],\n [\n 'PRT-1025',\n createCustomerContent('Bruno Alves', 'bruno@sula.com'),\n createTag('Pendente', 'ph-bold ph-clock', 'warning'),\n createLoaderContent('Sincronizando'),\n createActionButton('Reprocessar'),\n ],\n [\n 'PRT-1026',\n createCustomerContent('Camila Rocha', 'camila@sula.com'),\n createTag('Em análise', 'ph-bold ph-hourglass-medium', 'info'),\n createLoaderContent('Aguardando retorno'),\n createActionButton('Abrir'),\n ],\n];\n\nconst longTextRows = (): CellContent[][] => [\n [\n 'PRT-3001',\n 'Cliente com nome consideravelmente maior para testar a distribuição da largura',\n 'Pendente de revisão manual',\n 'Integração aguardando retorno do parceiro externo',\n 'Visualizar detalhes',\n ],\n ['PRT-3002', 'Operação padrão', 'Aprovado', 'Concluída', 'Abrir'],\n];\n\nconst intrinsicWidthRows = (): CellContent[][] => [\n ['PRT-4101', 'Mariana Costa', 'Aprovado'],\n ['PRT-4102', 'Bruno Alves', 'Pendente'],\n ['PRT-4103', 'Camila Rocha', 'Em análise'],\n];\n\nconst PlaygroundTemplate = (args: StoryArgs) => {\n const container = createStoryContainer();\n container.appendChild(createTable(args, customRows()));\n return container;\n};\n\nconst TextOnlyTemplate = (args: StoryArgs) => {\n const container = createStoryContainer();\n container.appendChild(createTable(args, textRows()));\n return container;\n};\n\nconst EqualWidthTemplate = (args: StoryArgs) => {\n const container = createStoryContainer();\n container.appendChild(createDescription('Use `equalWidth` para forçar a mesma largura entre colunas, mesmo quando o conteúdo é assimétrico.'));\n container.appendChild(createTable(args, longTextRows(), ['Protocolo', 'Cliente', 'Status', 'Integração', 'Ação']));\n return container;\n};\n\nconst IntrinsicWidthTemplate = (args: StoryArgs) => {\n const container = createStoryContainer('1200px');\n container.appendChild(createDescription('Com `fullWidth=false`, a tabela passa a respeitar a largura natural do conteúdo e não ocupa toda a área disponível.'));\n container.appendChild(createTable(args, intrinsicWidthRows(), ['Protocolo', 'Cliente', 'Status']));\n return container;\n};\n\nexport const Playground = PlaygroundTemplate.bind({});\nPlayground.args = {\n density: SulaTableDensity.Confortable,\n fullWidth: true,\n equalWidth: false,\n};\nPlayground.parameters = {\n docs: {\n description: {\n story: 'Visão principal da tabela com composição de células de texto, tag, loader e botão.',\n },\n },\n};\n\nexport const TextOnly = TextOnlyTemplate.bind({});\nTextOnly.args = {\n density: SulaTableDensity.Confortable,\n fullWidth: true,\n equalWidth: false,\n};\nTextOnly.parameters = {\n docs: {\n description: {\n story: 'Exemplo mínimo da tabela usando apenas textos nas células.',\n },\n },\n};\n\nexport const CustomContent = PlaygroundTemplate.bind({});\nCustomContent.args = {\n density: SulaTableDensity.Default,\n fullWidth: true,\n equalWidth: false,\n};\nCustomContent.parameters = {\n docs: {\n description: {\n story: 'Exemplo com conteúdo rico via composição: blocos de texto, outros web components e conteúdo misto dentro das células.',\n },\n },\n};\n\nexport const EqualWidthColumns = EqualWidthTemplate.bind({});\nEqualWidthColumns.args = {\n density: SulaTableDensity.Default,\n fullWidth: true,\n equalWidth: true,\n};\nEqualWidthColumns.parameters = {\n docs: {\n description: {\n story: 'Tabela com `equalWidth=true`, útil quando o layout precisa de colunas equilibradas.',\n },\n },\n};\n\nexport const IntrinsicWidth = IntrinsicWidthTemplate.bind({});\nIntrinsicWidth.args = {\n density: SulaTableDensity.Default,\n fullWidth: false,\n equalWidth: false,\n};\nIntrinsicWidth.parameters = {\n docs: {\n description: {\n story: 'Tabela sem ocupar a largura total do container, deixando o tamanho ser guiado pelo conteúdo.',\n },\n },\n};\n\nexport const DensityComparison = () => {\n const container = createStoryContainer();\n const densities: Array<{ title: string; density: SulaTableDensity }> = [\n { title: 'Compact', density: SulaTableDensity.Compact },\n { title: 'Default', density: SulaTableDensity.Default },\n { title: 'Spaced', density: SulaTableDensity.Spaced },\n { title: 'Comfortable', density: SulaTableDensity.Confortable },\n ];\n\n densities.forEach(({ title, density }, index) => {\n container.appendChild(createTitle(title, index === 0 ? '0' : '28px'));\n container.appendChild(createTable({ density, fullWidth: true, equalWidth: false }, textRows()));\n });\n\n return container;\n};\nDensityComparison.parameters = {\n docs: {\n description: {\n story: 'Comparação entre as densidades disponíveis para validar alturas e espaçamentos das células.',\n },\n },\n};\n"]}

package/dist/collection/components/sula-table-body/sula-table-body.css ADDED Viewed

@@ -0,0 +1 @@

package/dist/collection/components/sula-table-body/sula-table-body.js ADDED Viewed

@@ -0,0 +1,23 @@
+import { Host, h } from "@stencil/core";
+import { replaceHostWithRenderedElement } from "../../utils/replace-host-with-rendered-element";
+export class SulaTableBody {
+    componentDidLoad() {
+        replaceHostWithRenderedElement(this.host, 'tbody');
+    }
+    render() {
+        return (h(Host, { key: '255fb81b2515c7de6f3dbda43a77db8564eb345e' }, h("tbody", { key: '792001ad301eed9649dcdc61c0ae7f9823697ae2' }, h("slot", { key: '1f30c22854d060ed58bd96d60f66f74e037e1fcb' }))));
+    }
+    static get is() { return "sula-table-body"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sula-table-body.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sula-table-body.css"]
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=sula-table-body.js.map

package/dist/collection/components/sula-table-body/sula-table-body.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sula-table-body.js","sourceRoot":"","sources":["../../../src/components/sula-table-body/sula-table-body.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,8BAA8B,EAAE,MAAM,gDAAgD,CAAC;AAOhG,MAAM,OAAO,aAAa;IAGxB,gBAAgB;QACd,8BAA8B,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACrD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH;gBACE,8DAAa,CACP,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h } from '@stencil/core';\nimport { replaceHostWithRenderedElement } from '../../utils/replace-host-with-rendered-element';\n\n@Component({\n tag: 'sula-table-body',\n styleUrl: 'sula-table-body.scss',\n shadow: false,\n})\nexport class SulaTableBody {\n @Element() host!: HTMLElement;\n\n componentDidLoad() {\n replaceHostWithRenderedElement(this.host, 'tbody');\n }\n\n render() {\n return (\n <Host>\n <tbody>\n <slot></slot>\n </tbody>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/sula-table-cell/sula-table-cell.css ADDED Viewed

@@ -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}: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}.box-border{box-sizing:border-box}.flex{display:flex}.min-h-56{min-height:3.5rem}.min-h-60{min-height:3.75rem}.min-h-64{min-height:4rem}.min-h-72{min-height:4.5rem}.w-full{width:100%}.items-center{align-items:center}.justify-start{justify-content:flex-start}.border-b{border-bottom-width:1px}.border-dashed{border-style:dashed}.border-line-general{border-color:var(--color-line-general)}.px-16{padding-left:1rem;padding-right:1rem}.py-4{padding-bottom:.25rem;padding-top:.25rem}.text-left{text-align:left}.align-middle{vertical-align:middle}.text-label-medium-regular{font-size:1rem;font-weight:400;letter-spacing:0;line-height:20px}.text-text-secondary{color:var(--color-text-secondary)}

package/dist/collection/components/sula-table-cell/sula-table-cell.js ADDED Viewed

@@ -0,0 +1,34 @@
+import { Host, h } from "@stencil/core";
+import { SulaTableDensity } from "../sula-table/model/sula-table.model";
+import { replaceHostWithRenderedElement } from "../../utils/replace-host-with-rendered-element";
+export class SulaTableCell {
+    get tableDensity() {
+        var _a, _b;
+        return ((_b = (_a = this.host.closest('sula-table')) === null || _a === void 0 ? void 0 : _a.density) !== null && _b !== void 0 ? _b : SulaTableDensity.Default);
+    }
+    componentDidLoad() {
+        replaceHostWithRenderedElement(this.host, 'td');
+    }
+    render() {
+        return (h(Host, { key: 'b2bf27030078f512b8ff89582d49e4c1d1c91f50' }, h("td", { key: '7c41ad37c806e28fc4489d7c571e718a87d79434', class: "align-middle text-left" }, h("div", { key: '79356a114b7f33ffe7892ab9a1fe133201d022e9', class: {
+                'px-16 py-4 w-full flex justify-start items-center box-border border-b border-dashed border-line-general text-label-medium-regular text-text-secondary': true,
+                'min-h-56': this.tableDensity === SulaTableDensity.Compact,
+                'min-h-60': this.tableDensity === SulaTableDensity.Default,
+                'min-h-64': this.tableDensity === SulaTableDensity.Spaced,
+                'min-h-72': this.tableDensity === SulaTableDensity.Confortable,
+            } }, h("slot", { key: '686baec6c304b80996201447c0fb2d7b6d5be9b1' })))));
+    }
+    static get is() { return "sula-table-cell"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sula-table-cell.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sula-table-cell.css"]
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=sula-table-cell.js.map

package/dist/collection/components/sula-table-cell/sula-table-cell.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sula-table-cell.js","sourceRoot":"","sources":["../../../src/components/sula-table-cell/sula-table-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,8BAA8B,EAAE,MAAM,gDAAgD,CAAC;AAOhG,MAAM,OAAO,aAAa;IAGxB,IAAY,YAAY;;QACtB,OAAO,CAAC,MAAA,MAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAA2D,0CAAE,OAAO,mCAAI,gBAAgB,CAAC,OAAO,CAAqB,CAAC;IAC/J,CAAC;IAED,gBAAgB;QACd,8BAA8B,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAClD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,2DAAI,KAAK,EAAC,wBAAwB;gBAChC,4DACE,KAAK,EAAE;wBACL,uJAAuJ,EAAE,IAAI;wBAC7J,UAAU,EAAE,IAAI,CAAC,YAAY,KAAK,gBAAgB,CAAC,OAAO;wBAC1D,UAAU,EAAE,IAAI,CAAC,YAAY,KAAK,gBAAgB,CAAC,OAAO;wBAC1D,UAAU,EAAE,IAAI,CAAC,YAAY,KAAK,gBAAgB,CAAC,MAAM;wBACzD,UAAU,EAAE,IAAI,CAAC,YAAY,KAAK,gBAAgB,CAAC,WAAW;qBAC/D;oBAED,8DAAa,CACT,CACH,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h } from '@stencil/core';\nimport { SulaTableDensity } from '../sula-table/model/sula-table.model';\nimport { replaceHostWithRenderedElement } from '../../utils/replace-host-with-rendered-element';\n\n@Component({\n tag: 'sula-table-cell',\n styleUrl: 'sula-table-cell.scss',\n shadow: false,\n})\nexport class SulaTableCell {\n @Element() host!: HTMLElement;\n\n private get tableDensity(): SulaTableDensity {\n return ((this.host.closest('sula-table') as (HTMLElement & { density?: SulaTableDensity }) | null)?.density ?? SulaTableDensity.Default) as SulaTableDensity;\n }\n\n componentDidLoad() {\n replaceHostWithRenderedElement(this.host, 'td');\n }\n\n render() {\n return (\n <Host>\n <td class=\"align-middle text-left\">\n <div\n class={{\n 'px-16 py-4 w-full flex justify-start items-center box-border border-b border-dashed border-line-general text-label-medium-regular text-text-secondary': true,\n 'min-h-56': this.tableDensity === SulaTableDensity.Compact,\n 'min-h-60': this.tableDensity === SulaTableDensity.Default,\n 'min-h-64': this.tableDensity === SulaTableDensity.Spaced,\n 'min-h-72': this.tableDensity === SulaTableDensity.Confortable,\n }}\n >\n <slot></slot>\n </div>\n </td>\n </Host>\n );\n }\n}\n"]}