@sula-tech/webcomponents 0.3.3 → 0.4.0

package/dist/esm/webcomponents.js

@@ -1,10 +1,10 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-aa1c5f36.js';
-export { s as setNonce } from './index-aa1c5f36.js';
-import { g as globalScripts } from './app-globals-0f993ce5.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-Yyeke16a.js';
+export { s as setNonce } from './index-Yyeke16a.js';
 
 /*
- Stencil Client Patch Browser v4.26.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.35.1 | MIT Licensed | https://stenciljs.com
  */
+
 var patchBrowser = () => {
   const importMeta = import.meta.url;
   const opts = {};
@@ -16,7 +16,8 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["sula-avatar_9",[[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-button",{"text":[1025],"icon":[1025],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]]],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"isFocus":[32]}],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32],"labelAnimationClass":[32]},[[4,"click","handleClick"]]],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
+  return bootstrapLazy([["sula-avatar_14",[[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-button",{"text":[1025],"icon":[1025],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]]],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"isFocus":[32]}],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32],"labelAnimationClass":[32]},[[4,"click","handleClick"]]],[1,"sula-menu-select-list",{"items":[1040]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
 });
+//# sourceMappingURL=webcomponents.js.map
 
 //# sourceMappingURL=webcomponents.js.map

package/dist/esm/webcomponents.js.map

@@ -1 +1 @@
-{"file":"webcomponents.js","mappings":";;;;AAAA;AACA;AACA;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;AACrC,EAAE,MAAM,IAAI,GAAiE,EAAE,CAAC;AAChF,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AACtD,GAAG;AACH,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE,CAAC;AACxB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC","names":[],"sources":["node_modules/.pnpm/@stencil+core@4.26.0/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.26.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}
+{"version":3,"file":"webcomponents.js","sources":["node_modules/.pnpm/@stencil+core@4.35.1/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.35.1 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":[],"mappings":";;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE;AACvB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC","x_google_ignoreList":[0]}

package/dist/types/components/sula-avatar/sula-avatar.stories.d.ts

@@ -39,6 +39,13 @@ declare const _default: {
             };
         };
     };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
 };
 export default _default;
 export declare const Default: any;

package/dist/types/components/sula-badge/sula-badge.stories.d.ts

@@ -53,6 +53,13 @@ declare const _default: {
             };
         };
     };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
 };
 export default _default;
 export declare const Default: any;

package/dist/types/components/sula-button/sula-button.stories.d.ts

@@ -84,6 +84,13 @@ declare const _default: {
             description: string;
         };
     };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
 };
 export default _default;
 export declare const Default: any;

package/dist/types/components/sula-checkbox/sula-checkbox.stories.d.ts

@@ -59,6 +59,13 @@ declare const _default: {
             description: string;
         };
     };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
 };
 export default _default;
 export declare const Default: any;

package/dist/types/components/sula-chip/model/sula-chip.model.d.ts

@@ -0,0 +1,4 @@
+export declare enum SulaChipAppearance {
+    Default = "default",
+    Negative = "negative"
+}

package/dist/types/components/sula-chip/sula-chip.d.ts

@@ -0,0 +1,40 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SulaMenuListItem } from '../sula-menu-select-list/model/sula-menu-select-list.model';
+import { SulaChipAppearance } from './model/sula-chip.model';
+import { SulaMenuSelectListCustomEvent } from '../../components';
+export declare class SulaChip {
+    /**
+     * Chip text
+     */
+    text: string;
+    /**
+     * Chip appearance
+     */
+    appearance: SulaChipAppearance;
+    /**
+     * Chip is disabled
+     */
+    disabled: boolean;
+    /**
+     * Items for list
+     */
+    items: SulaMenuListItem[];
+    /**
+     * Event emitted when chip is clicked
+     */
+    itemClicked: EventEmitter<void>;
+    /**
+     * Event emitted when item is selected
+     */
+    menuItemSelected: EventEmitter<SulaMenuListItem>;
+    isFocused: boolean;
+    showItems: boolean;
+    node?: HTMLElement;
+    handleDocumentClick(event: Event): void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    handleClick: () => void;
+    handleItemSelected: (item: SulaMenuSelectListCustomEvent<SulaMenuListItem>) => void;
+    getIconClass(): "text-text-primary" | "text-text-disabled" | "text-negative-negative-2";
+    render(): any;
+}

