@gov-design-system-ce/components 0.0.1

package/dist/collection/components/gov-form/switch/gov-form-switch.css

@@ -0,0 +1,354 @@
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* [Core] - Buttons
+------------------------------------------------------------------ */
+/*
+ * Gets color from theme-colors or from palette-colors
+ */
+/*
+ * Converts hex value to rgb colors value
+ */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/*
+ * Generates list of utility classes for margin, padding
+ *
+ * Make sure $list of definitions is sorted so that last item is defined last
+ * So largest views are mentioned last.
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Layout
+ */
+/**
+* Utilities - Offset
+*/
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/**
+* Generates CSS3 var with default value
+*/
+/*
+ -  Variables - General
+ */
+/*
+ -  Variables - Typography
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Variants
+ */
+/*
+ -  Variables - Layout
+ */
+/*
+ -  Variables - Accordion
+ */
+/*
+ -  Variables - Attachments
+ */
+/*
+ -  Variables - Alert
+ */
+/*
+ -  Variables - Backdrop
+ */
+/*
+ -  Variables - Buttons (&& Badges)
+ */
+/*
+ -  Variables - Classes
+ */
+/*
+ -  Variables - Colors
+ */
+/*
+ -  Variables - Cookiebar
+ */
+/*
+ -  Variables - Card
+ */
+/*
+ -  Variables - Container
+ */
+/*
+ -  Variables - Message
+ */
+/*
+ -  Variables - Empty
+ */
+/*
+ -  Variables - Error code
+ */
+/*
+ -  Variables - Grid
+ */
+/*
+ -  Variables - Modal & Prompt
+ */
+/**
+* Utilities - Offset
+*/
+/*
+ -  Variables - shadows
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Statsbar
+ */
+/*
+ -  Variables - Tabs
+ */
+/*
+ -  Variables - Tooltip
+ */
+/*
+ -	Variables - Forms
+ */
+/*
+ -  Variables - Form Autocomplete
+ */
+/*
+ -  Variables - Form Message
+ */
+/*
+ -	Variables - Form label
+ */
+/*
+ -	Variables - Form switch
+ */
+/*
+ -	Variables - Form select
+ */
+/*
+ -	Variables - Form input
+ */
+/*
+ -	Variables - Form multiselect
+ */
+/*
+ -	Variables - Form checkbox & radio
+ */
+/*
+ -	Variables - Form file
+ */
+/*
+ -  Variables - Toast Message
+ */
+/*
+ -  Variables - Wizzard
+ */
+/*
+ -  Variables - Stepper
+ */
+/*
+ -  Variables - Grid & Tile
+ */
+/*
+ -  Variables - Pagination
+ */
+.gov-spin-animation,
+.gov-pseudo-spin-animation::before {
+  animation: spin 4s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/*
+*   Switch
+*/
+.gov-form-switch {
+  position: relative;
+  display: flex;
+}
+.gov-form-switch__holder {
+  display: inline-flex;
+}
+.gov-form-switch__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  margin: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.gov-form-switch .gov-form-label__label {
+  position: relative;
+  z-index: 1;
+  margin-bottom: 0;
+  color: var(--gov-form-switch-color, var(--gov-color-secondary-800));
+}
+.gov-form-switch__indicator {
+  position: relative;
+  flex: 0 0 auto;
+  border: var(--gov-form-switch-indicator-border, 0.0625rem solid var(--gov-color-secondary-500));
+  background-color: var(--gov-form-switch-indicator-bg, var(--gov-color-secondary-300));
+  transition: 150ms linear background-color;
+}
+.gov-form-switch__indicator::before {
+  content: "";
+  position: absolute;
+  display: block;
+  border-radius: 50%;
+  background-color: var(--gov-form-switch-indicator-circle-bg, var(--gov-color-secondary-100));
+  transition: 150ms linear left;
+  box-shadow: var(--gov-form-switch-indicator-circle-box-shadow, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.35));
+}
+.gov-form-switch__input:focus-visible ~ .gov-form-switch__indicator {
+  outline: var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);
+}
+.gov-form-switch__input:checked + .gov-form-switch__indicator {
+  border-color: var(--gov-form-switch-indicator-bg-checked, var(--gov-color-primary));
+  background-color: var(--gov-form-switch-indicator-bg-checked, var(--gov-color-primary));
+}
+.gov-form-switch[disabled=""], .gov-form-switch[disabled=true i], .gov-form-switch[disabled="1"] {
+  pointer-events: none;
+}
+.gov-form-switch[disabled=""] .gov-form-label__label, .gov-form-switch[disabled=true i] .gov-form-label__label, .gov-form-switch[disabled="1"] .gov-form-label__label {
+  color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
+}
+.gov-form-switch[disabled=""] .gov-form-switch__indicator::before, .gov-form-switch[disabled=true i] .gov-form-switch__indicator::before, .gov-form-switch[disabled="1"] .gov-form-switch__indicator::before {
+  background: var(--gov-form-input-disabled-bg, var(--gov-color-secondary-300));
+}
+.gov-form-switch[disabled=""] .gov-form-switch__input:checked + .gov-form-switch__indicator, .gov-form-switch[disabled=true i] .gov-form-switch__input:checked + .gov-form-switch__indicator, .gov-form-switch[disabled="1"] .gov-form-switch__input:checked + .gov-form-switch__indicator {
+  border-color: var(--gov-form-input-disabled-bg, var(--gov-color-primary-400));
+  background-color: var(--gov-form-input-disabled-bg, var(--gov-color-primary-400));
+}
+.gov-form-switch[invalid=""] .gov-form-label__label, .gov-form-switch[invalid=true i] .gov-form-label__label, .gov-form-switch[invalid="1"] .gov-form-label__label {
+  color: var(--gov-form-state-color-error, var(--gov-color-error));
+}
+.gov-form-switch[invalid=""] .gov-form-switch__indicator, .gov-form-switch[invalid=true i] .gov-form-switch__indicator, .gov-form-switch[invalid="1"] .gov-form-switch__indicator {
+  border-color: var(--gov-form-state-color-error, var(--gov-color-error));
+}
+.gov-form-switch[invalid=""] .gov-form-switch__input:checked + .gov-form-switch__indicator, .gov-form-switch[invalid=true i] .gov-form-switch__input:checked + .gov-form-switch__indicator, .gov-form-switch[invalid="1"] .gov-form-switch__input:checked + .gov-form-switch__indicator {
+  background-color: var(--gov-form-state-color-error, var(--gov-color-error));
+}
+.gov-form-switch[size=xs] .gov-form-label__label {
+  font-weight: var(--gov-text-xs-font-weight);
+  font-size: var(--gov-text-xs-font-size);
+  line-height: var(--gov-text-xs-line-height);
+  letter-spacing: var(--gov-text-xs-letter-spacing);
+  margin-bottom: 0;
+  margin-left: -2.8333333333rem;
+  padding-top: calc((1.25rem - var(--gov-text-xs-font-size) * 1.5) / 2);
+  padding-left: 2.8333333333rem;
+}
+.gov-form-switch[size=xs] .gov-form-switch__holder {
+  gap: 0.75rem;
+}
+.gov-form-switch[size=xs] .gov-form-switch__indicator {
+  width: 2.0833333333rem;
+  height: 1.25rem;
+  border-radius: 0.625rem;
+}
+.gov-form-switch[size=xs] .gov-form-switch__indicator::before {
+  top: -0.010625rem;
+  left: -0.010625rem;
+  width: 1.14625rem;
+  height: 1.14625rem;
+}
+.gov-form-switch[size=xs] .gov-form-switch__input[aria-checked] + .gov-form-switch__indicator::before {
+  left: 0.8227083333rem;
+}
+.gov-form-switch[size=s] .gov-form-label__label {
+  font-weight: var(--gov-text-s-font-weight);
+  font-size: var(--gov-text-s-font-size);
+  line-height: var(--gov-text-s-line-height);
+  letter-spacing: var(--gov-text-s-letter-spacing);
+  margin-bottom: 0;
+  margin-left: -3.0416666667rem;
+  padding-top: calc((1.375rem - var(--gov-text-s-font-size) * 1.5) / 2);
+  padding-left: 3.0416666667rem;
+}
+.gov-form-switch[size=s] .gov-form-switch__holder {
+  gap: 0.75rem;
+}
+.gov-form-switch[size=s] .gov-form-switch__indicator {
+  width: 2.2916666667rem;
+  height: 1.375rem;
+  border-radius: 0.6875rem;
+}
+.gov-form-switch[size=s] .gov-form-switch__indicator::before {
+  top: -0.005rem;
+  left: -0.005rem;
+  width: 1.26rem;
+  height: 1.26rem;
+}
+.gov-form-switch[size=s] .gov-form-switch__input[aria-checked] + .gov-form-switch__indicator::before {
+  left: 0.9116666667rem;
+}
+.gov-form-switch[size=m] .gov-form-label__label {
+  font-weight: var(--gov-text-m-font-weight);
+  font-size: var(--gov-text-m-font-size);
+  line-height: var(--gov-text-m-line-height);
+  letter-spacing: var(--gov-text-m-letter-spacing);
+  margin-bottom: 0;
+  margin-left: -3.5rem;
+  padding-top: calc((1.5rem - var(--gov-text-m-font-size) * 1.5) / 2);
+  padding-left: 3.5rem;
+}
+.gov-form-switch[size=m] .gov-form-switch__holder {
+  gap: 1rem;
+}
+.gov-form-switch[size=m] .gov-form-switch__indicator {
+  width: 2.5rem;
+  height: 1.5rem;
+  border-radius: 0.75rem;
+}
+.gov-form-switch[size=m] .gov-form-switch__indicator::before {
+  top: 0rem;
+  left: 0rem;
+  width: 1.375rem;
+  height: 1.375rem;
+}
+.gov-form-switch[size=m] .gov-form-switch__input[aria-checked] + .gov-form-switch__indicator::before {
+  left: 1rem;
+}
+.gov-form-switch[size=l] .gov-form-label__label {
+  font-weight: var(--gov-text-l-font-weight);
+  font-size: var(--gov-text-l-font-size);
+  line-height: var(--gov-text-l-line-height);
+  letter-spacing: var(--gov-text-l-letter-spacing);
+  margin-bottom: 0;
+  margin-left: -4.3333333333rem;
+  padding-top: calc((2rem - var(--gov-text-l-font-size) * 1.5) / 2);
+  padding-left: 4.3333333333rem;
+}
+.gov-form-switch[size=l] .gov-form-switch__holder {
+  gap: 1rem;
+}
+.gov-form-switch[size=l] .gov-form-switch__indicator {
+  width: 3.3333333333rem;
+  height: 2rem;
+  border-radius: 1rem;
+}
+.gov-form-switch[size=l] .gov-form-switch__indicator::before {
+  top: 0.020625rem;
+  left: 0.020625rem;
+  width: 1.83375rem;
+  height: 1.83375rem;
+}
+.gov-form-switch[size=l] .gov-form-switch__input[aria-checked] + .gov-form-switch__indicator::before {
+  left: 1.3539583333rem;
+}

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

