@gov-design-system-ce/components 0.0.1

package/dist/cjs/gov-form-switch.cjs.entry.js

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f0dd3088.js');
+const string_utils = require('./string.utils-f9b3501b.js');
+const props = require('./props-bb89fb59.js');
+const form = require('./form-9ab2ace1.js');
+const template = require('./template-26608353.js');
+const win = require('./win-aa54b884.js');
+const utils = require('./utils-a51135ab.js');
+const sizes = require('./sizes-79872c2a.js');
+require('./gov.log-4527e960.js');
+require('./variants-04113a72.js');
+require('./constants-4a012eff.js');
+require('./constants-1d5ec4c5.js');
+require('./constants-bd1db896.js');
+
+const govFormSwitchCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.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}";
+
+const GovFormSwitch = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.govFocus = index.createEvent(this, "gov-focus", 7);
+    this.govBlur = index.createEvent(this, "gov-blur", 7);
+    this.govChange = index.createEvent(this, "gov-change", 7);
+    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 = string_utils.createID("GovInput");
+    this.f = form.govForm(template.govHost(this.host));
+  }
+  updateCheckedState(newValue) {
+    this.isChecked = newValue;
+    this.govChange.emit({
+      checked: this.isChecked,
+      value: this.value,
+    });
+  }
+  validateSize(newValue) {
+    props.validateProp(sizes.Sizes, newValue, form.FormSwitchClass.root);
+  }
+  componentWillLoad() {
+    this.isChecked = this.checked;
+    this.f.passAttrToControl('type', 'switch');
+  }
+  async componentDidRender() {
+    if (win.canValidateWcagOnRender()) {
+      await utils.delay(500);
+      await this.validateWcag();
+    }
+  }
+  render() {
+    const { isChecked } = this;
+    return (index.h(index.Host, { class: form.FormSwitchClass.root, "is-checked": isChecked, size: this.size, invalid: template.toBoolAttrIfDefined(this.invalid) }, index.h("div", { class: form.FormSwitchClass.holder }, index.h("input", { class: form.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": template.toBoolAttrIfDefined(this.required), "aria-invalid": template.toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-disabled": template.toBoolAttrIfDefined(this.disabled) }), index.h("span", { class: form.FormSwitchClass.indicator }), index.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() {
+    win.validateWcagRef(this.wcagDescribedBy, "wcag-described-by", form.FormSwitchClass.root);
+    win.validateWcagRef(this.wcagLabelledBy, "wcag-labelled-by", form.FormSwitchClass.root);
+    win.validateWcagLabelFor(this.identifier || this.checkboxId, this.wcagLabelledBy, form.FormSwitchClass.root);
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "checked": ["updateCheckedState"],
+    "size": ["validateSize"]
+  }; }
+};
+GovFormSwitch.style = govFormSwitchCss;
+
+exports.gov_form_switch = GovFormSwitch;
+
+//# sourceMappingURL=gov-form-switch.cjs.entry.js.map

package/dist/cjs/gov-form-switch.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gov-form-switch.entry.cjs.js","mappings":"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","names":["createID","govForm","govHost","validateProp","Sizes","FormSwitchClass","canValidateWcagOnRender","delay","h","Host","toBoolAttrIfDefined","validateWcagRef","validateWcagLabelFor"],"sources":["../../../packages/core/src/components/gov-form/switch/gov-form-switch.scss?tag=gov-form-switch","../../../packages/core/src/components/gov-form/switch/gov-form-switch.tsx"],"sourcesContent":["/*\n *   Switch\n */\n\n$class: \".gov-form-switch\";\n$indicator-ratio: calc(5 / 3);\n\n#{$class} {\n\tposition: relative;\n\tdisplay: flex;\n\t&__holder {\n\t\tdisplay: inline-flex;\n\t}\n\t&__input {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tz-index: 1;\n\t\tmargin: 0;\n\t\tappearance: none;\n\t}\n\t.gov-form-label__label {\n\t\tposition: relative;\n\t\tz-index: 1;\n\t\tmargin-bottom: 0;\n\t\tcolor: $form-switch-color;\n\t}\n\t&__indicator {\n\t\tposition: relative;\n\t\tflex: 0 0 auto;\n\t\tborder: $form-switch-indicator-border;\n\t\tbackground-color: $form-switch-indicator-bg;\n\t\ttransition: $t linear background-color;\n\t\t&::before {\n\t\t\t@include pseudo();\n\t\t\tborder-radius: 50%;\n\t\t\tbackground-color: $form-switch-indicator-circle-bg;\n\t\t\ttransition: $t linear left;\n\t\t\tbox-shadow: $form-switch-indicator-circle-box-shadow;\n\t\t}\n\t}\n\n\t// STATES\n\t// focus\n\t&__input:focus-visible ~ &__indicator {\n\t\toutline: $outline;\n\t}\n\t// checked\n\t&__input:checked + &__indicator {\n\t\tborder-color: $form-switch-indicator-bg-checked;\n\t\tbackground-color: $form-switch-indicator-bg-checked;\n\t}\n\n\t// disabled\n\t@include parameter(\"disabled\") {\n\t\tpointer-events: none;\n\t\t.gov-form-label__label {\n\t\t\tcolor: $form-state-color-disabled;\n\t\t}\n\t\t#{$class} {\n\t\t\t&__indicator {\n\t\t\t\t&::before {\n\t\t\t\t\tbackground: $form-state-bg-input-disabled;\n\t\t\t\t}\n\t\t\t}\n\t\t\t&__input:checked + #{$class}__indicator {\n\t\t\t\tborder-color: $form-state-bg-disabled;\n\t\t\t\tbackground-color: $form-state-bg-disabled;\n\t\t\t}\n\t\t}\n\t}\n\n\t// invalid\n\t@include parameter(\"invalid\") {\n\t\t.gov-form-label__label {\n\t\t\tcolor: $form-state-color-error;\n\t\t}\n\t\t#{$class} {\n\t\t\t&__indicator {\n\t\t\t\tborder-color: $form-state-color-error;\n\t\t\t}\n\t\t\t&__input:checked + #{$class}__indicator {\n\t\t\t\tbackground-color: $form-state-color-error;\n\t\t\t}\n\t\t}\n\t}\n\n\t// sizes\n\t@each $size, $definitions in $form-switch-sizes {\n\t\t$indicator-width: calc(get(\"indicator-height\", $definitions) * $indicator-ratio);\n\t\t$indicator-height: get(\"indicator-height\", $definitions);\n\t\t$border-offset: calc(get(\"toggle-offset\", $definitions) - rem-calc(1));\n\n\t\t&[size=\"#{$size}\"] {\n\t\t\t.gov-form-label__label {\n\t\t\t\t@include typography($size);\n\t\t\t\tmargin-bottom: 0;\n\t\t\t\tmargin-left: calc(($indicator-width + get(\"gap\", $definitions)) * -1);\n\t\t\t\tpadding-top: calc(($indicator-height - (var(--gov-text-#{$size}-font-size) * 1.5)) / 2);\n\t\t\t\tpadding-left: calc($indicator-width + get(\"gap\", $definitions));\n\t\t\t}\n\t\t\t#{$class} {\n\t\t\t\t&__holder {\n\t\t\t\t\tgap: get(\"gap\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__indicator {\n\t\t\t\t\twidth: $indicator-width;\n\t\t\t\t\theight: $indicator-height;\n\t\t\t\t\tborder-radius: calc($indicator-height * 0.5);\n\t\t\t\t\t&::before {\n\t\t\t\t\t\ttop: $border-offset;\n\t\t\t\t\t\tleft: $border-offset;\n\t\t\t\t\t\twidth: calc($indicator-height - (2 * get(\"toggle-offset\", $definitions)));\n\t\t\t\t\t\theight: calc($indicator-height - (2 * get(\"toggle-offset\", $definitions)));\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// STATES\n\t\t\t\t&__input[aria-checked] + #{$class}__indicator {\n\t\t\t\t\t&::before {\n\t\t\t\t\t\tleft: calc($indicator-width - $indicator-height + $border-offset);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Watch, Method } from \"@stencil/core\"\nimport { createID } from \"../../../../src/utils/string.utils\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { FormSwitchClass, SizesType } from \"./constants\"\nimport { toBoolAttrIfDefined } from \"../../../helpers/Dom/template\"\nimport { validateWcagLabelFor, validateWcagRef } from \"../../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../../helpers/Dom/win\"\nimport { delay } from \"../../../utils/utils\"\nimport { Sizes } from \"../../../core/constants/sizes\"\nimport {GovForm}from \"../../../helpers/Dom/form.d\"\nimport {govHost}from \"../../../helpers/Dom/template\"\nimport {govForm}from \"../../../helpers/Dom/form\"\n\n@Component({\n\ttag: \"gov-form-switch\",\n\tstyleUrl: \"gov-form-switch.scss\",\n})\nexport class GovFormSwitch {\n\tprivate f: GovForm\n\tprivate readonly checkboxId: string\n\n\tconstructor() {\n\t\tthis.checkboxId = createID(\"GovInput\")\n\n\t\tthis.f = govForm(govHost(this.host));\n\t}\n\n\t@Element() host: HTMLGovFormSwitchElement\n\t/**\n\t * Value of switch\n\t */\n\t@Prop() readonly value: string\n\t/**\n\t * Switch default state\n\t */\n\t@Prop({ reflect: true }) readonly checked: boolean = false\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 switch component disabled.\n\t * This prevents users from being able to interact with the switch, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\n\t/**\n\t * Name of the switch.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Switch's size.\n\t */\n\t@Prop() readonly size: SizesType = undefined\n\t/**\n\t * Custom switch identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\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 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 * Emitted when the switch has focus.\n\t */\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the switch loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the switch change value.\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter\n\n\t@State() isChecked: boolean\n\n\t@Watch(\"checked\")\n\tupdateCheckedState(newValue: boolean): void {\n\t\tthis.isChecked = newValue\n\t\tthis.govChange.emit({\n\t\t\tchecked: this.isChecked,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, FormSwitchClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.isChecked = this.checked\n\n\t\tthis.f.passAttrToControl('type', 'switch')\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\tconst { isChecked } = this\n\n\t\treturn (\n\t\t\t<Host class={FormSwitchClass.root} is-checked={isChecked} size={this.size} invalid={toBoolAttrIfDefined(this.invalid)}>\n\t\t\t\t<div class={FormSwitchClass.holder}>\n\t\t\t\t\t<input class={FormSwitchClass.input} id={this.identifier || this.checkboxId}\n\t\t\t\t\t       type=\"checkbox\"\n\t\t\t\t\t       value={this.value}\n\t\t\t\t\t       name={this.name}\n\t\t\t\t\t       checked={this.isChecked}\n\t\t\t\t\t       onChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t       onFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t       onBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t       required={this.required}\n\t\t\t\t\t       aria-checked={this.isChecked}\n\t\t\t\t\t       aria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t       aria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t       aria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t       aria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t       aria-disabled={toBoolAttrIfDefined(this.disabled)} />\n\t\t\t\t\t<span class={FormSwitchClass.indicator}></span>\n\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\tthis.govFocus.emit(e)\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\tthis.govBlur.emit(e)\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.isChecked = (e.target as HTMLInputElement).checked\n\t\te.stopPropagation()\n\t\tthis.govChange.emit({\n\t\t\tchecked: this.isChecked,\n\t\t\tvalue: this.value,\n\t\t})\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.wcagDescribedBy, \"wcag-described-by\", FormSwitchClass.root)\n\t\tvalidateWcagRef(this.wcagLabelledBy, \"wcag-labelled-by\", FormSwitchClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.checkboxId, this.wcagLabelledBy, FormSwitchClass.root)\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-grid.cjs.entry.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f0dd3088.js');
+const template = require('./template-26608353.js');
+
+const GridClass = {
+  root: "gov-grid",
+};
+
+const govGridCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-grid{overflow:hidden}.gov-grid>*{margin:0 -0.0625rem -0.0625rem 0;border:0.0625rem solid var(--gov-grid-border-color, var(--gov-color-secondary-500));border-width:0 0 0.0625rem}.gov-grid>*:last-child{border-bottom-width:0}@media (min-width: 48em){.gov-grid{display:grid}.gov-grid--x2{grid-template-columns:repeat(2, 1fr)}.gov-grid--x2>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-grid--x2>*:nth-child(-n+3){border-top-width:0}.gov-grid--x2>*:nth-child(2n+2){border-right-width:0}}@media (min-width: 48em) and (max-width: 63.99em){.gov-grid--x3,.gov-grid--x4{grid-template-columns:repeat(2, 1fr)}.gov-grid--x3>*,.gov-grid--x4>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-grid--x3>*:nth-child(-n+3),.gov-grid--x4>*:nth-child(-n+3){border-top-width:0}.gov-grid--x3>*:nth-child(2n+2),.gov-grid--x4>*:nth-child(2n+2){border-right-width:0}}@media (min-width: 64em){.gov-grid--x3{grid-template-columns:repeat(3, 1fr)}.gov-grid--x3>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-grid--x3>*:nth-child(-n+4){border-top-width:0}.gov-grid--x3>*:nth-child(3n+3){border-right-width:0}}@media (min-width: 64em) and (max-width: 74.99em){.gov-grid--x4{grid-template-columns:repeat(3, 1fr)}.gov-grid--x4>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-grid--x4>*:nth-child(-n+4){border-top-width:0}.gov-grid--x4>*:nth-child(3n+3){border-right-width:0}}@media (min-width: 75em){.gov-grid--x4{grid-template-columns:repeat(4, 1fr)}.gov-grid--x4>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-grid--x4>*:nth-child(-n+5){border-top-width:0}.gov-grid--x4>*:nth-child(4n+4){border-right-width:0}}";
+
+const GovGrid = class {
+  // private h: GovHost
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.columns = 3;
+  }
+  get classNames() {
+    return template.prepareClasses([
+      GridClass.root,
+      this.columns && GridClass.root + '--x' + this.columns
+    ]);
+  }
+  render() {
+    return (index.h(index.Host, { class: this.classNames }, index.h("slot", null)));
+  }
+  get host() { return index.getElement(this); }
+};
+GovGrid.style = govGridCss;
+
+exports.gov_grid = GovGrid;
+
+//# sourceMappingURL=gov-grid.cjs.entry.js.map

package/dist/cjs/gov-grid.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gov-grid.entry.cjs.js","mappings":";;;;;;;AAAO,MAAM,SAAS,GAAG;EACxB,IAAI,EAAE,UAAU;CAChB;;ACFD,MAAM,UAAU,GAAG,8sDAA8sD;;MCUptD,OAAO;;EAGnB;;mBAOmC,CAAC;GALnC;EASD,IAAI,UAAU;IAEb,OAAOA,uBAAc,CAAC;MACrB,SAAS,CAAC,IAAI;MACd,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC,OAAO;KACrD,CAAC,CAAA;GACF;EAED,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,UAAU,IAC3BD,qBAAO,CACD,EACP;GACD;;;;;;;","names":["prepareClasses","h","Host"],"sources":["../../../packages/core/src/components/gov-grid/constants.ts","../../../packages/core/src/components/gov-grid/gov-grid.scss?tag=gov-grid","../../../packages/core/src/components/gov-grid/gov-grid.tsx"],"sourcesContent":["export const GridClass = {\n\troot: \"gov-grid\",\n}\n","/*\n *   Grid\n */\n\n$class: \".gov-grid\";\n\n$line-width: rem-calc(1);\n\n@mixin grid-lines($i) {\n\tgrid-template-columns: repeat(#{$i}, 1fr);\n\t& > * {\n\t\tborder-width: $line-width $line-width $line-width 0;\n\t\t&:nth-child(-n + #{$i + 1}) {\n\t\t\tborder-top-width: 0;\n\t\t}\n\t\t&:nth-child(#{$i}n + #{$i}) {\n\t\t\tborder-right-width: 0;\n\t\t}\n\t}\n}\n\n#{$class} {\n\toverflow: hidden;\n\t& > * {\n\t\tmargin: 0 calc($line-width * -1) calc($line-width * -1) 0;\n\t\tborder: $line-width solid $grid-border-color;\n\t\tborder-width: 0 0 $line-width;\n\t\t&:last-child {\n\t\t\tborder-bottom-width: 0;\n\t\t}\n\t}\n\n\t// VARIANTS\n\t// columns\n\t@include mq($from: md) {\n\t\tdisplay: grid;\n\t\t&--x2 {\n\t\t\t@include grid-lines(2);\n\t\t}\n\t\t@include mq($until: lg) {\n\t\t\t&--x3,\n\t\t\t&--x4 {\n\t\t\t\t@include grid-lines(2);\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: lg) {\n\t\t&--x3 {\n\t\t\t@include grid-lines(3);\n\t\t}\n\t\t@include mq($until: xl) {\n\t\t\t&--x4 {\n\t\t\t\t@include grid-lines(3);\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: xl) {\n\t\t&--x4 {\n\t\t\t@include grid-lines(4);\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { GridClass } from './constants'\nimport { prepareClasses } from \"../../helpers/Dom/template\"\n// import { govHost } from '../../helpers/Dom/template'\n// import { GovHost } from '../../helpers/Dom/template.d'\n\n@Component({\n\ttag: 'gov-grid',\n\tstyleUrl: 'gov-grid.scss',\n})\nexport class GovGrid {\n\t// private h: GovHost\n\n\tconstructor() {\n\t\t// this.h = govHost(this.host)\n\t}\n\n\t/**\n\t * Determide if component should have inversed colors to be used on dark background\n\t */\n\t@Prop() readonly columns: number = 3\n\n\t@Element() host: HTMLGovGridElement\n\n\tget classNames(): string {\n\n\t\treturn prepareClasses([\n\t\t\tGridClass.root,\n\t\t\tthis.columns && GridClass.root + '--x' + this.columns\n\t\t])\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.classNames}>\n\t\t\t\t<slot/>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-icon.cjs.entry.js

@@ -0,0 +1,111 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f0dd3088.js');
+
+const IconClass = {
+  root: "gov-icon",
+  holder: "gov-icon__holder",
+};
+
+const version = "0.0.1";
+
+// @ts-ignore
+const dsVersion = () => {
+  return version;
+};
+
+const iconCache = {};
+const requestCache = {};
+async function fetchIcon({ name, type }) {
+  if (iconCache[name]) {
+    return iconCache[name];
+  }
+  if (!requestCache[name]) {
+    requestCache[name] = fetch(index.getAssetPath(`./assets/icons/${type}/${name}.svg`) + `?v=${dsVersion()}`)
+      .then(resp => {
+      if (resp.status === 200) {
+        return resp.text();
+      }
+      else {
+        throw new Error("Gov Icon doen't exists");
+      }
+    });
+  }
+  const path = await requestCache[name];
+  iconCache[name] = path;
+  return path;
+}
+
+const govIconCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-icon{display:inline-flex}.gov-icon__holder,.gov-icon svg{display:inline-flex;width:100%;height:100%}";
+
+const GovIcon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.name = null;
+    this.type = "basic";
+    this.iconData = undefined;
+    this.visible = false;
+    this.error = false;
+  }
+  async loadIconPathData() {
+    const { name, visible, type } = this;
+    if (!name || !visible) {
+      return;
+    }
+    try {
+      this.iconData = await fetchIcon({ name, type });
+    }
+    catch (e) {
+      this.error = true;
+    }
+  }
+  connectedCallback() {
+    this.waitUntilVisible(async () => {
+      this.visible = true;
+      await this.loadIconPathData();
+    });
+  }
+  disconnectedCallback() {
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+  }
+  async componentWillLoad() {
+    await this.loadIconPathData();
+  }
+  waitUntilVisible(callback) {
+    if (typeof window === "undefined" || !window.IntersectionObserver) {
+      callback();
+      return;
+    }
+    this.intersectionObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          this.intersectionObserver.disconnect();
+          this.intersectionObserver = null;
+          callback();
+        }
+      });
+    }, { rootMargin: "50px" });
+    this.intersectionObserver.observe(this.el);
+  }
+  render() {
+    if (this.error) {
+      return null;
+    }
+    return (index.h(index.Host, { class: IconClass.root }, index.h("span", { class: IconClass.holder, innerHTML: this.iconData })));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "name": ["loadIconPathData"]
+  }; }
+};
+GovIcon.style = govIconCss;
+
+exports.gov_icon = GovIcon;
+
+//# sourceMappingURL=gov-icon.cjs.entry.js.map

