@gov-design-system-ce/components 4.2.8 → 4.6.0

package/dist/dist/types/components/gov-form/input/gov-form-input.d.ts

@@ -0,0 +1,178 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { FormInputSizesType, InputType, Type } from "./constants";
+import { FormInputEvent } from "./gov-form-input.types";
+import { Nullable } from "../../../types/interfaces";
+import { Attributes } from "../../../helpers/Dom/attribute";
+export declare class GovFormInput {
+    private f;
+    private readonly h;
+    private inputRef?;
+    private readonly inputId;
+    private attributeObserver;
+    constructor();
+    host: HTMLGovFormInputElement;
+    /**
+     * Value of input
+     */
+    value: string;
+    /**
+     * Custom input identifier.
+     */
+    readonly identifier: string;
+    /**
+     * Indicates the entered value of child form element does conform to the format expected by the application.
+     */
+    readonly success: boolean;
+    /**
+     * Input’s size.
+     */
+    readonly size?: FormInputSizesType;
+    /**
+     * Name of the input.
+     */
+    readonly name: string;
+    /**
+     * Generates a texarea for the possibility of multiple lines
+     */
+    readonly multiline: boolean;
+    /**
+     * Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows
+     */
+    readonly rows: number;
+    /**
+     * Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols
+     */
+    readonly cols: number;
+    /**
+     * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.
+     * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
+     */
+    readonly required: boolean;
+    /**
+     * Makes the input component disabled.
+     */
+    readonly disabled: boolean;
+    /**
+     * Text that appears in the form control when it has no value set
+     */
+    readonly placeholder: string;
+    /**
+     * The value is not editable
+     */
+    readonly readonly: boolean;
+    /**
+     * Minimum length (number of characters) of value
+     */
+    readonly minlength: number;
+    /**
+     * Maximum length (number of characters) of value
+     */
+    readonly maxlength: number;
+    /**
+     * Minimum value that is acceptable and valid for the input containing the attribute
+     */
+    readonly min?: string | number;
+    /**
+     * Maximum value that is acceptable and valid for the input containing the attribute
+     */
+    readonly max?: string | number;
+    /**
+     * Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autocomplete
+     */
+    readonly autocomplete: boolean;
+    /**
+     * Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autocorrect
+     */
+    readonly autocorrect: boolean;
+    /**
+     * Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck
+     */
+    readonly spellcheck: boolean;
+    /**
+     * Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang
+     */
+    readonly inputLang: string;
+    /**
+     * Defined the visual style of input
+     */
+    readonly type?: Type;
+    /**
+     * Same as original parameter
+     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
+     */
+    readonly inputType: InputType;
+    /**
+     * Same as original parameter
+     * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/input_role
+     */
+    readonly role: Nullable<string>;
+    /**
+     * Indicates the entered value does not conform to the format expected by the application.
+     */
+    readonly invalid: boolean;
+    /**
+     * Accessible text for password display
+     */
+    readonly accessibleShowPasswordLabel = "Zobrazit heslo";
+    /**
+     * Accessible text to hide the password
+     */
+    readonly accessibleHidePasswordLabel = "Skr\u00FDt heslo";
+    /**
+     * Emitted when the input has focus.
+     */
+    govFocus: EventEmitter<FormInputEvent>;
+    /**
+     * Emitted when the input loses focus.
+     */
+    govBlur: EventEmitter<FormInputEvent>;
+    /**
+     * Emitted when the input change value.
+     */
+    govInput: EventEmitter<FormInputEvent>;
+    /**
+     * Emitted when the input change value.
+     */
+    govKeyUp: EventEmitter<FormInputEvent>;
+    /**
+     * Emitted when the input change value.
+     */
+    govHydrated: EventEmitter<void>;
+    /**
+     * Emitted when the input change value.
+     */
+    govKeyDown: EventEmitter<FormInputEvent>;
+    focused: boolean;
+    showPassword: boolean;
+    validateSize(newValue: string): void;
+    watchControlAttrs(): void;
+    inheritedAttributes: Attributes;
+    private passControlAttrs;
+    componentDidLoad(): void;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    onAriaAttributeChange(attributeName: string, newValue: string): void;
+    disconnectedCallback(): void;
+    render(): any;
+    private onFocusHandler;
+    private onBlurHandler;
+    private onKeyUpHandler;
+    private onKeyDownHandler;
+    private onInputHandler;
+    /**
+     * Returns the current state of the component
+     */
+    setFocus(options?: FocusOptions): Promise<void>;
+    /**
+     * Sets the ordered value of the element
+     */
+    setValue(value: string): Promise<void>;
+    /**
+     * Clears input value
+     */
+    clearValue(): Promise<void>;
+    /**
+     * Returns an instance of the native html input element
+     */
+    getRef(): Promise<HTMLInputElement>;
+}

