@gov-design-system-ce/components 0.0.15 → 0.0.16

package/dist/esm/gov-form-select.entry.js.map

@@ -0,0 +1 @@
+{"file":"gov-form-select.entry.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-form/select/gov-form-select.scss?tag=gov-form-select","../../../packages/core/src/components/gov-form/select/gov-form-select.tsx"],"sourcesContent":["/*\n *   Select\n */\n\n@import \"../select/gov-form-select-core.scss\";\n\n$class: \".gov-form-select\";\n\n#{$class} {\n\t@extend %form-select-core;\n}\n","import { Component, Element, h, State, Prop, Event, EventEmitter, Watch, Host, Method } from '@stencil/core'\nimport { GovHost } from '../../../helpers/Dom/template.types'\nimport { toBoolAttrIfDefined, govHost } from '../../../helpers/Dom/template'\nimport { FormSelectSizesType, FormSelectVariants, FormSelectVariantType, FormSelectClass, FormSelectSizes } from './constants'\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.types'\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?: FormSelectVariantType\n\t/**\n\t * Select’s size.\n\t */\n\t@Prop() readonly size?: FormSelectSizesType = '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-labelled-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(FormSelectVariants, newValue, FormSelectClass.root)\n\t}\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormSelectSizes, newValue, FormSelectClass.root)\n\t}\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\tthis.f.passAttrToLabel('required', String(this.required))\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=\"chevron-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>\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.target)\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"],"version":3}

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

