@rededor/cura 1.5.0 → 1.6.0-alpha.0

package/dist/esm/static-061aa850.js

@@ -0,0 +1,74 @@
+/**
+ * Static
+ */
+const Static = {
+    /* Colors */
+    color: {
+        success: {
+            '100': '223,246,233',
+            '300': '148,225,181',
+            '500': '95,210,144',
+            '700': '49,115,77',
+            '900': '19,42,29',
+        },
+        info: {
+            '100': '207,226,255',
+            '300': '149,191,255',
+            '500': '110,168,255',
+            '700': '66,100,153',
+            '900': '37,56,85',
+        },
+        error: {
+            '100': '251,221,221',
+            '300': '242,143,143',
+            '500': '235,87,87',
+            '700': '157,58,58',
+            '900': '47,17,17',
+        },
+        warning: {
+            '100': '252,250,196',
+            '300': '248,244,137',
+            '500': '245,239,78',
+            '700': '108,106,32',
+            '900': '49,48,16',
+        },
+        neutral: {
+            '0': '255,255,255',
+            '100': '246,246,246',
+            '200': '233,233,233',
+            '300': '226,226,226',
+            '400': '212,212,212',
+            '500': '183,183,183',
+            '600': '146,146,146',
+            '700': '110,110,110',
+            '800': '74,74,74',
+            '900': '38,38,38',
+        },
+    },
+    breakpoints: {
+        xsmall: {
+            min: 0,
+            max: 480
+        },
+        small: {
+            min: 481,
+            max: 768
+        },
+        medium: {
+            min: 769,
+            max: 992
+        },
+        large: {
+            min: 993,
+            max: 1920
+        },
+        xlarge: {
+            min: 1921,
+            max: 4096
+        }
+    }
+};
+
+export { Static as S };
+
+//# sourceMappingURL=static-061aa850.js.map

package/dist/esm/static-061aa850.js.map

@@ -0,0 +1 @@
+{"file":"static-061aa850.js","mappings":"AAAA;;;MAGa,MAAM,GAAG;;IAEpB,KAAK,EAAE;QACL,OAAO,EAAE;YACP,KAAK,EAAE,aAAa;YACpB,KAAK,EAAE,aAAa;YACpB,KAAK,EAAE,YAAY;YACnB,KAAK,EAAE,WAAW;YAClB,KAAK,EAAE,UAAU;SAClB;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,aAAa;YACpB,KAAK,EAAE,aAAa;YACpB,KAAK,EAAE,aAAa;YACpB,KAAK,EAAE,YAAY;YACnB,KAAK,EAAE,UAAU;SAClB;QACD,KAAK,EAAE;YACL,KAAK,EAAE,aAAa;YACpB,KAAK,EAAE,aAAa;YACpB,KAAK,EAAE,WAAW;YAClB,KAAK,EAAE,WAAW;YAClB,KAAK,EAAE,UAAU;SAClB;QACD,OAAO,EAAE;YACP,KAAK,EAAE,aAAa;YACpB,KAAK,EAAE,aAAa;YACpB,KAAK,EAAE,YAAY;YACnB,KAAK,EAAE,YAAY;YACnB,KAAK,EAAE,UAAU;SAClB;QACD,OAAO,EAAE;YACP,GAAG,EAAE,aAAa;YAClB,KAAK,EAAE,aAAa;YACpB,KAAK,EAAE,aAAa;YACpB,KAAK,EAAE,aAAa;YACpB,KAAK,EAAE,aAAa;YACpB,KAAK,EAAE,aAAa;YACpB,KAAK,EAAE,aAAa;YACpB,KAAK,EAAE,aAAa;YACpB,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,UAAU;SAClB;KACF;IACD,WAAW,EAAE;QACX,MAAM,EAAE;YACN,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,GAAG;SACT;QACD,KAAK,EAAE;YACL,GAAG,EAAE,GAAG;YACR,GAAG,EAAE,GAAG;SACT;QACD,MAAM,EAAE;YACN,GAAG,EAAE,GAAG;YACR,GAAG,EAAE,GAAG;SACT;QACD,KAAK,EAAE;YACL,GAAG,EAAE,GAAG;YACR,GAAG,EAAE,IAAI;SACV;QACD,MAAM,EAAE;YACN,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;SACV;KACF;;;;;","names":[],"sources":["src/api/theme-presets/static.ts"],"sourcesContent":["/**\n * Static\n */\nexport const Static = {\n  /* Colors */\n  color: {\n    success: {\n      '100': '223,246,233',\n      '300': '148,225,181',\n      '500': '95,210,144',\n      '700': '49,115,77',\n      '900': '19,42,29',\n    },\n    info: {\n      '100': '207,226,255',\n      '300': '149,191,255',\n      '500': '110,168,255',\n      '700': '66,100,153',\n      '900': '37,56,85',\n    },\n    error: {\n      '100': '251,221,221',\n      '300': '242,143,143',\n      '500': '235,87,87',\n      '700': '157,58,58',\n      '900': '47,17,17',\n    },\n    warning: {\n      '100': '252,250,196',\n      '300': '248,244,137',\n      '500': '245,239,78',\n      '700': '108,106,32',\n      '900': '49,48,16',\n    },\n    neutral: {\n      '0': '255,255,255',\n      '100': '246,246,246',\n      '200': '233,233,233',\n      '300': '226,226,226',\n      '400': '212,212,212',\n      '500': '183,183,183',\n      '600': '146,146,146',\n      '700': '110,110,110',\n      '800': '74,74,74',\n      '900': '38,38,38',\n    },\n  },\n  breakpoints: {\n    xsmall: {\n      min: 0,\n      max: 480\n    },\n    small: {\n      min: 481,\n      max: 768\n    },\n    medium: {\n      min: 769,\n      max: 992\n    },\n    large: {\n      min: 993,\n      max: 1920\n    },\n    xlarge: {\n      min: 1921,\n      max: 4096\n    }\n  }\n};\n"],"version":3}