package/dist/dist/types/components/gov-form/input/gov-form-input.types.d.ts

@@ -0,0 +1,4 @@
+import { GovBaseEvent } from "../../../types/event.types";
+export interface FormInputEvent extends GovBaseEvent {
+    value: string;
+}

package/dist/dist/types/components/gov-form/label/constants.d.ts

@@ -0,0 +1,8 @@
+import { Sizes } from "../../../core/constants/sizes";
+import { ValueOf } from "../../../types/interfaces";
+export declare const FormLabelSizes: Pick<typeof Sizes, "_XS" | "_S" | "_M" | "_L" | "_XL">;
+export type FormLabelSizesTypes = `${ValueOf<typeof FormLabelSizes>}`;
+export declare const FormLabelClass: {
+    root: string;
+    label: string;
+};

package/dist/dist/types/components/gov-form/label/gov-form-label.d.ts

@@ -0,0 +1,26 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { FormLabelSizesTypes } from './constants';
+export declare class GovFormLabel {
+    /**
+     * Identifier for label.
+     */
+    readonly identifier: string;
+    /**
+     * Label's size.
+     */
+    readonly size?: FormLabelSizesTypes;
+    /**
+     * Set whether the input is required or not.
+     */
+    readonly required: boolean;
+    /**
+     * Use label as a legend for better accessibility.
+     * Note: Don't forget to set the fieldset attribute of the gov-form-control component
+     */
+    readonly legend: boolean;
+    /**
+     * Emitted when the label click.
+     */
+    govClick: EventEmitter<PointerEvent>;
+    render(): any;
+}

package/dist/dist/types/components/gov-form/message/constants.d.ts

@@ -0,0 +1,11 @@
+import { Colors } from '../../../core/constants/colors';
+import { ValueOf } from '../../../types/interfaces';
+import { Sizes } from "../../../core/constants/sizes";
+export declare const FormMessageColors: Pick<typeof Colors, "NEUTRAL" | "SUCCESS" | "ERROR" | "WARNING">;
+export type FormMessageColorType = `${ValueOf<typeof FormMessageColors>}`;
+export declare const FormMessageSizes: Pick<typeof Sizes, "_XS" | "_S" | "_M" | "_L" | "_XL">;
+export type FormMessageSizesTypes = `${ValueOf<typeof FormMessageSizes>}`;
+export declare const FormMessageClass: {
+    root: string;
+    content: string;
+};

package/dist/dist/types/components/gov-form/message/gov-form-message.d.ts

@@ -0,0 +1,23 @@
+import { FormMessageSizesTypes, FormMessageColorType } from './constants';
+import { GovHost } from '../../../helpers/Dom/template.types';
+export declare class GovFormMessage {
+    h: GovHost;
+    private readonly messageId;
+    constructor();
+    host: HTMLGovFormMessageElement;
+    /**
+     * Style variation of the message.
+     */
+    readonly color?: FormMessageColorType;
+    /**
+     * Message's size.
+     */
+    readonly size?: FormMessageSizesTypes;
+    validateColor(newValue: string): void;
+    componentWillLoad(): void;
+    render(): any;
+    /**
+     * Returns unique identifier of message
+     */
+    identifier(): Promise<string>;
+}

package/dist/dist/types/components/gov-form/multiselect/constants.d.ts

@@ -0,0 +1,10 @@
+import { Sizes } from '../../../core/constants/sizes';
+import { ValueOf } from '../../../types/interfaces';
+export declare const FormMultiselectSizes: Pick<typeof Sizes, "_XS" | "_S" | "_M" | "_L" | "_XL">;
+export type FormMultiselectSizesType = `${ValueOf<typeof FormMultiselectSizes>}`;
+export declare const FormMultiSelectClass: {
+    root: string;
+    wrap: string;
+    list: string;
+    item: string;
+};