package/dist/types/components/sula-chip/sula-chip.stories.d.ts

@@ -0,0 +1,64 @@
+import { SulaChipAppearance } from './model/sula-chip.model';
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        text: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        appearance: {
+            control: {
+                type: string;
+            };
+            options: SulaChipAppearance[];
+            defaultValue: SulaChipAppearance;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        disabled: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        items: {
+            control: string;
+            defaultValue: any[];
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        itemClicked: {
+            action: string;
+            description: string;
+        };
+        itemSelected: {
+            action: string;
+            description: string;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const NegativeAppearance: any;
+export declare const DisabledChip: any;
+export declare const ChipWithDropdown: any;
+export declare const NegativeChipWithDropdown: any;
+export declare const DisabledChipWithItems: any;

package/dist/types/components/sula-loader/model/sula-loader.model.d.ts

@@ -0,0 +1,5 @@
+export declare enum SulaLoaderSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}

package/dist/types/components/sula-loader/sula-loader.d.ts

@@ -0,0 +1,19 @@
+import { AnimationItem } from 'lottie-web';
+import { SulaLoaderSize } from './model/sula-loader.model';
+export declare class SulaLoader {
+    el: HTMLElement;
+    /**
+     * Tamanho predefinido (small, medium, large)
+     */
+    size: SulaLoaderSize;
+    animationInstance: AnimationItem;
+    containerRef: HTMLDivElement;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    initLottie(): void;
+    getDimensions(): {
+        width: string;
+        height: string;
+    };
+    render(): any;
+}

package/dist/types/components/sula-loader/sula-loader.stories.d.ts

@@ -0,0 +1,29 @@
+import { SulaLoaderSize } from './model/sula-loader.model';
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        size: {
+            control: {
+                type: string;
+            };
+            options: SulaLoaderSize[];
+            defaultValue: SulaLoaderSize;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Small: any;
+export declare const Medium: any;
+export declare const Large: any;

package/dist/types/components/sula-loader/test/__mocks__/lottie-web.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    loadAnimation: jest.Mock<any, any, any>;
+};
+export default _default;

package/dist/types/components/sula-menu-select-list/model/sula-menu-select-list.model.d.ts

@@ -0,0 +1,4 @@
+export interface SulaMenuListItem {
+    id: string | number;
+    title: string;
+}

package/dist/types/components/sula-menu-select-list/sula-menu-select-list.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SulaMenuListItem } from './model/sula-menu-select-list.model';
+export declare class SulaMenuSelectList {
+    /**
+     * Items for list
+     */
+    items: SulaMenuListItem[];
+    /**
+     * Event emitted when item is selected
+     */
+    itemSelected: EventEmitter<SulaMenuListItem>;
+    handleClick: (item: SulaMenuListItem) => void;
+    render(): any;
+}

package/dist/types/components/sula-menu-select-list/sula-menu-select-list.stories.d.ts

@@ -0,0 +1,32 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        items: {
+            control: string;
+            defaultValue: {
+                id: string;
+                title: string;
+            }[];
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        itemSelected: {
+            action: string;
+            description: string;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const WithStringIds: any;
+export declare const WithNumericIds: any;

package/dist/types/components/sula-radio-button/sula-radio-button.d.ts

@@ -0,0 +1,32 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class SulaRadioButton {
+    /**
+     * Is radio button checked
+     */
+    checked: boolean;
+    /**
+     * Radio button label
+     */
+    label: string;
+    /**
+     * Is radio button disabled
+     */
+    disabled: boolean;
+    /**
+     * Event emitted when radio button value changes.
+     */
+    valueChanged: EventEmitter<boolean>;
+    /**
+     * Event emitted when radio button is focused.
+     */
+    focusedOn: EventEmitter<void>;
+    /**
+     * Event emitted when radio button is focused out.
+     */
+    focusedOut: EventEmitter<void>;
+    radioIsFocus: boolean;
+    handleFocus: () => void;
+    handleFocusOut: () => void;
+    handleClick: () => void;
+    render(): any;
+}

package/dist/types/components/sula-radio-button/sula-radio-button.stories.d.ts

@@ -0,0 +1,57 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        label: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        disabled: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        checked: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        valueChanged: {
+            action: string;
+            description: string;
+        };
+        focusedOn: {
+            action: string;
+            description: string;
+        };
+        focusedOut: {
+            action: string;
+            description: string;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const DefaultChecked: any;
+export declare const DefaultDisabled: any;
+export declare const DefaultCheckedDisabled: any;
+export declare const DefaultWithoutLabel: any;
+export declare const RadioGroup: any;
+export declare const RadioGroupDisabled: any;

package/dist/types/components/sula-switch/sula-switch.stories.d.ts

@@ -59,6 +59,13 @@ declare const _default: {
             description: string;
         };
     };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
 };
 export default _default;
 export declare const Default: any;

package/dist/types/components/sula-tag/sula-tag.stories.d.ts

@@ -64,6 +64,13 @@ declare const _default: {
             };
         };
     };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
 };
 export default _default;
 export declare const Default: any;

