@sula-tech/webcomponents 0.1.1 → 0.2.0

package/dist/esm/webcomponents.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-9bf8f892.js';
-export { s as setNonce } from './index-9bf8f892.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-1dc4ae53.js';
+export { s as setNonce } from './index-1dc4ae53.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_3",[[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"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
+  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);
 });
 
 //# sourceMappingURL=webcomponents.js.map

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

@@ -1,7 +1,6 @@
 import { SulaAvatarSize } from './model/sula-avatar.model';
 declare const _default: {
     title: string;
-    decorators: ((SulaAvatar: any) => string)[];
     tags: string[];
     argTypes: {
         size: {

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

@@ -94,3 +94,5 @@ export declare const LargeButton: any;
 export declare const DangerButton: any;
 export declare const NegativeButton: any;
 export declare const DisabledButton: any;
+export declare const LoadingButton: any;
+export declare const IconAndTextButton: any;

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

@@ -1,6 +1,5 @@
 declare const _default: {
     title: string;
-    decorators: ((SulaIcon: any) => string)[];
     tags: string[];
     argTypes: {
         icon: {
@@ -22,4 +21,8 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Example: any;
+export declare const Default: any;
+export declare const WithCustomClass: any;
+export declare const ArrowIcon: any;
+export declare const CalendarIcon: any;
+export declare const SearchIcon: any;

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

@@ -0,0 +1,8 @@
+export declare enum SulaTextfieldType {
+    Text = "text",
+    Password = "password"
+}
+export declare enum SulaTextfieldStatus {
+    Default = "default",
+    Error = "error"
+}

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

@@ -0,0 +1,74 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SulaTextfieldStatus, SulaTextfieldType } from './model/sula-textfield.model';
+export declare class SulaTextfield {
+    /**
+     * Value for the input.
+     */
+    value?: string;
+    /**
+     * The textfield type
+     */
+    type: SulaTextfieldType;
+    /**
+     * The textfield status
+     */
+    status: SulaTextfieldStatus;
+    /**
+     * The textfield label
+     */
+    label: string;
+    /**
+     * The textfield placeholder
+     */
+    placeholder: string;
+    /**
+     * The textfield is disabled
+     */
+    disabled: boolean;
+    /**
+     * The help text for textfield
+     */
+    helpText?: string;
+    /**
+     * The textfield max length
+     */
+    maxLength?: number;
+    /**
+     * The textfield icon
+     */
+    icon?: string;
+    /**
+     * Event emitted when input value changes.
+     */
+    valueChanged: EventEmitter<string>;
+    /**
+     * Event emitted when input is focused.
+     */
+    focusedOn: EventEmitter<void>;
+    /**
+     * Event emitted when input is focused out.
+     */
+    focusedOut: EventEmitter<void>;
+    inputIsOpen: boolean;
+    textValue: string;
+    showPassword: boolean;
+    inputIsFocused: boolean;
+    inputContainer: HTMLDivElement;
+    inputElement: HTMLInputElement;
+    labelElement: HTMLDivElement;
+    node?: HTMLElement;
+    handleClick(event: Event): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    handleInputClick: () => void;
+    toggleOptions(inputIsOpen: boolean): void;
+    changeElementsStyle(): void;
+    handleInputChanges: (event: InputEvent) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    handleInputFocus: () => void;
+    handleIconClick: (event: MouseEvent) => void;
+    handlePasswordIconClicked(): void;
+    getInputIcon(): string;
+    render(): any;
+}

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

@@ -0,0 +1,108 @@
+import { SulaTextfieldStatus, SulaTextfieldType } from './model/sula-textfield.model';
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        value: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        type: {
+            control: {
+                type: string;
+            };
+            options: SulaTextfieldType[];
+            defaultValue: SulaTextfieldType;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
+        status: {
+            control: {
+                type: string;
+            };
+            options: SulaTextfieldStatus[];
+            defaultValue: SulaTextfieldStatus;
+            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;
+            };
+        };
+        icon: {
+            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 WithValue: any;
+export declare const WithHelpText: any;
+export declare const WithMaxLength: any;
+export declare const WithIcon: any;
+export declare const Password: any;
+export declare const Error: any;
+export declare const Disabled: any;
+export declare const WithIconAndHelpText: any;
+export declare const ErrorWithMaxLength: any;

package/dist/types/components.d.ts

@@ -7,8 +7,10 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { SulaAvatarSize } from "./components/sula-avatar/model/sula-avatar.model";
 import { SulaButtonAppearance, SulaButtonSize, SulaButtonStatus, SulaButtonType } from "./components/sula-button/model/sula-button.model";
+import { SulaTextfieldStatus, SulaTextfieldType } from "./components/sula-textfield/model/sula-textfield.model";
 export { SulaAvatarSize } from "./components/sula-avatar/model/sula-avatar.model";
 export { SulaButtonAppearance, SulaButtonSize, SulaButtonStatus, SulaButtonType } from "./components/sula-button/model/sula-button.model";
+export { SulaTextfieldStatus, SulaTextfieldType } from "./components/sula-textfield/model/sula-textfield.model";
 export namespace Components {
     interface SulaAvatar {
         /**
@@ -72,11 +74,53 @@ export namespace Components {
          */
         "icon": string;
     }
+    interface SulaTextfield {
+        /**
+          * The textfield is disabled
+         */
+        "disabled": boolean;
+        /**
+          * The help text for textfield
+         */
+        "helpText"?: string;
+        /**
+          * The textfield icon
+         */
+        "icon"?: string;
+        /**
+          * The textfield label
+         */
+        "label": string;
+        /**
+          * The textfield max length
+         */
+        "maxLength"?: number;
+        /**
+          * The textfield placeholder
+         */
+        "placeholder": string;
+        /**
+          * The textfield status
+         */
+        "status": SulaTextfieldStatus;
+        /**
+          * The textfield type
+         */
+        "type": SulaTextfieldType;
+        /**
+          * Value for the input.
+         */
+        "value"?: string;
+    }
 }
 export interface SulaButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSulaButtonElement;
 }
+export interface SulaTextfieldCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSulaTextfieldElement;
+}
 declare global {
     interface HTMLSulaAvatarElement extends Components.SulaAvatar, HTMLStencilElement {
     }
@@ -107,10 +151,30 @@ declare global {
         prototype: HTMLSulaIconElement;
         new (): HTMLSulaIconElement;
     };
+    interface HTMLSulaTextfieldElementEventMap {
+        "valueChanged": string;
+        "focusedOn": void;
+        "focusedOut": void;
+    }
+    interface HTMLSulaTextfieldElement extends Components.SulaTextfield, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSulaTextfieldElementEventMap>(type: K, listener: (this: HTMLSulaTextfieldElement, ev: SulaTextfieldCustomEvent<HTMLSulaTextfieldElementEventMap[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 HTMLSulaTextfieldElementEventMap>(type: K, listener: (this: HTMLSulaTextfieldElement, ev: SulaTextfieldCustomEvent<HTMLSulaTextfieldElementEventMap[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 HTMLSulaTextfieldElement: {
+        prototype: HTMLSulaTextfieldElement;
+        new (): HTMLSulaTextfieldElement;
+    };
     interface HTMLElementTagNameMap {
         "sula-avatar": HTMLSulaAvatarElement;
         "sula-button": HTMLSulaButtonElement;
         "sula-icon": HTMLSulaIconElement;
+        "sula-textfield": HTMLSulaTextfieldElement;
     }
 }
 declare namespace LocalJSX {
@@ -181,10 +245,61 @@ declare namespace LocalJSX {
          */
         "icon"?: string;
     }
+    interface SulaTextfield {
+        /**
+          * The textfield is disabled
+         */
+        "disabled"?: boolean;
+        /**
+          * The help text for textfield
+         */
+        "helpText"?: string;
+        /**
+          * The textfield icon
+         */
+        "icon"?: string;
+        /**
+          * The textfield label
+         */
+        "label"?: string;
+        /**
+          * The textfield max length
+         */
+        "maxLength"?: number;
+        /**
+          * Event emitted when input is focused.
+         */
+        "onFocusedOn"?: (event: SulaTextfieldCustomEvent<void>) => void;
+        /**
+          * Event emitted when input is focused out.
+         */
+        "onFocusedOut"?: (event: SulaTextfieldCustomEvent<void>) => void;
+        /**
+          * Event emitted when input value changes.
+         */
+        "onValueChanged"?: (event: SulaTextfieldCustomEvent<string>) => void;
+        /**
+          * The textfield placeholder
+         */
+        "placeholder"?: string;
+        /**
+          * The textfield status
+         */
+        "status"?: SulaTextfieldStatus;
+        /**
+          * The textfield type
+         */
+        "type"?: SulaTextfieldType;
+        /**
+          * Value for the input.
+         */
+        "value"?: string;
+    }
     interface IntrinsicElements {
         "sula-avatar": SulaAvatar;
         "sula-button": SulaButton;
         "sula-icon": SulaIcon;
+        "sula-textfield": SulaTextfield;
     }
 }
 export { LocalJSX as JSX };
@@ -194,6 +309,7 @@ declare module "@stencil/core" {
             "sula-avatar": LocalJSX.SulaAvatar & JSXBase.HTMLAttributes<HTMLSulaAvatarElement>;
             "sula-button": LocalJSX.SulaButton & JSXBase.HTMLAttributes<HTMLSulaButtonElement>;
             "sula-icon": LocalJSX.SulaIcon & JSXBase.HTMLAttributes<HTMLSulaIconElement>;
+            "sula-textfield": LocalJSX.SulaTextfield & JSXBase.HTMLAttributes<HTMLSulaTextfieldElement>;
         }
     }
 }