package/dist/dist/types/components/gov-form/multiselect/gov-form-multi-select.d.ts

@@ -0,0 +1,127 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { FormMultiselectSizesType } from './constants';
+import { FormMultiselectEvent, GovFormMultiSelectItem, GovFormMultiSelectSelectedItem } from './gov-form-multi-select.types';
+import { Attributes } from "../../../helpers/Dom/attribute";
+export declare class GovFormMultiSelect {
+    private f;
+    private readonly h;
+    private selectRef?;
+    private autocompleteRef?;
+    private attributeObserver;
+    private readonly selectId;
+    private readonly listId;
+    constructor();
+    host: HTMLGovFormSelectElement;
+    /**
+     * Value of multi-select
+     */
+    value: string | GovFormMultiSelectSelectedItem[];
+    /**
+     * Options of multi-select
+     */
+    options?: string | GovFormMultiSelectItem[];
+    /**
+     * Custom select identifier.
+     */
+    readonly identifier: string;
+    /**
+     * Custom select placeholder.
+     */
+    readonly placeholder: string;
+    /**
+     * Select’s size.
+     */
+    readonly size?: FormMultiselectSizesType;
+    /**
+     * Name of the select.
+     */
+    readonly name: string;
+    /**
+     * Option to hide the list of selected items
+     */
+    readonly hideSelectedList: boolean;
+    /**
+     * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.
+     * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
+     */
+    readonly required: boolean;
+    /**
+     * Makes the select component disabled.
+     * This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies.
+     */
+    readonly disabled: boolean;
+    /**
+     * Indicates the entered value does not conform to the format expected by the application.
+     */
+    readonly invalid: boolean;
+    /**
+     * Indicates the entered value of child form element does conform to the format expected by the application.
+     */
+    readonly success: boolean;
+    /**
+     * Custom message for when there is a blank sheet
+     */
+    readonly messageEmpty: string;
+    /**
+     * Custom message for when data is loaded
+     */
+    readonly messageLoading: string;
+    /**
+     * Emitted when the select has focus.
+     */
+    govFocus: EventEmitter<FormMultiselectEvent>;
+    /**
+     * Emitted when the select loses focus.
+     */
+    govBlur: EventEmitter<FormMultiselectEvent>;
+    /**
+     * Emitted when the select change value.
+     */
+    govChange: EventEmitter<FormMultiselectEvent>;
+    /**
+     * Emitted when an item is selected
+     */
+    govSelect: EventEmitter<FormMultiselectEvent>;
+    /**
+     * Emitted when an item is removed
+     */
+    govRemove: EventEmitter<FormMultiselectEvent>;
+    focused: boolean;
+    valueState: string;
+    selectedOptionsState: GovFormMultiSelectSelectedItem[];
+    optionsState: GovFormMultiSelectItem[];
+    validateSize(newValue: string): void;
+    watchOptions(newValue: string | GovFormMultiSelectItem[]): void;
+    watchValue(newValue: string | GovFormMultiSelectItem[]): void;
+    inheritedAttributes: Attributes;
+    componentDidLoad(): void;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    onAriaAttributeChange(attributeName: string, newValue: string): void;
+    private getAvailableOptions;
+    private initAutocomplete;
+    private selectedValueIndex;
+    private getOptionElement;
+    private getOption;
+    private selectOption;
+    private removeOption;
+    componentDidRender(): Promise<void>;
+    render(): any;
+    private onFocusHandler;
+    private onBlurHandler;
+    private onInputHandler;
+    private onSelectHandler;
+    private onTagRemove;
+    /**
+     * Returns the current state of the component
+     */
+    setFocus(options?: FocusOptions): Promise<void>;
+    /**
+     * Sets the ordered value of the element
+     */
+    setValue(value: string): Promise<void>;
+    /**
+     * Returns an instance of the native html select element
+     */
+    getRef(): Promise<HTMLSelectElement>;
+}

package/dist/dist/types/components/gov-form/multiselect/gov-form-multi-select.types.d.ts

@@ -0,0 +1,10 @@
+import { GovBaseEvent } from "../../../types/event.types";
+export interface GovFormMultiSelectItem {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+}
+export type GovFormMultiSelectSelectedItem = number | string;
+export interface FormMultiselectEvent extends GovBaseEvent {
+    value: GovFormMultiSelectSelectedItem[];
+}

