@sula-tech/webcomponents 0.10.0 → 0.11.0

package/dist/esm/webcomponents.js

@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["sula-avatar_20",[[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],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"searchable":[516],"selectedItem":[32],"showItems":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32]},[[4,"click","handleDocumentClick"]],{"value":["handleValueChange"],"showItems":["handleShowItemsChange"]}],[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-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"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[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-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],"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"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
+  return bootstrapLazy([["sula-avatar_21",[[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],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"searchable":[516],"selectedItem":[32],"showItems":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32]},[[4,"click","handleDocumentClick"]],{"value":["handleValueChange"],"showItems":["handleShowItemsChange"]}],[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"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[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-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],"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"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
 });
 //# sourceMappingURL=webcomponents.js.map
 

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

@@ -0,0 +1,5 @@
+export interface SulaMenuBreadcrumb {
+    id?: string | number;
+    title: string;
+    path?: string;
+}

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

@@ -0,0 +1,14 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SulaMenuBreadcrumb } from './model/sula-breadcrumb.model';
+export declare class SulaBreadcrumb {
+    /**
+     * Breadcrumb items list
+     */
+    items: SulaMenuBreadcrumb[];
+    /**
+     * Event emitted when a breadcrumb item is clicked
+     */
+    breadcrumbItemClicked: EventEmitter<SulaMenuBreadcrumb>;
+    private handleItemClick;
+    render(): any;
+}

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

@@ -0,0 +1,39 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        items: {
+            control: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        breadcrumbItemClicked: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Playground: any;
+export declare const ShortPath: any;
+export declare const LongPath: any;
+export declare const WithoutLinks: any;

package/dist/types/components.d.ts

@@ -7,6 +7,7 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { SulaAvatarSize } from "./components/sula-avatar/model/sula-avatar.model";
 import { SulaBadgeSize, SulaBadgeStatus, SulaBadgeType } from "./components/sula-badge/model/sula-badge.model";
+import { SulaMenuBreadcrumb } from "./components/sula-breadcrumb/model/sula-breadcrumb.model";
 import { SulaButtonAppearance, SulaButtonSize, SulaButtonStatus, SulaButtonType } from "./components/sula-button/model/sula-button.model";
 import { SulaCheckboxType } from "./components/sula-checkbox/model/sula-checkbox.model";
 import { SulaChipAppearance } from "./components/sula-chip/model/sula-chip.model";
@@ -25,6 +26,7 @@ import { SulaTilesSize, SulaTilesType } from "./components/sula-tiles/model/sula
 import { SulaTimelineListItem } from "./components/sula-timeline-list/model/sula-timeline-list.model";
 export { SulaAvatarSize } from "./components/sula-avatar/model/sula-avatar.model";
 export { SulaBadgeSize, SulaBadgeStatus, SulaBadgeType } from "./components/sula-badge/model/sula-badge.model";
+export { SulaMenuBreadcrumb } from "./components/sula-breadcrumb/model/sula-breadcrumb.model";
 export { SulaButtonAppearance, SulaButtonSize, SulaButtonStatus, SulaButtonType } from "./components/sula-button/model/sula-button.model";
 export { SulaCheckboxType } from "./components/sula-checkbox/model/sula-checkbox.model";
 export { SulaChipAppearance } from "./components/sula-chip/model/sula-chip.model";
@@ -88,6 +90,13 @@ export namespace Components {
          */
         "type": SulaBadgeType;
     }
+    interface SulaBreadcrumb {
+        /**
+          * Breadcrumb items list
+          * @default []
+         */
+        "items": SulaMenuBreadcrumb[];
+    }
     interface SulaButton {
         /**
           * Button appearance
@@ -576,6 +585,10 @@ export namespace Components {
         "sulaTimelineList": SulaTimelineListItem[];
     }
 }
+export interface SulaBreadcrumbCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSulaBreadcrumbElement;
+}
 export interface SulaButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSulaButtonElement;
@@ -645,6 +658,23 @@ declare global {
         prototype: HTMLSulaBadgeElement;
         new (): HTMLSulaBadgeElement;
     };
+    interface HTMLSulaBreadcrumbElementEventMap {
+        "breadcrumbItemClicked": SulaMenuBreadcrumb;
+    }
+    interface HTMLSulaBreadcrumbElement extends Components.SulaBreadcrumb, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSulaBreadcrumbElementEventMap>(type: K, listener: (this: HTMLSulaBreadcrumbElement, ev: SulaBreadcrumbCustomEvent<HTMLSulaBreadcrumbElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSulaBreadcrumbElementEventMap>(type: K, listener: (this: HTMLSulaBreadcrumbElement, ev: SulaBreadcrumbCustomEvent<HTMLSulaBreadcrumbElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSulaBreadcrumbElement: {
+        prototype: HTMLSulaBreadcrumbElement;
+        new (): HTMLSulaBreadcrumbElement;
+    };
     interface HTMLSulaButtonElementEventMap {
         "buttonClicked": void;
     }
@@ -931,6 +961,7 @@ declare global {
     interface HTMLElementTagNameMap {
         "sula-avatar": HTMLSulaAvatarElement;
         "sula-badge": HTMLSulaBadgeElement;
+        "sula-breadcrumb": HTMLSulaBreadcrumbElement;
         "sula-button": HTMLSulaButtonElement;
         "sula-checkbox": HTMLSulaCheckboxElement;
         "sula-chip": HTMLSulaChipElement;
@@ -998,6 +1029,17 @@ declare namespace LocalJSX {
          */
         "type"?: SulaBadgeType;
     }
+    interface SulaBreadcrumb {
+        /**
+          * Breadcrumb items list
+          * @default []
+         */
+        "items"?: SulaMenuBreadcrumb[];
+        /**
+          * Event emitted when a breadcrumb item is clicked
+         */
+        "onBreadcrumbItemClicked"?: (event: SulaBreadcrumbCustomEvent<SulaMenuBreadcrumb>) => void;
+    }
     interface SulaButton {
         /**
           * Button appearance
@@ -1630,6 +1672,7 @@ declare namespace LocalJSX {
     interface IntrinsicElements {
         "sula-avatar": SulaAvatar;
         "sula-badge": SulaBadge;
+        "sula-breadcrumb": SulaBreadcrumb;
         "sula-button": SulaButton;
         "sula-checkbox": SulaCheckbox;
         "sula-chip": SulaChip;
@@ -1656,6 +1699,7 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "sula-avatar": LocalJSX.SulaAvatar & JSXBase.HTMLAttributes<HTMLSulaAvatarElement>;
             "sula-badge": LocalJSX.SulaBadge & JSXBase.HTMLAttributes<HTMLSulaBadgeElement>;
+            "sula-breadcrumb": LocalJSX.SulaBreadcrumb & JSXBase.HTMLAttributes<HTMLSulaBreadcrumbElement>;
             "sula-button": LocalJSX.SulaButton & JSXBase.HTMLAttributes<HTMLSulaButtonElement>;
             "sula-checkbox": LocalJSX.SulaCheckbox & JSXBase.HTMLAttributes<HTMLSulaCheckboxElement>;
             "sula-chip": LocalJSX.SulaChip & JSXBase.HTMLAttributes<HTMLSulaChipElement>;