package/dist/types/api/cura-api.d.ts

@@ -3,4 +3,5 @@ export default class CuraAPI {
     theme: APIThemeFunctions;
     localAssetsPath: string;
     constructor(config?: CuraConfig);
+    _addGlobalClasses(): void;
 }

package/dist/types/api/cura-api.type.d.ts

@@ -61,6 +61,6 @@ export interface APIThemeFunctions {
         getSpacing(): string;
     };
     breakpoints: {
-        get(): any;
+        get(size?: string, position?: string): any;
     };
 }

package/dist/types/components/cura-dropdown-search-new/cura-dropdown-search-category/cura-dropdown-search-category.d.ts

@@ -0,0 +1,6 @@
+export declare class CuraDropdownSearchCategory {
+    styles: {};
+    theme: import("../../../api/cura-api.type").APIThemeFunctions;
+    connectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/cura-dropdown-search-new/cura-dropdown-search-category/cura-dropdown-search-category.stories.d.ts

@@ -0,0 +1,27 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    render: (args: any) => string;
+    argTypes: {
+        content: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const DropdownSearchCategory: {
+    args: {
+        content: string;
+    };
+};

package/dist/types/components/cura-dropdown-search-new/cura-dropdown-search-new.d.ts

@@ -0,0 +1,127 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { FixedElementScrollBehavior } from '../../utils/FixedElementScrollBehavior';
+export declare class CuraDropdownSearchNew {
+    host: HTMLElement;
+    /**
+     * Name of the field.
+     * Required.
+     */
+    name: string;
+    /**
+     * Size of the dropdown search component
+     * Values: 'small', 'medium' or 'large' (default).
+     */
+    size: 'small' | 'medium' | 'large' | string;
+    /**
+     * Define component status.
+     * Values: 'error' or 'default'.
+     */
+    status: 'error' | 'default' | string;
+    /**
+     * Disabled state. Default: false.
+     */
+    disabled: boolean;
+    /**
+     * Field is required. Default: false.
+     */
+    required: boolean;
+    /**
+     * The placeholder text.
+     */
+    placeholder: string;
+    /**
+     * The label.
+     */
+    label: string;
+    /**
+     * Custom icon name. Default: search.
+     */
+    icon: string;
+    /**
+     * CSS max-height property for dropdown item.
+     * Can also be used by css property --max-height.
+     * Default: 400px
+     */
+    maxheight: string;
+    handleMaxHeightChange(newValue: string, oldValue: string): void;
+    /**
+     * Readonly property value.
+     * Represents the term on the search input field.
+     */
+    value: string;
+    /**
+     * Delay in milliseconds to dispatch search events.
+     * Default: 400
+     */
+    searchdelay: number;
+    /**
+     * Min chars to dispatch search events.
+     * Default: 3
+     */
+    searchminchars: number;
+    /**
+     * Set focus to input field.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Select by optionid property of a selectable option component.
+     */
+    selectOption(optionid: string): Promise<void>;
+    termchange: EventEmitter<string>;
+    optionselect: EventEmitter<string>;
+    styles: {};
+    zoomState: boolean;
+    isOnFocus: boolean;
+    scrollBehavior: FixedElementScrollBehavior;
+    weights: any;
+    breakpoints: any;
+    isMobile: boolean;
+    resizeTimeout: any;
+    resizeTimeoutMs: number;
+    focusTimeout: any;
+    focusTimeoutMs: number;
+    blurTimeout: any;
+    blurTimeoutMs: number;
+    valueTimeout: any;
+    dropdownElement: HTMLDivElement;
+    selectedOptionElement: any;
+    highlightedElement: any;
+    highlightedIndex: number;
+    dropdownItems: any[];
+    dropdownSelectableItems: any[];
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handleSlotChange: () => void;
+    handleWindowResize: () => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    handleFocusout: () => void;
+    handleBackClick: () => void;
+    handleOptionActionClick: (ev: CustomEvent) => void;
+    handleInputClear: (ev: CustomEvent) => void;
+    handleSelectOption: (ev: CustomEvent) => void;
+    handleInputValueChange: (ev: CustomEvent) => void;
+    handleDropdownMouseOver: () => void;
+    handleKeyDown: (ev: KeyboardEvent) => void;
+    moveHighlight(direction: 'next' | 'prev'): void;
+    clearHighlight(): void;
+    selectHighlight(): void;
+    setValue(value: string): void;
+    _selectOption(optionid: string): void;
+    clearSelectedOptions(): void;
+    getSlotElements(): void;
+    enterZoom(): void;
+    exitZoom(): void;
+    getInputElement: () => HTMLCuraInputTextElement;
+    setZoomHeight(): void;
+    getClasses(): {
+        "component-container": boolean;
+        mobile: boolean;
+        zoom: boolean;
+        "dropdown-visible": boolean;
+        error: boolean;
+    };
+    _preventEvent: (ev: Event) => void;
+    render(): any;
+}

package/dist/types/components/cura-dropdown-search-new/cura-dropdown-search-new.stories.d.ts

@@ -0,0 +1,186 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    render: (args: any) => string;
+    argTypes: {
+        name: {
+            control: string;
+            description: string;
+            required: boolean;
+            table: {
+                category: string;
+            };
+        };
+        size: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        status: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
+        required: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
+        placeholder: {
+            control: string;
+            description: string;
+            required: boolean;
+            table: {
+                category: string;
+            };
+        };
+        label: {
+            control: string;
+            description: string;
+            required: boolean;
+            table: {
+                category: string;
+            };
+        };
+        icon: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        maxheight: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        searchdelay: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        searchminchars: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        value: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        helperText: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        termchange: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        optionselect: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        setFocus: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        selectOption: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const DropdownSearchNew: {
+    args: {
+        name: string;
+        size: string;
+        label: string;
+        placeholder: string;
+        status: string;
+        icon: string;
+        disabled: boolean;
+        required: boolean;
+        maxheight: string;
+        searchdelay: string;
+        searchminchars: string;
+        helperText: string;
+    };
+};

package/dist/types/components/cura-dropdown-search-new/cura-dropdown-search-not-found/cura-dropdown-search-not-found.d.ts

@@ -0,0 +1,6 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export declare class CuraDropdownSearchNotFound {
+    actionclick: EventEmitter<any>;
+    handleClick: (ev: Event) => void;
+    render(): any;
+}

package/dist/types/components/cura-dropdown-search-new/cura-dropdown-search-not-found/cura-dropdown-search-not-found.stories.d.ts

@@ -0,0 +1,27 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    render: (args: any) => string;
+    argTypes: {
+        content: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const DropdownSearchNotFound: {
+    args: {
+        content: string;
+    };
+};

package/dist/types/components/cura-dropdown-search-new/cura-dropdown-search-option-new/cura-dropdown-search-option-new.d.ts

@@ -0,0 +1,44 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export declare class CuraDropdownSearchOptionNew {
+    /**
+     * Required. The value for item term reference.
+     * This will set the value of the seaarch field when the option is selected.
+     */
+    value: string;
+    /**
+     * Required. The unique identifier for the option.
+     * This will reference the option element for the parent.
+     */
+    optionid: string;
+    /**
+     * Enable selection for this option.
+     * Default is true.
+     */
+    selectable: boolean;
+    /**
+     * Selected state.
+     * This will be managed by the parent component.
+     * Default is false.
+     */
+    selected: boolean;
+    /**
+     * Highlighted state.
+     * This will be managed by the parent component.
+     * Default is false.
+     */
+    highlighted: boolean;
+    actionclick: EventEmitter<any>;
+    selectoption: EventEmitter<string>;
+    styles: {};
+    theme: import("../../../api/cura-api.type").APIThemeFunctions;
+    connectedCallback(): void;
+    handleSelect(): void;
+    handleActionsClick(): void;
+    getClasses(): {
+        'component-container': boolean;
+        selected: boolean;
+        highlighted: boolean;
+        'not-selectable': boolean;
+    };
+    render(): any;
+}

package/dist/types/components/cura-dropdown-search-new/cura-dropdown-search-option-new/cura-dropdown-search-option-new.stories.d.ts

@@ -0,0 +1,72 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    render: (args: any) => string;
+    argTypes: {
+        value: {
+            control: string;
+            description: string;
+            required: boolean;
+            table: {
+                category: string;
+            };
+        };
+        optionid: {
+            control: string;
+            description: string;
+            required: boolean;
+            table: {
+                category: string;
+            };
+        };
+        selectable: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
+        image: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        default: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        actions: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const DropdownSearchOptionNew: {
+    args: {
+        value: string;
+        optionid: string;
+        selectable: boolean;
+        default: string;
+        image: string;
+        actions: string;
+    };
+};

package/dist/types/components/forms/cura-input-text/cura-input-text.d.ts

@@ -3,18 +3,19 @@ import { FactoryArg, InputMask } from 'imask';
 import { MaskOptionsMap } from './mask-presets/input-mask-presets';
 export type MaskPreset = keyof MaskOptionsMap;
 export declare class CuraInputText {
+    host: HTMLElement;
     /**
      * Mode of the input: 'default' or 'transparent' (default: 'default')
      */
-    mode: 'default' | 'transparent';
+    mode: 'default' | 'transparent' | string;
     /**
      * Indicates input status(default: default)
      */
-    status: 'error' | 'success' | 'default';
+    status: 'error' | 'success' | 'default' | string;
     /**
      * Size of the input mode default: 'small', 'medium', or 'large' (default: 'medium')
      */
-    size: 'small' | 'medium' | 'large';
+    size: 'small' | 'medium' | 'large' | string;
     /**
      * Type of the input: 'text', 'number' (default: 'text')
      */
@@ -38,7 +39,7 @@ export declare class CuraInputText {
     /**
      * Value of the input field
      */
-    value?: string | number;
+    value: string | number;
     /**
      * Whether to display a cura icon (default: null)
      */
@@ -114,8 +115,14 @@ export declare class CuraInputText {
      * @type {EventEmitter<string | number>}
      */
     valueChange: EventEmitter<string | number>;
+    /**
+     * Emitted when the clear button is clicked
+     * @type {EventEmitter<string | number>}
+     */
+    inputClear: EventEmitter<string | number>;
     internals: ElementInternals;
     inputRef: HTMLInputElement;
+    setFocus(): Promise<void>;
     /**
      * Instance of InputMask is returned when IMask constructor is called.
      */
@@ -123,6 +130,7 @@ export declare class CuraInputText {
     weights: {
         [key: string]: string;
     };
+    breakpoints: any;
     /**
      * Callback to restore the switch state from the form.
      */

package/dist/types/components/forms/cura-label/cura-label.d.ts

@@ -49,6 +49,7 @@ export declare class CuraLabel {
         '--margin-block': string;
         '--font-size-base': string;
         '--line-height': string;
+        '--color-body': string;
     };
     render(): any;
 }

package/dist/types/components/text/cura-heading/cura-heading.d.ts

@@ -24,7 +24,6 @@ export declare class CuraHeading {
      * Values: Color from design system scheme. Default to the font color from the theme.
      */
     color: string;
-    handleChangeColor(): void;
     /**
      * CSS margin-block property values.
      * Default to 1.25em
@@ -32,7 +31,7 @@ export declare class CuraHeading {
     marginBlock: string;
     /**
      * CSS line-height property values.
-     * Default to 140%
+     * Default to 130%
      */
     lineHeight: string;
     /**
@@ -54,8 +53,8 @@ export declare class CuraHeading {
         '--font-size-base': string;
         '--line-height': string;
         '--color-body': string;
+        '--color-spot': string;
     };
-    setColors(): void;
     getHeadingTag(): any;
     render(): any;
 }