@sula-tech/webcomponents 0.2.0 → 0.3.0

package/dist/esm/webcomponents.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-1dc4ae53.js';
-export { s as setNonce } from './index-1dc4ae53.js';
+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';
 
 /*
@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["sula-avatar_4",[[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-button",{"text":[1025],"icon":[1025],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"]}],[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"]]],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
+  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);
 });
 
 //# sourceMappingURL=webcomponents.js.map

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

@@ -0,0 +1,19 @@
+export declare enum SulaBadgeStatus {
+    Default = "default",
+    Money = "money",
+    Info = "info",
+    Error = "error",
+    Success = "success",
+    Warning = "warning"
+}
+export declare enum SulaBadgeSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+    Display = "display"
+}
+export declare enum SulaBadgeType {
+    Text = "text",
+    Icon = "icon",
+    Dot = "dot"
+}

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

@@ -0,0 +1,33 @@
+import { SulaBadgeSize, SulaBadgeStatus, SulaBadgeType } from './model/sula-badge.model';
+export declare class SulaBadge {
+    hostElement: HTMLElement;
+    /**
+     * Badge status
+     */
+    status: SulaBadgeStatus;
+    /**
+     * Badge size
+     */
+    size: SulaBadgeSize;
+    /**
+     * Badge type
+     */
+    type: SulaBadgeType;
+    /**
+     * Badge text
+     */
+    text: string;
+    /**
+     * Badge icon
+     */
+    icon: string;
+    slotRef?: HTMLSlotElement;
+    hasSlotContent: boolean;
+    componentDidLoad(): void;
+    checkSlotContent(): void;
+    getSizeClass(): string;
+    getPaddingByType(): string;
+    getTextPaddingBySize(): string;
+    getStatusClass(): any;
+    render(): any;
+}

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

@@ -0,0 +1,65 @@
+import { SulaBadgeSize, SulaBadgeStatus, SulaBadgeType } from './model/sula-badge.model';
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        text: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        icon: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        status: {
+            control: {
+                type: string;
+            };
+            options: SulaBadgeStatus[];
+            defaultValue: SulaBadgeStatus;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        size: {
+            control: {
+                type: string;
+            };
+            options: SulaBadgeSize[];
+            defaultValue: SulaBadgeSize;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        type: {
+            control: {
+                type: string;
+            };
+            options: SulaBadgeType[];
+            defaultValue: SulaBadgeType;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const DotBadge: any;
+export declare const IconBadge: any;
+export declare const SuccessBadge: any;
+export declare const WarningBadge: any;
+export declare const LargeBadge: any;
+export declare const DisplayBadge: any;
+export declare const BadgeWithAvatar: any;

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

@@ -0,0 +1,4 @@
+export declare enum SulaCheckboxType {
+    Default = "default",
+    List = "list"
+}

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

@@ -0,0 +1,42 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SulaCheckboxType } from './model/sula-checkbox.model';
+export declare class SulaCheckbox {
+    /**
+     * Checkbox type
+     */
+    type: SulaCheckboxType;
+    /**
+     * Checkbox label
+     */
+    label?: string;
+    /**
+     * Checkbox sub title (avaible when is `list` type)
+     */
+    subTitle?: string;
+    /**
+     * Is checbox disabled
+     */
+    disabled: boolean;
+    /**
+     * Is checkbox checked
+     */
+    checked: boolean;
+    /**
+     * Event emitted when checkbox value changes.
+     */
+    valueChanged: EventEmitter<boolean>;
+    /**
+     * Event emitted when checkbox is focused.
+     */
+    focusedOn: EventEmitter<void>;
+    /**
+     * Event emitted when checkbox is focused out.
+     */
+    focusedOut: EventEmitter<void>;
+    isFocus: boolean;
+    toggle: () => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    getIconColor(): "text-negative-negative-1" | "text-icon-disabled";
+    render(): any;
+}

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

@@ -0,0 +1,73 @@
+import { SulaCheckboxType } from './model/sula-checkbox.model';
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        type: {
+            control: {
+                type: string;
+            };
+            options: SulaCheckboxType[];
+            defaultValue: SulaCheckboxType;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        label: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        subTitle: {
+            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;
+        };
+    };
+};
+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 List: any;
+export declare const ListChecked: any;
+export declare const ListDisabled: any;
+export declare const ListCheckedDisabled: any;
+export declare const ListWithoutSubtitle: any;

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

@@ -0,0 +1,4 @@
+export declare enum SulaSwitchType {
+    Default = "default",
+    List = "list"
+}

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

@@ -0,0 +1,41 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SulaSwitchType } from './model/sula-switch.model';
+export declare class SulaSwitch {
+    /**
+     * Switch type
+     */
+    type: SulaSwitchType;
+    /**
+     * Is switch active
+     */
+    active: boolean;
+    /**
+     * Is switch disabled
+     */
+    disabled: boolean;
+    /**
+     * Switch label
+     */
+    label?: string;
+    /**
+     * Switch sub title (avaible when is `list` type)
+     */
+    subTitle?: string;
+    /**
+     * Event emitted when switch value changes.
+     */
+    valueChanged: EventEmitter<boolean>;
+    /**
+     * Event emitted when switch is focused.
+     */
+    focusedOn: EventEmitter<void>;
+    /**
+     * Event emitted when switch is focused out.
+     */
+    focusedOut: EventEmitter<void>;
+    isFocus: boolean;
+    handleClick: () => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    render(): any;
+}

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

