@sula-tech/webcomponents 0.15.0 → 0.16.0

package/dist/esm/webcomponents.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-CwIBTB8E.js';
-export { s as setNonce } from './index-CwIBTB8E.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-CwrCjm3e.js';
+export { s as setNonce } from './index-CwrCjm3e.js';
 
 /*
  Stencil Client Patch Browser v4.35.1 | MIT Licensed | https://stenciljs.com
@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["sula-avatar_22",[[1,"sula-modal",{"opened":[1028],"blockBodyScroll":[1028,"block-body-scroll"],"closeOnClickOutside":[1028,"close-on-click-outside"],"type":[1],"headerIcon":[1,"header-icon"],"modalTitle":[1,"modal-title"],"promoImage":[1,"promo-image"],"subTitle":[1,"sub-title"],"primaryButtonText":[1,"primary-button-text"],"secondaryButtonText":[1,"secondary-button-text"],"slotOverflow":[1,"slot-overflow"],"isAnimating":[32],"shouldRender":[32]},null,{"opened":["handleOpenedChange"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"selected":[1028],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"searchable":[516],"menuMaxHeight":[2,"menu-max-height"],"contentMaxHeight":[2,"content-max-height"],"customContent":[516,"custom-content"],"closeOnSelect":[4,"close-on-select"],"showContent":[1540,"show-content"],"selectedItem":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32],"openUpward":[32]},[[4,"click","handleDocumentClick"],[9,"resize","handleWindowResize"]],{"value":["handleValueChange"],"showContent":["handleShowContentChange"]}],[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-breadcrumb",{"items":[1040]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-segmented-control",{"items":[1040],"type":[1025],"size":[1025],"color":[1025]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"maskPattern":[1,"mask-pattern"],"maskPatternSwitchMaxLength":[2,"mask-pattern-switch-max-length"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"],"maskPattern":["watchMaskPatternHandler"],"maskPatternSwitchMaxLength":["watchMaskPatternSwitchMaxLengthHandler"]}],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-tooltip",{"text":[1],"position":[1],"focused":[4],"trigger":[1],"isVisible":[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"],"responsive":[4],"isFocus":[32]}],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32],"labelPadding":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"],"maxHeight":[2,"max-height"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
+  return bootstrapLazy([["sula-avatar_28",[[1,"sula-modal",{"opened":[1028],"blockBodyScroll":[1028,"block-body-scroll"],"closeOnClickOutside":[1028,"close-on-click-outside"],"type":[1],"headerIcon":[1,"header-icon"],"modalTitle":[1,"modal-title"],"promoImage":[1,"promo-image"],"subTitle":[1,"sub-title"],"primaryButtonText":[1,"primary-button-text"],"secondaryButtonText":[1,"secondary-button-text"],"slotOverflow":[1,"slot-overflow"],"isAnimating":[32],"shouldRender":[32]},null,{"opened":["handleOpenedChange"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"selected":[1028],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"searchable":[516],"menuMaxHeight":[2,"menu-max-height"],"contentMaxHeight":[2,"content-max-height"],"customContent":[516,"custom-content"],"closeOnSelect":[4,"close-on-select"],"showContent":[1540,"show-content"],"selectedItem":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32],"openUpward":[32]},[[4,"click","handleDocumentClick"],[9,"resize","handleWindowResize"]],{"value":["handleValueChange"],"showContent":["handleShowContentChange"]}],[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-breadcrumb",{"items":[1040]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-segmented-control",{"items":[1040],"type":[1025],"size":[1025],"color":[1025]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"maskPattern":[1,"mask-pattern"],"maskPatternSwitchMaxLength":[2,"mask-pattern-switch-max-length"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"],"maskPattern":["watchMaskPatternHandler"],"maskPatternSwitchMaxLength":["watchMaskPatternSwitchMaxLengthHandler"]}],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-tooltip",{"text":[1],"position":[1],"focused":[4],"trigger":[1],"isVisible":[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"],"responsive":[4],"isFocus":[32]}],[4,"sula-table",{"density":[1],"equalWidth":[4,"equal-width"],"fullWidth":[4,"full-width"]}],[4,"sula-table-body"],[4,"sula-table-cell"],[4,"sula-table-head-cell"],[4,"sula-table-header"],[4,"sula-table-row"],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32],"labelPadding":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"],"maxHeight":[2,"max-height"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
 });
 //# sourceMappingURL=webcomponents.js.map
 

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

@@ -0,0 +1,6 @@
+export declare enum SulaTableDensity {
+    Compact = "compact",
+    Default = "default",
+    Spaced = "spaced",
+    Confortable = "comfortable"
+}

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

@@ -0,0 +1,16 @@
+import { SulaTableDensity } from './model/sula-table.model';
+export declare class SulaTable {
+    /**
+     * Density of the table
+     */
+    density: SulaTableDensity;
+    /**
+     * If true, all columns will have equal width
+     */
+    equalWidth: boolean;
+    /**
+     * If true, the table will take the full width of its container
+     */
+    fullWidth: boolean;
+    render(): any;
+}

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