@@ -0,0 +1,111 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b010bfb4.js';
+import { c as createID } from './string.utils-f268fc6b.js';
+import { v as validateProp } from './props-789f7529.js';
+import { g as govForm, e as FormSwitchClass, f as FormSwitchSizes } from './form-669a7180.js';
+import { g as govHost, t as toBoolAttrIfDefined } from './template-10332292.js';
+import { a as validateWcagRef, b as validateWcagLabelFor } from './wcag-3792d4bb.js';
+import { c as canValidateWcagOnRender } from './win-9c8460bb.js';
+import { d as delay } from './utils-c057a3fa.js';
+import { F as Fragment } from './Fragment-8d8d54fb.js';
+import './gov.log-af905420.js';
+import './sizes-6c5943b4.js';
+import './variants-2b936d58.js';
+import './constants-136d4cd3.js';
+import './constants-3df712e2.js';
+import './constants-2e8258cf.js';
+import './constants-ebec7de8.js';
+
+const govFormSwitchCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.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-neutral-white));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:calc((var(--gov-form-switch-xs-indicator-height, 1.25rem) * 1.6666666667 + var(--gov-form-switch-xs-gap, 0.75rem)) * -1);padding-top:calc((var(--gov-form-switch-xs-indicator-height, 1.25rem) - var(--gov-text-xs-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) * 1.6666666667 + var(--gov-form-switch-xs-gap, 0.75rem))}.gov-form-switch[size=xs] .gov-form-switch__holder{gap:var(--gov-form-switch-xs-gap, 0.75rem)}.gov-form-switch[size=xs] .gov-form-switch__indicator{display:block;width:calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) * 1.6666666667);height:var(--gov-form-switch-xs-indicator-height, 1.25rem);border-radius:calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) * 0.5)}.gov-form-switch[size=xs] .gov-form-switch__indicator::before{top:calc(var(--gov-form-switch-xs-toggle-offset, 0.051875rem) - 0.0625rem);left:calc(var(--gov-form-switch-xs-toggle-offset, 0.051875rem) - 0.0625rem);width:calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) - 2 * var(--gov-form-switch-xs-toggle-offset, 0.051875rem));height:calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) - 2 * var(--gov-form-switch-xs-toggle-offset, 0.051875rem))}.gov-form-switch[size=xs] .gov-form-switch__input[aria-checked]+.gov-form-switch__indicator::before{left:calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) * 1.6666666667 - var(--gov-form-switch-xs-indicator-height, 1.25rem) + var(--gov-form-switch-xs-toggle-offset, 0.051875rem) - 0.0625rem)}.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:calc((var(--gov-form-switch-s-indicator-height, 1.375rem) * 1.6666666667 + var(--gov-form-switch-s-gap, 0.75rem)) * -1);padding-top:calc((var(--gov-form-switch-s-indicator-height, 1.375rem) - var(--gov-text-s-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-switch-s-indicator-height, 1.375rem) * 1.6666666667 + var(--gov-form-switch-s-gap, 0.75rem))}.gov-form-switch[size=s] .gov-form-switch__holder{gap:var(--gov-form-switch-s-gap, 0.75rem)}.gov-form-switch[size=s] .gov-form-switch__indicator{display:block;width:calc(var(--gov-form-switch-s-indicator-height, 1.375rem) * 1.6666666667);height:var(--gov-form-switch-s-indicator-height, 1.375rem);border-radius:calc(var(--gov-form-switch-s-indicator-height, 1.375rem) * 0.5)}.gov-form-switch[size=s] .gov-form-switch__indicator::before{top:calc(var(--gov-form-switch-s-toggle-offset, 0.0575rem) - 0.0625rem);left:calc(var(--gov-form-switch-s-toggle-offset, 0.0575rem) - 0.0625rem);width:calc(var(--gov-form-switch-s-indicator-height, 1.375rem) - 2 * var(--gov-form-switch-s-toggle-offset, 0.0575rem));height:calc(var(--gov-form-switch-s-indicator-height, 1.375rem) - 2 * var(--gov-form-switch-s-toggle-offset, 0.0575rem))}.gov-form-switch[size=s] .gov-form-switch__input[aria-checked]+.gov-form-switch__indicator::before{left:calc(var(--gov-form-switch-s-indicator-height, 1.375rem) * 1.6666666667 - var(--gov-form-switch-s-indicator-height, 1.375rem) + var(--gov-form-switch-s-toggle-offset, 0.0575rem) - 0.0625rem)}.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:calc((var(--gov-form-switch-m-indicator-height, 1.5rem) * 1.6666666667 + var(--gov-form-switch-m-gap, 1rem)) * -1);padding-top:calc((var(--gov-form-switch-m-indicator-height, 1.5rem) - var(--gov-text-m-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-switch-m-indicator-height, 1.5rem) * 1.6666666667 + var(--gov-form-switch-m-gap, 1rem))}.gov-form-switch[size=m] .gov-form-switch__holder{gap:var(--gov-form-switch-m-gap, 1rem)}.gov-form-switch[size=m] .gov-form-switch__indicator{display:block;width:calc(var(--gov-form-switch-m-indicator-height, 1.5rem) * 1.6666666667);height:var(--gov-form-switch-m-indicator-height, 1.5rem);border-radius:calc(var(--gov-form-switch-m-indicator-height, 1.5rem) * 0.5)}.gov-form-switch[size=m] .gov-form-switch__indicator::before{top:calc(var(--gov-form-switch-m-toggle-offset, 0.0625rem) - 0.0625rem);left:calc(var(--gov-form-switch-m-toggle-offset, 0.0625rem) - 0.0625rem);width:calc(var(--gov-form-switch-m-indicator-height, 1.5rem) - 2 * var(--gov-form-switch-m-toggle-offset, 0.0625rem));height:calc(var(--gov-form-switch-m-indicator-height, 1.5rem) - 2 * var(--gov-form-switch-m-toggle-offset, 0.0625rem))}.gov-form-switch[size=m] .gov-form-switch__input[aria-checked]+.gov-form-switch__indicator::before{left:calc(var(--gov-form-switch-m-indicator-height, 1.5rem) * 1.6666666667 - var(--gov-form-switch-m-indicator-height, 1.5rem) + var(--gov-form-switch-m-toggle-offset, 0.0625rem) - 0.0625rem)}.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:calc((var(--gov-form-switch-l-indicator-height, 2rem) * 1.6666666667 + var(--gov-form-switch-l-gap, 1rem)) * -1);padding-top:calc((var(--gov-form-switch-l-indicator-height, 2rem) - var(--gov-text-l-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-switch-l-indicator-height, 2rem) * 1.6666666667 + var(--gov-form-switch-l-gap, 1rem))}.gov-form-switch[size=l] .gov-form-switch__holder{gap:var(--gov-form-switch-l-gap, 1rem)}.gov-form-switch[size=l] .gov-form-switch__indicator{display:block;width:calc(var(--gov-form-switch-l-indicator-height, 2rem) * 1.6666666667);height:var(--gov-form-switch-l-indicator-height, 2rem);border-radius:calc(var(--gov-form-switch-l-indicator-height, 2rem) * 0.5)}.gov-form-switch[size=l] .gov-form-switch__indicator::before{top:calc(var(--gov-form-switch-l-toggle-offset, 0.083125rem) - 0.0625rem);left:calc(var(--gov-form-switch-l-toggle-offset, 0.083125rem) - 0.0625rem);width:calc(var(--gov-form-switch-l-indicator-height, 2rem) - 2 * var(--gov-form-switch-l-toggle-offset, 0.083125rem));height:calc(var(--gov-form-switch-l-indicator-height, 2rem) - 2 * var(--gov-form-switch-l-toggle-offset, 0.083125rem))}.gov-form-switch[size=l] .gov-form-switch__input[aria-checked]+.gov-form-switch__indicator::before{left:calc(var(--gov-form-switch-l-indicator-height, 2rem) * 1.6666666667 - var(--gov-form-switch-l-indicator-height, 2rem) + var(--gov-form-switch-l-toggle-offset, 0.083125rem) - 0.0625rem)}";
+
+const GovFormSwitch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.govFocus = createEvent(this, "gov-focus", 7);
+    this.govBlur = createEvent(this, "gov-blur", 7);
+    this.govChange = createEvent(this, "gov-change", 7);
+    this.value = undefined;
+    this.noLabel = false;
+    this.checked = false;
+    this.required = false;
+    this.disabled = undefined;
+    this.name = undefined;
+    this.size = "m";
+    this.identifier = undefined;
+    this.invalid = undefined;
+    this.wcagDescribedBy = undefined;
+    this.wcagLabelledBy = undefined;
+    this.isChecked = undefined;
+    this.checkboxId = createID("GovCheckbox");
+    this.h = govHost(this.host);
+    this.f = govForm(this.h);
+  }
+  updateCheckedState(newValue) {
+    this.isChecked = newValue;
+    this.govChange.emit({
+      checked: this.isChecked,
+      value: this.value,
+    });
+  }
+  validateSize(newValue) {
+    validateProp(FormSwitchSizes, newValue, FormSwitchClass.root);
+  }
+  componentWillLoad() {
+    this.isChecked = this.checked;
+    this.f.passAttrToControl("type", "switch");
+  }
+  async componentDidRender() {
+    this.f.passAttrToLabel('identifier', this.identifier || this.checkboxId);
+    this.f.passAttrToLabel('required', String(this.required));
+    if (canValidateWcagOnRender()) {
+      await delay(500);
+      await this.validateWcag();
+    }
+  }
+  render() {
+    const { isChecked } = this;
+    const wrapCheckbox = (children) => {
+      if (this.noLabel) {
+        return (h("label", null, children));
+      }
+      return children;
+    };
+    return (h(Host, { class: this.h.classes(FormSwitchClass.root), "is-checked": isChecked, size: this.size, invalid: toBoolAttrIfDefined(this.invalid) }, h("div", { class: FormSwitchClass.holder }, wrapCheckbox(h(Fragment, null, h("input", { class: FormSwitchClass.input, id: this.identifier || this.checkboxId, type: "checkbox", value: this.value, name: this.name, checked: this.isChecked, onClick: this.onClickHandler.bind(this), 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" }))))));
+  }
+  onClickHandler(e) {
+    e.stopPropagation();
+  }
+  onFocusHandler(e) {
+    e.stopPropagation();
+    this.govFocus.emit(e);
+  }
+  onBlurHandler(e) {
+    e.stopPropagation();
+    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);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "checked": ["updateCheckedState"],
+    "size": ["validateSize"]
+  }; }
+};
+GovFormSwitch.style = govFormSwitchCss;
+
+export { GovFormSwitch as gov_form_switch };
+
+//# sourceMappingURL=gov-form-switch.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"gov-form-switch.entry.js","mappings":"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","names":[],"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\tdisplay: block;\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 \"../../../utils/string.utils\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { FormSwitchClass, FormSwitchSizes, FormSwitchSizesType } 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 { GovForm } from \"../../../helpers/Dom/form.types\"\nimport { govHost } from \"../../../helpers/Dom/template\"\nimport { GovHost } from \"../../../helpers/Dom/template.types\"\nimport { govForm } from \"../../../helpers/Dom/form\"\nimport { GovFormSwitchChangeEvent } from \"./interfaces\"\nimport Fragment from \"../../../helpers/Fragment\"\n\n@Component({\n\ttag: \"gov-form-switch\",\n\tstyleUrl: \"gov-form-switch.scss\",\n})\nexport class GovFormSwitch {\n\tprivate readonly h: GovHost\n\tprivate f: GovForm\n\n\tprivate readonly checkboxId: string\n\n\tconstructor() {\n\t\tthis.checkboxId = createID(\"GovCheckbox\")\n\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\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 * When you can't use the form label.\n\t */\n\t@Prop({ attribute: \"no-label\" }) readonly noLabel: boolean = false\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?: FormSwitchSizesType = \"m\"\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-labelled-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<GovFormSwitchChangeEvent>\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(FormSwitchSizes, 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\tthis.f.passAttrToLabel('identifier', this.identifier || this.checkboxId)\n\t\tthis.f.passAttrToLabel('required', String(this.required))\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\t\tconst wrapCheckbox = (children) => {\n\t\t\tif (this.noLabel) {\n\t\t\t\treturn (\n\t\t\t\t\t<label>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</label>\n\t\t\t\t)\n\t\t\t}\n\t\t\treturn children\n\t\t}\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(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{wrapCheckbox(\n\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass={FormSwitchClass.input}\n\t\t\t\t\t\t\t\tid={this.identifier || this.checkboxId}\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\t\tchecked={this.isChecked}\n\t\t\t\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\t\t\taria-checked={this.isChecked}\n\t\t\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span class={FormSwitchClass.indicator}></span>\n\t\t\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t\t\t</Fragment>,\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onClickHandler(e: Event) {\n\t\te.stopPropagation()\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govFocus.emit(e)\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\te.stopPropagation()\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/esm/gov-grid-item.entry.js

@@ -0,0 +1,26 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b010bfb4.js';
+import { a as GridItemClass } from './constants-2b14bb01.js';
+import { g as govHost } from './template-10332292.js';
+
+const govGridItemCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-grid-item{border:0 solid transparent;-o-border-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E\");border-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E\")}.gov-grid-item[size=\"1/12\"]{width:8.3333333333%}.gov-grid-item[size=\"2/12\"]{width:16.6666666667%}.gov-grid-item[size=\"3/12\"]{width:25%}.gov-grid-item[size=\"4/12\"]{width:33.3333333333%}.gov-grid-item[size=\"5/12\"]{width:41.6666666667%}.gov-grid-item[size=\"6/12\"]{width:50%}.gov-grid-item[size=\"7/12\"]{width:58.3333333333%}.gov-grid-item[size=\"8/12\"]{width:66.6666666667%}.gov-grid-item[size=\"9/12\"]{width:75%}.gov-grid-item[size=\"10/12\"]{width:83.3333333333%}.gov-grid-item[size=\"11/12\"]{width:91.6666666667%}.gov-grid-item[size=\"12/12\"]{width:100%}@media (min-width: 30em){.gov-grid-item[size-sm=\"1/12\"]{width:8.3333333333%}.gov-grid-item[size-sm=\"2/12\"]{width:16.6666666667%}.gov-grid-item[size-sm=\"3/12\"]{width:25%}.gov-grid-item[size-sm=\"4/12\"]{width:33.3333333333%}.gov-grid-item[size-sm=\"5/12\"]{width:41.6666666667%}.gov-grid-item[size-sm=\"6/12\"]{width:50%}.gov-grid-item[size-sm=\"7/12\"]{width:58.3333333333%}.gov-grid-item[size-sm=\"8/12\"]{width:66.6666666667%}.gov-grid-item[size-sm=\"9/12\"]{width:75%}.gov-grid-item[size-sm=\"10/12\"]{width:83.3333333333%}.gov-grid-item[size-sm=\"11/12\"]{width:91.6666666667%}.gov-grid-item[size-sm=\"12/12\"]{width:100%}}@media (min-width: 48em){.gov-grid-item[size-md=\"1/12\"]{width:8.3333333333%}.gov-grid-item[size-md=\"2/12\"]{width:16.6666666667%}.gov-grid-item[size-md=\"3/12\"]{width:25%}.gov-grid-item[size-md=\"4/12\"]{width:33.3333333333%}.gov-grid-item[size-md=\"5/12\"]{width:41.6666666667%}.gov-grid-item[size-md=\"6/12\"]{width:50%}.gov-grid-item[size-md=\"7/12\"]{width:58.3333333333%}.gov-grid-item[size-md=\"8/12\"]{width:66.6666666667%}.gov-grid-item[size-md=\"9/12\"]{width:75%}.gov-grid-item[size-md=\"10/12\"]{width:83.3333333333%}.gov-grid-item[size-md=\"11/12\"]{width:91.6666666667%}.gov-grid-item[size-md=\"12/12\"]{width:100%}}@media (min-width: 64em){.gov-grid-item[size-lg=\"1/12\"]{width:8.3333333333%}.gov-grid-item[size-lg=\"2/12\"]{width:16.6666666667%}.gov-grid-item[size-lg=\"3/12\"]{width:25%}.gov-grid-item[size-lg=\"4/12\"]{width:33.3333333333%}.gov-grid-item[size-lg=\"5/12\"]{width:41.6666666667%}.gov-grid-item[size-lg=\"6/12\"]{width:50%}.gov-grid-item[size-lg=\"7/12\"]{width:58.3333333333%}.gov-grid-item[size-lg=\"8/12\"]{width:66.6666666667%}.gov-grid-item[size-lg=\"9/12\"]{width:75%}.gov-grid-item[size-lg=\"10/12\"]{width:83.3333333333%}.gov-grid-item[size-lg=\"11/12\"]{width:91.6666666667%}.gov-grid-item[size-lg=\"12/12\"]{width:100%}}@media (min-width: 75em){.gov-grid-item[size-xl=\"1/12\"]{width:8.3333333333%}.gov-grid-item[size-xl=\"2/12\"]{width:16.6666666667%}.gov-grid-item[size-xl=\"3/12\"]{width:25%}.gov-grid-item[size-xl=\"4/12\"]{width:33.3333333333%}.gov-grid-item[size-xl=\"5/12\"]{width:41.6666666667%}.gov-grid-item[size-xl=\"6/12\"]{width:50%}.gov-grid-item[size-xl=\"7/12\"]{width:58.3333333333%}.gov-grid-item[size-xl=\"8/12\"]{width:66.6666666667%}.gov-grid-item[size-xl=\"9/12\"]{width:75%}.gov-grid-item[size-xl=\"10/12\"]{width:83.3333333333%}.gov-grid-item[size-xl=\"11/12\"]{width:91.6666666667%}.gov-grid-item[size-xl=\"12/12\"]{width:100%}}";
+
+const GovGridItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.size = '12/12';
+    this.sizeSm = undefined;
+    this.sizeMd = undefined;
+    this.sizeLg = undefined;
+    this.sizeXl = undefined;
+    this.h = govHost(this.host);
+  }
+  render() {
+    return (h(Host, { class: this.h.classes(GridItemClass.root), role: "listitem", size: this.size, "size-sm": this.sizeSm, "size-md": this.sizeMd, "size-lg": this.sizeLg, "size-xl": this.sizeXl }, h("slot", null)));
+  }
+  get host() { return getElement(this); }
+};
+GovGridItem.style = govGridItemCss;
+
+export { GovGridItem as gov_grid_item };
+
+//# sourceMappingURL=gov-grid-item.entry.js.map

package/dist/esm/gov-grid-item.entry.js.map

@@ -0,0 +1 @@
+{"file":"gov-grid-item.entry.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,omHAAomH;;MCS9mH,WAAW;EAGvB;;gBAQgC,OAAO;;;;;IAPtC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAwBD,MAAM;IACL,QACC,EAAC,IAAI,IACJ,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,EACzC,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,aACN,IAAI,CAAC,MAAM,aACX,IAAI,CAAC,MAAM,aACX,IAAI,CAAC,MAAM,aACX,IAAI,CAAC,MAAM,IAEpB,eAAQ,CACF,EACP;GACD;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-grid/gov-grid-item.scss?tag=gov-grid-item","../../../packages/core/src/components/gov-grid/gov-grid-item.tsx"],"sourcesContent":["/*\n *   Grid Cell\n */\n\n$class: \".gov-grid-item\";\n\n#{$class} {\n\t@include generateGridSize();\n\tborder: 0 solid transparent;\n\n\t// hide the border in MS high contrast mode\n\tborder-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E\");\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { GridItemClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-grid-item',\n\tstyleUrl: 'gov-grid-item.scss',\n})\nexport class GovGridItem {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovGridItemElement\n\t/**\n\t * Cell size as a fraction of 1/12 of the grid size\n\t */\n\t@Prop() readonly size: string = '12/12'\n\t/**\n\t * Cell size for SM media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'size-sm' }) readonly sizeSm: string\n\t/**\n\t * Cell size for MD media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'size-md' }) readonly sizeMd: string\n\t/**\n\t * Cell size for LG media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'size-lg' }) readonly sizeLg: string\n\t/**\n\t * Cell size for XL media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'size-xl' }) readonly sizeXl: string\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes(GridItemClass.root)}\n\t\t\t\trole=\"listitem\"\n\t\t\t\tsize={this.size}\n\t\t\t\tsize-sm={this.sizeSm}\n\t\t\t\tsize-md={this.sizeMd}\n\t\t\t\tsize-lg={this.sizeLg}\n\t\t\t\tsize-xl={this.sizeXl}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

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

@@ -0,0 +1,24 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b010bfb4.js';
+import { G as GridClass } from './constants-2b14bb01.js';
+import { g as govHost } from './template-10332292.js';
+
+const govGridCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-grid{position:relative;display:flex;width:100%;flex-wrap:wrap}.gov-grid[align-x=middle]{align-items:center}.gov-grid[align-x=bottom]{align-items:flex-end}.gov-grid[align-y=center]{justify-content:center}.gov-grid[align-y=right]{justify-content:flex-end}.gov-grid[align-y=space-between]{justify-content:space-between}.gov-grid[align-y=space-around]{justify-content:space-around}";
+
+const GovGrid = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.alignX = undefined;
+    this.alignY = undefined;
+    this.h = govHost(this.host);
+  }
+  // vertical / horizontal align
+  render() {
+    return (h(Host, { class: this.h.classes(GridClass.root), "align-x": this.alignX, "align-y": this.alignY, role: "list" }, h("slot", null)));
+  }
+  get host() { return getElement(this); }
+};
+GovGrid.style = govGridCss;
+
+export { GovGrid as gov_grid };
+
+//# sourceMappingURL=gov-grid.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"gov-grid.entry.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,stBAAstB;;MCS5tB,OAAO;EAGnB;;;;IACC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;;EAeD,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,aAAW,IAAI,CAAC,MAAM,aAAW,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,IACnG,eAAa,CACP,EACP;GACD;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-grid/gov-grid.scss?tag=gov-grid","../../../packages/core/src/components/gov-grid/gov-grid.tsx"],"sourcesContent":["/*\n *   Grid\n */\n\n$class: \".gov-grid\";\n\n#{$class} {\n\t@include base(flex);\n\tflex-wrap: wrap;\n\n\t// VARIANTS\n\t&[align-x=\"middle\"] {\n\t\talign-items: center;\n\t}\n\t&[align-x=\"bottom\"] {\n\t\talign-items: flex-end;\n\t}\n\t&[align-y=\"center\"] {\n\t\tjustify-content: center;\n\t}\n\t&[align-y=\"right\"] {\n\t\tjustify-content: flex-end;\n\t}\n\t&[align-y=\"space-between\"] {\n\t\tjustify-content: space-between;\n\t}\n\t&[align-y=\"space-around\"] {\n\t\tjustify-content: space-around;\n\t}\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { GridClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-grid',\n\tstyleUrl: 'gov-grid.scss',\n})\nexport class GovGrid {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovGridElement\n\t/**\n\t * Horizontal align of cells\n\t */\n\t@Prop({ attribute: 'align-x' }) readonly alignX: string\n\n\t/**\n\t * Vertical align of cells\n\t */\n\t@Prop({ attribute: 'align-y' }) readonly alignY: string\n\n\t// vertical / horizontal align\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(GridClass.root)} align-x={this.alignX} align-y={this.alignY} role=\"list\">\n\t\t\t\t<slot></slot>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

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

@@ -0,0 +1,122 @@
+import { a as getAssetPath, r as registerInstance, h, H as Host, g as getElement } from './index-b010bfb4.js';
+import { i as iconsPath } from './win-9c8460bb.js';
+import { g as govHost } from './template-10332292.js';
+import './utils-c057a3fa.js';
+
+var Types;
+(function (Types) {
+  Types["BASIC"] = "basic";
+  Types["COMPLEX"] = "complex";
+  Types["COLORED"] = "colored";
+})(Types || (Types = {}));
+const IconClass = {
+  root: 'gov-icon',
+  holder: 'gov-icon__holder',
+};
+
+const version = "0.0.15";
+
+const dsVersion = () => {
+  return version;
+};
+
+const iconCache = {};
+const requestCache = {};
+const isExternalUrl = (path) => path.startsWith('http://') || path.startsWith('https://');
+const iconUrl = (path, name, type) => {
+  if (isExternalUrl(path)) {
+    return `${path}/${type}/${name}.svg?v=${dsVersion()}`;
+  }
+  return getAssetPath(`${path}/${type}/${name}.svg`) + `?v=${dsVersion()}`;
+};
+async function fetchIcon({ name, type }) {
+  if (iconCache[name]) {
+    return iconCache[name];
+  }
+  if (!requestCache[name]) {
+    requestCache[name] = fetch(iconUrl(iconsPath(), name, type)).then(resp => {
+      if (resp.status === 200) {
+        return resp.text();
+      }
+      else {
+        throw new Error("Gov Icon doesn'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)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-icon{display:inline-flex}.gov-icon__holder,.gov-icon svg{display:inline-flex;width:100%;height:100%}";
+
+const GovIcon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.name = null;
+    this.type = 'basic';
+    this.iconData = undefined;
+    this.visible = false;
+    this.error = false;
+    this.h = govHost(this.host);
+  }
+  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.host);
+  }
+  render() {
+    if (this.error) {
+      return null;
+    }
+    return (h(Host, { class: this.h.classes(IconClass.root) }, h("span", { class: IconClass.holder, innerHTML: this.iconData })));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "name": ["loadIconPathData"]
+  }; }
+};
+GovIcon.style = govIconCss;
+
+export { GovIcon as gov_icon };
+
+//# sourceMappingURL=gov-icon.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"gov-icon.entry.js","mappings":";;;;;AAEA,IAAK,KAIJ;AAJD,WAAK,KAAK;EACT,wBAAe,CAAA;EACf,4BAAmB,CAAA;EACnB,4BAAmB,CAAA;AACpB,CAAC,EAJI,KAAK,KAAL,KAAK,QAIT;AAGM,MAAM,SAAS,GAAG;EACxB,IAAI,EAAE,UAAU;EAChB,MAAM,EAAE,kBAAkB;CAC1B;;;;ACVM,MAAM,SAAS,GAAG;EACxB,OAAO,OAAO,CAAA;AACf,CAAC;;ACAD,MAAM,SAAS,GAA8B,EAAE,CAAA;AAC/C,MAAM,YAAY,GAAuC,EAAE,CAAA;AAE3D,MAAM,aAAa,GAAG,CAAC,IAAY,KAAK,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAA;AACjG,MAAM,OAAO,GAAG,CAAC,IAAY,EAAE,IAAY,EAAE,IAAY;EACxD,IAAI,aAAa,CAAC,IAAI,CAAC,EAAE;IACxB,OAAO,GAAG,IAAI,IAAI,IAAI,IAAI,IAAI,UAAU,SAAS,EAAE,EAAE,CAAA;GACrD;EACD,OAAO,YAAY,CAAC,GAAG,IAAI,IAAI,IAAI,IAAI,IAAI,MAAM,CAAC,GAAG,MAAM,SAAS,EAAE,EAAE,CAAA;AACzE,CAAC,CAAA;AAEM,eAAe,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,EAAkC;EAC7E,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE;IACpB,OAAO,SAAS,CAAC,IAAI,CAAC,CAAA;GACtB;EACD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;IACxB,YAAY,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;MACrE,IAAI,IAAI,CAAC,MAAM,KAAK,GAAG,EAAE;QACxB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAA;OAClB;WAAM;QACN,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAA;OAC1C;KACD,CAAC,CAAA;GACF;EACD,MAAM,IAAI,GAAG,MAAM,YAAY,CAAC,IAAI,CAAC,CAAA;EACrC,SAAS,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;EACtB,OAAO,IAAI,CAAA;AACZ;;AC/BA,MAAM,UAAU,GAAG,icAAic;;MCWvc,OAAO;EAGnB;;gBAOuB,IAAI;gBAIN,OAAO;;mBAED,KAAK;iBACP,KAAK;IAb7B,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAgBO,MAAM,gBAAgB;IAC7B,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,CAAA;IACpC,IAAwB,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE;MAC1C,OAAM;KACN;IACD,IAAI;MACH,IAAI,CAAC,QAAQ,GAAG,MAAM,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAA;KAC/C;IAAC,OAAO,CAAC,EAAE;MACX,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;KACjB;GACD;EAED,iBAAiB;IAChB,IAAI,CAAC,gBAAgB,CAAC;MACrB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;MACnB,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAA;KAC7B,CAAC,CAAA;GACF;EAED,oBAAoB;IACnB,IAAI,IAAI,CAAC,oBAAoB,EAAE;MAC9B,IAAI,CAAC,oBAAoB,CAAC,UAAU,EAAE,CAAA;MACtC,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAA;KAChC;GACD;EAED,MAAM,iBAAiB;IACtB,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAA;GAC7B;EAEO,gBAAgB,CAAC,QAAoB;IAC5C,IAAwB,OAAO,MAAM,KAAK,WAAW,IAAI,CAAE,MAAc,CAAC,oBAAoB,EAAE;MAC/F,QAAQ,EAAE,CAAA;MACV,OAAM;KACN;IACD,IAAI,CAAC,oBAAoB,GAAG,IAAI,oBAAoB,CACnD,OAAO;MACN,OAAO,CAAC,OAAO,CAAC,KAAK;QACpB,IAAI,KAAK,CAAC,cAAc,EAAE;UACzB,IAAI,CAAC,oBAAoB,CAAC,UAAU,EAAE,CAAA;UACtC,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAA;UAChC,QAAQ,EAAE,CAAA;SACV;OACD,CAAC,CAAA;KACF,EACD,EAAE,UAAU,EAAE,MAAM,EAAE,CACtB,CAAA;IACD,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC5C;EAED,MAAM;IACL,IAAI,IAAI,CAAC,KAAK,EAAE;MACf,OAAO,IAAI,CAAA;KACX;IACD,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,IAC1C,YAAM,KAAK,EAAE,SAAS,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,QAAQ,GAAS,CAC1D,EACP;GACD;;;;;;;;;;;","names":[],"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":["import { ValueOf } from '../../types/interfaces'\n\nenum Types {\n\tBASIC = 'basic',\n\tCOMPLEX = 'complex',\n\tCOLORED = 'colored',\n}\nexport type Type = `${ValueOf<typeof Types>}`\n\nexport const IconClass = {\n\troot: 'gov-icon',\n\tholder: 'gov-icon__holder',\n}\n","import { version } from '../../package.json'\n\nexport const dsVersion = (): string => {\n\treturn version\n}\n","import { getAssetPath } from '@stencil/core'\nimport { dsVersion } from './ds.utils'\nimport { iconsPath } from '../helpers/Dom/win'\n\nconst iconCache: { [key: string]: string } = {}\nconst requestCache: { [key: string]: Promise<string> } = {}\n\nconst isExternalUrl = (path: string) => path.startsWith('http://') || path.startsWith('https://')\nconst iconUrl = (path: string, name: string, type: string) => {\n\tif (isExternalUrl(path)) {\n\t\treturn `${path}/${type}/${name}.svg?v=${dsVersion()}`\n\t}\n\treturn getAssetPath(`${path}/${type}/${name}.svg`) + `?v=${dsVersion()}`\n}\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(iconUrl(iconsPath(), name, type)).then(resp => {\n\t\t\tif (resp.status === 200) {\n\t\t\t\treturn resp.text()\n\t\t\t} else {\n\t\t\t\tthrow new Error(\"Gov Icon doesn't exists\")\n\t\t\t}\n\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'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\tassetsDirs: ['assets'],\n\tstyleUrl: 'gov-icon.scss',\n\ttag: 'gov-icon',\n})\nexport class GovIcon {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\t@Element() host: HTMLGovIconElement\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\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(\n\t\t\tentries => {\n\t\t\t\tentries.forEach(entry => {\n\t\t\t\t\tif (entry.isIntersecting) {\n\t\t\t\t\t\tthis.intersectionObserver.disconnect()\n\t\t\t\t\t\tthis.intersectionObserver = null\n\t\t\t\t\t\tcallback()\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t},\n\t\t\t{ rootMargin: '50px' }\n\t\t)\n\t\tthis.intersectionObserver.observe(this.host)\n\t}\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={this.h.classes(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/esm/gov-layout-column.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b010bfb4.js';
+import { a as LayoutColumnClass } from './constants-3786b01b.js';
+import { g as govHost } from './template-10332292.js';
+
+const govLayoutColumnCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-layout-column{position:relative;display:block}";
+
+const GovLayoutColumn = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.h = govHost(this.host);
+  }
+  render() {
+    return (h(Host, { class: this.h.classes(LayoutColumnClass.root) }, h("slot", null)));
+  }
+  get host() { return getElement(this); }
+};
+GovLayoutColumn.style = govLayoutColumnCss;
+
+export { GovLayoutColumn as gov_layout_column };
+
+//# sourceMappingURL=gov-layout-column.entry.js.map

package/dist/esm/gov-layout-column.entry.js.map

@@ -0,0 +1 @@
+{"file":"gov-layout-column.entry.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,2YAA2Y;;MCSzZ,eAAe;EAG3B;;IACC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAID,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAClD,eAAQ,CACF,EACP;GACD;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-layout/gov-layout-column.scss?tag=gov-layout-column","../../../packages/core/src/components/gov-layout/gov-layout-column.tsx"],"sourcesContent":["/*\n *   Layout column\n */\n\n$class: \".gov-layout-column\";\n\n#{$class} {\n\tposition: relative;\n\tdisplay: block;\n}\n","import { Component, Element, h, Host } from '@stencil/core'\nimport { LayoutColumnClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-layout-column',\n\tstyleUrl: 'gov-layout-column.scss',\n})\nexport class GovLayoutColumn {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovLayoutColumnElement\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(LayoutColumnClass.root)}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/esm/gov-layout.entry.js

@@ -0,0 +1,30 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b010bfb4.js';
+import { L as LayoutClass } from './constants-3786b01b.js';
+import { g as govHost } from './template-10332292.js';
+
+const govLayoutCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-layout{position:relative;display:block;width:100%}.gov-layout__section{display:flex;gap:var(--gov-layout-gap, 1.375rem);flex-direction:column}@media (min-width: 64em){.gov-layout__section{flex-direction:row}.gov-layout__section-aside-right .gov-layout-column:first-child,.gov-layout__section-aside .gov-layout-column:first-child{flex:1 1 auto;width:auto}.gov-layout__section-aside-right .gov-layout-column:last-child,.gov-layout__section-aside .gov-layout-column:last-child{flex:0 0 auto;width:calc(var(--gov-container-width, 73.75rem) / 3 - var(--gov-layout-gap, 1.375rem))}.gov-layout__section-aside-left .gov-layout-column:first-child{flex:0 0 auto;width:calc(var(--gov-container-width, 73.75rem) / 3 - var(--gov-layout-gap, 1.375rem))}.gov-layout__section-aside-left .gov-layout-column:last-child{flex:1 1 auto;width:auto}.gov-layout__section-aside-right-inverse .gov-layout-column:first-child{order:1}.gov-layout__section-aside-left-inverse .gov-layout-column:first-child{order:2}.gov-layout__section-text{width:var(--gov-layout-content-width, 48.75rem);margin-right:auto;margin-left:auto}.gov-layout__section-text-left{width:var(--gov-layout-content-width, 48.75rem);margin-right:auto}.gov-layout__section-text-right{width:var(--gov-layout-content-width, 48.75rem);margin-left:auto}}";
+
+const GovLayout = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.type = 'stretch';
+    this.variant = undefined;
+    this.inverse = false;
+    this.h = govHost(this.host);
+  }
+  typeClass(originalClass, type, variant, inverse) {
+    const isType = type ? '-' + type : '';
+    const isVariant = variant ? '-' + variant : '';
+    const isInverse = inverse ? '-inverse' : '';
+    return originalClass + ' ' + originalClass + isType + isVariant + isInverse;
+  }
+  render() {
+    return (h(Host, { type: this.type, class: this.h.classes(LayoutClass.root) }, h("section", { class: this.typeClass(LayoutClass.section, this.type, this.variant, this.inverse) }, h("slot", null))));
+  }
+  get host() { return getElement(this); }
+};
+GovLayout.style = govLayoutCss;
+
+export { GovLayout as gov_layout };
+
+//# sourceMappingURL=gov-layout.entry.js.map

