@gov-design-system-ce/components 0.0.1

package/dist/components/gov-accordion.js

@@ -0,0 +1,88 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { v as validateProp } from './props.js';
+import { A as AccordionItemClass, a as AccordionClass, S as Sizes$1 } from './constants.js';
+import { S as Sizes } from './sizes.js';
+import { V as Variants } from './variants.js';
+import { c as canValidateWcagOnRender, d as delay, v as validateWcagLabel } from './utils.js';
+
+const govAccordionCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-accordion{position:relative;display:block;width:100%}";
+
+const GovAccordion$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.govChange = createEvent(this, "gov-change", 7);
+    this.size = Sizes._M;
+    this.variant = Variants.PRIMARY;
+    this.wcagLabel = undefined;
+    this.wcagLabelledBy = undefined;
+  }
+  validateSize(newValue) {
+    validateProp(Sizes$1, newValue, AccordionClass.root);
+  }
+  validateVariant(newValue) {
+    validateProp(Variants, newValue, AccordionClass.root);
+  }
+  componentWillLoad() {
+    this.validateSize(this.size);
+    this.validateVariant(this.variant);
+  }
+  componentDidLoad() {
+    this.host.querySelectorAll(AccordionItemClass.root).forEach((child) => {
+      child.setAttribute('size', this.size);
+      child.setAttribute('variant', this.variant);
+      child.addEventListener('gov-change', (e) => {
+        e.stopPropagation();
+        this.govChange.emit(e.detail);
+      });
+    });
+  }
+  async componentDidRender() {
+    if (canValidateWcagOnRender()) {
+      await delay(500);
+      await this.validateWcag();
+    }
+  }
+  render() {
+    return (h(Host, { class: AccordionClass.root, size: this.size, variant: this.variant }, h("div", { role: 'list', "arial-label": this.wcagLabel, "arial-labelledby": this.wcagLabelledBy }, h("slot", null))));
+  }
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  async validateWcag() {
+    validateWcagLabel(this.wcagLabel, this.wcagLabelledBy, AccordionClass.root);
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "size": ["validateSize"],
+    "variant": ["validateVariant"]
+  }; }
+  static get style() { return govAccordionCss; }
+}, [4, "gov-accordion", {
+    "size": [8],
+    "variant": [8],
+    "wcagLabel": [1, "wcag-label"],
+    "wcagLabelledBy": [1, "wcag-labelled-by"],
+    "validateWcag": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gov-accordion"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gov-accordion":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GovAccordion$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const GovAccordion = GovAccordion$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GovAccordion, defineCustomElement };
+
+//# sourceMappingURL=gov-accordion.js.map

package/dist/components/gov-accordion.js.map

@@ -0,0 +1 @@
+{"file":"gov-accordion.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,oMAAoM;;MCe/MA,cAAY;;;;;gBAMUC,KAAW,CAAC,EAAE;mBAIR,QAAQ,CAAC,OAAO;;;;EAexD,YAAY,CAAC,QAAgB;IAC5B,YAAY,CAACC,OAAK,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;GAClD;EAGD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;GACrD;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC5B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAClC;EAED,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAkC;MAC9F,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;MACrC,KAAK,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;MAC3C,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAA2D;QAChG,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;OAC7B,CAAC,CAAA;KACF,CAAC,CAAA;GACF;EAED,MAAM,kBAAkB;IACvB,IAAI,uBAAuB,EAAE,EAAE;MAC9B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;GACD;EAED,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACvE,WAAK,IAAI,EAAE,MAAM,iBAAe,IAAI,CAAC,SAAS,sBAAoB,IAAI,CAAC,cAAc,IACpF,eAAQ,CACH,CACA,EACP;GACD;;;;EAMD,MAAM,YAAY;IACjB,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;GAC3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GovAccordion","GlobalSizes","Sizes"],"sources":["../../../packages/core/src/components/gov-accordion/gov-accordion.scss?tag=gov-accordion","../../../packages/core/src/components/gov-accordion/gov-accordion.tsx"],"sourcesContent":["/*\n *   Accordion\n */\n\n$class: \".gov-accordion\";\n\n#{$class} {\n\tposition: relative;\n\tdisplay: block;\n\twidth: 100%;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from \"@stencil/core\"\nimport { validateProp } from '../../helpers/Validate/props'\nimport { AccordionClass, Sizes, SizeType, AccordionItemClass, VariantType } from './constants'\nimport { Sizes as GlobalSizes } from '../../core/constants/sizes'\nimport { GovAccordionItemCustomEvent } from '../../components'\nimport { GovAccordionItemChangeEvent } from './gov-accordion-item.d'\nimport { Variants } from '../../core/constants/variants'\nimport { validateWcagLabel } from \"../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\n\n@Component({\n\ttag: 'gov-accordion',\n\tstyleUrl: 'gov-accordion.scss',\n})\nexport class GovAccordion {\n\t@Element() readonly host: HTMLGovAccordionElement\n\n\t/**\n\t * Accordion’s size.\n\t */\n\t@Prop() readonly size: SizeType = GlobalSizes._M\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant: VariantType = Variants.PRIMARY\n\t/**\n\t * Adds accessible label for the accordion that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: \"wcag-label\" }) readonly wcagLabel: string\n\t/**\n\t * String of id's that indicate alternative labels elements\n\t */\n\t@Prop({ attribute: \"wcag-labelled-by\" }) readonly wcagLabelledBy: string\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, AccordionClass.root)\n\t}\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, AccordionClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(AccordionItemClass.root).forEach((child: HTMLGovAccordionItemElement) => {\n\t\t\tchild.setAttribute('size', this.size)\n\t\t\tchild.setAttribute('variant', this.variant)\n\t\t\tchild.addEventListener('gov-change', (e: GovAccordionItemCustomEvent<GovAccordionItemChangeEvent>) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.govChange.emit(e.detail)\n\t\t\t})\n\t\t})\n\t}\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={AccordionClass.root} size={this.size} variant={this.variant}>\n\t\t\t\t<div role={'list'} arial-label={this.wcagLabel} arial-labelledby={this.wcagLabelledBy}>\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\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagLabel(this.wcagLabel, this.wcagLabelledBy, AccordionClass.root)\n\t}\n}\n"],"version":3}