package/dist/dist/types/components/gov-form/password-power/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const FormPasswordPowerClass: {
+    root: string;
+    bar: string;
+    text: string;
+};

package/dist/dist/types/components/gov-form/password-power/gov-form-password-power.d.ts

@@ -0,0 +1,7 @@
+export declare class GovFormPasswordPower {
+    /**
+     * Password power: 0 - none, 1 - weak, 2 - medium, 3 - strong
+     */
+    readonly power: number;
+    render(): any;
+}

package/dist/dist/types/components/gov-form/radio/constants.d.ts

@@ -0,0 +1,10 @@
+import { Sizes } from '../../../core/constants/sizes';
+import { ValueOf } from '../../../types/interfaces';
+export declare const FormRadioSizes: Pick<typeof Sizes, "_XS" | "_S" | "_M" | "_L" | "_XL">;
+export type FormRadioSizesType = `${ValueOf<typeof FormRadioSizes>}`;
+export declare const FormRadioClass: {
+    root: string;
+    input: string;
+    indicator: string;
+    label: string;
+};

package/dist/dist/types/components/gov-form/radio/gov-form-radio.d.ts

@@ -0,0 +1,83 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { FormRadioSizesType } from "./constants";
+import { FormRadioEvent } from "./gov-form-radio.types";
+import { Attributes } from "../../../helpers/Dom/attribute";
+export declare class GovFormRadio {
+    private readonly h;
+    private f;
+    private inputRef?;
+    private attributeObserver;
+    private readonly radioId;
+    private hydrated;
+    constructor();
+    host: HTMLGovFormRadioElement;
+    /**
+     * Value of radio
+     */
+    readonly value: string;
+    /**
+     * When you can't use the form label.
+     */
+    readonly noLabel: boolean;
+    /**
+     * Radio button state
+     */
+    checked: boolean;
+    /**
+     * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.
+     * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
+     */
+    readonly required: boolean;
+    /**
+     * Makes the radio component disabled.
+     * This prevents users from being able to interact with the radio, and conveys its inactive state to assistive technologies.
+     */
+    readonly disabled: boolean;
+    /**
+     * Name of the radio.
+     */
+    readonly name: string;
+    /**
+     * Radio's size.
+     */
+    readonly size?: FormRadioSizesType;
+    /**
+     * Custom radio identifier.
+     */
+    readonly identifier: string;
+    /**
+     * Indicates the entered value does not conform to the format expected by the application.
+     */
+    readonly invalid: boolean;
+    /**
+     * Emitted when the radio has focus.
+     */
+    govFocus: EventEmitter<FormRadioEvent>;
+    /**
+     * Emitted when the radio loses focus.
+     */
+    govBlur: EventEmitter<FormRadioEvent>;
+    /**
+     * Emitted when the radio change value.
+     */
+    govChange: EventEmitter<FormRadioEvent>;
+    validateSize(newValue: string): void;
+    watchControlAttrs(): void;
+    inheritedAttributes: Attributes;
+    private passControlAttrs;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    onAriaAttributeChange(attributeName: string, newValue: string): void;
+    render(): any;
+    private onClickHandler;
+    private onFocusHandler;
+    private onBlurHandler;
+    private onChangeHandler;
+    /**
+     * Returns the reference of the native element
+     */
+    getRef(): Promise<HTMLInputElement>;
+}

package/dist/dist/types/components/gov-form/radio/gov-form-radio.types.d.ts

@@ -0,0 +1,5 @@
+import { GovBaseEvent } from "../../../types/event.types";
+export interface FormRadioEvent extends GovBaseEvent {
+    checked: boolean;
+    value: string;
+}

package/dist/dist/types/components/gov-form/range/constants.d.ts

@@ -0,0 +1,9 @@
+import { Sizes } from "../../../core/constants/sizes";
+import { ValueOf } from "../../../types/interfaces";
+export declare const FormRangeSizes: Pick<typeof Sizes, "_S" | "_M" | "_L">;
+export type FormRangeSizesType = `${ValueOf<typeof FormRangeSizes>}`;
+export declare const FormRangeClass: {
+    root: string;
+    fill: string;
+    input: string;
+};

package/dist/dist/types/components/gov-form/range/gov-form-range.d.ts