package/dist/esm/gov-layout.entry.js.map

@@ -0,0 +1 @@
+{"file":"gov-layout.entry.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,smDAAsmD;;MCS9mD,SAAS;EAGrB;;gBAQqC,SAAS;;mBAQV,KAAK;IAfxC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAgBO,SAAS,CAAC,aAAqB,EAAE,IAAY,EAAE,OAAe,EAAE,OAAgB;IACvF,MAAM,MAAM,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,EAAE,CAAA;IACrC,MAAM,SAAS,GAAG,OAAO,GAAG,GAAG,GAAG,OAAO,GAAG,EAAE,CAAA;IAC9C,MAAM,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,EAAE,CAAA;IAC3C,OAAO,aAAa,GAAG,GAAG,GAAG,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;GAC3E;EAED,MAAM;IACL,QACC,EAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,IAC7D,eAAS,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IACzF,eAAQ,CACC,CACJ,EACP;GACD;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-layout/gov-layout.scss?tag=gov-layout","../../../packages/core/src/components/gov-layout/gov-layout.tsx"],"sourcesContent":["/*\n *   Layout\n */\n\n$class: \".gov-layout\";\n\n@mixin big() {\n\tflex: 1 1 auto;\n\twidth: auto;\n}\n\n@mixin small() {\n\tflex: 0 0 auto;\n\twidth: calc($container-width / 3 - $layout-gap);\n}\n\n#{$class} {\n\t@include base();\n\t&__section {\n\t\tdisplay: flex;\n\t\tgap: $layout-gap;\n\t\tflex-direction: column;\n\t}\n\n\t// MQ\n\t@include mq($from: lg) {\n\t\t&__section {\n\t\t\tflex-direction: row;\n\n\t\t\t&-aside-right,\n\t\t\t&-aside {\n\t\t\t\t#{$class}-column:first-child {\n\t\t\t\t\t@include big;\n\t\t\t\t}\n\n\t\t\t\t#{$class}-column:last-child {\n\t\t\t\t\t@include small;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&-aside-left {\n\t\t\t\t#{$class}-column:first-child {\n\t\t\t\t\t@include small;\n\t\t\t\t}\n\n\t\t\t\t#{$class}-column:last-child {\n\t\t\t\t\t@include big;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&-aside-right-inverse {\n\t\t\t\t#{$class}-column:first-child {\n\t\t\t\t\torder: 1;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&-aside-left-inverse {\n\t\t\t\t#{$class}-column:first-child {\n\t\t\t\t\torder: 2;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&-text {\n\t\t\t\twidth: $layout-content-width;\n\t\t\t\tmargin-right: auto;\n\t\t\t\tmargin-left: auto;\n\t\t\t}\n\n\t\t\t&-text-left {\n\t\t\t\twidth: $layout-content-width;\n\t\t\t\tmargin-right: auto;\n\t\t\t}\n\n\t\t\t&-text-right {\n\t\t\t\twidth: $layout-content-width;\n\t\t\t\tmargin-left: auto;\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { LayoutClass, LayoutType, LayoutVariantType } from './constants'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { govHost } from '../../helpers/Dom/template'\n\n@Component({\n\ttag: 'gov-layout',\n\tstyleUrl: 'gov-layout.scss',\n})\nexport class GovLayout {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovLayoutElement\n\t/**\n\t * Layout type\n\t */\n\t@Prop() readonly type?: LayoutType = 'stretch'\n\t/**\n\t * Layout align\n\t */\n\t@Prop() readonly variant?: LayoutVariantType\n\t/**\n\t * Determine if component should have inverse column order\n\t */\n\t@Prop() readonly inverse: boolean = false\n\n\tprivate typeClass(originalClass: string, type: string, variant: string, inverse: boolean) {\n\t\tconst isType = type ? '-' + type : ''\n\t\tconst isVariant = variant ? '-' + variant : ''\n\t\tconst isInverse = inverse ? '-inverse' : ''\n\t\treturn originalClass + ' ' + originalClass + isType + isVariant + isInverse\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host type={this.type} class={this.h.classes(LayoutClass.root)}>\n\t\t\t\t<section class={this.typeClass(LayoutClass.section, this.type, this.variant, this.inverse)}>\n\t\t\t\t\t<slot />\n\t\t\t\t</section>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/esm/gov-loading.entry.js

@@ -0,0 +1,27 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b010bfb4.js';
+import { g as govHost, p as prepareClasses } from './template-10332292.js';
+
+const LoadingClass = {
+  root: 'gov-loading',
+  content: 'gov-loading__content',
+  icon: 'gov-loading__icon',
+};
+
+const govLoadingCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-loading{display:none}.gov-loading__content{z-index:101;position:fixed;top:50%;left:50%;display:flex;gap:1rem;flex-direction:column;align-items:center;min-width:9.6875rem;padding:1.5rem;border-radius:0.5rem;background:var(--gov-loading-bg, rgba(var(--gov-color-secondary-400-rgb), 0.8));color:var(--gov-loading-color, var(--gov-color-primary));text-align:center;transform:translate(-50%, -50%)}.gov-loading__icon{width:4rem;height:4rem;line-height:1}.gov-loading[loading=\"\"],.gov-loading[loading=true i],.gov-loading[loading=\"1\"]{display:block}";
+
+const GovLoading = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.loading = false;
+    this.h = govHost(this.host);
+  }
+  render() {
+    return (h(Host, { class: this.h.classes(LoadingClass.root), loading: this.loading }, h("div", { class: LoadingClass.content }, h("gov-icon", { class: prepareClasses([LoadingClass.icon, 'gov-spin-animation']), name: "loader" }), h("slot", null)), h("gov-backdrop", { visible: this.loading, inverse: true })));
+  }
+  get host() { return getElement(this); }
+};
+GovLoading.style = govLoadingCss;
+
+export { GovLoading as gov_loading };
+
+//# sourceMappingURL=gov-loading.entry.js.map