package/dist/components/gov-alert.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GovAlert extends Components.GovAlert, HTMLElement {}
+export const GovAlert: {
+  prototype: GovAlert;
+  new (): GovAlert;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/gov-alert.js

@@ -0,0 +1,82 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { v as validateProp } from './props.js';
+import { V as Variants } from './variants.js';
+import { g as govHost } from './template.js';
+import { d as defineCustomElement$3 } from './gov-button2.js';
+import { d as defineCustomElement$2 } from './gov-icon2.js';
+
+const AlertClass = {
+  root: "gov-alert",
+  section: "gov-alert__section",
+  icon: "gov-alert__icon",
+  content: "gov-alert__content",
+  close: "gov-alert__close",
+};
+
+const govAlertCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-alert{position:relative;display:flex;width:100%}.gov-alert__section{display:block;width:100%;max-width:var(--gov-container-width, 75rem);margin-right:auto;margin-left:auto;padding-right:var(--gov-container-padding-mobile, 1.25rem);padding-left:var(--gov-container-padding-mobile, 1.25rem);display:flex;gap:1rem;padding-top:1rem;padding-bottom:1rem}@media (min-width: 48em){.gov-alert__section{padding-right:var(--gov-container-padding, 2.5rem);padding-left:var(--gov-container-padding, 2.5rem)}}.gov-alert__icon{flex:0 0 auto}.gov-alert__icon>*{width:1.25rem;height:1.25rem}.gov-alert__content{padding-right:3.25rem}.gov-alert__content p{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing)}.gov-alert__content p:last-child{margin-bottom:0 !important}.gov-alert__content a{color:inherit}@media not all and (pointer: coarse){.gov-alert__content a:hover{color:inherit}}.gov-alert__close{position:absolute;top:0.625rem;right:1rem}.gov-alert[variant=warning]{background-color:var(--gov-alert-warning-bg-color, var(--gov-color-warning))}.gov-alert[variant=warning] .gov-alert__icon{color:var(--gov-alert-warning-icon-color, var(--gov-color-secondary))}.gov-alert[variant=warning] .gov-alert__content{color:var(--gov-alert-warning-text-color, var(--gov-color-secondary))}.gov-alert[variant=warning][inverse=\"\"],.gov-alert[variant=warning][inverse=true i],.gov-alert[variant=warning][inverse=\"1\"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-secondary-100))}.gov-alert[variant=warning][inverse=\"\"] .gov-alert__icon,.gov-alert[variant=warning][inverse=true i] .gov-alert__icon,.gov-alert[variant=warning][inverse=\"1\"] .gov-alert__icon{color:var(--gov-alert-warning-bg-color, var(--gov-color-warning))}.gov-alert[variant=warning][inverse=\"\"] .gov-alert__content,.gov-alert[variant=warning][inverse=true i] .gov-alert__content,.gov-alert[variant=warning][inverse=\"1\"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=error]{background-color:var(--gov-alert-error-bg-color, var(--gov-color-error))}.gov-alert[variant=error] .gov-alert__icon{color:var(--gov-alert-error-icon-color, var(--gov-color-secondary-100))}.gov-alert[variant=error] .gov-alert__content{color:var(--gov-alert-error-text-color, var(--gov-color-secondary-100))}.gov-alert[variant=error][inverse=\"\"],.gov-alert[variant=error][inverse=true i],.gov-alert[variant=error][inverse=\"1\"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-secondary-100))}.gov-alert[variant=error][inverse=\"\"] .gov-alert__icon,.gov-alert[variant=error][inverse=true i] .gov-alert__icon,.gov-alert[variant=error][inverse=\"1\"] .gov-alert__icon{color:var(--gov-alert-error-bg-color, var(--gov-color-error))}.gov-alert[variant=error][inverse=\"\"] .gov-alert__content,.gov-alert[variant=error][inverse=true i] .gov-alert__content,.gov-alert[variant=error][inverse=\"1\"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=secondary]{background-color:var(--gov-alert-secondary-bg-color, var(--gov-color-secondary))}.gov-alert[variant=secondary] .gov-alert__icon{color:var(--gov-alert-secondary-icon-color, var(--gov-color-secondary-100))}.gov-alert[variant=secondary] .gov-alert__content{color:var(--gov-alert-secondary-text-color, var(--gov-color-secondary-100))}.gov-alert[variant=secondary][inverse=\"\"],.gov-alert[variant=secondary][inverse=true i],.gov-alert[variant=secondary][inverse=\"1\"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-secondary-100))}.gov-alert[variant=secondary][inverse=\"\"] .gov-alert__icon,.gov-alert[variant=secondary][inverse=true i] .gov-alert__icon,.gov-alert[variant=secondary][inverse=\"1\"] .gov-alert__icon{color:var(--gov-alert-secondary-bg-color, var(--gov-color-secondary))}.gov-alert[variant=secondary][inverse=\"\"] .gov-alert__content,.gov-alert[variant=secondary][inverse=true i] .gov-alert__content,.gov-alert[variant=secondary][inverse=\"1\"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=success]{background-color:var(--gov-alert-success-bg-color, var(--gov-color-success-500))}.gov-alert[variant=success] .gov-alert__icon{color:var(--gov-alert-success-icon-color, var(--gov-color-secondary-100))}.gov-alert[variant=success] .gov-alert__content{color:var(--gov-alert-success-text-color, var(--gov-color-secondary-100))}.gov-alert[variant=success][inverse=\"\"],.gov-alert[variant=success][inverse=true i],.gov-alert[variant=success][inverse=\"1\"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-secondary-100))}.gov-alert[variant=success][inverse=\"\"] .gov-alert__icon,.gov-alert[variant=success][inverse=true i] .gov-alert__icon,.gov-alert[variant=success][inverse=\"1\"] .gov-alert__icon{color:var(--gov-alert-success-bg-color, var(--gov-color-success-500))}.gov-alert[variant=success][inverse=\"\"] .gov-alert__content,.gov-alert[variant=success][inverse=true i] .gov-alert__content,.gov-alert[variant=success][inverse=\"1\"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=primary]{background-color:var(--gov-alert-primary-bg-color, var(--gov-color-primary))}.gov-alert[variant=primary] .gov-alert__icon{color:var(--gov-alert-primary-icon-color, var(--gov-color-secondary-100))}.gov-alert[variant=primary] .gov-alert__content{color:var(--gov-alert-primary-text-color, var(--gov-color-secondary-100))}.gov-alert[variant=primary][inverse=\"\"],.gov-alert[variant=primary][inverse=true i],.gov-alert[variant=primary][inverse=\"1\"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-secondary-100))}.gov-alert[variant=primary][inverse=\"\"] .gov-alert__icon,.gov-alert[variant=primary][inverse=true i] .gov-alert__icon,.gov-alert[variant=primary][inverse=\"1\"] .gov-alert__icon{color:var(--gov-alert-primary-bg-color, var(--gov-color-primary))}.gov-alert[variant=primary][inverse=\"\"] .gov-alert__content,.gov-alert[variant=primary][inverse=true i] .gov-alert__content,.gov-alert[variant=primary][inverse=\"1\"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}@media (min-width: 75em){.gov-alert__content{padding-right:2rem}}";
+
+const GovAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.govClose = createEvent(this, "gov-close", 7);
+    this.variant = Variants.PRIMARY;
+    this.inverse = false;
+    this.wcagCloseLabel = undefined;
+    this.closable = false;
+    this.h = govHost(this.host);
+  }
+  validateVariant(newValue) {
+    validateProp(Variants, newValue, AlertClass.root);
+  }
+  componentWillLoad() {
+    this.validateVariant(this.variant);
+  }
+  render() {
+    var inverse = !this.inverse;
+    var variant = this.inverse || this.variant == "warning" ? "secondary" : this.variant;
+    const closeButton = (h("div", { class: AlertClass.close }, h("gov-button", { size: "s", "aria-label": this.wcagCloseLabel, type: "base", variant: variant, inverse: inverse, onClick: (e) => this.govClose.emit(e) }, h("gov-icon", { name: "cross" }))));
+    return (h(Host, { class: AlertClass.root, variant: this.variant }, h("section", { class: AlertClass.section, role: "alert" }, this.h.hasSlot('icon') && (h("div", { class: AlertClass.icon }, h("slot", { name: "icon" }))), h("div", { class: AlertClass.content }, h("slot", null))), this.closable && closeButton));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "variant": ["validateVariant"]
+  }; }
+  static get style() { return govAlertCss; }
+}, [4, "gov-alert", {
+    "variant": [8],
+    "inverse": [4],
+    "wcagCloseLabel": [1, "wcag-close-label"],
+    "closable": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gov-alert", "gov-button", "gov-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gov-alert":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GovAlert$1);
+      }
+      break;
+    case "gov-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gov-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const GovAlert = GovAlert$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GovAlert, defineCustomElement };
+
+//# sourceMappingURL=gov-alert.js.map

package/dist/components/gov-alert.js.map

@@ -0,0 +1 @@
+{"file":"gov-alert.js","mappings":";;;;;;;AAKO,MAAM,UAAU,GAAG;EACzB,IAAI,EAAE,WAAW;EACjB,OAAO,EAAE,oBAAoB;EAC7B,IAAI,EAAE,iBAAiB;EACvB,OAAO,EAAE,oBAAoB;EAC7B,KAAK,EAAE,kBAAkB;CACzB;;ACXD,MAAM,WAAW,GAAG,kzNAAkzN;;MCYzzNA,UAAQ;EAGpB;;;;mBASwC,QAAQ,CAAC,OAAO;mBAIpB,KAAK;;oBAYH,KAAK;IAxB1C,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EA2BD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,CAAA;GACjD;EAED,iBAAiB;IAChB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAClC;EAID,MAAM;IACL,IAAI,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC5B,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,GAAG,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;IAErF,MAAM,WAAW,IAChB,WAAK,KAAK,EAAE,UAAU,CAAC,KAAK,IAC3B,kBAAY,IAAI,EAAC,GAAG,gBAAa,IAAI,CAAC,cAAc,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAe,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IACxJ,gBAAU,IAAI,EAAC,OAAO,GAAY,CACtB,CACR,CACN,CAAA;IAED,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,UAAU,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAClD,eAAS,KAAK,EAAE,UAAU,CAAC,OAAO,EAAE,IAAI,EAAC,OAAO,IAC9C,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtB,WAAK,KAAK,EAAE,UAAU,CAAC,IAAI,IAC1B,YAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN,EAED,WAAK,KAAK,EAAE,UAAU,CAAC,OAAO,IAC7B,eAAQ,CACH,CACG,EACT,IAAI,CAAC,QAAQ,IAAI,WAAW,CACvB,EACP;GACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GovAlert"],"sources":["../../../packages/core/src/components/gov-alert/constants.ts","../../../packages/core/src/components/gov-alert/gov-alert.scss?tag=gov-alert","../../../packages/core/src/components/gov-alert/gov-alert.tsx"],"sourcesContent":["import { Variants as GlobalVariants } from '../../core/constants/variants'\n\nexport const Variants = [undefined, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY, GlobalVariants.WARNING, GlobalVariants.ERROR, GlobalVariants.SUCCESS] as const\nexport type VariantType = typeof Variants[number]\n\nexport const AlertClass = {\n\troot: \"gov-alert\",\n\tsection: \"gov-alert__section\",\n\ticon: \"gov-alert__icon\",\n\tcontent: \"gov-alert__content\",\n\tclose: \"gov-alert__close\",\n}\n","/*\n *   Alert\n */\n\n$class: \".gov-alert\";\n\n#{$class} {\n\tposition: relative;\n\tdisplay: flex;\n\twidth: 100%;\n\t&__section {\n\t\t@include container();\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\t\tpadding-top: rem-calc(16);\n\t\tpadding-bottom: rem-calc(16);\n\t}\n\t&__icon {\n\t\tflex: 0 0 auto;\n\t\t& > * {\n\t\t\twidth: rem-calc(20);\n\t\t\theight: rem-calc(20);\n\t\t}\n\t}\n\t&__content {\n\t\tpadding-right: rem-calc(52);\n\t\tp {\n\t\t\t@include typography($font-size-m);\n\t\t}\n\t\tp:last-child {\n\t\t\tmargin-bottom: 0 !important;\n\t\t}\n\t\ta {\n\t\t\tcolor: inherit;\n\t\t\t@include hover() {\n\t\t\t\tcolor: inherit;\n\t\t\t}\n\t\t}\n\t}\n\t&__close {\n\t\tposition: absolute;\n\t\ttop: rem-calc(10);\n\t\tright: rem-calc(16);\n\t}\n\n\t// VARIANTS\n\t@each $variant, $definitions in $alert-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\tbackground-color: get(\"bg-color\", $definitions);\n\t\t\t#{$class} {\n\t\t\t\t&__icon {\n\t\t\t\t\tcolor: get(\"icon-color\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__content {\n\t\t\t\t\tcolor: get(\"text-color\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t\t@if deep-map-check($definitions, \"border\") {\n\t\t\t\tborder-bottom: $alert-border;\n\t\t\t}\n\n\t\t\t// STATES\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\tborder-bottom: $alert-border;\n\t\t\t\tbackground-color: $alert-inverse-bg;\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__icon {\n\t\t\t\t\t\tcolor: get(\"bg-color\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t\t&__content {\n\t\t\t\t\t\tcolor: $alert-inverse-color;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@include mq($from: xl) {\n\t\t&__content {\n\t\t\tpadding-right: rem-calc(32);\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { AlertClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.d'\nimport { Variants } from '../../core/constants/variants'\nimport { VariantType } from './constants'\n\n@Component({\n\ttag: 'gov-alert',\n\tstyleUrl: 'gov-alert.scss',\n})\nexport class GovAlert {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovAlertElement\n\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant: VariantType = Variants.PRIMARY\n\t/**\n\t * Determide if component should have inversed colors to be used on dark background\n\t */\n\t@Prop() readonly inverse: boolean = false\n\t/**\n\t * Aria label for the closing button. It is mandatory if the alert is closable\n\t */\n\t@Prop({ attribute: 'wcag-close-label' }) readonly wcagCloseLabel: string\n\t/**\n\t * Called when the close button is clicked\n\t */\n\t@Event({ eventName: 'gov-close' }) govClose: EventEmitter<PointerEvent>\n\t/**\n\t * Displays the option to close the alert\n\t */\n\t@Prop() readonly closable?: boolean = false\n\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, AlertClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\n\n\trender() {\n\t\tvar inverse = !this.inverse;\n\t\tvar variant = this.inverse || this.variant == \"warning\" ? \"secondary\" : this.variant;\n\t\t\n\t\tconst closeButton = (\n\t\t\t<div class={AlertClass.close}>\n\t\t\t\t<gov-button size=\"s\" aria-label={this.wcagCloseLabel} type=\"base\" variant={variant} inverse={inverse} onClick={(e: PointerEvent) => this.govClose.emit(e)}>\n\t\t\t\t\t<gov-icon name=\"cross\"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\t\t)\n\n\t\treturn (\n\t\t\t<Host class={AlertClass.root} variant={this.variant}>\n\t\t\t\t<section class={AlertClass.section} role=\"alert\">\n\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t<div class={AlertClass.icon}>\n\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<div class={AlertClass.content}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t\t{this.closable && closeButton}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/gov-app.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GovApp extends Components.GovApp, HTMLElement {}
+export const GovApp: {
+  prototype: GovApp;
+  new (): GovApp;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;