@@ -0,0 +1,72 @@
+import { SulaSwitchType } from './model/sula-switch.model';
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        type: {
+            control: {
+                type: string;
+            };
+            options: SulaSwitchType[];
+            defaultValue: SulaSwitchType;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        active: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        disabled: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        label: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        subTitle: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        valueChanged: {
+            action: string;
+            description: string;
+        };
+        focusedOn: {
+            action: string;
+            description: string;
+        };
+        focusedOut: {
+            action: string;
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const DefaultActive: any;
+export declare const DefaultDisabled: any;
+export declare const DefaultActiveDisabled: any;
+export declare const DefaultWithoutLabel: any;
+export declare const List: any;
+export declare const ListActive: any;
+export declare const ListDisabled: any;
+export declare const ListActiveDisabled: any;

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

@@ -0,0 +1,23 @@
+export declare enum SulaTagSize {
+    Small = "small",
+    Default = "default"
+}
+export declare enum SulaTagIconStatus {
+    Success = "success",
+    Warning = "warning",
+    Error = "error",
+    Info = "info"
+}
+export declare enum SulaTagAppearance {
+    Brand = "brand",
+    Bordered = "bordered",
+    LightBlue = "light-blue",
+    LightBrand = "light-brand",
+    Negative = "negative",
+    OpacityGrey = "opacity-grey",
+    OpacityWhite = "opacity-white"
+}
+export declare enum SulaTagFontWeight {
+    Normal = "normal",
+    Bold = "bold"
+}

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

@@ -0,0 +1,33 @@
+import { SulaTagAppearance, SulaTagFontWeight, SulaTagIconStatus, SulaTagSize } from './model/sula-tag.model';
+export declare class SulaTag {
+    /**
+     * Tag label
+     */
+    label: string;
+    /**
+     * Tag icon
+     */
+    icon: string;
+    /**
+     * Tag icon status
+     */
+    iconStatus: SulaTagIconStatus;
+    /**
+     * Tag size
+     */
+    size: SulaTagSize;
+    /**
+     * Tag appearance
+     */
+    appearance: SulaTagAppearance;
+    /**
+     * Tag font weight
+     */
+    fontWeight: SulaTagFontWeight;
+    getSizeClass(): string;
+    getAppearanceClass(): string;
+    getTextColorClass(): "text-text-primary" | "text-negative-negative-1" | "text-negative-negative-2";
+    getTextWeightClass(): string;
+    getIconStatusClass(): string;
+    render(): any;
+}

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

@@ -0,0 +1,82 @@
+import { SulaTagAppearance, SulaTagFontWeight, SulaTagIconStatus, SulaTagSize } from './model/sula-tag.model';
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        label: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        icon: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        iconStatus: {
+            control: {
+                type: string;
+            };
+            options: SulaTagIconStatus[];
+            defaultValue: SulaTagIconStatus;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        size: {
+            control: {
+                type: string;
+            };
+            options: SulaTagSize[];
+            defaultValue: SulaTagSize;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        appearance: {
+            control: {
+                type: string;
+            };
+            options: SulaTagAppearance[];
+            defaultValue: SulaTagAppearance;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        fontWeight: {
+            control: {
+                type: string;
+            };
+            options: SulaTagFontWeight[];
+            defaultValue: SulaTagFontWeight;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const WithIcon: any;
+export declare const BrandAppearance: any;
+export declare const LightBlueAppearance: any;
+export declare const LightBrandAppearance: any;
+export declare const NegativeAppearance: any;
+export declare const OpacityGreyAppearance: any;
+export declare const OpacityWhiteAppearance: any;
+export declare const SmallSize: any;
+export declare const BoldFont: any;
+export declare const WarningIcon: any;
+export declare const ErrorIcon: any;
+export declare const InfoIcon: any;
+export declare const CompleteExample: any;

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

@@ -0,0 +1,4 @@
+export declare enum SulaTextareaStatus {
+    Default = "default",
+    Error = "error"
+}

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

@@ -0,0 +1,65 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SulaTextareaStatus } from './model/sula-textarea.model';
+export declare class SulaTextarea {
+    /**
+     * Value for the textarea.
+     */
+    value?: string;
+    /**
+     * The textarea status
+     */
+    status: SulaTextareaStatus;
+    /**
+     * The textarea label
+     */
+    label: string;
+    /**
+     * The textarea placeholder
+     */
+    placeholder: string;
+    /**
+     * The textarea is disabled
+     */
+    disabled: boolean;
+    /**
+     * The help text for textarea
+     */
+    helpText?: string;
+    /**
+     * The textarea max length
+     */
+    maxLength?: number;
+    /**
+     * The textarea rows (height)
+     */
+    rows: number;
+    /**
+     * Event emitted when textarea value changes.
+     */
+    valueChanged: EventEmitter<string>;
+    /**
+     * Event emitted when textarea is focused.
+     */
+    focusedOn: EventEmitter<void>;
+    /**
+     * Event emitted when textarea is focused out.
+     */
+    focusedOut: EventEmitter<void>;
+    isActive: boolean;
+    textValue: string;
+    textareaIsFocused: boolean;
+    labelAnimationClass: string;
+    textareaElement: HTMLTextAreaElement;
+    node?: HTMLElement;
+    handleClick(event: Event): void;
+    focusOnTextarea(): void;
+    componentWillLoad(): void;
+    setLabelUp(): void;
+    setLabelDown(): void;
+    handleTextareaClick: () => void;
+    handleTextareaChanges: (event: InputEvent) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    handleTextareaFocus: () => void;
+    render(): any;
+}

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

@@ -0,0 +1,98 @@
+import { SulaTextareaStatus } from './model/sula-textarea.model';
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        value: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        status: {
+            control: {
+                type: string;
+            };
+            options: SulaTextareaStatus[];
+            defaultValue: SulaTextareaStatus;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        label: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        placeholder: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        disabled: {
+            control: string;
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        helpText: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        maxLength: {
+            control: string;
+            defaultValue: number;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        rows: {
+            control: string;
+            defaultValue: number;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        valueChanged: {
+            action: string;
+            description: string;
+        };
+        focusedOn: {
+            action: string;
+            description: string;
+        };
+        focusedOut: {
+            action: string;
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const WithValue: any;
+export declare const WithHelpText: any;
+export declare const WithMaxLength: any;
+export declare const LargeTextarea: any;
+export declare const SmallTextarea: any;
+export declare const Error: any;
+export declare const Disabled: any;
+export declare const WithMaxLengthAndValue: any;
+export declare const ErrorWithMaxLength: any;
+export declare const CompleteExample: any;