package/dist/cjs/gov-icon.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gov-icon.entry.cjs.js","mappings":"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","names":["getAssetPath","h","Host"],"sources":["../../../packages/core/src/components/gov-icon/constants.ts","../../../packages/core/src/utils/ds.utils.ts","../../../packages/core/src/utils/icon.utils.ts","../../../packages/core/src/components/gov-icon/gov-icon.scss?tag=gov-icon","../../../packages/core/src/components/gov-icon/gov-icon.tsx"],"sourcesContent":["export const Types = ['basic', 'complex', 'colored'] as const\nexport type Type = typeof Types[number]\n\nexport const IconClass = {\n\troot: \"gov-icon\",\n\tholder: \"gov-icon__holder\",\n}","// @ts-ignore\nimport {version} from '../../package.json'\n\nexport const dsVersion = (): string => {\n\treturn version\n}\n","import { getAssetPath } from \"@stencil/core\"\nimport { dsVersion } from \"./ds.utils\"\n\nconst iconCache: { [key: string]: string } = {}\nconst requestCache: { [key: string]: Promise<string> } = {}\n\nexport async function fetchIcon({ name,type }: { name: string,type: string }): Promise<string> {\n\tif (iconCache[name]) {\n\t\treturn iconCache[name]\n\t}\n\tif (!requestCache[name]) {\n\t\trequestCache[name] = fetch(getAssetPath(`./assets/icons/${type}/${name}.svg`) + `?v=${dsVersion()}`)\n\t\t\t.then(resp => {\n\t\t\t\tif(resp.status === 200) {\n\t\t\t\t\treturn resp.text()\n\t\t\t\t} else {\n\t\t\t\t\tthrow new Error(\"Gov Icon doen't exists\")\n\t\t\t\t}\n\t\t\t})\n\t}\n\tconst path = await requestCache[name]\n\ticonCache[name] = path\n\treturn path\n}\n","/*\n *   Icon\n */\n\n$class: \".gov-icon\";\n\n#{$class} {\n\tdisplay: inline-flex;\n\t&__holder,\n\tsvg {\n\t\tdisplay: inline-flex;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n}\n","import { Build, Component, Element, h, Prop, State, Watch, Host } from \"@stencil/core\"\nimport { IconClass, Type } from \"./constants\"\nimport { fetchIcon } from \"../../utils/icon.utils\"\n\n@Component({\n\tassetsDirs: [\"assets\"],\n\tstyleUrl: \"gov-icon.scss\",\n\ttag: \"gov-icon\",\n})\nexport class GovIcon {\n\t@Element() el: HTMLElement\n\t/**\n\t * Name of icon\n\t */\n\t@Prop() name: string = null\n\t/**\n\t * Type of icon\n\t */\n\t@Prop() type: Type = \"basic\"\n\t@State() private iconData: string\n\t@State() private visible = false\n\t@State() private error = false\n\tprivate intersectionObserver: IntersectionObserver\n\n\t@Watch(\"name\")\n\tprivate async loadIconPathData(): Promise<void> {\n\t\tconst { name, visible, type } = this\n\t\tif (!Build.isBrowser || !name || !visible) {\n\t\t\treturn\n\t\t}\n\t\ttry {\n\t\t\tthis.iconData = await fetchIcon({ name, type })\n\t\t} catch (e) {\n\t\t\tthis.error = true\n\t\t}\n\t}\n\n\n\tconnectedCallback(): void {\n\t\tthis.waitUntilVisible(async () => {\n\t\t\tthis.visible = true\n\t\t\tawait this.loadIconPathData()\n\t\t})\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tif (this.intersectionObserver) {\n\t\t\tthis.intersectionObserver.disconnect()\n\t\t\tthis.intersectionObserver = null\n\t\t}\n\t}\n\n\tasync componentWillLoad(): Promise<void> {\n\t\tawait this.loadIconPathData()\n\t}\n\n\tprivate waitUntilVisible(callback: () => void): void {\n\t\tif (!Build.isBrowser || typeof window === \"undefined\" || !(window as any).IntersectionObserver) {\n\t\t\tcallback()\n\t\t\treturn\n\t\t}\n\t\tthis.intersectionObserver = new IntersectionObserver((entries) => {\n\t\t\tentries.forEach((entry) => {\n\t\t\t\tif (entry.isIntersecting) {\n\t\t\t\t\tthis.intersectionObserver.disconnect()\n\t\t\t\t\tthis.intersectionObserver = null\n\t\t\t\t\tcallback()\n\t\t\t\t}\n\t\t\t})\n\t\t}, { rootMargin: \"50px\" })\n\t\tthis.intersectionObserver.observe(this.el)\n\t}\n\n\n\trender() {\n\t\tif (this.error) {\n\t\t\treturn null\n\t\t}\n\t\treturn (\n\t\t\t<Host class={IconClass.root}>\n\t\t\t\t<span class={IconClass.holder} innerHTML={this.iconData}></span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-message.cjs.entry.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f0dd3088.js');
+const props = require('./props-bb89fb59.js');
+const variants = require('./variants-04113a72.js');
+const template = require('./template-26608353.js');
+require('./gov.log-4527e960.js');
+
+const MessageClass = {
+  root: "gov-message",
+  icon: "gov-message__icon",
+  content: "gov-message__content",
+  close: "gov-message__close",
+};
+
+const govMessageCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-message{position:relative;display:flex;gap:1rem;flex-direction:column;padding:0.75rem 1rem;border-left:0.25rem solid transparent;background:var(--gov-toast-message-bg, var(--gov-color-secondary-100))}.gov-message__icon{flex:0 0 1.25rem;width:1.25rem;height:1.25rem}.gov-message__content{flex:1 1 auto}.gov-message__content p{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)}.gov-message__content p:last-child{margin:0}@media (min-width: 30em){.gov-message{flex-direction:row}}.gov-message[shadow=\"\"],.gov-message[shadow=true i],.gov-message[shadow=\"1\"]{box-shadow:var(--gov-message-box-shadow, 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1))}.gov-message[variant=warning]{border-left-color:var(--gov-message-warning-color, var(--gov-color-warning));background:var(--gov-message-warning-bg-color, var(--gov-color-warning-100))}.gov-message[variant=warning] .gov-message__icon{color:var(--gov-message-warning-color, var(--gov-color-warning))}.gov-message[variant=warning][inverse=\"\"],.gov-message[variant=warning][inverse=true i],.gov-message[variant=warning][inverse=\"1\"]{background:var(--gov-message-warning-color, var(--gov-color-secondary-100))}.gov-message[variant=error]{border-left-color:var(--gov-message-error-color, var(--gov-color-error));background:var(--gov-message-error-bg-color, var(--gov-color-error-100))}.gov-message[variant=error] .gov-message__icon{color:var(--gov-message-error-color, var(--gov-color-error))}.gov-message[variant=error][inverse=\"\"],.gov-message[variant=error][inverse=true i],.gov-message[variant=error][inverse=\"1\"]{background:var(--gov-message-warning-color, var(--gov-color-secondary-100))}.gov-message[variant=secondary]{border-left-color:var(--gov-message-secondary-color, var(--gov-color-secondary));background:var(--gov-message-secondary-bg-color, var(--gov-color-secondary-200))}.gov-message[variant=secondary] .gov-message__icon{color:var(--gov-message-secondary-color, var(--gov-color-secondary))}.gov-message[variant=secondary][inverse=\"\"],.gov-message[variant=secondary][inverse=true i],.gov-message[variant=secondary][inverse=\"1\"]{background:var(--gov-message-warning-color, var(--gov-color-secondary-100))}.gov-message[variant=success]{border-left-color:var(--gov-message-success-color, var(--gov-color-success));background:var(--gov-message-success-bg-color, var(--gov-color-success-100))}.gov-message[variant=success] .gov-message__icon{color:var(--gov-message-success-color, var(--gov-color-success))}.gov-message[variant=success][inverse=\"\"],.gov-message[variant=success][inverse=true i],.gov-message[variant=success][inverse=\"1\"]{background:var(--gov-message-warning-color, var(--gov-color-secondary-100))}.gov-message[variant=primary]{border-left-color:var(--gov-message-primary-color, var(--gov-color-primary));background:var(--gov-message-primary-bg-color, var(--gov-color-primary-100))}.gov-message[variant=primary] .gov-message__icon{color:var(--gov-message-primary-color, var(--gov-color-primary))}.gov-message[variant=primary][inverse=\"\"],.gov-message[variant=primary][inverse=true i],.gov-message[variant=primary][inverse=\"1\"]{background:var(--gov-message-warning-color, var(--gov-color-secondary-100))}";
+
+const GovMessage = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.variant = variants.Variants.PRIMARY;
+    this.h = template.govHost(this.host);
+  }
+  validateVariant(newValue) {
+    props.validateProp(variants.Variants, newValue, MessageClass.root);
+  }
+  render() {
+    return (index.h(index.Host, { class: this.h.classes(MessageClass.root), variant: this.variant, role: "alert" }, this.h.hasSlot('icon') && (index.h("span", { class: MessageClass.icon }, index.h("slot", { name: "icon" }))), index.h("div", { class: MessageClass.content }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "variant": ["validateVariant"]
+  }; }
+};
+GovMessage.style = govMessageCss;
+
+exports.gov_message = GovMessage;
+
+//# sourceMappingURL=gov-message.cjs.entry.js.map

package/dist/cjs/gov-message.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gov-message.entry.cjs.js","mappings":";;;;;;;;;;AAKO,MAAM,YAAY,GAAG;EAC3B,IAAI,EAAE,aAAa;EACnB,IAAI,EAAE,mBAAmB;EACzB,OAAO,EAAE,sBAAsB;EAC/B,KAAK,EAAE,oBAAoB;CAC3B;;ACVD,MAAM,aAAa,GAAG,q3GAAq3G;;MCY93G,UAAU;EAGtB;;mBASwCA,iBAAQ,CAAC,OAAO;IARvD,IAAI,CAAC,CAAC,GAAGC,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAUD,eAAe,CAAC,QAAgB;IAC/BC,kBAAY,CAACF,iBAAQ,EAAE,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;GACnD;EAED,MAAM;IACL,QACCG,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,OAAO,IACjF,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtBD,kBAAM,KAAK,EAAE,YAAY,CAAC,IAAI,IAC7BA,kBAAM,IAAI,EAAC,MAAM,GAAG,CACd,CACP,EAEDA,iBAAK,KAAK,EAAE,YAAY,CAAC,OAAO,IAC/BA,qBAAQ,CACH,CACA,EACP;GACD;;;;;;;;;;","names":["Variants","govHost","validateProp","h","Host"],"sources":["../../../packages/core/src/components/gov-message/constants.ts","../../../packages/core/src/components/gov-message/gov-message.scss?tag=gov-message","../../../packages/core/src/components/gov-message/gov-message.tsx"],"sourcesContent":["import { Variants as GlobalVariants } from '../../core/constants/variants'\n\nexport const Variants = [undefined, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY, GlobalVariants.WARNING, GlobalVariants.ERROR, GlobalVariants.SUCCESS] as const\nexport type VariantType = typeof Variants[number]\n\nexport const MessageClass = {\n\troot: \"gov-message\",\n\ticon: \"gov-message__icon\",\n\tcontent: \"gov-message__content\",\n\tclose: \"gov-message__close\",\n}\n","/*\n *   Alert\n */\n\n@import \"../gov-toast/gov-toast-message-core.scss\";\n$class: \".gov-message\";\n\n#{$class} {\n\t@include toast-message-core;\n\n\t// VARIANTS\n\t@include parameter(\"shadow\") {\n\t\tbox-shadow: $message-box-shadow;\n\t}\n\t@each $variant, $definitions in $message-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\tborder-left-color: get(\"color\", $definitions);\n\t\t\tbackground: get(\"bg-color\", $definitions);\n\t\t\t#{$class} {\n\t\t\t\t&__icon {\n\t\t\t\t\tcolor: get(\"color\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// STATES\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\tbackground: $message-bg-inverse;\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { MessageClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.d'\nimport { Variants } from '../../core/constants/variants'\nimport {VariantType} from './constants'\n\n@Component({\n\ttag: 'gov-message',\n\tstyleUrl: 'gov-message.scss',\n})\nexport class GovMessage {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovMessageElement\n\n\t/**\n\t * Style variation of the content message.\n\t */\n\t@Prop() readonly variant: VariantType = Variants.PRIMARY\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, MessageClass.root)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(MessageClass.root)} variant={this.variant} role=\"alert\">\n\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t<span class={MessageClass.icon}>\n\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\n\t\t\t\t<div class={MessageClass.content}>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-modal.cjs.entry.js

@@ -0,0 +1,99 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f0dd3088.js');
+const string_utils = require('./string.utils-f9b3501b.js');
+const win = require('./win-aa54b884.js');
+const constants = require('./constants-e47694c4.js');
+const utils = require('./utils-a51135ab.js');
+const template = require('./template-26608353.js');
+const gov_log = require('./gov.log-4527e960.js');
+
+const govModalCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-modal{display:none}.gov-modal__dialog{z-index:101;position:fixed;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:100%;max-width:var(--gov-modal-max-width, 52.5rem);height:100%;padding:0.5rem;border:none;background:transparent;transform:translate(-50%, -50%);pointer-events:none}.gov-modal__inner{position:relative;display:flex;flex-direction:column;width:100%;max-height:100%;border-radius:var(--gov-border-radius, 0.1875rem);background:var(--gov-modal-bg, var(--gov-color-secondary-100));overflow:hidden;pointer-events:auto;box-shadow:0 0 1.5rem rgba(var(--gov-color-secondary-800-rgb), 0.24)}.gov-modal__header{display:flex;gap:1rem;align-items:flex-start;padding:1.5rem 0.25rem 1.5rem 1rem;border-bottom:var(--gov-modal-border-color, 0.0625rem solid var(--gov-color-secondary-500))}.gov-modal__icon{flex:0 0 auto;padding-top:calc((var(--gov-text-3xl-font-size) * 1.5 - 1.5rem) / 2)}.gov-modal__icon>*{width:1.5rem;height:1.5rem}.gov-modal__title{font-weight:var(--gov-text-3xl-font-weight);font-size:var(--gov-text-3xl-font-size);line-height:var(--gov-text-3xl-line-height);letter-spacing:var(--gov-text-3xl-letter-spacing);margin:0}.gov-modal__close{flex:0 0 auto;margin-left:auto;padding-top:calc((var(--gov-text-3xl-font-size) * 1.5 - 2rem) / 2)}.gov-modal__content{height:100%;padding:1.5rem 1rem;color:var(--gov-modal-text-color, var(--gov-color-secondary-700));overflow:auto}.gov-modal__content>*:last-child{margin-bottom:0}.gov-modal__actions{display:flex;gap:0.5rem 1rem;flex-wrap:wrap;justify-content:flex-end;padding:1.5rem 1rem;border-top:var(--gov-modal-border-color, 0.0625rem solid var(--gov-color-secondary-500))}.gov-modal__dialog:focus .gov-modal__inner{outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base)}.gov-modal[open=\"\"],.gov-modal[open=true i],.gov-modal[open=\"1\"]{display:block}@media (min-width: 30em){.gov-modal__dialog{max-width:calc(var(--gov-modal-max-width, 52.5rem) + 3rem);padding:1.5rem}.gov-modal__dialog:focus{outline-offset:-1.5rem}.gov-modal__inner{box-shadow:0 0 2rem rgba(var(--gov-color-secondary-800-rgb), 0.32)}.gov-modal--prompt .gov-modal__dialog{max-width:calc(var(--gov-modal-prompt-max-width, 33.125rem) + 3rem)}}@media (min-width: 48em){.gov-modal__header{gap:1.25rem;padding:2rem 2.25rem 2rem 3rem}.gov-modal__close{padding-top:calc((var(--gov-text-3xl-font-size) * 1.5 - 2.5rem) / 2)}.gov-modal__content{padding:1.5rem 3rem 2rem}.gov-modal--prompt .gov-modal__header,.gov-modal--prompt .gov-modal__content,.gov-modal--prompt .gov-modal__actions{padding:1.5rem}}";
+
+const GovModal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.govClose = index.createEvent(this, "gov-close", 7);
+    this.open = false;
+    this.label = undefined;
+    this.role = "dialog";
+    this.labelTag = "h2";
+    this.wcaglabelledBy = undefined;
+    this.wcagDescribedBy = undefined;
+    this.wcagCloseLabel = undefined;
+    this.wcagCloseLabelledBy = undefined;
+    this.h = template.govHost(this.host);
+    this.labelId = string_utils.createID("GovModalLabel");
+    this.contentId = string_utils.createID("GovModalContent");
+  }
+  validateLabelTag(newValue) {
+    const validTags = ["h1", "h2", "h3", "h4", "h5", "h6"];
+    if (newValue) {
+      if (!validTags.includes(newValue)) {
+        gov_log.govErrorLog(`[${constants.ModalClass.root}]: Tag ${newValue} is not allowed.`);
+      }
+    }
+  }
+  showModal() {
+    this.open = true;
+    document.body.classList.add(constants.ModalClass.bodyFix);
+  }
+  hideModal() {
+    this.open = false;
+    document.body.classList.remove(constants.ModalClass.bodyFix);
+  }
+  async componentWillRender() {
+    if (this.open) {
+      this.showModal();
+    }
+    else {
+      this.hideModal();
+    }
+  }
+  async componentDidRender() {
+    if (win.canValidateWcagOnRender()) {
+      await utils.delay(500);
+      await this.validateWcag();
+    }
+  }
+  render() {
+    const LabelTag = this.labelTag;
+    return (index.h(index.Host, { class: constants.ModalClass.root, open: this.open }, index.h("dialog", { class: constants.ModalClass.dialog, hidden: !this.open, tabindex: "-1", open: this.open, "aria-modal": "true", "aria-hidden": template.toBoolAttr(!this.open), "aria-labelledby": this.wcaglabelledBy || this.labelId, "aria-describedby": this.wcagDescribedBy || this.contentId, role: this.role }, index.h("div", { class: constants.ModalClass.inner }, index.h("div", { class: constants.ModalClass.header }, this.h.hasSlot('icon') && (index.h("div", { class: constants.ModalClass.icon }, index.h("slot", { name: "icon" }))), this.label &&
+      index.h(LabelTag, { class: constants.ModalClass.title, id: this.labelId }, this.label), index.h("gov-button", { class: constants.ModalClass.close, variant: "primary", wcagLabel: this.wcagCloseLabel, wcagLabelledBy: this.wcagCloseLabelledBy, type: "base", "on-gov-click": this.onCloseHandler.bind(this) }, index.h("gov-icon", { name: "cross" }))), index.h("div", { class: constants.ModalClass.content, id: this.contentId }, index.h("slot", null)))), index.h("gov-backdrop", { visible: this.open, "wcag-label": this.wcagCloseLabel, "wcag-labelled-by": this.wcagCloseLabelledBy, "on-gov-click": this.onCloseHandler.bind(this) })));
+  }
+  onCloseHandler(e) {
+    e.stopPropagation();
+    this.hideModal();
+    this.govClose.emit(e);
+  }
+  /**
+   * Showing the modal
+   */
+  async show() {
+    this.showModal();
+  }
+  /**
+   * Hidding the modal
+   */
+  async hide() {
+    this.hideModal();
+  }
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  async validateWcag() {
+    win.validateWcagRef(this.wcaglabelledBy, 'aria-labelledby', constants.ModalClass.root);
+    win.validateWcagRef(this.wcagDescribedBy, 'aria-describedby', constants.ModalClass.root);
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "labelTag": ["validateLabelTag"]
+  }; }
+};
+GovModal.style = govModalCss;
+
+exports.gov_modal = GovModal;
+
+//# sourceMappingURL=gov-modal.cjs.entry.js.map