package/dist/types/components/sula-textarea/sula-textarea.stories.d.ts

@@ -83,6 +83,13 @@ declare const _default: {
             description: string;
         };
     };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
 };
 export default _default;
 export declare const Default: any;

package/dist/types/components/sula-textfield/sula-textfield.stories.d.ts

@@ -94,6 +94,13 @@ declare const _default: {
             description: string;
         };
     };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
 };
 export default _default;
 export declare const Default: any;

package/dist/types/components/sula-tiles/model/sula-tiles.model.d.ts

@@ -0,0 +1,8 @@
+export declare enum SulaTilesType {
+    Rounded = "rounded",
+    Square = "square"
+}
+export declare enum SulaTilesSize {
+    Default = "default",
+    Large = "large"
+}

package/dist/types/components/sula-tiles/sula-tiles.d.ts

@@ -0,0 +1,54 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SulaTilesSize, SulaTilesType } from './model/sula-tiles.model';
+export declare class SulaTiles {
+    /**
+     * Tiles type
+     */
+    type: SulaTilesType;
+    /**
+     * Tiles size
+     */
+    size: SulaTilesSize;
+    /**
+     * Use ellipsis on tiles text
+     */
+    ellipsis: boolean;
+    /**
+     * Tiles icon
+     */
+    icon: string;
+    /**
+     * Tiles text
+     */
+    text: string;
+    /**
+     * Tiles subtext
+     */
+    subText: string;
+    /**
+     * Tiles is disabled
+     */
+    disabled: boolean;
+    /**
+     * Event emitted when tile is clicked.
+     * @note If tile is disabled event won't be emitted
+     */
+    tileClicked: EventEmitter<void>;
+    private readonly TILE_SIZES;
+    private readonly BASE_CLASSES;
+    private get isRounded();
+    private get isSquare();
+    private get hasSubText();
+    private get isInteractive();
+    private getRoundedTileSize;
+    private getContainerClasses;
+    private getIconContainerClasses;
+    private getTextContainerClasses;
+    private getTextClasses;
+    private getIconClasses;
+    private getTabIndex;
+    private renderIcon;
+    private renderText;
+    handleClick: () => void;
+    render(): any;
+}

package/dist/types/components/sula-tiles/sula-tiles.stories.d.ts

@@ -0,0 +1,99 @@
+import { SulaTilesSize, SulaTilesType } from './model/sula-tiles.model';
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        type: {
+            control: {
+                type: string;
+            };
+            options: SulaTilesType[];
+            defaultValue: SulaTilesType;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        size: {
+            control: {
+                type: string;
+            };
+            options: SulaTilesSize[];
+            defaultValue: SulaTilesSize;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        ellipsis: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        icon: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        text: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        subText: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        disabled: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        tileClicked: {
+            description: string;
+            action: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const DefaultRounded: any;
+export declare const LargeRounded: any;
+export declare const SquareSimple: any;
+export declare const SquareWithSubText: any;
+export declare const DisabledRounded: any;
+export declare const DisabledSquare: any;
+export declare const WithEllipsis: any;
+export declare const InteractiveEventDemo: () => HTMLDivElement;
+export declare const DifferentIcons: () => HTMLDivElement;
+export declare const SizeComparison: () => HTMLDivElement;
+export declare const TypeComparison: () => HTMLDivElement;
+export declare const InteractiveStates: () => HTMLDivElement;