package/dist/esm/gov-loading.entry.js.map

@@ -0,0 +1 @@
+{"file":"gov-loading.entry.js","mappings":";;;AAAO,MAAM,YAAY,GAAG;EAC3B,IAAI,EAAE,aAAa;EACnB,OAAO,EAAE,sBAAsB;EAC/B,IAAI,EAAE,mBAAmB;CACzB;;ACJD,MAAM,aAAa,GAAG,g4BAAg4B;;MCSz4B,UAAU;EAGtB;;mBAQkB,KAAK;IAPtB,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAQD,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACpE,WAAK,KAAK,EAAE,YAAY,CAAC,OAAO,IAC/B,gBAAU,KAAK,EAAE,cAAc,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE,oBAAoB,CAAC,CAAC,EAAE,IAAI,EAAC,QAAQ,GAAY,EACrG,eAAQ,CACH,EACN,oBAAc,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,GAAI,CAChD,EACP;GACD;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-loading/loading/constants.ts","../../../packages/core/src/components/gov-loading/loading/gov-loading.scss?tag=gov-loading","../../../packages/core/src/components/gov-loading/loading/gov-loading.tsx"],"sourcesContent":["export const LoadingClass = {\n\troot: 'gov-loading',\n\tcontent: 'gov-loading__content',\n\ticon: 'gov-loading__icon',\n}\n","/*\n *   Loading\n */\n\n$class: \".gov-loading\";\n\n#{$class} {\n\tdisplay: none;\n\t&__content {\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\tgap: rem-calc(16);\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tmin-width: rem-calc(155);\n\t\tpadding: rem-calc(24);\n\t\tborder-radius: rem-calc(8);\n\t\tbackground: $loading-bg;\n\t\tcolor: $loading-color;\n\t\ttext-align: center;\n\t\ttransform: translate(-50%, -50%);\n\t}\n\t&__icon {\n\t\twidth: rem-calc(64);\n\t\theight: rem-calc(64);\n\t\tline-height: 1;\n\t}\n\n\t// STATES\n\t@include parameter(\"loading\") {\n\t\tdisplay: block;\n\t}\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { LoadingClass } from './constants'\nimport { govHost, prepareClasses } from '../../../helpers/Dom/template'\nimport { GovHost } from '../../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-loading',\n\tstyleUrl: 'gov-loading.scss',\n})\nexport class GovLoading {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovLoadingElement\n\t/**\n\t * Determine if loading is active\n\t */\n\t@Prop() loading = false\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(LoadingClass.root)} loading={this.loading}>\n\t\t\t\t<div class={LoadingClass.content}>\n\t\t\t\t\t<gov-icon class={prepareClasses([LoadingClass.icon, 'gov-spin-animation'])} name=\"loader\"></gov-icon>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t\t<gov-backdrop visible={this.loading} inverse={true} />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

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

@@ -0,0 +1,39 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b010bfb4.js';
+import { v as validateProp } from './props-789f7529.js';
+import { V as Variants } from './variants-2b936d58.js';
+import { p as pick } from './utils-c057a3fa.js';
+import { g as govHost } from './template-10332292.js';
+import './gov.log-af905420.js';
+
+pick(Variants, ['PRIMARY', 'SECONDARY', 'WARNING', 'ERROR', 'SUCCESS']);
+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)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.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-neutral-white))}.gov-message__icon{flex:0 0 1.25rem;width:1.25rem;height:1.25rem}.gov-message__content{flex:1 1 auto}.gov-message__content>*:last-child{margin-bottom:0}.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)}@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-bg-inverse, var(--gov-color-neutral-white))}.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-bg-inverse, var(--gov-color-neutral-white))}.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-bg-inverse, var(--gov-color-neutral-white))}.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-bg-inverse, var(--gov-color-neutral-white))}.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-bg-inverse, var(--gov-color-neutral-white))}";
+
+const GovMessage = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.variant = Variants.PRIMARY;
+    this.h = govHost(this.host);
+  }
+  validateVariant(newValue) {
+    validateProp(Variants, newValue, MessageClass.root);
+  }
+  render() {
+    return (h(Host, { class: this.h.classes(MessageClass.root), variant: this.variant, role: "alert" }, this.h.hasSlot('icon') && (h("span", { class: MessageClass.icon }, h("slot", { name: "icon" }))), h("div", { class: MessageClass.content }, h("slot", null))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "variant": ["validateVariant"]
+  }; }
+};
+GovMessage.style = govMessageCss;
+
+export { GovMessage as gov_message };
+
+//# sourceMappingURL=gov-message.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"gov-message.entry.js","mappings":";;;;;;;AAI+B,IAAI,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC,EAAC;AAG/F,MAAM,YAAY,GAAG;EAC3B,IAAI,EAAE,aAAa;EACnB,IAAI,EAAE,mBAAmB;EACzB,OAAO,EAAE,sBAAsB;EAC/B,KAAK,EAAE,oBAAoB;CAC3B;;ACZD,MAAM,aAAa,GAAG,2jHAA2jH;;MCYpkH,UAAU;EAGtB;;mBAS+C,QAAQ,CAAC,OAAO;IAR9D,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAUD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;GACnD;EAED,MAAM;IACL,QACC,EAAC,IAAI,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,KACtB,YAAM,KAAK,EAAE,YAAY,CAAC,IAAI,IAC7B,YAAM,IAAI,EAAC,MAAM,GAAG,CACd,CACP,EAED,WAAK,KAAK,EAAE,YAAY,CAAC,OAAO,IAC/B,eAAQ,CACH,CACA,EACP;GACD;;;;;;;;;;","names":[],"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 } from '../../core/constants/variants'\nimport { pick } from '../../utils/utils'\nimport { ValueOf } from '../../types/interfaces'\n\nexport const MessageVariants = pick(Variants, ['PRIMARY', 'SECONDARY', 'WARNING', 'ERROR', 'SUCCESS'])\nexport type MessageVariantType = `${ValueOf<typeof MessageVariants>}`\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.types'\nimport { Variants } from '../../core/constants/variants'\nimport { MessageVariantType } 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: MessageVariantType = 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}