@@ -0,0 +1,69 @@
+import { SulaTableDensity } from './model/sula-table.model';
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        density: {
+            control: {
+                type: string;
+            };
+            options: SulaTableDensity[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        fullWidth: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        equalWidth: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Playground: any;
+export declare const TextOnly: any;
+export declare const CustomContent: any;
+export declare const EqualWidthColumns: any;
+export declare const IntrinsicWidth: any;
+export declare const DensityComparison: {
+    (): HTMLDivElement;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};

package/dist/types/components/sula-table-body/sula-table-body.d.ts

@@ -0,0 +1,5 @@
+export declare class SulaTableBody {
+    host: HTMLElement;
+    componentDidLoad(): void;
+    render(): any;
+}

package/dist/types/components/sula-table-cell/sula-table-cell.d.ts

@@ -0,0 +1,6 @@
+export declare class SulaTableCell {
+    host: HTMLElement;
+    private get tableDensity();
+    componentDidLoad(): void;
+    render(): any;
+}

package/dist/types/components/sula-table-head-cell/sula-table-head-cell.d.ts

@@ -0,0 +1,6 @@
+export declare class SulaTableHeadCell {
+    host: HTMLElement;
+    private get tableDensity();
+    componentDidLoad(): void;
+    render(): any;
+}

package/dist/types/components/sula-table-header/sula-table-header.d.ts

@@ -0,0 +1,5 @@
+export declare class SulaTableHeader {
+    host: HTMLElement;
+    componentDidLoad(): void;
+    render(): any;
+}

package/dist/types/components/sula-table-row/sula-table-row.d.ts

@@ -0,0 +1,5 @@
+export declare class SulaTableRow {
+    host: HTMLElement;
+    componentDidLoad(): void;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -19,6 +19,7 @@ import { SulaProgressBarAppearance, SulaProgressBarState } from "./components/su
 import { SulaSearchBarStyle } from "./components/sula-search-bar/model/sula-search.bar-model";
 import { SulaSegmentedControlColor, SulaSegmentedControlOption, SulaSegmentedControlSize, SulaSegmentedControlType } from "./components/sula-segmented-control/model/sula-segmented-control.model";
 import { SulaSwitchType } from "./components/sula-switch/model/sula-switch.model";
+import { SulaTableDensity } from "./components/sula-table/model/sula-table.model";
 import { SulaTagAppearance, SulaTagFontWeight, SulaTagIconStatus, SulaTagSize } from "./components/sula-tag/model/sula-tag.model";
 import { SulaTextareaStatus } from "./components/sula-textarea/model/sula-textarea.model";
 import { SulaTextfieldStatus, SulaTextfieldType } from "./components/sula-textfield/model/sula-textfield.model";
@@ -39,6 +40,7 @@ export { SulaProgressBarAppearance, SulaProgressBarState } from "./components/su
 export { SulaSearchBarStyle } from "./components/sula-search-bar/model/sula-search.bar-model";
 export { SulaSegmentedControlColor, SulaSegmentedControlOption, SulaSegmentedControlSize, SulaSegmentedControlType } from "./components/sula-segmented-control/model/sula-segmented-control.model";
 export { SulaSwitchType } from "./components/sula-switch/model/sula-switch.model";
+export { SulaTableDensity } from "./components/sula-table/model/sula-table.model";
 export { SulaTagAppearance, SulaTagFontWeight, SulaTagIconStatus, SulaTagSize } from "./components/sula-tag/model/sula-tag.model";
 export { SulaTextareaStatus } from "./components/sula-textarea/model/sula-textarea.model";
 export { SulaTextfieldStatus, SulaTextfieldType } from "./components/sula-textfield/model/sula-textfield.model";
@@ -469,6 +471,33 @@ export namespace Components {
          */
         "type": SulaSwitchType;
     }
+    interface SulaTable {
+        /**
+          * Density of the table
+          * @default SulaTableDensity.Default
+         */
+        "density": SulaTableDensity;
+        /**
+          * If true, all columns will have equal width
+          * @default true
+         */
+        "equalWidth": boolean;
+        /**
+          * If true, the table will take the full width of its container
+          * @default true
+         */
+        "fullWidth": boolean;
+    }
+    interface SulaTableBody {
+    }
+    interface SulaTableCell {
+    }
+    interface SulaTableHeadCell {
+    }
+    interface SulaTableHeader {
+    }
+    interface SulaTableRow {
+    }
     interface SulaTag {
         /**
           * Tag appearance
@@ -946,6 +975,42 @@ declare global {
         prototype: HTMLSulaSwitchElement;
         new (): HTMLSulaSwitchElement;
     };
+    interface HTMLSulaTableElement extends Components.SulaTable, HTMLStencilElement {
+    }
+    var HTMLSulaTableElement: {
+        prototype: HTMLSulaTableElement;
+        new (): HTMLSulaTableElement;
+    };
+    interface HTMLSulaTableBodyElement extends Components.SulaTableBody, HTMLStencilElement {
+    }
+    var HTMLSulaTableBodyElement: {
+        prototype: HTMLSulaTableBodyElement;
+        new (): HTMLSulaTableBodyElement;
+    };
+    interface HTMLSulaTableCellElement extends Components.SulaTableCell, HTMLStencilElement {
+    }
+    var HTMLSulaTableCellElement: {
+        prototype: HTMLSulaTableCellElement;
+        new (): HTMLSulaTableCellElement;
+    };
+    interface HTMLSulaTableHeadCellElement extends Components.SulaTableHeadCell, HTMLStencilElement {
+    }
+    var HTMLSulaTableHeadCellElement: {
+        prototype: HTMLSulaTableHeadCellElement;
+        new (): HTMLSulaTableHeadCellElement;
+    };
+    interface HTMLSulaTableHeaderElement extends Components.SulaTableHeader, HTMLStencilElement {
+    }
+    var HTMLSulaTableHeaderElement: {
+        prototype: HTMLSulaTableHeaderElement;
+        new (): HTMLSulaTableHeaderElement;
+    };
+    interface HTMLSulaTableRowElement extends Components.SulaTableRow, HTMLStencilElement {
+    }
+    var HTMLSulaTableRowElement: {
+        prototype: HTMLSulaTableRowElement;
+        new (): HTMLSulaTableRowElement;
+    };
     interface HTMLSulaTagElement extends Components.SulaTag, HTMLStencilElement {
     }
     var HTMLSulaTagElement: {
@@ -1048,6 +1113,12 @@ declare global {
         "sula-search-bar": HTMLSulaSearchBarElement;
         "sula-segmented-control": HTMLSulaSegmentedControlElement;
         "sula-switch": HTMLSulaSwitchElement;
+        "sula-table": HTMLSulaTableElement;
+        "sula-table-body": HTMLSulaTableBodyElement;
+        "sula-table-cell": HTMLSulaTableCellElement;
+        "sula-table-head-cell": HTMLSulaTableHeadCellElement;
+        "sula-table-header": HTMLSulaTableHeaderElement;
+        "sula-table-row": HTMLSulaTableRowElement;
         "sula-tag": HTMLSulaTagElement;
         "sula-textarea": HTMLSulaTextareaElement;
         "sula-textfield": HTMLSulaTextfieldElement;
@@ -1593,6 +1664,33 @@ declare namespace LocalJSX {
          */
         "type"?: SulaSwitchType;
     }
+    interface SulaTable {
+        /**
+          * Density of the table
+          * @default SulaTableDensity.Default
+         */
+        "density"?: SulaTableDensity;
+        /**
+          * If true, all columns will have equal width
+          * @default true
+         */
+        "equalWidth"?: boolean;
+        /**
+          * If true, the table will take the full width of its container
+          * @default true
+         */
+        "fullWidth"?: boolean;
+    }
+    interface SulaTableBody {
+    }
+    interface SulaTableCell {
+    }
+    interface SulaTableHeadCell {
+    }
+    interface SulaTableHeader {
+    }
+    interface SulaTableRow {
+    }
     interface SulaTag {
         /**
           * Tag appearance
@@ -1828,6 +1926,12 @@ declare namespace LocalJSX {
         "sula-search-bar": SulaSearchBar;
         "sula-segmented-control": SulaSegmentedControl;
         "sula-switch": SulaSwitch;
+        "sula-table": SulaTable;
+        "sula-table-body": SulaTableBody;
+        "sula-table-cell": SulaTableCell;
+        "sula-table-head-cell": SulaTableHeadCell;
+        "sula-table-header": SulaTableHeader;
+        "sula-table-row": SulaTableRow;
         "sula-tag": SulaTag;
         "sula-textarea": SulaTextarea;
         "sula-textfield": SulaTextfield;
@@ -1856,6 +1960,12 @@ declare module "@stencil/core" {
             "sula-search-bar": LocalJSX.SulaSearchBar & JSXBase.HTMLAttributes<HTMLSulaSearchBarElement>;
             "sula-segmented-control": LocalJSX.SulaSegmentedControl & JSXBase.HTMLAttributes<HTMLSulaSegmentedControlElement>;
             "sula-switch": LocalJSX.SulaSwitch & JSXBase.HTMLAttributes<HTMLSulaSwitchElement>;
+            "sula-table": LocalJSX.SulaTable & JSXBase.HTMLAttributes<HTMLSulaTableElement>;
+            "sula-table-body": LocalJSX.SulaTableBody & JSXBase.HTMLAttributes<HTMLSulaTableBodyElement>;
+            "sula-table-cell": LocalJSX.SulaTableCell & JSXBase.HTMLAttributes<HTMLSulaTableCellElement>;
+            "sula-table-head-cell": LocalJSX.SulaTableHeadCell & JSXBase.HTMLAttributes<HTMLSulaTableHeadCellElement>;
+            "sula-table-header": LocalJSX.SulaTableHeader & JSXBase.HTMLAttributes<HTMLSulaTableHeaderElement>;
+            "sula-table-row": LocalJSX.SulaTableRow & JSXBase.HTMLAttributes<HTMLSulaTableRowElement>;
             "sula-tag": LocalJSX.SulaTag & JSXBase.HTMLAttributes<HTMLSulaTagElement>;
             "sula-textarea": LocalJSX.SulaTextarea & JSXBase.HTMLAttributes<HTMLSulaTextareaElement>;
             "sula-textfield": LocalJSX.SulaTextfield & JSXBase.HTMLAttributes<HTMLSulaTextfieldElement>;

package/dist/types/utils/replace-host-with-rendered-element.d.ts

@@ -0,0 +1 @@
+export declare const replaceHostWithRenderedElement: (host: HTMLElement, selector: string) => void;