@gov-design-system-ce/components 0.0.1

package/dist/collection/components/gov-form/select/gov-form-select.js

@@ -0,0 +1,498 @@
+import { h, Host } from "@stencil/core";
+import { toBoolAttrIfDefined, govHost } from "../../../helpers/Dom/template";
+import { Variants, FormSelectClass } from "./constants";
+import { Sizes } from "../../../core/constants/sizes";
+import { validateProp } from "../../../helpers/Validate/props";
+import { validateWcagLabelFor, validateWcagRef } from "../../../helpers/Validate/wcag";
+import { canValidateWcagOnRender } from "../../../helpers/Dom/win";
+import { createID } from "../../../utils/string.utils";
+import { delay } from "../../../utils/utils";
+import { govForm } from "../../../helpers/Dom/form";
+export class GovFormSelect {
+  constructor() {
+    this.value = undefined;
+    this.identifier = undefined;
+    this.variant = undefined;
+    this.size = Sizes._M;
+    this.name = undefined;
+    this.required = false;
+    this.disabled = undefined;
+    this.invalid = undefined;
+    this.wcagActiveDescendant = undefined;
+    this.wcagControls = undefined;
+    this.wcagDescribedBy = undefined;
+    this.wcagLabelledBy = undefined;
+    this.wcagOwns = undefined;
+    this.focused = undefined;
+    this.h = govHost(this.host);
+    this.selectId = createID("GovSelect");
+    this.f = govForm(govHost(this.host));
+  }
+  validateVariant(newValue) {
+    validateProp(Variants, newValue, FormSelectClass.root);
+  }
+  validateSize(newValue) {
+    validateProp(Sizes, newValue, FormSelectClass.root);
+  }
+  componentWillLoad() {
+    this.validateVariant(this.variant);
+    this.validateSize(this.size);
+    this.host.querySelectorAll('option').forEach((option) => {
+      if (option.value === this.value) {
+        option.setAttribute('selected', 'true');
+      }
+    });
+    this.f.passAttrToControl('type', 'select');
+  }
+  async componentDidRender() {
+    if (canValidateWcagOnRender()) {
+      await delay(500);
+      await this.validateWcag();
+    }
+  }
+  render() {
+    return (h(Host, { class: FormSelectClass.root, size: this.size, variant: this.variant }, this.h.hasSlot("prefix") && h("slot", { name: "prefix" }), h("span", { class: "element" }, h("gov-icon", { slot: "right-icon", name: "arrow-down" }), h("select", { id: this.identifier || this.selectId, onFocus: this.onFocusHandler.bind(this), onChange: this.onChangeHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, name: this.name, disabled: this.disabled, ref: el => this.selectRef = el, "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-activedescendant": this.wcagActiveDescendant, "aria-controls": this.wcagControls, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns }, h("slot", null))), this.h.hasSlot("sufix") && h("slot", { name: "sufix" })));
+  }
+  onFocusHandler(e) {
+    this.focused = true;
+    this.govFocus.emit(e);
+  }
+  onBlurHandler(e) {
+    this.focused = false;
+    this.govBlur.emit(e);
+  }
+  onChangeHandler(e) {
+    this.value = e.target.value;
+    e.stopPropagation();
+    this.govChange.emit(e);
+  }
+  /**
+   * Returns the current state of the component
+   */
+  async setFocus(options) {
+    return this.selectRef.focus(options);
+  }
+  /**
+   * Sets the ordered value of the element
+   */
+  async setValue(value) {
+    this.value = value;
+  }
+  /**
+   * Returns an instance of the native html select element
+   */
+  async getInstance() {
+    return this.selectRef;
+  }
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  async validateWcag() {
+    validateWcagRef(this.wcagActiveDescendant, "wcag-active-descendant", FormSelectClass.root);
+    validateWcagRef(this.wcagControls, "wcag-controls", FormSelectClass.root);
+    validateWcagRef(this.wcagDescribedBy, "wcag-described-by", FormSelectClass.root);
+    validateWcagRef(this.wcagOwns, "wcag-owns", FormSelectClass.root);
+    validateWcagLabelFor(this.identifier || this.selectId, this.wcagLabelledBy, FormSelectClass.root);
+  }
+  static get is() { return "gov-form-select"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gov-form-select.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gov-form-select.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value of select"
+        },
+        "attribute": "value",
+        "reflect": true
+      },
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Custom select identifier."
+        },
+        "attribute": "identifier",
+        "reflect": false
+      },
+      "variant": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "VariantType",
+          "resolved": "any",
+          "references": {
+            "VariantType": {
+              "location": "import",
+              "path": "./constants"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Style variation of the form select."
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "size": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "SizesType",
+          "resolved": "any",
+          "references": {
+            "SizesType": {
+              "location": "import",
+              "path": "./constants"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Select\u2019s size."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "Sizes._M"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the select."
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "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.\nWhen using this property you need to also set \u201Cnovalidate\u201D attribute to your form element to prevent browser from displaying its own validation errors."
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes the select component disabled.\nThis prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies."
+        },
+        "attribute": "disabled",
+        "reflect": false
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the entered value does not conform to the format expected by the application."
+        },
+        "attribute": "invalid",
+        "reflect": false
+      },
+      "wcagActiveDescendant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a related component\u2019s visually focused element."
+        },
+        "attribute": "wcag-active-descendant",
+        "reflect": false
+      },
+      "wcagControls": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component."
+        },
+        "attribute": "wcag-controls",
+        "reflect": false
+      },
+      "wcagDescribedBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a component that describes the input."
+        },
+        "attribute": "wcag-described-by",
+        "reflect": false
+      },
+      "wcagLabelledBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a component that labels the input."
+        },
+        "attribute": "wcag-labelded-by",
+        "reflect": false
+      },
+      "wcagOwns": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a component that describes the input."
+        },
+        "attribute": "wcag-owns",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "focused": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "govFocus",
+        "name": "gov-focus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the select has focus."
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "govBlur",
+        "name": "gov-blur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the select loses focus."
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "govChange",
+        "name": "gov-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the select change value."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: FocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Returns the current state of the component",
+          "tags": []
+        }
+      },
+      "setValue": {
+        "complexType": {
+          "signature": "(value: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets the ordered value of the element",
+          "tags": []
+        }
+      },
+      "getInstance": {
+        "complexType": {
+          "signature": "() => Promise<HTMLSelectElement>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLSelectElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<HTMLSelectElement>"
+        },
+        "docs": {
+          "text": "Returns an instance of the native html select element",
+          "tags": []
+        }
+      },
+      "validateWcag": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Validate the WCAG attributes of the component",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "variant",
+        "methodName": "validateVariant"
+      }, {
+        "propName": "size",
+        "methodName": "validateSize"
+      }];
+  }
+}
+//# sourceMappingURL=gov-form-select.js.map