@@ -0,0 +1,359 @@
+import { Host, h } from "@stencil/core";
+import { createID } from "../../../../src/utils/string.utils";
+import { validateProp } from "../../../helpers/Validate/props";
+import { FormSwitchClass } from "./constants";
+import { toBoolAttrIfDefined } from "../../../helpers/Dom/template";
+import { validateWcagLabelFor, validateWcagRef } from "../../../helpers/Validate/wcag";
+import { canValidateWcagOnRender } from "../../../helpers/Dom/win";
+import { delay } from "../../../utils/utils";
+import { Sizes } from "../../../core/constants/sizes";
+import { govHost } from "../../../helpers/Dom/template";
+import { govForm } from "../../../helpers/Dom/form";
+export class GovFormSwitch {
+  constructor() {
+    this.value = undefined;
+    this.checked = false;
+    this.required = false;
+    this.disabled = undefined;
+    this.name = undefined;
+    this.size = undefined;
+    this.identifier = undefined;
+    this.invalid = undefined;
+    this.wcagDescribedBy = undefined;
+    this.wcagLabelledBy = undefined;
+    this.isChecked = undefined;
+    this.checkboxId = createID("GovInput");
+    this.f = govForm(govHost(this.host));
+  }
+  updateCheckedState(newValue) {
+    this.isChecked = newValue;
+    this.govChange.emit({
+      checked: this.isChecked,
+      value: this.value,
+    });
+  }
+  validateSize(newValue) {
+    validateProp(Sizes, newValue, FormSwitchClass.root);
+  }
+  componentWillLoad() {
+    this.isChecked = this.checked;
+    this.f.passAttrToControl('type', 'switch');
+  }
+  async componentDidRender() {
+    if (canValidateWcagOnRender()) {
+      await delay(500);
+      await this.validateWcag();
+    }
+  }
+  render() {
+    const { isChecked } = this;
+    return (h(Host, { class: FormSwitchClass.root, "is-checked": isChecked, size: this.size, invalid: toBoolAttrIfDefined(this.invalid) }, h("div", { class: FormSwitchClass.holder }, h("input", { class: FormSwitchClass.input, id: this.identifier || this.checkboxId, type: "checkbox", value: this.value, name: this.name, checked: this.isChecked, onChange: this.onChangeHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, "aria-checked": this.isChecked, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-disabled": toBoolAttrIfDefined(this.disabled) }), h("span", { class: FormSwitchClass.indicator }), h("slot", { name: "label" }))));
+  }
+  onFocusHandler(e) {
+    this.govFocus.emit(e);
+  }
+  onBlurHandler(e) {
+    this.govBlur.emit(e);
+  }
+  onChangeHandler(e) {
+    this.isChecked = e.target.checked;
+    e.stopPropagation();
+    this.govChange.emit({
+      checked: this.isChecked,
+      value: this.value,
+    });
+  }
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  async validateWcag() {
+    validateWcagRef(this.wcagDescribedBy, "wcag-described-by", FormSwitchClass.root);
+    validateWcagRef(this.wcagLabelledBy, "wcag-labelled-by", FormSwitchClass.root);
+    validateWcagLabelFor(this.identifier || this.checkboxId, this.wcagLabelledBy, FormSwitchClass.root);
+  }
+  static get is() { return "gov-form-switch"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gov-form-switch.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gov-form-switch.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value of switch"
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Switch default state"
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "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 switch component disabled.\nThis prevents users from being able to interact with the switch, and conveys its inactive state to assistive technologies."
+        },
+        "attribute": "disabled",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the switch."
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "size": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "SizesType",
+          "resolved": "any",
+          "references": {
+            "SizesType": {
+              "location": "import",
+              "path": "./constants"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Switch's size."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Custom switch identifier."
+        },
+        "attribute": "identifier",
+        "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
+      },
+      "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
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isChecked": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "govFocus",
+        "name": "gov-focus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the switch 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 switch 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 switch change value."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "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": "checked",
+        "methodName": "updateCheckedState"
+      }, {
+        "propName": "size",
+        "methodName": "validateSize"
+      }];
+  }
+}
+//# sourceMappingURL=gov-form-switch.js.map