npm - @gov-design-system-ce/components - Versions diffs - 0.0.1 → 0.0.3 - Mend

@gov-design-system-ce/components 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1390) hide show

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

@@ -2,21 +2,22 @@
 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 index = require('./index-356717ae.js');
+const string_utils = require('./string.utils-0f08c48c.js');
+const props = require('./props-cc21d3d7.js');
+const form = require('./form-d9f0f50c.js');
+const template = require('./template-e1c4ff78.js');
+const wcag = require('./wcag-eca97102.js');
+const win = require('./win-ac5c1806.js');
+const utils = require('./utils-4ae73637.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');
+require('./gov.log-0c9dca27.js');
+require('./variants-bacf037a.js');
+require('./constants-a92bbccb.js');
+require('./constants-24f26d54.js');
+require('./constants-5ca7e728.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 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)}}.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{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{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{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{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) {
@@ -29,14 +30,15 @@ const GovFormSwitch = class {
     this.required = false;
     this.disabled = undefined;
     this.name = undefined;
-    this.size = undefined;
+    this.size = sizes.Sizes._M;
     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));
+    this.checkboxId = string_utils.createID('GovCheckbox');
+    this.h = template.govHost(this.host);
+    this.f = form.govForm(this.h);
   }
   updateCheckedState(newValue) {
     this.isChecked = newValue;
@@ -51,6 +53,7 @@ const GovFormSwitch = class {
   componentWillLoad() {
     this.isChecked = this.checked;
     this.f.passAttrToControl('type', 'switch');
+    this.h.passChildAttr(form.FormSwitchClass.root, 'identifier', this.identifier || this.checkboxId);
   }
   async componentDidRender() {
     if (win.canValidateWcagOnRender()) {
@@ -80,9 +83,9 @@ const GovFormSwitch = class {
    * 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);
+    wcag.validateWcagRef(this.wcagDescribedBy, 'wcag-described-by', form.FormSwitchClass.root);
+    wcag.validateWcagRef(this.wcagLabelledBy, 'wcag-labelled-by', form.FormSwitchClass.root);
+    wcag.validateWcagLabelFor(this.identifier || this.checkboxId, this.wcagLabelledBy, form.FormSwitchClass.root);
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

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

	@@ -1 +1 @@
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}
1	+ {"file":"gov-form-switch.entry.cjs.js","mappings":"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","names":["Sizes","createID","govHost","govForm","validateProp","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 { GovHost }from '../../../helpers/Dom/template.d'\nimport { govForm }from '../../../helpers/Dom/form'\nimport { GovFormSwitchChangeEvent } from './interfaces';\n\n@Component({\n\ttag: 'gov-form-switch',\n\tstyleUrl: 'gov-form-switch.scss',\n})\nexport class GovFormSwitch {\n\tprivate 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 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 = Sizes._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(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\tthis.h.passChildAttr(FormSwitchClass.root, 'identifier', this.identifier \|\| this.checkboxId)\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\n\t\t\t\t\t\tclass={FormSwitchClass.input}\n\t\t\t\t\t\tid={this.identifier \|\| this.checkboxId}\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tchecked={this.isChecked}\n\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\tonFocus={this.onFocusHandler.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\taria-checked={this.isChecked}\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-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t/>\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-item.cjs.entry.js ADDED Viewed

@@ -0,0 +1,31 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-356717ae.js');
+const constants = require('./constants-a44c32bc.js');
+const template = require('./template-e1c4ff78.js');
+require('./sizes-79872c2a.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)}}.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) {
+    index.registerInstance(this, hostRef);
+    this.size = "12/12";
+    this.sizeSm = undefined;
+    this.sizeMd = undefined;
+    this.sizeLg = undefined;
+    this.sizeXl = undefined;
+    this.h = template.govHost(this.host);
+  }
+  render() {
+    return (index.h(index.Host, { class: this.h.classes(constants.GridItemClass.root), role: "listitem", size: this.size, "size-sm": this.sizeSm, "size-md": this.sizeMd, "size-lg": this.sizeLg, "size-xl": this.sizeXl }, index.h("slot", null)));
+  }
+  get host() { return index.getElement(this); }
+};
+GovGridItem.style = govGridItemCss;
+exports.gov_grid_item = GovGridItem;
+//# sourceMappingURL=gov-grid-item.cjs.entry.js.map

package/dist/cjs/gov-grid-item.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"gov-grid-item.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,cAAc,GAAG,m8GAAm8G;;MCS78G,WAAW;EAGvB;;gBAQgC,OAAO;;;;;IAPtC,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAwBD,MAAM;IACL,QACCC,QAACC,UAAI,IACJ,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAACC,uBAAa,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,IACpBF,qBAAQ,CACF,EACP;GACD;;;;;;;","names":["govHost","h","Host","GridItemClass"],"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.d\"\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\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

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

@@ -2,29 +2,23 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f0dd3088.js');
-const template = require('./template-26608353.js');
+const index = require('./index-356717ae.js');
+const constants = require('./constants-a44c32bc.js');
+const template = require('./template-e1c4ff78.js');
+require('./sizes-79872c2a.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 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)}}.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 {
-  // 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
-    ]);
+    this.alignX = undefined;
+    this.alignY = undefined;
+    this.h = template.govHost(this.host);
   }
+  // vertical / horizontal align
   render() {
-    return (index.h(index.Host, { class: this.classNames }, index.h("slot", null)));
+    return (index.h(index.Host, { class: this.h.classes(constants.GridClass.root), "align-x": this.alignX, "align-y": this.alignY, role: "list" }, index.h("slot", null)));
   }
   get host() { return index.getElement(this); }
 };

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

	@@ -1 +1 @@
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}
1	+ {"file":"gov-grid.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,UAAU,GAAG,qjBAAqjB;;MCS3jB,OAAO;EAGnB;;;;IACC,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;;EAeD,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAACC,mBAAS,CAAC,IAAI,CAAC,aAAW,IAAI,CAAC,MAAM,aAAW,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,IACnGF,qBAAa,CACP,EACP;GACD;;;;;;;","names":["govHost","h","Host","GridClass"],"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.d\"\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/cjs/gov-icon.cjs.entry.js CHANGED Viewed

@@ -2,34 +2,43 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f0dd3088.js');
+const index = require('./index-356717ae.js');
+const win = require('./win-ac5c1806.js');
+const template = require('./template-e1c4ff78.js');
+require('./utils-4ae73637.js');
 const IconClass = {
-  root: "gov-icon",
-  holder: "gov-icon__holder",
+  root: 'gov-icon',
+  holder: 'gov-icon__holder',
 };
-const version = "0.0.1";
+const version = "0.0.3";
-// @ts-ignore
 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 index.getAssetPath(`${path}/${type}/${name}.svg`) + `?v=${dsVersion()}`;
+};
 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()}`)
+    requestCache[name] = fetch(iconUrl(win.iconsPath(), name, type))
       .then(resp => {
       if (resp.status === 200) {
         return resp.text();
       }
       else {
-        throw new Error("Gov Icon doen't exists");
+        throw new Error("Gov Icon doesn't exists");
       }
     });
   }
@@ -38,16 +47,17 @@ async function fetchIcon({ name, type }) {
   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 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)}}.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.type = 'basic';
     this.iconData = undefined;
     this.visible = false;
     this.error = false;
+    this.h = template.govHost(this.host);
   }
   async loadIconPathData() {
     const { name, visible, type } = this;
@@ -77,29 +87,29 @@ const GovIcon = class {
     await this.loadIconPathData();
   }
   waitUntilVisible(callback) {
-    if (typeof window === "undefined" || !window.IntersectionObserver) {
+    if (typeof window === 'undefined' || !window.IntersectionObserver) {
       callback();
       return;
     }
-    this.intersectionObserver = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
+    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);
+    }, { rootMargin: '50px' });
+    this.intersectionObserver.observe(this.host);
   }
   render() {
     if (this.error) {
       return null;
     }
-    return (index.h(index.Host, { class: IconClass.root }, index.h("span", { class: IconClass.holder, innerHTML: this.iconData })));
+    return (index.h(index.Host, { class: this.h.classes(IconClass.root) }, index.h("span", { class: IconClass.holder, innerHTML: this.iconData })));
   }
   static get assetsDirs() { return ["assets"]; }
-  get el() { return index.getElement(this); }
+  get host() { return index.getElement(this); }
   static get watchers() { return {
     "name": ["loadIconPathData"]
   }; }

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

	@@ -1 +1 @@
1	- {"file":"gov-icon.entry.cjs.js","mappings":"~~;;;;;;~~AAGO,MAAM,SAAS,GAAG;EACxB,IAAI,EAAE,UAAU;EAChB,MAAM,EAAE,kBAAkB;CAC1B;;;;~~ACND;AAGO~~,MAAM,SAAS,GAAG;EACxB,OAAO,OAAO,CAAA;AACf,CAAC;;~~ACFD~~,MAAM,SAAS,GAA8B,EAAE,CAAA;AAC/C,MAAM,YAAY,GAAuC,EAAE,CAAA;~~AAEpD~~,eAAe,SAAS,CAAC,EAAE,IAAI,EAAC,IAAI,EAAiC;EAC3E,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,~~CAACA~~,~~kBAAY~~,~~CAAC~~,~~kBAAkB~~,~~IAAI~~,~~IAAI~~,IAAI,~~MAAM,CAAC,GAAG,MAAM,SAAS,~~EAAE,~~EAAE~~,CAAC;~~OAClG~~,IAAI,CAAC,IAAI;MACT,IAAG,IAAI,CAAC,MAAM,KAAK,GAAG,EAAE;QACvB,OAAO,IAAI,CAAC,IAAI,EAAE,CAAA;OAClB;WAAM;QACN,MAAM,IAAI,KAAK,CAAC,~~wBAAwB~~,CAAC,CAAA;~~OACzC~~;KACD,CAAC,CAAA;GACH;EACD,MAAM,IAAI,GAAG,MAAM,YAAY,CAAC,IAAI,CAAC,CAAA;EACrC,SAAS,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;EACtB,OAAO,IAAI,CAAA;AACZ;;~~ACvBA~~,MAAM,UAAU,GAAG,~~mPAAmP~~;;~~MCSzP~~,OAAO~~;;;gBAKI~~,IAAI;gBAIN,OAAO;;mBAED,KAAK;iBACP,KAAK~~;;EAItB~~,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;~~EAGD~~,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,~~CAAC~~,~~CAAC,~~OAAO;~~MAC5D~~,OAAO,CAAC,OAAO,CAAC,~~CAAC,~~KAAK;~~QACrB~~,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,~~EAAE~~,EAAE,UAAU,EAAE,MAAM,EAAE,~~CAAC~~,CAAA;~~IAC1B~~,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,~~EAAE~~,CAAC,CAAA;~~GAC1C~~;~~EAGD~~,MAAM;IACL,IAAI,IAAI,CAAC,KAAK,EAAE;MACf,OAAO,IAAI,CAAA;KACX;IACD,QACCC,QAACC,UAAI,IAAC,KAAK,EAAE,SAAS,CAAC,IAAI,~~IAC1BD~~,kBAAM,KAAK,EAAE,SAAS,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,QAAQ,GAAS,CAC1D,EACP;GACD;;;;;;;;;;;","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}
1	+ {"file":"gov-icon.entry.cjs.js","mappings":"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","names":["getAssetPath","iconsPath","govHost","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}\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))\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 doesn'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'\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.d\"\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/cjs/gov-layout-aside.cjs.entry.js ADDED Viewed

@@ -0,0 +1,26 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-356717ae.js');
+const template = require('./template-e1c4ff78.js');
+const constants = require('./constants-8c9eeb15.js');
+const govLayoutAsideCss = ".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)}}@media (min-width: 64em){.gov-layout-aside{flex:0 0 auto;order:2;width:calc(var(--gov-container-width, 73.75rem) - var(--gov-layout-content-width, 48.75rem) - var(--gov-layout-gap, 1.375rem))}.gov-layout-aside[position=left i]{order:1}.gov-layout-aside[position=right i]{order:3}}";
+const GovLayoutAside = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.position = null;
+    this.h = template.govHost(this.host);
+  }
+  render() {
+    return (index.h(index.Host, { class: this.h.classes(constants.LayoutAsideClass.root), position: this.position }, index.h("slot", null)));
+  }
+  get host() { return index.getElement(this); }
+};
+GovLayoutAside.style = govLayoutAsideCss;
+exports.gov_layout_aside = GovLayoutAside;
+//# sourceMappingURL=gov-layout-aside.cjs.entry.js.map

package/dist/cjs/gov-layout-aside.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"gov-layout-aside.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,iBAAiB,GAAG,+cAA+c;;MCS5d,cAAc;EAG1B;;oBASoC,IAAI;IARvC,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EASD,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAACC,0BAAgB,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC1EF,qBAAQ,CACF,EACP;GACD;;;;;;;","names":["govHost","h","Host","LayoutAsideClass"],"sources":["../../../packages/core/src/components/gov-layout/gov-layout-aside.scss?tag=gov-layout-aside","../../../packages/core/src/components/gov-layout/gov-layout-aside.tsx"],"sourcesContent":["/*\n * Layout Aside\n */\n\n$class: \".gov-layout-aside\";\n\n#{$class} {\n\t// MQ\n\t@include mq($from: lg) {\n\t\tflex: 0 0 auto;\n\t\torder: 2;\n\t\twidth: calc($container-width - $layout-content-width - $layout-gap);\n\n\t\t// VARIANTS\n\t\t&[position=\"left\" i] {\n\t\t\torder: 1;\n\t\t}\n\t\t&[position=\"right\" i] {\n\t\t\torder: 3;\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\"\nimport { GovHost } from \"../../helpers/Dom/template.d\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { LayoutAsideClass } from \"./constants\"\n\n@Component({\n\ttag: \"gov-layout-aside\",\n\tstyleUrl: \"gov-layout-aside.scss\",\n})\nexport class GovLayoutAside {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovLayoutAsideElement\n\n\t/**\n\t * Vertical position of component on desktop.\n\t */\n\t@Prop() readonly position: string = null\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(LayoutAsideClass.root)} position={this.position}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-layout-content.cjs.entry.js ADDED Viewed

@@ -0,0 +1,26 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-356717ae.js');
+const constants = require('./constants-8c9eeb15.js');
+const template = require('./template-e1c4ff78.js');
+const govLayoutContentCss = ".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)}}.gov-layout-content{position:relative;display:block;text-align:inherit}@media (min-width: 64em){.gov-layout-content{flex:0 0 auto;order:2;width:var(--gov-layout-content-width, 48.75rem)}.gov-layout-content[align=stretch i]{flex:1 1 auto;width:auto}.gov-layout-content[align=left i]{margin-right:auto}.gov-layout-content[align=center i]{margin-right:auto;margin-left:auto}.gov-layout-content[align=right i]{margin-left:auto}}";
+const GovLayoutContent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.align = "stretch";
+    this.h = template.govHost(this.host);
+  }
+  render() {
+    return (index.h(index.Host, { class: this.h.classes(constants.LayoutContentClass.root), align: this.align }, index.h("slot", null)));
+  }
+  get host() { return index.getElement(this); }
+};
+GovLayoutContent.style = govLayoutContentCss;
+exports.gov_layout_content = GovLayoutContent;
+//# sourceMappingURL=gov-layout-content.cjs.entry.js.map

package/dist/cjs/gov-layout-content.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"gov-layout-content.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,+lBAA+lB;;MCS9mB,gBAAgB;EAG5B;;iBASiC,SAAS;IARzC,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EASD,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAACC,4BAAkB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IACtEF,qBAAQ,CACF,EACP;GACD;;;;;;;","names":["govHost","h","Host","LayoutContentClass"],"sources":["../../../packages/core/src/components/gov-layout/gov-layout-content.scss?tag=gov-layout-content","../../../packages/core/src/components/gov-layout/gov-layout-content.tsx"],"sourcesContent":["/*\n * Layout Content\n */\n\n$class: \".gov-layout-content\";\n\n#{$class} {\n\tposition: relative;\n\tdisplay: block;\n\ttext-align: inherit;\n\n\t// MQ\n\t@include mq($from: lg) {\n\t\tflex: 0 0 auto;\n\t\torder: 2;\n\t\twidth: $layout-content-width;\n\n\t\t// MODIF\n\t\t&[align=\"stretch\" i] {\n\t\t\tflex: 1 1 auto;\n\t\t\twidth: auto;\n\t\t}\n\t\t&[align=\"left\" i] {\n\t\t\tmargin-right: auto;\n\t\t}\n\t\t&[align=\"center\" i] {\n\t\t\tmargin-right: auto;\n\t\t\tmargin-left: auto;\n\t\t}\n\t\t&[align=\"right\" i] {\n\t\t\tmargin-left: auto;\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\"\nimport { LayoutContentClass } from \"./constants\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.d\"\n\n@Component({\n\ttag: \"gov-layout-content\",\n\tstyleUrl: \"gov-layout-content.scss\",\n})\nexport class GovLayoutContent {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovLayoutContentElement\n\n\t/**\n\t * Vertical align of component on desktop.\n\t */\n\t@Prop() readonly align: string = \"stretch\"\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(LayoutContentClass.root)} align={this.align}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-layout.cjs.entry.js ADDED Viewed

@@ -0,0 +1,25 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-356717ae.js');
+const constants = require('./constants-8c9eeb15.js');
+const template = require('./template-e1c4ff78.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)}}.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}}";
+const GovLayout = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.h = template.govHost(this.host);
+  }
+  render() {
+    return (index.h(index.Host, { class: this.h.classes(constants.LayoutClass.root) }, index.h("section", { class: constants.LayoutClass.section }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+};
+GovLayout.style = govLayoutCss;
+exports.gov_layout = GovLayout;
+//# sourceMappingURL=gov-layout.cjs.entry.js.map

package/dist/cjs/gov-layout.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"gov-layout.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,YAAY,GAAG,4YAA4Y;;MCSpZ,SAAS;EAGrB;;IACC,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAID,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAACC,qBAAW,CAAC,IAAI,CAAC,IAC5CF,qBAAS,KAAK,EAAEE,qBAAW,CAAC,OAAO,IAClCF,qBAAQ,CACC,CACJ,EACP;GACD;;;;;;;","names":["govHost","h","Host","LayoutClass"],"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#{$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\t\t}\n\t}\n}\n","import { Component, Element, h, Host } from \"@stencil/core\"\nimport { LayoutClass } from \"./constants\"\nimport { GovHost } from \"../../helpers/Dom/template.d\"\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\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(LayoutClass.root)}>\n\t\t\t\t<section class={LayoutClass.section}>\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/cjs/gov-loading.cjs.entry.js ADDED Viewed

@@ -0,0 +1,31 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-356717ae.js');
+const template = require('./template-e1c4ff78.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)}}.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) {
+    index.registerInstance(this, hostRef);
+    this.loading = false;
+    this.h = template.govHost(this.host);
+  }
+  render() {
+    return (index.h(index.Host, { class: this.h.classes(LoadingClass.root), loading: this.loading }, index.h("div", { class: LoadingClass.content }, index.h("gov-icon", { class: template.prepareClasses([LoadingClass.icon, "gov-spin-animation"]), name: "loader" }), index.h("slot", null)), index.h("gov-backdrop", { visible: this.loading, inverse: true })));
+  }
+  get host() { return index.getElement(this); }
+};
+GovLoading.style = govLoadingCss;
+exports.gov_loading = GovLoading;
+//# sourceMappingURL=gov-loading.cjs.entry.js.map

package/dist/cjs/gov-loading.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"gov-loading.entry.cjs.js","mappings":";;;;;;;AAAO,MAAM,YAAY,GAAG;EAC3B,IAAI,EAAE,aAAa;EACnB,OAAO,EAAE,sBAAsB;EAC/B,IAAI,EAAE,mBAAmB;CACzB;;ACJD,MAAM,aAAa,GAAG,+tBAA+tB;;MCSxuB,UAAU;EAGtB;;mBAQkB,KAAK;IAPtB,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAQD,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACpED,iBAAK,KAAK,EAAE,YAAY,CAAC,OAAO,IAC/BA,sBAAU,KAAK,EAAEE,uBAAc,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE,oBAAoB,CAAC,CAAC,EAAE,IAAI,EAAC,QAAQ,GAAY,EACrGF,qBAAQ,CACH,EACNA,0BAAc,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,GAAI,CAChD,EACP;GACD;;;;;;;","names":["govHost","h","Host","prepareClasses"],"sources":["../../../packages/core/src/components/gov-loading/constants.ts","../../../packages/core/src/components/gov-loading/gov-loading.scss?tag=gov-loading","../../../packages/core/src/components/gov-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.d\"\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}