package/dist/cjs/gov-modal.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gov-modal.entry.cjs.js","mappings":"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","names":["govHost","createID","govErrorLog","ModalClass","canValidateWcagOnRender","delay","h","Host","toBoolAttr","validateWcagRef"],"sources":["../../../packages/core/src/components/gov-modal/gov-modal.scss?tag=gov-modal","../../../packages/core/src/components/gov-modal/gov-modal.tsx"],"sourcesContent":["/*\n *   Modal\n */\n\n$class: \".gov-modal\";\n\n#{$class} {\n\tdisplay: none;\n\t&__dialog {\n\t\t@include z-index(\"modal\", 1);\n\t\tposition: fixed;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: 100%;\n\t\tmax-width: $modal-max-width;\n\t\theight: 100%;\n\t\tpadding: rem-calc(8);\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\ttransform: translate(-50%, -50%);\n\t\tpointer-events: none;\n\t}\n\t&__inner {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\twidth: 100%;\n\t\tmax-height: 100%;\n\t\tborder-radius: $border-radius;\n\t\tbackground: $modal-bg;\n\t\toverflow: hidden;\n\t\tpointer-events: auto;\n\t\tbox-shadow: get($shadow-l, $shadows);\n\t}\n\t&__header {\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\t\talign-items: flex-start;\n\t\tpadding: rem-calc(24 4 24 16);\n\t\tborder-bottom: $modal-border;\n\t}\n\t&__icon {\n\t\tflex: 0 0 auto;\n\t\tpadding-top: calc(((var(--gov-text-#{$font-size-3xl}-font-size) * 1.5) - rem-calc(24)) / 2);\n\t\t& > * {\n\t\t\twidth: rem-calc(24);\n\t\t\theight: rem-calc(24);\n\t\t}\n\t}\n\t&__title {\n\t\t@include typography($font-size-3xl);\n\t\tmargin: 0;\n\t}\n\t&__close {\n\t\tflex: 0 0 auto;\n\t\tmargin-left: auto;\n\t\tpadding-top: calc(((var(--gov-text-#{$font-size-3xl}-font-size) * 1.5) - rem-calc(32)) / 2);\n\t}\n\t&__content {\n\t\theight: 100%;\n\t\tpadding: rem-calc(24 16);\n\t\tcolor: $modal-text-color;\n\t\toverflow: auto;\n\t\t& > *:last-child {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t}\n\t&__actions {\n\t\tdisplay: flex;\n\t\tgap: rem-calc(8 16);\n\t\tflex-wrap: wrap;\n\t\tjustify-content: flex-end;\n\t\tpadding: rem-calc(24 16);\n\t\tborder-top: $modal-border;\n\t}\n\n\t// STATES\n\t&__dialog:focus &__inner {\n\t\toutline: $outline;\n\t}\n\t@include parameter(\"open\") {\n\t\tdisplay: block;\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t&__dialog {\n\t\t\tmax-width: calc($modal-max-width + 2 * rem-calc(24));\n\t\t\tpadding: rem-calc(24);\n\t\t\t&:focus {\n\t\t\t\toutline-offset: rem-calc(-24);\n\t\t\t}\n\t\t}\n\t\t&__inner {\n\t\t\tbox-shadow: get($shadow-xl, $shadows);\n\t\t}\n\n\t\t&--prompt &__dialog {\n\t\t\tmax-width: calc($modal-prompt-max-width + 2 * rem-calc(24));\n\t\t}\n\t}\n\t@include mq($from: md) {\n\t\t&__header {\n\t\t\tgap: rem-calc(20);\n\t\t\tpadding: rem-calc(32 36 32 48);\n\t\t}\n\t\t&__close {\n\t\t\tpadding-top: calc(((var(--gov-text-#{$font-size-3xl}-font-size) * 1.5) - rem-calc(40)) / 2);\n\t\t}\n\t\t&__content {\n\t\t\tpadding: rem-calc(24 48 32);\n\t\t}\n\n\t\t// MODIF\n\t\t&--prompt {\n\t\t\t#{$class} {\n\t\t\t\t&__header,\n\t\t\t\t&__content,\n\t\t\t\t&__actions {\n\t\t\t\t\tpadding: rem-calc(24);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Event, Element, EventEmitter, h, Host, Method, Prop, Watch } from \"@stencil/core\"\nimport { createID } from \"../../utils/string.utils\"\nimport { validateWcagRef } from \"../../helpers/Validate/wcag\"\nimport { ModalClass } from \"./constants\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\nimport {toBoolAttr} from \"../../helpers/Dom/template\"\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.d'\nimport { govErrorLog } from \"../../helpers/Log/gov.log\"\n\n@Component({\n\ttag: \"gov-modal\",\n\tstyleUrl: \"gov-modal.scss\",\n})\nexport class GovModal {\n\tprivate h: GovHost\n\tprivate readonly labelId: string\n\tprivate readonly contentId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.labelId = createID(\"GovModalLabel\")\n\t\tthis.contentId = createID(\"GovModalContent\")\n\t}\n\n\t@Element() host: HTMLGovModalElement\n\n\t/**\n\t * Attribute for modal window display\n\t */\n\t@Prop() open: boolean = false\n\t/**\n\t * Title of modal window\n\t */\n\t@Prop() label: string\n\t/**\n\t * Role of modal\n\t */\n\t@Prop({ attribute: \"role\" }) role: string = \"dialog\"\n\t/**\n\t * Used to change the HMTL tag in the modal label for correct semantic structure\n\t */\n\t@Prop({ attribute: \"label-tag\" }) readonly labelTag: string = \"h2\"\n\t/**\n\t * String of id's that indicate alternative labels elements\n\t */\n\t@Prop({ attribute: \"wcag-labelled-by\" }) wcaglabelledBy: string\n\t/**\n\t * Indicates the id of a component that describes the modal.\n\t */\n\t@Prop({ attribute: \"wcag-described-by\" }) wcagDescribedBy: string\n\t/**\n\t * Adds accessible label for the modal close button that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: \"wcag-close-label\" }) wcagCloseLabel: string\n\t/**\n\t * A string of identifiers that indicate alternative label elements for closing the modal window\n\t */\n\t@Prop({ attribute: \"wcag-close-labelled-by\" }) wcagCloseLabelledBy: string\n\t/**\n\t * Emitted when modal window closes.\n\t */\n\t@Event({ eventName: \"gov-close\" }) govClose: EventEmitter<PointerEvent>\n\n\n\t@Watch(\"labelTag\")\n\tvalidateLabelTag(newValue: string): void {\n\t\tconst validTags = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"]\n\t\tif (newValue) {\n\t\t\tif (!validTags.includes(newValue)) {\n\t\t\t\tgovErrorLog(`[${ModalClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate showModal() {\n\t\tthis.open = true\n\t\tdocument.body.classList.add(ModalClass.bodyFix)\n\t}\n\n\tprivate hideModal() {\n\t\tthis.open = false\n\t\tdocument.body.classList.remove(ModalClass.bodyFix)\n\t}\n\n\tasync componentWillRender() {\n\t\tif (this.open) {\n\t\t\tthis.showModal()\n\t\t} else {\n\t\t\tthis.hideModal();\n\t\t}\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\tconst LabelTag = this.labelTag\n\t\treturn (\n\t\t\t<Host class={ModalClass.root} open={this.open}>\n\t\t\t\t<dialog class={ModalClass.dialog}\n\t\t\t\t\t hidden={!this.open}\n\t\t\t\t\t tabindex=\"-1\"\n\t\t\t\t\t open={this.open}\n\t\t\t\t\t aria-modal=\"true\"\n\t\t\t\t\t aria-hidden={toBoolAttr(!this.open)}\n\t\t\t\t\t aria-labelledby={this.wcaglabelledBy || this.labelId}\n\t\t\t\t\t aria-describedby={this.wcagDescribedBy || this.contentId}\n\t\t\t\t\t role={this.role}>\n\t\t\t\t\t<div class={ModalClass.inner}>\n\t\t\t\t\t\t<div class={ModalClass.header}>\n\t\t\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t\t\t<div class={ModalClass.icon}>\n\t\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.label &&\n\t\t\t\t\t\t\t\t<LabelTag class={ModalClass.title} id={this.labelId}>{this.label}</LabelTag>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t<gov-button class={ModalClass.close}\n\t\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\t\twcagLabel={this.wcagCloseLabel}\n\t\t\t\t\t\t\t\t\t\twcagLabelledBy={this.wcagCloseLabelledBy}\n\t\t\t\t\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}>\n\t\t\t\t\t\t\t\t<gov-icon name=\"cross\" />\n\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class={ModalClass.content} id={this.contentId}>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</dialog>\n\n\t\t\t\t<gov-backdrop visible={this.open}\n\t\t\t\t\t\t\t  wcag-label={this.wcagCloseLabel}\n\t\t\t\t\t\t\t  wcag-labelled-by={this.wcagCloseLabelledBy}\n\t\t\t\t\t\t\t  on-gov-click={this.onCloseHandler.bind(this)} />\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onCloseHandler(e: PointerEvent) {\n\t\te.stopPropagation()\n\t\tthis.hideModal()\n\t\tthis.govClose.emit(e)\n\t}\n\n\t/**\n\t * Showing the modal\n\t */\n\t@Method()\n\tasync show(): Promise<void> {\n\t\tthis.showModal()\n\t}\n\n\t/**\n\t * Hidding the modal\n\t */\n\t@Method()\n\tasync hide(): Promise<void> {\n\t\tthis.hideModal()\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.wcaglabelledBy, 'aria-labelledby', ModalClass.root)\n\t\tvalidateWcagRef(this.wcagDescribedBy, 'aria-describedby', ModalClass.root)\n\t}\n}\n"],"version":3}