package/dist/collection/components/gov-form/select/gov-form-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-form-select.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/select/gov-form-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, State, Prop, Event, EventEmitter, Watch, Host, Method } from \"@stencil/core\"\nimport { GovHost } from \"../../../helpers/Dom/template.d\"\nimport { toBoolAttrIfDefined, govHost } from \"../../../helpers/Dom/template\"\nimport { SizesType, Variants, VariantType, FormSelectClass } from \"./constants\"\nimport { Sizes } from \"../../../core/constants/sizes\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { validateWcagLabelFor, validateWcagRef } from \"../../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../../helpers/Dom/win\"\nimport { createID } from \"../../../utils/string.utils\"\nimport { delay } from \"../../../utils/utils\"\nimport { GovForm }from \"../../../helpers/Dom/form.d\"\nimport { govForm }from \"../../../helpers/Dom/form\"\n\n@Component({\n\ttag: \"gov-form-select\",\n\tstyleUrl: \"gov-form-select.scss\",\n})\nexport class GovFormSelect {\n\tprivate f: GovForm\n\tprivate h: GovHost\n\tprivate selectRef?: HTMLSelectElement\n\n\tprivate readonly selectId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.selectId = createID(\"GovSelect\")\n\t\tthis.f = govForm(govHost(this.host));\n\t}\n\n\t@Element() host: HTMLGovFormSelectElement\n\t/**\n\t * Value of select\n\t */\n\t@Prop({reflect: true, mutable: true}) value: string;\n\t/**\n\t * Custom select identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * Style variation of the form select.\n\t */\n\t@Prop() readonly variant: VariantType = undefined\n\t/**\n\t * Select’s size.\n\t */\n\t@Prop() readonly size: SizesType = Sizes._M\n\t/**\n\t * Name of the select.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * 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.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Makes the select component disabled.\n\t * This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean\n\t/**\n\t * Indicates the id of a related component’s visually focused element.\n\t */\n\t@Prop({ attribute: \"wcag-active-descendant\" }) readonly wcagActiveDescendant: string\n\t/**\n\t * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.\n\t */\n\t@Prop({ attribute: \"wcag-controls\" }) readonly wcagControls: string\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: \"wcag-described-by\" }) readonly wcagDescribedBy: string\n\t/**\n\t * Indicates the id of a component that labels the input.\n\t */\n\t@Prop({ attribute: \"wcag-labelded-by\" }) readonly wcagLabelledBy: string\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: \"wcag-owns\" }) readonly wcagOwns: string\n\t/**\n\t * Emitted when the select has focus.\n\t */\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the select loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the select change value.\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter\n\t@State() focused: boolean\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, FormSelectClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, FormSelectClass.root)\n\t}\n\n\n\tcomponentWillLoad() {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\n\t\tthis.host.querySelectorAll('option').forEach((option: HTMLOptionElement) => {\n\t\t\tif(option.value === this.value) {\n\t\t\t\toption.setAttribute('selected', 'true');\n\t\t\t}\n\t\t})\n\n\t\tthis.f.passAttrToControl('type', 'select')\n\t}\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={FormSelectClass.root} size={this.size} variant={this.variant}>\n\t\t\t\t{this.h.hasSlot(\"prefix\") && <slot name=\"prefix\"></slot>}\n\t\t\t\t<span class=\"element\">\n\t\t\t\t\t<gov-icon slot=\"right-icon\" name=\"arrow-down\"></gov-icon>\n\t\t\t\t\t<select\n\t\t\t\t\t\tid={this.identifier || this.selectId}\n\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\tref={el => this.selectRef = el as HTMLSelectElement}\n\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\taria-activedescendant={this.wcagActiveDescendant}\n\t\t\t\t\t\taria-controls={this.wcagControls}\n\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t\taria-owns={this.wcagOwns}>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</select>\n\t\t\t\t</span>\n\t\t\t\t{this.h.hasSlot(\"sufix\") && <slot name=\"sufix\"></slot>}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\tthis.focused = true\n\t\tthis.govFocus.emit(e)\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\tthis.focused = false\n\t\tthis.govBlur.emit(e)\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.value = (e.target as HTMLSelectElement).value\n\t\te.stopPropagation()\n\t\tthis.govChange.emit(e)\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync setFocus(options?: FocusOptions): Promise<void> {\n\t\treturn this.selectRef.focus(options)\n\t}\n\n\t/**\n\t * Sets the ordered value of the element\n\t */\n\t@Method()\n\tasync setValue(value: string): Promise<void> {\n\t\tthis.value = value\n\t}\n\n\t/**\n\t * Returns an instance of the native html select element\n\t */\n\t@Method()\n\tasync getInstance(): Promise<HTMLSelectElement> {\n\t\treturn this.selectRef\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagActiveDescendant, \"wcag-active-descendant\", FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagControls, \"wcag-controls\", FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagOwns, \"wcag-owns\", FormSelectClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.selectId, this.wcagLabelledBy, FormSelectClass.root)\n\t}\n}\n"]}

