@gov-design-system-ce/components 0.0.58 → 0.0.59

package/dist/collection/components/gov-grid/gov-grid-item.css

@@ -64,7 +64,7 @@
  -  Variables - Attachments
  */
 /*
- -  Variables - Alert
+ -  Variables - Infobar
  */
 /*
  -  Variables - Backdrop

package/dist/collection/components/gov-grid/gov-grid.css

@@ -64,7 +64,7 @@
  -  Variables - Attachments
  */
 /*
- -  Variables - Alert
+ -  Variables - Infobar
  */
 /*
  -  Variables - Backdrop

package/dist/collection/components/gov-icon/gov-icon.css

@@ -64,7 +64,7 @@
  -  Variables - Attachments
  */
 /*
- -  Variables - Alert
+ -  Variables - Infobar
  */
 /*
  -  Variables - Backdrop

package/dist/collection/components/gov-infobar/default/constants.js

@@ -0,0 +1,12 @@
+import { Variants } from "../../../core/constants/variants";
+import { pick } from "../../../utils/utils";
+export const InfobarVariants = pick(Variants, ['PRIMARY', 'SECONDARY', 'WARNING', 'ERROR', 'SUCCESS']);
+export const InfobarClass = {
+  root: 'gov-infobar',
+  section: 'gov-infobar__section',
+  icon: 'gov-infobar__icon',
+  content: 'gov-infobar__content',
+  headline: 'gov-infobar__headline',
+  close: 'gov-infobar__close',
+};
+//# sourceMappingURL=constants.js.map

package/dist/collection/components/gov-infobar/default/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-infobar/default/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAA;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAG3C,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAA;AAGtG,MAAM,CAAC,MAAM,YAAY,GAAG;EAC3B,IAAI,EAAE,aAAa;EACnB,OAAO,EAAE,sBAAsB;EAC/B,IAAI,EAAE,mBAAmB;EACzB,OAAO,EAAE,sBAAsB;EAC/B,QAAQ,EAAE,uBAAuB;EACjC,KAAK,EAAE,oBAAoB;CAC3B,CAAA","sourcesContent":["import { Variants } from '../../../core/constants/variants'\nimport { pick } from '../../../utils/utils'\nimport { ValueOf } from '../../../types/interfaces'\n\nexport const InfobarVariants = pick(Variants, ['PRIMARY', 'SECONDARY', 'WARNING', 'ERROR', 'SUCCESS'])\nexport type VariantType = `${ValueOf<typeof InfobarVariants>}`\n\nexport const InfobarClass = {\n\troot: 'gov-infobar',\n\tsection: 'gov-infobar__section',\n\ticon: 'gov-infobar__icon',\n\tcontent: 'gov-infobar__content',\n\theadline: 'gov-infobar__headline',\n\tclose: 'gov-infobar__close',\n}\n"]}

package/dist/collection/components/gov-infobar/default/gov-infobar.css

@@ -0,0 +1,384 @@
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* [Core] - Buttons
+------------------------------------------------------------------ */
+/*
+ * Gets color from theme-colors or from palette-colors
+ */
+/*
+ * Converts hex value to rgb colors value
+ */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/*
+ * Generates list of utility classes for margin, padding
+ *
+ * Make sure $list of definitions is sorted so that last item is defined last
+ * So largest views are mentioned last.
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Layout
+ */
+/**
+* Utilities - Offset
+*/
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/**
+* Generates CSS3 var with default value
+*/
+/*
+ -  Variables - General
+ */
+/*
+ -  Variables - Typography
+ */
+/*
+ -  Variables - Variants
+ */
+/*
+ -  Variables - Container
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Accordion
+ */
+/*
+ -  Variables - Attachments
+ */
+/*
+ -  Variables - Infobar
+ */
+/*
+ -  Variables - Backdrop
+ */
+/*
+ -  Variables - Buttons (&& Badges)
+ */
+/*
+ -  Variables - Breadcrumbs
+ */
+/*
+ -  Variables - Classes
+ */
+/*
+ -  Variables - Colors
+ */
+/*
+ -	Variables - Control Group
+ */
+/*
+ -  Variables - Cookiebar
+ */
+/*
+ -  Variables - Dropdown
+ */
+/*
+ -  Variables - Card
+ */
+/*
+ -  Variables - Message
+ */
+/*
+ -  Variables - Empty
+ */
+/*
+ -  Variables - Error code
+ */
+/*
+ -  Variables - Grid
+ */
+/*
+ -  Variables - Tiles
+ */
+/*
+ -  Variables - Modal & Prompt
+ */
+/**
+* Utilities - Offset
+*/
+/*
+ -  Variables - shadows
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Statsbar
+ */
+/*
+ -  Variables - Tabs
+ */
+/*
+ -  Variables - Tooltip
+ */
+/*
+ -  Variables - Loading
+ */
+/*
+ -	Variables - Forms
+ */
+/*
+ -  Variables - Form Autocomplete
+ */
+/*
+ -  Variables - Form Message
+ */
+/*
+ -	Variables - Form label
+ */
+/*
+ -	Variables - Form switch
+ */
+/*
+ -	Variables - Form select
+ */
+/*
+ -	Variables - Form input
+ */
+/*
+ -	Variables - Form multiselect
+ */
+/*
+ -	Variables - Form password power
+ */
+/*
+ -	Variables - Form checkbox & radio
+ */
+/*
+ -  Variables - Form group
+ */
+/*
+ -	Variables - Form file
+ */
+/*
+ -  Variables - Toast Message
+ */
+/*
+ -  Variables - Wizard
+ */
+/*
+ -  Variables - Stepper
+ */
+/*
+ -  Variables - Side nav
+ */
+/*
+ -  Variables - Grid & Tile
+ */
+/*
+ -  Variables - Pagination
+ */
+/*
+ -  Variables - Nav
+ */
+/*
+ -  Variables - Layout
+ */
+.gov-spin-animation,
+.gov-pseudo-spin-animation::before {
+  animation: spin 4s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes countdown {
+  to {
+    transform: scaleX(0);
+  }
+}
+@keyframes progress {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+/*
+*   Infobar
+*/
+.gov-infobar {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+.gov-infobar__section {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+}
+.gov-infobar__icon {
+  flex: 0 0 auto;
+}
+.gov-infobar__icon > * {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.gov-infobar__headline {
+  display: flex;
+  gap: 1rem;
+}
+.gov-infobar__headline + div {
+  margin-top: 0.5rem;
+}
+.gov-infobar__headline p {
+  margin-bottom: 0;
+}
+.gov-infobar__headline gov-button {
+  margin-top: -0.25rem;
+}
+.gov-infobar__content {
+  padding-right: 3.5rem;
+}
+.gov-infobar__content > *:last-child {
+  margin-bottom: 0;
+}
+.gov-infobar__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-infobar__content a {
+  color: inherit;
+}
+@media not all and (pointer: coarse) {
+  .gov-infobar__content a:hover {
+    color: inherit;
+  }
+}
+.gov-infobar__close {
+  position: absolute;
+  top: 0.625rem;
+  right: 1rem;
+}
+.gov-infobar[variant=warning] {
+  background-color: var(--gov-infobar-warning-bg-color, var(--gov-color-warning));
+}
+.gov-infobar[variant=warning] .gov-infobar__icon {
+  color: var(--gov-infobar-warning-icon-color, var(--gov-color-secondary));
+}
+.gov-infobar[variant=warning] .gov-infobar__content {
+  color: var(--gov-infobar-warning-text-color, var(--gov-color-secondary));
+}
+.gov-infobar[variant=warning][inverse=""], .gov-infobar[variant=warning][inverse=true i], .gov-infobar[variant=warning][inverse="1"] {
+  border-bottom: var(--gov-infobar-border, 0.0625rem solid var(--gov-color-secondary-400));
+  background-color: var(--gov-infobar-inverse-bg, var(--gov-color-neutral-white));
+}
+.gov-infobar[variant=warning][inverse=""] .gov-infobar__icon, .gov-infobar[variant=warning][inverse=true i] .gov-infobar__icon, .gov-infobar[variant=warning][inverse="1"] .gov-infobar__icon {
+  color: var(--gov-infobar-warning-bg-color, var(--gov-color-warning));
+}
+.gov-infobar[variant=warning][inverse=""] .gov-infobar__content, .gov-infobar[variant=warning][inverse=true i] .gov-infobar__content, .gov-infobar[variant=warning][inverse="1"] .gov-infobar__content {
+  color: var(--gov-infobar-inverse-color, var(--gov-color-secondary-800));
+}
+.gov-infobar[variant=error] {
+  background-color: var(--gov-infobar-error-bg-color, var(--gov-color-error));
+}
+.gov-infobar[variant=error] .gov-infobar__icon {
+  color: var(--gov-infobar-error-icon-color, var(--gov-color-neutral-white));
+}
+.gov-infobar[variant=error] .gov-infobar__content {
+  color: var(--gov-infobar-error-text-color, var(--gov-color-neutral-white));
+}
+.gov-infobar[variant=error][inverse=""], .gov-infobar[variant=error][inverse=true i], .gov-infobar[variant=error][inverse="1"] {
+  border-bottom: var(--gov-infobar-border, 0.0625rem solid var(--gov-color-secondary-400));
+  background-color: var(--gov-infobar-inverse-bg, var(--gov-color-neutral-white));
+}
+.gov-infobar[variant=error][inverse=""] .gov-infobar__icon, .gov-infobar[variant=error][inverse=true i] .gov-infobar__icon, .gov-infobar[variant=error][inverse="1"] .gov-infobar__icon {
+  color: var(--gov-infobar-error-bg-color, var(--gov-color-error));
+}
+.gov-infobar[variant=error][inverse=""] .gov-infobar__content, .gov-infobar[variant=error][inverse=true i] .gov-infobar__content, .gov-infobar[variant=error][inverse="1"] .gov-infobar__content {
+  color: var(--gov-infobar-inverse-color, var(--gov-color-secondary-800));
+}
+.gov-infobar[variant=secondary] {
+  background-color: var(--gov-infobar-secondary-bg-color, var(--gov-color-secondary));
+}
+.gov-infobar[variant=secondary] .gov-infobar__icon {
+  color: var(--gov-infobar-secondary-icon-color, var(--gov-color-neutral-white));
+}
+.gov-infobar[variant=secondary] .gov-infobar__content {
+  color: var(--gov-infobar-secondary-text-color, var(--gov-color-neutral-white));
+}
+.gov-infobar[variant=secondary][inverse=""], .gov-infobar[variant=secondary][inverse=true i], .gov-infobar[variant=secondary][inverse="1"] {
+  border-bottom: var(--gov-infobar-border, 0.0625rem solid var(--gov-color-secondary-400));
+  background-color: var(--gov-infobar-inverse-bg, var(--gov-color-neutral-white));
+}
+.gov-infobar[variant=secondary][inverse=""] .gov-infobar__icon, .gov-infobar[variant=secondary][inverse=true i] .gov-infobar__icon, .gov-infobar[variant=secondary][inverse="1"] .gov-infobar__icon {
+  color: var(--gov-infobar-secondary-bg-color, var(--gov-color-secondary));
+}
+.gov-infobar[variant=secondary][inverse=""] .gov-infobar__content, .gov-infobar[variant=secondary][inverse=true i] .gov-infobar__content, .gov-infobar[variant=secondary][inverse="1"] .gov-infobar__content {
+  color: var(--gov-infobar-inverse-color, var(--gov-color-secondary-800));
+}
+.gov-infobar[variant=success] {
+  background-color: var(--gov-infobar-success-bg-color, var(--gov-color-success-500));
+}
+.gov-infobar[variant=success] .gov-infobar__icon {
+  color: var(--gov-infobar-success-icon-color, var(--gov-color-neutral-white));
+}
+.gov-infobar[variant=success] .gov-infobar__content {
+  color: var(--gov-infobar-success-text-color, var(--gov-color-neutral-white));
+}
+.gov-infobar[variant=success][inverse=""], .gov-infobar[variant=success][inverse=true i], .gov-infobar[variant=success][inverse="1"] {
+  border-bottom: var(--gov-infobar-border, 0.0625rem solid var(--gov-color-secondary-400));
+  background-color: var(--gov-infobar-inverse-bg, var(--gov-color-neutral-white));
+}
+.gov-infobar[variant=success][inverse=""] .gov-infobar__icon, .gov-infobar[variant=success][inverse=true i] .gov-infobar__icon, .gov-infobar[variant=success][inverse="1"] .gov-infobar__icon {
+  color: var(--gov-infobar-success-bg-color, var(--gov-color-success-500));
+}
+.gov-infobar[variant=success][inverse=""] .gov-infobar__content, .gov-infobar[variant=success][inverse=true i] .gov-infobar__content, .gov-infobar[variant=success][inverse="1"] .gov-infobar__content {
+  color: var(--gov-infobar-inverse-color, var(--gov-color-secondary-800));
+}
+.gov-infobar[variant=primary] {
+  background-color: var(--gov-infobar-primary-bg-color, var(--gov-color-primary));
+}
+.gov-infobar[variant=primary] .gov-infobar__icon {
+  color: var(--gov-infobar-primary-icon-color, var(--gov-color-neutral-white));
+}
+.gov-infobar[variant=primary] .gov-infobar__content {
+  color: var(--gov-infobar-primary-text-color, var(--gov-color-neutral-white));
+}
+.gov-infobar[variant=primary][inverse=""], .gov-infobar[variant=primary][inverse=true i], .gov-infobar[variant=primary][inverse="1"] {
+  border-bottom: var(--gov-infobar-border, 0.0625rem solid var(--gov-color-secondary-400));
+  background-color: var(--gov-infobar-inverse-bg, var(--gov-color-neutral-white));
+}
+.gov-infobar[variant=primary][inverse=""] .gov-infobar__icon, .gov-infobar[variant=primary][inverse=true i] .gov-infobar__icon, .gov-infobar[variant=primary][inverse="1"] .gov-infobar__icon {
+  color: var(--gov-infobar-primary-bg-color, var(--gov-color-primary));
+}
+.gov-infobar[variant=primary][inverse=""] .gov-infobar__content, .gov-infobar[variant=primary][inverse=true i] .gov-infobar__content, .gov-infobar[variant=primary][inverse="1"] .gov-infobar__content {
+  color: var(--gov-infobar-inverse-color, var(--gov-color-secondary-800));
+}
+@media (min-width: 75em) {
+  .gov-infobar__content {
+    padding-right: 2rem;
+  }
+}

package/dist/collection/components/{gov-alert/gov-alert.js → gov-infobar/default/gov-infobar.js}

@@ -1,12 +1,12 @@
 import { h, Host } from "@stencil/core";
-import { validateProp } from "../../helpers/Validate/props";
-import { AlertClass, AlertVariants } from "./constants";
-import { govHost, toBoolAttr } from "../../helpers/Dom/template";
-import Fragment from "../../helpers/Fragment";
-import { validateWcagProp } from "../../helpers/Validate/wcag";
-import { canValidateWcagOnRender } from "../../helpers/Dom/win";
-import { delay } from "../../utils/utils";
-export class GovAlert {
+import { validateProp } from "../../../helpers/Validate/props";
+import { InfobarClass, InfobarVariants } from "./constants";
+import { govHost, toBoolAttr } from "../../../helpers/Dom/template";
+import Fragment from "../../../helpers/Fragment";
+import { validateWcagProp } from "../../../helpers/Validate/wcag";
+import { canValidateWcagOnRender } from "../../../helpers/Dom/win";
+import { delay } from "../../../utils/utils";
+export class GovInfobar {
   constructor() {
     this.headline = undefined;
     this.variant = "primary";
@@ -18,7 +18,7 @@ export class GovAlert {
     this.h = govHost(this.host);
   }
   validateVariant(newValue) {
-    validateProp(AlertVariants, newValue, AlertClass.root);
+    validateProp(InfobarVariants, newValue, InfobarClass.root);
   }
   componentWillLoad() {
     this.validateVariant(this.variant);
@@ -36,12 +36,12 @@ export class GovAlert {
       inverse = false;
       variant = "secondary";
     }
-    const closeButton = (h("div", { class: AlertClass.close }, h("gov-button", { size: "s", "aria-label": this.wcagCloseLabel, type: "base", variant: variant, inverse: inverse, "on-gov-click": this.onCloseHandler.bind(this) }, h("gov-icon", { name: "x-lg" }))));
-    return (h(Host, { class: this.h.classes(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 }, this.headline ? (h(Fragment, null, h("div", { class: AlertClass.headline }, h("p", null, this.headline), h("gov-button", { size: "s", "aria-label": this.wcagToggleLabel, type: "base", variant: variant, inverse: inverse, "on-gov-click": () => this.toggleContent = !this.toggleContent }, h("gov-icon", { name: this.toggleContent ? 'chevron-up' : 'chevron-down' }))), h("div", { hidden: !this.toggleContent, "aria-hidden": toBoolAttr(this.toggleContent) }, h("slot", null)))) : (h("slot", null)))), this.closable && closeButton));
+    const closeButton = (h("div", { class: InfobarClass.close }, h("gov-button", { size: "s", "aria-label": this.wcagCloseLabel, type: "base", variant: variant, inverse: inverse, "on-gov-click": this.onCloseHandler.bind(this) }, h("gov-icon", { name: "x-lg" }))));
+    return (h(Host, { class: this.h.classes(InfobarClass.root), variant: this.variant }, h("section", { class: InfobarClass.section, role: "infobar" }, this.h.hasSlot("icon") && (h("div", { class: InfobarClass.icon }, h("slot", { name: "icon" }))), h("div", { class: InfobarClass.content }, this.headline ? (h(Fragment, null, h("div", { class: InfobarClass.headline }, h("p", null, this.headline), h("gov-button", { size: "s", "aria-label": this.wcagToggleLabel, type: "base", variant: variant, inverse: inverse, "on-gov-click": () => this.toggleContent = !this.toggleContent }, h("gov-icon", { name: this.toggleContent ? 'chevron-up' : 'chevron-down' }))), h("div", { hidden: !this.toggleContent, "aria-hidden": toBoolAttr(this.toggleContent) }, h("slot", null)))) : (h("slot", null)))), this.closable && closeButton));
   }
   onCloseHandler(e) {
     this.govClose.emit({
-      component: AlertClass.root,
+      component: InfobarClass.root,
       ref: this.host,
       originalEvent: e,
     });
@@ -51,21 +51,21 @@ export class GovAlert {
    */
   async validateWcag() {
     if (this.closable) {
-      validateWcagProp(this.wcagCloseLabel, 'wcag-close-label', AlertClass.root);
+      validateWcagProp(this.wcagCloseLabel, 'wcag-close-label', InfobarClass.root);
     }
     if (this.headline) {
-      validateWcagProp(this.wcagToggleLabel, 'wcag-toggle-label', AlertClass.root);
+      validateWcagProp(this.wcagToggleLabel, 'wcag-toggle-label', InfobarClass.root);
     }
   }
-  static get is() { return "gov-alert"; }
+  static get is() { return "gov-infobar"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gov-alert.scss"]
+      "$": ["gov-infobar.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["gov-alert.css"]
+      "$": ["gov-infobar.css"]
     };
   }
   static get properties() {
@@ -97,7 +97,7 @@ export class GovAlert {
             "VariantType": {
               "location": "import",
               "path": "./constants",
-              "id": "../../../packages/core/src/components/gov-alert/constants.ts::VariantType"
+              "id": "../../../packages/core/src/components/gov-infobar/default/constants.ts::VariantType"
             }
           }
         },
@@ -141,7 +141,7 @@ export class GovAlert {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Aria label for the closing button. It is mandatory if the alert is closable"
+          "text": "Aria label for the closing button. It is mandatory if the infobar is closable"
         },
         "attribute": "wcag-close-label",
         "reflect": false
@@ -158,7 +158,7 @@ export class GovAlert {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Aria label for the toggle button. It is mandatory if the alert has headline"
+          "text": "Aria label for the toggle button. It is mandatory if the infobar has headline"
         },
         "attribute": "wcag-toggle-label",
         "reflect": false
@@ -175,7 +175,7 @@ export class GovAlert {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Displays the option to close the alert"
+          "text": "Displays the option to close the infobar"
         },
         "attribute": "closable",
         "reflect": false,
@@ -200,13 +200,13 @@ export class GovAlert {
           "text": "Called when the close button is clicked"
         },
         "complexType": {
-          "original": "AlertEvent",
-          "resolved": "AlertEvent",
+          "original": "InfobarEvent",
+          "resolved": "InfobarEvent",
           "references": {
-            "AlertEvent": {
+            "InfobarEvent": {
               "location": "import",
-              "path": "./gov-alert.types",
-              "id": "../../../packages/core/src/components/gov-alert/gov-alert.types.ts::AlertEvent"
+              "path": "./gov-infobar.types",
+              "id": "../../../packages/core/src/components/gov-infobar/default/gov-infobar.types.ts::InfobarEvent"
             }
           }
         }
@@ -241,4 +241,4 @@ export class GovAlert {
       }];
   }
 }
-//# sourceMappingURL=gov-alert.js.map
+//# sourceMappingURL=gov-infobar.js.map

package/dist/collection/components/gov-infobar/default/gov-infobar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-infobar.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-infobar/default/gov-infobar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { InfobarClass, InfobarVariants, VariantType } from \"./constants\"\nimport { govHost, toBoolAttr } from \"../../../helpers/Dom/template\"\nimport { GovHost } from \"../../../helpers/Dom/template.types\"\nimport { InfobarEvent } from \"./gov-infobar.types\"\nimport { ButtonEvent } from \"../../gov-button/default/gov-button.types\"\nimport Fragment from \"../../../helpers/Fragment\"\nimport { validateWcagProp } from \"../../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../../helpers/Dom/win\"\nimport { delay } from \"../../../utils/utils\"\n\n@Component({\n\ttag: \"gov-infobar\",\n\tstyleUrl: \"gov-infobar.scss\",\n})\nexport class GovInfobar {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovInfobarElement\n\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly headline: string\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant: VariantType = \"primary\"\n\t/**\n\t * Determine if component should have inverse 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 infobar is closable\n\t */\n\t@Prop({ attribute: \"wcag-close-label\" }) readonly wcagCloseLabel: string\n\t/**\n\t * Aria label for the toggle button. It is mandatory if the infobar has headline\n\t */\n\t@Prop({ attribute: \"wcag-toggle-label\" }) readonly wcagToggleLabel: string\n\t/**\n\t * Called when the close button is clicked\n\t */\n\t@Event({ eventName: \"gov-close\" }) govClose: EventEmitter<InfobarEvent>\n\t/**\n\t * Displays the option to close the infobar\n\t */\n\t@Prop() readonly closable?: boolean = false\n\n\t@State() toggleContent = false\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(InfobarVariants, newValue, InfobarClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\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\tlet inverse = !this.inverse\n\t\tlet variant = this.inverse ? \"secondary\" : this.variant\n\n\t\tif (this.variant == \"warning\") {\n\t\t\tinverse = false\n\t\t\tvariant = \"secondary\"\n\t\t}\n\n\t\tconst closeButton = (\n\t\t\t<div class={InfobarClass.close}>\n\t\t\t\t<gov-button\n\t\t\t\t\tsize=\"s\"\n\t\t\t\t\taria-label={this.wcagCloseLabel}\n\t\t\t\t\ttype=\"base\"\n\t\t\t\t\tvariant={variant}\n\t\t\t\t\tinverse={inverse}\n\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t>\n\t\t\t\t\t<gov-icon name=\"x-lg\"></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={this.h.classes(InfobarClass.root)} variant={this.variant}>\n\t\t\t\t<section class={InfobarClass.section} role=\"infobar\">\n\t\t\t\t\t{this.h.hasSlot(\"icon\") && (\n\t\t\t\t\t\t<div class={InfobarClass.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\t\t\t\t\t<div class={InfobarClass.content}>\n\t\t\t\t\t\t{this.headline ? (\n\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t<div class={InfobarClass.headline}>\n\t\t\t\t\t\t\t\t\t<p>{this.headline}</p>\n\t\t\t\t\t\t\t\t\t<gov-button\n\t\t\t\t\t\t\t\t\t\tsize=\"s\"\n\t\t\t\t\t\t\t\t\t\taria-label={this.wcagToggleLabel}\n\t\t\t\t\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\t\t\t\tinverse={inverse}\n\t\t\t\t\t\t\t\t\t\ton-gov-click={() => this.toggleContent = !this.toggleContent}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<gov-icon name={this.toggleContent ? 'chevron-up' : 'chevron-down'}></gov-icon>\n\t\t\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div hidden={!this.toggleContent} aria-hidden={toBoolAttr(this.toggleContent)}>\n\t\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t)}\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\tonCloseHandler(e: CustomEvent<ButtonEvent>) {\n\t\tthis.govClose.emit({\n\t\t\tcomponent: InfobarClass.root,\n\t\t\tref: this.host,\n\t\t\toriginalEvent: e,\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\tif (this.closable) {\n\t\t\tvalidateWcagProp(this.wcagCloseLabel, 'wcag-close-label', InfobarClass.root)\n\t\t}\n\t\tif (this.headline) {\n\t\t\tvalidateWcagProp(this.wcagToggleLabel, 'wcag-toggle-label', InfobarClass.root)\n\t\t}\n\t}\n}\n"]}

package/dist/collection/components/gov-infobar/default/gov-infobar.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=gov-infobar.types.js.map

package/dist/collection/components/gov-infobar/default/gov-infobar.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-infobar.types.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-infobar/default/gov-infobar.types.ts"],"names":[],"mappings":"","sourcesContent":["import { GovBaseEvent } from \"../../../types/event.types\"\n\nexport interface InfobarEvent extends GovBaseEvent {\n\tref: HTMLGovInfobarElement\n}\n\n"]}

package/dist/collection/components/gov-layout/gov-layout-column.css

@@ -64,7 +64,7 @@
  -  Variables - Attachments
  */
 /*
- -  Variables - Alert
+ -  Variables - Infobar
  */
 /*
  -  Variables - Backdrop

package/dist/collection/components/gov-layout/gov-layout.css

@@ -64,7 +64,7 @@
  -  Variables - Attachments
  */
 /*
- -  Variables - Alert
+ -  Variables - Infobar
  */
 /*
  -  Variables - Backdrop

package/dist/collection/components/gov-loading/loading/gov-loading.css

@@ -64,7 +64,7 @@
  -  Variables - Attachments
  */
 /*
- -  Variables - Alert
+ -  Variables - Infobar
  */
 /*
  -  Variables - Backdrop

package/dist/collection/components/gov-loading/skeleton/gov-skeleton.css

@@ -64,7 +64,7 @@
  -  Variables - Attachments
  */
 /*
- -  Variables - Alert
+ -  Variables - Infobar
  */
 /*
  -  Variables - Backdrop

package/dist/collection/components/gov-message/gov-message.css

@@ -64,7 +64,7 @@
  -  Variables - Attachments
  */
 /*
- -  Variables - Alert
+ -  Variables - Infobar
  */
 /*
  -  Variables - Backdrop

package/dist/collection/components/gov-modal/gov-modal.css

@@ -64,7 +64,7 @@
  -  Variables - Attachments
  */
 /*
- -  Variables - Alert
+ -  Variables - Infobar
  */
 /*
  -  Variables - Backdrop

package/dist/collection/components/gov-nav/gov-nav-item.css

@@ -64,7 +64,7 @@
  -  Variables - Attachments
  */
 /*
- -  Variables - Alert
+ -  Variables - Infobar
  */
 /*
  -  Variables - Backdrop

package/dist/collection/components/gov-nav/gov-nav.css

@@ -64,7 +64,7 @@
  -  Variables - Attachments
  */
 /*
- -  Variables - Alert
+ -  Variables - Infobar
  */
 /*
  -  Variables - Backdrop