@@ -0,0 +1,116 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { FormRangeSizesType } from './constants';
+import { Attributes } from "../../../helpers/Dom/attribute";
+import { FormInputEvent } from "../input/gov-form-input.types";
+export declare class GovFormRange {
+    private inputRef?;
+    private outputRef?;
+    private fillRef?;
+    private f;
+    private readonly h;
+    private readonly inputId;
+    private attributeObserver;
+    constructor();
+    host: HTMLGovFormRangeElement;
+    /**
+     * Range’s size
+     */
+    readonly size?: FormRangeSizesType;
+    /**
+     * Value of range
+     */
+    value: string;
+    /**
+     * Custom range identifier
+     */
+    readonly identifier: string;
+    /**
+     * Name of the range
+     */
+    readonly name: string;
+    /**
+     * Minimum value that is acceptable
+     */
+    readonly min?: string | number;
+    /**
+     * Maximum value that is acceptable
+     */
+    readonly max?: string | number;
+    /**
+     * Defines size of each step
+     */
+    readonly step?: string | number;
+    /**
+     * Show tooltip with current value
+     */
+    readonly tooltip?: boolean;
+    /**
+     * Show input with current value
+     */
+    readonly input?: boolean;
+    /**
+     * Links a <datalist/> element to a <input type="range">, providing value markers as guidance for the user
+     */
+    readonly listIdentifier?: string;
+    /**
+     * Set whether the range is required or not
+     */
+    readonly required: boolean;
+    /**
+     * Indicates the entered value of child form element does conform to the format expected by the application
+     */
+    readonly success: boolean;
+    /**
+     * Indicates the entered value does not conform to the format expected by the application
+     */
+    readonly invalid: boolean;
+    /**
+     * Makes the range component disabled
+     */
+    readonly disabled: boolean;
+    /**
+     * Emitted when the input has focus.
+     */
+    govFocus: EventEmitter<FormInputEvent>;
+    /**
+     * Emitted when the input loses focus.
+     */
+    govBlur: EventEmitter<FormInputEvent>;
+    /**
+     * Emitted when the input change value.
+     */
+    govInput: EventEmitter<FormInputEvent>;
+    validateSize(newValue: string): void;
+    watchValue(): void;
+    watchControlAttrs(): void;
+    inheritedAttributes: Attributes;
+    private passControlAttrs;
+    private get getThumbWidth();
+    private controlOutputPosition;
+    componentDidLoad(): void;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    onAriaAttributeChange(attributeName: string, newValue: string): void;
+    disconnectedCallback(): void;
+    render(): any;
+    onCustomInputHandler(e: InputEvent): boolean;
+    private onInputHandler;
+    private onFocusHandler;
+    private onBlurHandler;
+    /**
+     * Returns the current state of the component
+     */
+    setFocus(options?: FocusOptions): Promise<void>;
+    /**
+     * Sets the ordered value of the element
+     */
+    setValue(value: string): Promise<void>;
+    /**
+     * Clears input value
+     */
+    clearValue(): Promise<void>;
+    /**
+     * Returns an instance of the native html input element
+     */
+    getRef(): Promise<HTMLInputElement>;
+}

package/dist/dist/types/components/gov-form/search/constants.d.ts

@@ -0,0 +1,10 @@
+import { Colors } from '../../../core/constants/colors';
+import { ValueOf } from '../../../types/interfaces';
+import { Sizes } from "../../../core/constants/sizes";
+export declare const FormSearchSizes: Pick<typeof Sizes, "_S" | "_M" | "_L">;
+export type FormSearchSizesType = `${ValueOf<typeof FormSearchSizes>}`;
+export declare const FormSearchColors: Pick<typeof Colors, "PRIMARY" | "NEUTRAL">;
+export type FormSearchColorType = `${ValueOf<typeof FormSearchColors>}`;
+export declare const FormSearchClass: {
+    root: string;
+};

package/dist/dist/types/components/gov-form/search/gov-form-search.d.ts

@@ -0,0 +1,13 @@
+import { FormSearchSizesType, FormSearchColorType } from './constants';
+export declare class GovFormSearch {
+    host: HTMLGovFormSearchElement;
+    /**
+     * Search’s size.
+     */
+    readonly size?: FormSearchSizesType;
+    /**
+     * Style variation of the form input.
+     */
+    readonly color: FormSearchColorType;
+    render(): any;
+}