package/dist/collection/components/gov-form/select/gov-form-select.stories.js

@@ -0,0 +1,90 @@
+import { Sizes } from "./constants";
+import { Sizes as GlobalSizes } from "../../../core/constants/sizes";
+// @ts-ignore
+import readme from "./readme.md";
+import { bindProps, removeUndefinedValues } from "../../../../.storybook/helpers";
+const StoryConfiguration = {
+  title: "Design system/Select",
+  args: {
+    size: GlobalSizes._M,
+    value: '',
+    label: 'This is label of select',
+    errorMessage: '',
+    message: '',
+    disabled: false,
+  },
+  argTypes: {
+    size: {
+      control: "select",
+      options: removeUndefinedValues(Sizes),
+    },
+    value: "string",
+    label: "string",
+    errorMessage: "string",
+    message: "string",
+    disabled: "boolean",
+  },
+  parameters: {
+    notes: readme,
+  },
+};
+const propsControl = ["size", "disabled"];
+const propsInput = ["value", "disabled"];
+const Template = (args) => {
+  const options = ['Česká Republika', 'Slovensko', 'Polsko', 'Německo'];
+  let message;
+  const control = document.createElement('gov-form-control');
+  const label = document.createElement('gov-form-label');
+  const el = document.createElement("gov-form-select");
+  label.innerHTML = args.label;
+  label.setAttribute('slot', 'top');
+  if (args.message || args.errorMessage) {
+    message = document.createElement('gov-form-message');
+    message.innerHTML = args.errorMessage || args.message;
+    message.setAttribute('slot', 'bottom');
+  }
+  if (args.message) {
+    message.setAttribute('variant', 'secondary');
+    control.appendChild(message);
+  }
+  if (args.errorMessage) {
+    control.setAttribute('invalid', 'true');
+    const icon = document.createElement('i');
+    icon.classList.add("fa-solid");
+    icon.classList.add("fa-warning");
+    icon.setAttribute('slot', 'icon');
+    message.setAttribute('variant', 'error');
+    message.appendChild(icon);
+    control.appendChild(message);
+  }
+  options.map((value, i) => {
+    const opton = document.createElement('option');
+    opton.setAttribute('value', value);
+    if (i === 0) {
+      opton.setAttribute('selected', 'selected');
+    }
+    opton.innerText = value;
+    el.appendChild(opton);
+  });
+  control.appendChild(el);
+  control.appendChild(label);
+  bindProps(control, propsControl, args);
+  bindProps(el, propsInput, args);
+  return control;
+};
+export const Playground = Template.bind({});
+Playground.args = {};
+export const Invalid = Template.bind({});
+Invalid.args = {
+  errorMessage: 'This field is required'
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true
+};
+export const WithMessage = Template.bind({});
+WithMessage.args = {
+  message: 'Here you can put your name'
+};
+export default StoryConfiguration;
+//# sourceMappingURL=gov-form-select.stories.js.map

package/dist/collection/components/gov-form/select/gov-form-select.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-form-select.stories.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/select/gov-form-select.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Sizes } from \"./constants\"\nimport { Sizes as GlobalSizes } from \"../../../core/constants/sizes\"\n// @ts-ignore\nimport readme from \"./readme.md\"\nimport { bindProps, removeUndefinedValues } from \"../../../../.storybook/helpers\"\n\nconst StoryConfiguration = {\n\ttitle: \"Design system/Select\",\n\targs: {\n\t\tsize: GlobalSizes._M,\n\t\tvalue: '',\n\t\tlabel: 'This is label of select',\n\t\terrorMessage: '',\n\t\tmessage: '',\n\t\tdisabled: false,\n\t},\n\targTypes: {\n\t\tsize: {\n\t\t\tcontrol: \"select\",\n\t\t\toptions: removeUndefinedValues(Sizes),\n\t\t},\n\t\tvalue: \"string\",\n\t\tlabel: \"string\",\n\t\terrorMessage: \"string\",\n\t\tmessage: \"string\",\n\t\tdisabled: \"boolean\",\n\t},\n\tparameters: {\n\t\tnotes: readme,\n\t},\n}\n\nconst propsControl = [\"size\", \"disabled\"]\nconst propsInput = [\"value\", \"disabled\"]\n\nconst Template = (args) => {\n\tconst options = ['Česká Republika', 'Slovensko', 'Polsko', 'Německo']\n\tlet message\n\tconst control = document.createElement('gov-form-control')\n\tconst label = document.createElement('gov-form-label')\n\tconst el = document.createElement(\"gov-form-select\")\n\n\tlabel.innerHTML = args.label\n\tlabel.setAttribute('slot', 'top')\n\n\tif(args.message || args.errorMessage) {\n\t\tmessage = document.createElement('gov-form-message')\n\t\tmessage.innerHTML = args.errorMessage || args.message\n\t\tmessage.setAttribute('slot', 'bottom')\n\t}\n\n\tif(args.message) {\n\t\tmessage.setAttribute('variant', 'secondary')\n\t\tcontrol.appendChild(message)\n\t}\n\n\tif(args.errorMessage) {\n\t\tcontrol.setAttribute('invalid', 'true')\n\t\tconst icon = document.createElement('i')\n\t\ticon.classList.add(\"fa-solid\")\n\t\ticon.classList.add(\"fa-warning\")\n\t\ticon.setAttribute('slot', 'icon')\n\t\tmessage.setAttribute('variant', 'error')\n\t\tmessage.appendChild(icon)\n\t\tcontrol.appendChild(message)\n\t}\n\n\toptions.map((value, i) => {\n\t\tconst opton = document.createElement('option');\n\t\topton.setAttribute('value', value)\n\t\tif(i === 0) {\n\t\t\topton.setAttribute('selected', 'selected')\n\t\t}\n\t\topton.innerText = value\n\n\t\tel.appendChild(opton)\n\t})\n\n\tcontrol.appendChild(el)\n\tcontrol.appendChild(label)\n\n\tbindProps(control, propsControl, args)\n\tbindProps(el, propsInput, args)\n\n\treturn control\n}\n\nexport const Playground = Template.bind({})\nPlayground.args = {}\n\nexport const Invalid = Template.bind({})\nInvalid.args = {\n\terrorMessage: 'This field is required'\n}\n\nexport const Disabled = Template.bind({})\nDisabled.args = {\n\tdisabled: true\n}\n\nexport const WithMessage = Template.bind({})\nWithMessage.args = {\n\tmessage: 'Here you can put your name'\n}\n\nexport default StoryConfiguration\n"]}

package/dist/collection/components/gov-form/switch/constants.js

@@ -0,0 +1,9 @@
+import { Sizes as GlobalSizes } from "../../../core/constants/sizes";
+export const Sizes = [undefined, GlobalSizes._XS, GlobalSizes._S, GlobalSizes._M, GlobalSizes._L];
+export const FormSwitchClass = {
+  root: 'gov-form-switch',
+  holder: 'gov-form-switch__holder',
+  input: 'gov-form-switch__input',
+  indicator: 'gov-form-switch__indicator',
+};
+//# sourceMappingURL=constants.js.map

package/dist/collection/components/gov-form/switch/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/switch/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAEpE,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,WAAW,CAAC,GAAG,EAAE,WAAW,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,CAAU,CAAA;AAI1G,MAAM,CAAC,MAAM,eAAe,GAAG;EAC9B,IAAI,EAAE,iBAAiB;EACvB,MAAM,EAAE,yBAAyB;EACjC,KAAK,EAAE,wBAAwB;EAC/B,SAAS,EAAE,4BAA4B;CACvC,CAAA","sourcesContent":["import { Sizes as GlobalSizes } from \"../../../core/constants/sizes\"\n\nexport const Sizes = [undefined, GlobalSizes._XS, GlobalSizes._S, GlobalSizes._M, GlobalSizes._L] as const\nexport type SizesType = typeof Sizes[number]\n\n\nexport const FormSwitchClass = {\n\troot: 'gov-form-switch',\n\tholder: 'gov-form-switch__holder',\n\tinput: 'gov-form-switch__input',\n\tindicator: 'gov-form-switch__indicator',\n}\n"]}