@gov-design-system-ce/components 4.0.8-rc10 → 4.0.8-rc12

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

@@ -1,28 +1,29 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-eb59f132.js';
-import { g as govHost, p as prepareClasses } from './template-a0067bb6.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
+import { g as govHost, p as prepareClasses } from './template-94812ab3.js';
 
 const TilesClass = {
-  root: 'gov-tiles',
+    root: 'gov-tiles',
 };
 
 const govTilesCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-tiles{overflow:hidden}.gov-tiles>*{margin:0 -0.0625rem -0.0625rem 0;border:0.0625rem solid var(--gov-tiles-border-color, var(--gov-color-secondary-500));border-width:0 0 0.0625rem}.gov-tiles>*:last-child{border-bottom-width:0}.gov-tiles[no-border]>*{border:none}@media (min-width: 48em){.gov-tiles{display:grid}.gov-tiles--x2{grid-template-columns:repeat(2, 1fr)}.gov-tiles--x2>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-tiles--x2>*:nth-child(-n+3){border-top-width:0}.gov-tiles--x2>*:nth-child(2n+2){border-right-width:0}}@media (min-width: 48em) and (max-width: 63.99em){.gov-tiles--x3,.gov-tiles--x4{grid-template-columns:repeat(2, 1fr)}.gov-tiles--x3>*,.gov-tiles--x4>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-tiles--x3>*:nth-child(-n+3),.gov-tiles--x4>*:nth-child(-n+3){border-top-width:0}.gov-tiles--x3>*:nth-child(2n+2),.gov-tiles--x4>*:nth-child(2n+2){border-right-width:0}}@media (min-width: 64em){.gov-tiles--x3{grid-template-columns:repeat(3, 1fr)}.gov-tiles--x3>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-tiles--x3>*:nth-child(-n+4){border-top-width:0}.gov-tiles--x3>*:nth-child(3n+3){border-right-width:0}}@media (min-width: 64em) and (max-width: 74.99em){.gov-tiles--x4{grid-template-columns:repeat(3, 1fr)}.gov-tiles--x4>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-tiles--x4>*:nth-child(-n+4){border-top-width:0}.gov-tiles--x4>*:nth-child(3n+3){border-right-width:0}}@media (min-width: 75em){.gov-tiles--x4{grid-template-columns:repeat(4, 1fr)}.gov-tiles--x4>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-tiles--x4>*:nth-child(-n+5){border-top-width:0}.gov-tiles--x4>*:nth-child(4n+4){border-right-width:0}}";
+const GovTilesStyle0 = govTilesCss;
 
 const GovTiles = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.columns = 3;
-    this.noBorder = false;
-    this.h = govHost(this.host);
-  }
-  get classNames() {
-    return prepareClasses([TilesClass.root, this.columns && TilesClass.root + '--x' + this.columns]);
-  }
-  render() {
-    return (h(Host, { class: this.h.classes(this.classNames) }, h("slot", null)));
-  }
-  get host() { return getElement(this); }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.columns = 3;
+        this.noBorder = false;
+        this.h = govHost(this.host);
+    }
+    get classNames() {
+        return prepareClasses([TilesClass.root, this.columns && TilesClass.root + '--x' + this.columns]);
+    }
+    render() {
+        return (h(Host, { key: 'c8f887c37c940b7164acc55af50e978b9fe1e06e', class: this.h.classes(this.classNames) }, h("slot", { key: '262e7d0b750bdf23dae21ce2b79ba171dac2e5e7' })));
+    }
+    get host() { return getElement(this); }
 };
-GovTiles.style = govTilesCss;
+GovTiles.style = GovTilesStyle0;
 
 export { GovTiles as gov_tiles };
 

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

@@ -1 +1 @@
-{"file":"gov-tiles.entry.js","mappings":";;;AAAO,MAAM,UAAU,GAAG;EACzB,IAAI,EAAE,WAAW;CACjB;;ACFD,MAAM,WAAW,GAAG,69DAA69D;;MCUp+D,QAAQ;EAGpB;;mBAMmC,CAAC;oBAI2B,KAAK;IATnE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAYD,IAAI,UAAU;IACb,OAAO,cAAc,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,UAAU,CAAC,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAA;GAChG;EAED,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,IAC3C,eAAQ,CACF,EACP;GACD;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-tile/container/constants.ts","../../../packages/core/src/components/gov-tile/container/gov-tiles.scss?tag=gov-tiles","../../../packages/core/src/components/gov-tile/container/gov-tiles.tsx"],"sourcesContent":["export const TilesClass = {\n\troot: 'gov-tiles',\n}\n","/*\n *   Tiles\n */\n\n$class: \".gov-tiles\";\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 $tiles-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\t&[no-border] {\n\t\t& > * {\n\t\t\tborder: none;\n\t\t}\n\t}\n\n\t// VARIANTS\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 { TilesClass } from './constants'\nimport { prepareClasses } from '../../../helpers/Dom/template'\nimport { govHost } from '../../../helpers/Dom/template'\nimport { GovHost } from '../../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-tiles',\n\tstyleUrl: 'gov-tiles.scss',\n})\nexport class GovTiles {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\t/**\n\t * Number of columns between 1-4\n\t */\n\t@Prop() readonly columns: number = 3\n\t/**\n\t * Tiles border\n\t */\n\t@Prop({ attribute: 'no-border' }) readonly noBorder: boolean = false\n\n\t@Element() host: HTMLGovTilesElement\n\n\tget classNames(): string {\n\t\treturn prepareClasses([TilesClass.root, this.columns && TilesClass.root + '--x' + this.columns])\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(this.classNames)}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"gov-tiles.entry.js","mappings":";;;AAAO,MAAM,UAAU,GAAG;IACzB,IAAI,EAAE,WAAW;CACjB;;ACFD,MAAM,WAAW,GAAG,69DAA69D,CAAC;AACl/D,uBAAe,WAAW;;MCSb,QAAQ;IAGpB;;uBAMmC,CAAC;wBAI2B,KAAK;QATnE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAYD,IAAI,UAAU;QACb,OAAO,cAAc,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,UAAU,CAAC,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAA;KAChG;IAED,MAAM;QACL,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,IAC3C,8DAAQ,CACF,EACP;KACD;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-tile/container/constants.ts","../../../packages/core/src/components/gov-tile/container/gov-tiles.scss?tag=gov-tiles","../../../packages/core/src/components/gov-tile/container/gov-tiles.tsx"],"sourcesContent":["export const TilesClass = {\n\troot: 'gov-tiles',\n}\n","/*\n *   Tiles\n */\n\n$class: \".gov-tiles\";\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 $tiles-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\t&[no-border] {\n\t\t& > * {\n\t\t\tborder: none;\n\t\t}\n\t}\n\n\t// VARIANTS\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 { TilesClass } from './constants'\nimport { prepareClasses } from '../../../helpers/Dom/template'\nimport { govHost } from '../../../helpers/Dom/template'\nimport { GovHost } from '../../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-tiles',\n\tstyleUrl: 'gov-tiles.scss',\n})\nexport class GovTiles {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\t/**\n\t * Number of columns between 1-4\n\t */\n\t@Prop() readonly columns: number = 3\n\t/**\n\t * Tiles border\n\t */\n\t@Prop({ attribute: 'no-border' }) readonly noBorder: boolean = false\n\n\t@Element() host: HTMLGovTilesElement\n\n\tget classNames(): string {\n\t\treturn prepareClasses([TilesClass.root, this.columns && TilesClass.root + '--x' + this.columns])\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(this.classNames)}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

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

@@ -1,96 +1,97 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-eb59f132.js';
-import { v as validateProp } from './props-a85d9c89.js';
-import { V as Variants, T as Types } from './variants-2b936d58.js';
-import { p as pick } from './utils-c057a3fa.js';
-import { g as govHost } from './template-a0067bb6.js';
-import { c as createID } from './string.utils-f268fc6b.js';
-import './gov.log-49da0221.js';
-import './win-1dbd3f5c.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b44c6c92.js';
+import { v as validateProp } from './props-ec3beb91.js';
+import { V as Variants, T as Types } from './variants-69f013c1.js';
+import { p as pick } from './utils-e10e994d.js';
+import { g as govHost } from './template-94812ab3.js';
+import { c as createID } from './string.utils-5ce3f551.js';
+import './gov.log-431da6b2.js';
+import './win-b64cd8a6.js';
 
 const ToastVariants = pick(Variants, ['SUCCESS', 'WARNING', 'ERROR', 'SECONDARY', 'PRIMARY']);
 pick(Types, ['CLASSIC', 'SOLID']);
 const ToastClass = {
-  root: 'gov-toast',
-  hidden: 'gov-toast--hidden',
-  icon: 'gov-toast__icon',
-  content: 'gov-toast__content',
-  close: 'gov-toast__close',
-  timer: 'gov-toast__timer',
+    root: 'gov-toast',
+    hidden: 'gov-toast--hidden',
+    icon: 'gov-toast__icon',
+    content: 'gov-toast__content',
+    close: 'gov-toast__close',
+    timer: 'gov-toast__timer',
 };
 
 const govToastCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-toast{position:relative;display:flex;gap:1rem;flex-direction:column;padding:0.75rem 1rem;border-left:0.25rem solid transparent;background:var(--gov-toast-message-bg, var(--gov-color-neutral-white));z-index:301;position:relative;position:fixed;max-width:23.4375rem;padding-right:3.125rem;opacity:1;transition:opacity 300ms ease-in-out}.gov-toast__icon{flex:0 0 1.25rem;width:1.25rem;height:1.25rem}.gov-toast__content{flex:1 1 auto}.gov-toast__content>*:last-child{margin-bottom:0}.gov-toast__content p{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing)}@media (min-width: 30em){.gov-toast{flex-direction:row}}.gov-toast__content{padding-right:0}.gov-toast__close{position:absolute;top:0.5rem;right:0.75rem}.gov-toast__timer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}.gov-toast--hidden{opacity:0}.gov-toast[gravity=top i]{top:1rem}.gov-toast[gravity=bottom i]{bottom:1rem}.gov-toast[position=left i]{left:1rem}.gov-toast[position=center i]{left:50%;transform:translateX(-50%)}.gov-toast[position=right i]{right:1rem}.gov-toast[type=solid i]{border:none;border-radius:0.25rem;overflow:hidden;box-shadow:none}.gov-toast[type=solid i].is-initialized .gov-toast__timer{transform-origin:right;animation:countdown linear forwards var(--toast-duration, 0)}.gov-toast[variant=warning]{border-left-color:var(--gov-toast-warning-codecor-lor, var(--gov-color-warning))}.gov-toast[variant=warning] .gov-toast__icon{color:var(--gov-toast-warning-codecor-lor, var(--gov-color-warning))}.gov-toast[variant=warning][type=solid i]{background-color:var(--gov-toast-warning-background, var(--gov-color-warning));color:var(--gov-toast-warning-color, var(--gov-color-secondary))}.gov-toast[variant=warning][type=solid i] .gov-toast__icon{color:var(--gov-toast-warning-color, var(--gov-color-secondary))}.gov-toast[variant=warning][type=solid i] .gov-toast__timer{background-color:var(--gov-toast-warning-timer-background, rgba(var(--gov-color-warning-500-rgb), 0.3))}.gov-toast[variant=error]{border-left-color:var(--gov-toast-error-colodecor-r, var(--gov-color-error))}.gov-toast[variant=error] .gov-toast__icon{color:var(--gov-toast-error-colodecor-r, var(--gov-color-error))}.gov-toast[variant=error][type=solid i]{background-color:var(--gov-toast-error-background, var(--gov-color-error));color:var(--gov-toast-error-color, var(--gov-color-neutral-white))}.gov-toast[variant=error][type=solid i] .gov-toast__icon{color:var(--gov-toast-error-color, var(--gov-color-neutral-white))}.gov-toast[variant=error][type=solid i] .gov-toast__timer{background-color:var(--gov-toast-error-timer-background, rgba(var(--gov-color-error-500-rgb), 0.5))}.gov-toast[variant=success]{border-left-color:var(--gov-toast-success-codecor-lor, var(--gov-color-success))}.gov-toast[variant=success] .gov-toast__icon{color:var(--gov-toast-success-codecor-lor, var(--gov-color-success))}.gov-toast[variant=success][type=solid i]{background-color:var(--gov-toast-success-background, var(--gov-color-success-500));color:var(--gov-toast-success-color, var(--gov-color-neutral-white))}.gov-toast[variant=success][type=solid i] .gov-toast__icon{color:var(--gov-toast-success-color, var(--gov-color-neutral-white))}.gov-toast[variant=success][type=solid i] .gov-toast__timer{background-color:var(--gov-toast-success-timer-background, rgba(var(--gov-color-success-600-rgb), 0.5))}.gov-toast[variant=primary]{border-left-color:var(--gov-toast-primary-codecor-lor, var(--gov-color-primary))}.gov-toast[variant=primary] .gov-toast__icon{color:var(--gov-toast-primary-codecor-lor, var(--gov-color-primary))}.gov-toast[variant=primary][type=solid i]{background-color:var(--gov-toast-primary-background, var(--gov-color-primary));color:var(--gov-toast-primary-color, var(--gov-color-neutral-white))}.gov-toast[variant=primary][type=solid i] .gov-toast__icon{color:var(--gov-toast-primary-color, var(--gov-color-neutral-white))}.gov-toast[variant=primary][type=solid i] .gov-toast__timer{background-color:var(--gov-toast-primary-timer-background, rgba(var(--gov-color-primary-700-rgb), 0.5))}.gov-toast[variant=secondary]{border-left-color:var(--gov-toast-secondary-decor-color, var(--gov-color-secondary))}.gov-toast[variant=secondary] .gov-toast__icon{color:var(--gov-toast-secondary-decor-color, var(--gov-color-secondary))}.gov-toast[variant=secondary][type=solid i]{background-color:var(--gov-toast-secondary-background, var(--gov-color-secondary));color:var(--gov-toast-secondary-color, var(--gov-color-neutral-white))}.gov-toast[variant=secondary][type=solid i] .gov-toast__icon{color:var(--gov-toast-secondary-color, var(--gov-color-neutral-white))}.gov-toast[variant=secondary][type=solid i] .gov-toast__timer{background-color:var(--gov-toast-secondary-timer-background, rgba(var(--gov-color-secondary-900-rgb), 0.5))}@media (min-width: 30em){.gov-toast__content{padding-right:2rem}}";
+const GovToastStyle0 = govToastCss;
 
 const GovToast = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.govClose = createEvent(this, "gov-close", 7);
-    this.variant = "primary";
-    this.gravity = "top";
-    this.position = "right";
-    this.type = "classic";
-    this.time = 0;
-    this.closeLabel = undefined;
-    this.wcagCloseLabel = undefined;
-    this.h = govHost(this.host);
-    this.toastId = createID("GovToast");
-  }
-  validateVariant(newValue) {
-    validateProp(ToastVariants, newValue, ToastClass.root);
-  }
-  componentWillLoad() {
-    this.validateVariant(this.variant);
-    this.runTimer();
-  }
-  disconnectedCallback() {
-    clearTimeout(this.timeout);
-  }
-  runTimer() {
-    if (this.isSolid) {
-      this.host.classList.add("is-initialized");
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.govClose = createEvent(this, "gov-close", 7);
+        this.variant = "primary";
+        this.gravity = "top";
+        this.position = "right";
+        this.type = "classic";
+        this.time = 0;
+        this.closeLabel = undefined;
+        this.wcagCloseLabel = undefined;
+        this.h = govHost(this.host);
+        this.toastId = createID("GovToast");
     }
-    if (this.isTimer) {
-      this.timeout = setTimeout(() => {
-        this.host.classList.add(ToastClass.hidden);
-        setTimeout(() => {
-          this.destroy().catch();
-          this.govClose.emit(this.toastId);
-        }, 600);
-      }, this.time);
+    validateVariant(newValue) {
+        validateProp(ToastVariants, newValue, ToastClass.root);
     }
-  }
-  render() {
-    return (h(Host, { class: this.h.classes([ToastClass.root, "gov-box-shadow--m"]), "data-toast-id": this.toastId, gravity: this.gravity, position: this.position, variant: this.variant, type: this.type, style: { "--toast-duration": this.time + "ms" } }, this.h.hasSlot("icon") && (h("span", { class: ToastClass.icon }, h("slot", { name: "icon" }))), h("div", { class: ToastClass.content, "aria-live": "polite", role: "status" }, h("slot", null)), h("div", { class: ToastClass.close }, h("gov-button", { size: "s", "wcag-label": this.wcagCloseLabel, variant: this.isSolid ? this.variant : "secondary", inverse: this.isSolid, type: "base", "on-gov-click": this.onCloseHandler.bind(this) }, this.closeLabel ? this.closeLabel : h("gov-icon", { name: "x-lg" }))), h("div", { class: ToastClass.timer })));
-  }
-  onCloseHandler() {
-    this.destroy()
-      .then(() => this.govClose.emit(this.toastId))
-      .catch();
-  }
-  get isSolid() {
-    return this.type === "solid";
-  }
-  get isTimer() {
-    return Number.isInteger(this.time) && this.time > 0;
-  }
-  /**
-   * Remove toast from dom
-   */
-  async destroy() {
-    clearTimeout(this.timeout);
-    const toast = document.querySelector(`[data-toast-id="${this.toastId}"]`);
-    if (toast) {
-      toast.classList.add(ToastClass.hidden);
-      if (typeof toast.remove === "function") {
-        toast.remove();
-      }
+    componentWillLoad() {
+        this.validateVariant(this.variant);
+        this.runTimer();
     }
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "variant": ["validateVariant"]
-  }; }
+    disconnectedCallback() {
+        clearTimeout(this.timeout);
+    }
+    runTimer() {
+        if (this.isSolid) {
+            this.host.classList.add("is-initialized");
+        }
+        if (this.isTimer) {
+            this.timeout = setTimeout(() => {
+                this.host.classList.add(ToastClass.hidden);
+                setTimeout(() => {
+                    this.destroy().catch();
+                    this.govClose.emit(this.toastId);
+                }, 600);
+            }, this.time);
+        }
+    }
+    render() {
+        return (h(Host, { key: 'b2f011146ea89c841a14bb91d4cd469054ca4c3f', class: this.h.classes([ToastClass.root, "gov-box-shadow--m"]), "data-toast-id": this.toastId, gravity: this.gravity, position: this.position, variant: this.variant, type: this.type, style: { "--toast-duration": this.time + "ms" } }, this.h.hasSlot("icon") && (h("span", { key: '1f51ceb58b292aa675a498e0609c8a6ccf052297', class: ToastClass.icon }, h("slot", { key: '7a673da01d320f9571bf7580b56e3f65434e66be', name: "icon" }))), h("div", { key: '3cf7a20d7800ce421e826278c7bf4cf71c5ca5a5', class: ToastClass.content, "aria-live": "polite", role: "status" }, h("slot", { key: '9e0648e2c8c5667deb4baccaa78d5a26a1943ae7' })), h("div", { key: '583ce0755e731bd44738e7e89a20d8ba29b07990', class: ToastClass.close }, h("gov-button", { key: '97f635fa5cc51d071c667b4408f37506cf5e8f04', size: "s", "wcag-label": this.wcagCloseLabel, variant: this.isSolid ? this.variant : "secondary", inverse: this.isSolid, type: "base", "on-gov-click": this.onCloseHandler.bind(this) }, this.closeLabel ? this.closeLabel : h("gov-icon", { name: "x-lg" }))), h("div", { key: 'd8bf898c3032d2874c925da9302ea76341b13c2a', class: ToastClass.timer })));
+    }
+    onCloseHandler() {
+        this.destroy()
+            .then(() => this.govClose.emit(this.toastId))
+            .catch();
+    }
+    get isSolid() {
+        return this.type === "solid";
+    }
+    get isTimer() {
+        return Number.isInteger(this.time) && this.time > 0;
+    }
+    /**
+     * Remove toast from dom
+     */
+    async destroy() {
+        clearTimeout(this.timeout);
+        const toast = document.querySelector(`[data-toast-id="${this.toastId}"]`);
+        if (toast) {
+            toast.classList.add(ToastClass.hidden);
+            if (typeof toast.remove === "function") {
+                toast.remove();
+            }
+        }
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "variant": ["validateVariant"]
+    }; }
 };
-GovToast.style = govToastCss;
+GovToast.style = GovToastStyle0;
 
 export { GovToast as gov_toast };
 

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

@@ -1 +1 @@
-{"file":"gov-toast.entry.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-toast/constants.ts","../../../packages/core/src/components/gov-toast/gov-toast.scss?tag=gov-toast","../../../packages/core/src/components/gov-toast/gov-toast.tsx"],"sourcesContent":["import { Variants, Types } from '../../core/constants/variants'\nimport { pick } from '../../utils/utils'\nimport { ValueOf } from '../../types/interfaces'\n\nexport const ToastVariants = pick(Variants, ['SUCCESS', 'WARNING', 'ERROR', 'SECONDARY', 'PRIMARY'])\nexport type ToastVariantType = `${ValueOf<typeof ToastVariants>}`\n\nexport const ToastTypes = pick(Types, ['CLASSIC', 'SOLID'])\nexport type ToastTypesType = `${ValueOf<typeof ToastTypes>}`\n\nexport const ToastClass = {\n\troot: 'gov-toast',\n\thidden: 'gov-toast--hidden',\n\ticon: 'gov-toast__icon',\n\tcontent: 'gov-toast__content',\n\tclose: 'gov-toast__close',\n\ttimer: 'gov-toast__timer',\n}\n","/*\n *   Alert\n */\n\n@import \"./gov-toast-message-core.scss\";\n$class: \".gov-toast\";\n\n#{$class} {\n\t@include toast-message-core;\n\t@include z-index(\"toast\", 1);\n\tposition: relative;\n\tposition: fixed;\n\tmax-width: rem-calc(375);\n\tpadding-right: rem-calc(50);\n\topacity: 1;\n\ttransition: opacity 300ms ease-in-out;\n\t&__content {\n\t\tpadding-right: 0;\n\t}\n\t&__close {\n\t\tposition: absolute;\n\t\ttop: rem-calc(8);\n\t\tright: rem-calc(12);\n\t}\n\t&__timer {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tz-index: -1;\n\t}\n\n\t// VARIANTS\n\t&--hidden {\n\t\topacity: 0;\n\t}\n\t&[gravity=\"top\" i] {\n\t\ttop: rem-calc(16);\n\t}\n\t&[gravity=\"bottom\" i] {\n\t\tbottom: rem-calc(16);\n\t}\n\t&[position=\"left\" i] {\n\t\tleft: rem-calc(16);\n\t}\n\t&[position=\"center\" i] {\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t}\n\t&[position=\"right\" i] {\n\t\tright: rem-calc(16);\n\t}\n\t&[type=\"solid\" i] {\n\t\tborder: none;\n\t\tborder-radius: rem-calc(4);\n\t\toverflow: hidden;\n\t\tbox-shadow: none;\n\t\t&.is-initialized #{$class}__timer {\n\t\t\ttransform-origin: right;\n\t\t\tanimation: countdown linear forwards var(--toast-duration, 0);\n\t\t}\n\t}\n\n\t@each $variant, $definitions in $toast-message-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\tborder-left-color: get(\"decor-color\", $definitions);\n\t\t\t#{$class} {\n\t\t\t\t&__icon {\n\t\t\t\t\tcolor: get(\"decor-color\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&[type=\"solid\" i] {\n\t\t\t\tbackground-color: get(\"background\", $definitions);\n\t\t\t\tcolor: get(\"color\", $definitions);\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__icon {\n\t\t\t\t\t\tcolor: get(\"color\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t\t&__timer {\n\t\t\t\t\t\tbackground-color: get(\"timer-background\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\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, Method, Prop, Watch } from \"@stencil/core\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { ToastClass, ToastTypesType, ToastVariants, ToastVariantType } from \"./constants\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { createID } from \"../../utils/string.utils\"\n\n@Component({\n\ttag: \"gov-toast\",\n\tstyleUrl: \"gov-toast.scss\",\n})\nexport class GovToast {\n\tprivate h: GovHost\n\tprivate timeout\n\tprivate readonly toastId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.toastId = createID(\"GovToast\")\n\t}\n\n\t@Element() host: HTMLGovToastElement\n\t/**\n\t * Style variation of the toast message.\n\t */\n\t@Prop() readonly variant?: ToastVariantType = \"primary\"\n\n\t/**\n\t * Toast’s gravity\n\t */\n\t@Prop() readonly gravity: \"top\" | \"bottom\" = \"top\"\n\t/**\n\t * Toast’s position\n\t */\n\t@Prop() readonly position: \"left\" | \"center\" | \"right\" = \"right\"\n\t/**\n\t * Toast type\n\t */\n\t@Prop() readonly type?: ToastTypesType = \"classic\"\n\t/**\n\t * Number of milliseconds to wait before Toast disappear\n\t */\n\t@Prop() readonly time: number = 0\n\t/**\n\t * Closing button texting instead of icons\n\t */\n\t@Prop({ attribute: \"close-label\" }) readonly closeLabel: string\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<string>\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(ToastVariants, newValue, ToastClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.runTimer()\n\t}\n\n\tdisconnectedCallback() {\n\t\tclearTimeout(this.timeout)\n\t}\n\n\tprivate runTimer() {\n\t\tif (this.isSolid) {\n\t\t\tthis.host.classList.add(\"is-initialized\")\n\t\t}\n\t\tif (this.isTimer) {\n\t\t\tthis.timeout = setTimeout(() => {\n\t\t\t\tthis.host.classList.add(ToastClass.hidden)\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tthis.destroy().catch()\n\t\t\t\t\tthis.govClose.emit(this.toastId)\n\t\t\t\t}, 600)\n\t\t\t}, this.time)\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes([ToastClass.root, \"gov-box-shadow--m\"])}\n\t\t\t\tdata-toast-id={this.toastId}\n\t\t\t\tgravity={this.gravity}\n\t\t\t\tposition={this.position}\n\t\t\t\tvariant={this.variant}\n\t\t\t\ttype={this.type}\n\t\t\t\tstyle={{ \"--toast-duration\": this.time + \"ms\" }}\n\t\t\t>\n\t\t\t\t{this.h.hasSlot(\"icon\") && (\n\t\t\t\t\t<span class={ToastClass.icon}>\n\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\n\t\t\t\t<div class={ToastClass.content} aria-live=\"polite\" role=\"status\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\n\t\t\t\t<div class={ToastClass.close}>\n\t\t\t\t\t<gov-button\n\t\t\t\t\t\tsize=\"s\"\n\t\t\t\t\t\twcag-label={this.wcagCloseLabel}\n\t\t\t\t\t\tvariant={this.isSolid ? this.variant : \"secondary\"}\n\t\t\t\t\t\tinverse={this.isSolid}\n\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.closeLabel ? this.closeLabel : <gov-icon name=\"x-lg\"></gov-icon>}\n\t\t\t\t\t</gov-button>\n\t\t\t\t</div>\n\n\t\t\t\t<div class={ToastClass.timer}></div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onCloseHandler(): void {\n\t\tthis.destroy()\n\t\t\t.then(() => this.govClose.emit(this.toastId))\n\t\t\t.catch()\n\t}\n\n\tget isSolid(): boolean {\n\t\treturn this.type === \"solid\"\n\t}\n\n\tget isTimer(): boolean {\n\t\treturn Number.isInteger(this.time) && this.time > 0\n\t}\n\n\t/**\n\t * Remove toast from dom\n\t */\n\t@Method()\n\tasync destroy(): Promise<void> {\n\t\tclearTimeout(this.timeout)\n\t\tconst toast = document.querySelector(`[data-toast-id=\"${this.toastId}\"]`)\n\t\tif (toast) {\n\t\t\ttoast.classList.add(ToastClass.hidden)\n\t\t\tif (typeof toast.remove === \"function\") {\n\t\t\t\ttoast.remove()\n\t\t\t}\n\t\t}\n\t}\n}\n"],"version":3}
+{"file":"gov-toast.entry.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-toast/constants.ts","../../../packages/core/src/components/gov-toast/gov-toast.scss?tag=gov-toast","../../../packages/core/src/components/gov-toast/gov-toast.tsx"],"sourcesContent":["import { Variants, Types } from '../../core/constants/variants'\nimport { pick } from '../../utils/utils'\nimport { ValueOf } from '../../types/interfaces'\n\nexport const ToastVariants = pick(Variants, ['SUCCESS', 'WARNING', 'ERROR', 'SECONDARY', 'PRIMARY'])\nexport type ToastVariantType = `${ValueOf<typeof ToastVariants>}`\n\nexport const ToastTypes = pick(Types, ['CLASSIC', 'SOLID'])\nexport type ToastTypesType = `${ValueOf<typeof ToastTypes>}`\n\nexport const ToastClass = {\n\troot: 'gov-toast',\n\thidden: 'gov-toast--hidden',\n\ticon: 'gov-toast__icon',\n\tcontent: 'gov-toast__content',\n\tclose: 'gov-toast__close',\n\ttimer: 'gov-toast__timer',\n}\n","/*\n *   Alert\n */\n\n@import \"./gov-toast-message-core.scss\";\n$class: \".gov-toast\";\n\n#{$class} {\n\t@include toast-message-core;\n\t@include z-index(\"toast\", 1);\n\tposition: relative;\n\tposition: fixed;\n\tmax-width: rem-calc(375);\n\tpadding-right: rem-calc(50);\n\topacity: 1;\n\ttransition: opacity 300ms ease-in-out;\n\t&__content {\n\t\tpadding-right: 0;\n\t}\n\t&__close {\n\t\tposition: absolute;\n\t\ttop: rem-calc(8);\n\t\tright: rem-calc(12);\n\t}\n\t&__timer {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tz-index: -1;\n\t}\n\n\t// VARIANTS\n\t&--hidden {\n\t\topacity: 0;\n\t}\n\t&[gravity=\"top\" i] {\n\t\ttop: rem-calc(16);\n\t}\n\t&[gravity=\"bottom\" i] {\n\t\tbottom: rem-calc(16);\n\t}\n\t&[position=\"left\" i] {\n\t\tleft: rem-calc(16);\n\t}\n\t&[position=\"center\" i] {\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t}\n\t&[position=\"right\" i] {\n\t\tright: rem-calc(16);\n\t}\n\t&[type=\"solid\" i] {\n\t\tborder: none;\n\t\tborder-radius: rem-calc(4);\n\t\toverflow: hidden;\n\t\tbox-shadow: none;\n\t\t&.is-initialized #{$class}__timer {\n\t\t\ttransform-origin: right;\n\t\t\tanimation: countdown linear forwards var(--toast-duration, 0);\n\t\t}\n\t}\n\n\t@each $variant, $definitions in $toast-message-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\tborder-left-color: get(\"decor-color\", $definitions);\n\t\t\t#{$class} {\n\t\t\t\t&__icon {\n\t\t\t\t\tcolor: get(\"decor-color\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&[type=\"solid\" i] {\n\t\t\t\tbackground-color: get(\"background\", $definitions);\n\t\t\t\tcolor: get(\"color\", $definitions);\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__icon {\n\t\t\t\t\t\tcolor: get(\"color\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t\t&__timer {\n\t\t\t\t\t\tbackground-color: get(\"timer-background\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\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, Method, Prop, Watch } from \"@stencil/core\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { ToastClass, ToastTypesType, ToastVariants, ToastVariantType } from \"./constants\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { createID } from \"../../utils/string.utils\"\n\n@Component({\n\ttag: \"gov-toast\",\n\tstyleUrl: \"gov-toast.scss\",\n})\nexport class GovToast {\n\tprivate h: GovHost\n\tprivate timeout\n\tprivate readonly toastId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.toastId = createID(\"GovToast\")\n\t}\n\n\t@Element() host: HTMLGovToastElement\n\t/**\n\t * Style variation of the toast message.\n\t */\n\t@Prop() readonly variant?: ToastVariantType = \"primary\"\n\n\t/**\n\t * Toast’s gravity\n\t */\n\t@Prop() readonly gravity: \"top\" | \"bottom\" = \"top\"\n\t/**\n\t * Toast’s position\n\t */\n\t@Prop() readonly position: \"left\" | \"center\" | \"right\" = \"right\"\n\t/**\n\t * Toast type\n\t */\n\t@Prop() readonly type?: ToastTypesType = \"classic\"\n\t/**\n\t * Number of milliseconds to wait before Toast disappear\n\t */\n\t@Prop() readonly time: number = 0\n\t/**\n\t * Closing button texting instead of icons\n\t */\n\t@Prop({ attribute: \"close-label\" }) readonly closeLabel: string\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<string>\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(ToastVariants, newValue, ToastClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.runTimer()\n\t}\n\n\tdisconnectedCallback() {\n\t\tclearTimeout(this.timeout)\n\t}\n\n\tprivate runTimer() {\n\t\tif (this.isSolid) {\n\t\t\tthis.host.classList.add(\"is-initialized\")\n\t\t}\n\t\tif (this.isTimer) {\n\t\t\tthis.timeout = setTimeout(() => {\n\t\t\t\tthis.host.classList.add(ToastClass.hidden)\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tthis.destroy().catch()\n\t\t\t\t\tthis.govClose.emit(this.toastId)\n\t\t\t\t}, 600)\n\t\t\t}, this.time)\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes([ToastClass.root, \"gov-box-shadow--m\"])}\n\t\t\t\tdata-toast-id={this.toastId}\n\t\t\t\tgravity={this.gravity}\n\t\t\t\tposition={this.position}\n\t\t\t\tvariant={this.variant}\n\t\t\t\ttype={this.type}\n\t\t\t\tstyle={{ \"--toast-duration\": this.time + \"ms\" }}\n\t\t\t>\n\t\t\t\t{this.h.hasSlot(\"icon\") && (\n\t\t\t\t\t<span class={ToastClass.icon}>\n\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\n\t\t\t\t<div class={ToastClass.content} aria-live=\"polite\" role=\"status\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\n\t\t\t\t<div class={ToastClass.close}>\n\t\t\t\t\t<gov-button\n\t\t\t\t\t\tsize=\"s\"\n\t\t\t\t\t\twcag-label={this.wcagCloseLabel}\n\t\t\t\t\t\tvariant={this.isSolid ? this.variant : \"secondary\"}\n\t\t\t\t\t\tinverse={this.isSolid}\n\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.closeLabel ? this.closeLabel : <gov-icon name=\"x-lg\"></gov-icon>}\n\t\t\t\t\t</gov-button>\n\t\t\t\t</div>\n\n\t\t\t\t<div class={ToastClass.timer}></div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onCloseHandler(): void {\n\t\tthis.destroy()\n\t\t\t.then(() => this.govClose.emit(this.toastId))\n\t\t\t.catch()\n\t}\n\n\tget isSolid(): boolean {\n\t\treturn this.type === \"solid\"\n\t}\n\n\tget isTimer(): boolean {\n\t\treturn Number.isInteger(this.time) && this.time > 0\n\t}\n\n\t/**\n\t * Remove toast from dom\n\t */\n\t@Method()\n\tasync destroy(): Promise<void> {\n\t\tclearTimeout(this.timeout)\n\t\tconst toast = document.querySelector(`[data-toast-id=\"${this.toastId}\"]`)\n\t\tif (toast) {\n\t\t\ttoast.classList.add(ToastClass.hidden)\n\t\t\tif (typeof toast.remove === \"function\") {\n\t\t\t\ttoast.remove()\n\t\t\t}\n\t\t}\n\t}\n}\n"],"version":3}

package/dist/esm/gov-tooltip-content.entry.js

@@ -1,49 +1,50 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-eb59f132.js';
-import { T as TooltipVariant, a as TooltipSize, b as TooltipContentClass } from './constants-887c5391.js';
-import { a as toBoolAttr } from './template-a0067bb6.js';
-import './variants-2b936d58.js';
-import './sizes-6c5943b4.js';
-import './utils-c057a3fa.js';
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b44c6c92.js';
+import { T as TooltipVariant, a as TooltipSize, b as TooltipContentClass } from './constants-14f351fd.js';
+import { a as toBoolAttr } from './template-94812ab3.js';
+import './variants-69f013c1.js';
+import './sizes-5b9e579f.js';
+import './utils-e10e994d.js';
 
 const govTooltipContentCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-tooltip-content{z-index:51;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);position:absolute;display:none;width:-moz-max-content;width:max-content;max-width:var(--gov-tooltip-content-max-width, 21rem);padding:1rem;border-radius:0.1875rem;background-color:var(--gov-tooltip-content-bg-color, var(--gov-color-primary-300));color:var(--gov-tooltip-content-text-color, var(--gov-color-secondary));letter-spacing:0.0125rem;visibility:hidden;opacity:0;transition:opacity 0.2s ease-in}.gov-tooltip-content::before{content:\"\";position:absolute;display:block;width:0;height:0;border:0.625rem solid transparent}.gov-tooltip-content gov-button{position:absolute;right:0;top:0}.gov-tooltip-content[persist=\"\"],.gov-tooltip-content[persist=true i],.gov-tooltip-content[persist=\"1\"]{padding-right:3.25rem}.gov-tooltip-content[is-visible=\"\"],.gov-tooltip-content[is-visible=true i],.gov-tooltip-content[is-visible=\"1\"]{display:block;opacity:1}.gov-tooltip-content[variant=secondary]{--gov-tooltip-content-bg-color:var(--gov-tooltip-secondary-bg-color, var(--gov-color-secondary));--gov-tooltip-content-text-color:var(--gov-tooltip-secondary-text-color, var(--gov-color-neutral-white))}.gov-tooltip-content[variant=secondary][inverse=\"\"],.gov-tooltip-content[variant=secondary][inverse=true i],.gov-tooltip-content[variant=secondary][inverse=\"1\"]{--gov-tooltip-content-bg-color:var(--gov-color-neutral-white);--gov-tooltip-content-text-color:var(--gov-tooltip-secondary-text-color-inverse, var(--gov-color-secondary))}.gov-tooltip-content[variant=primary]{--gov-tooltip-content-bg-color:var(--gov-tooltip-primary-bg-color, var(--gov-color-primary-300));--gov-tooltip-content-text-color:var(--gov-tooltip-primary-text-color, var(--gov-color-secondary))}.gov-tooltip-content[variant=primary][inverse=\"\"],.gov-tooltip-content[variant=primary][inverse=true i],.gov-tooltip-content[variant=primary][inverse=\"1\"]{--gov-tooltip-content-bg-color:var(--gov-color-neutral-white);--gov-tooltip-content-text-color:var(--gov-tooltip-primary-text-color-inverse, var(--gov-color-primary))}.gov-tooltip-content[size=s]{--gov-tooltip-content-padding:var(--gov-tooltip-s-padding, 0.5rem);--gov-tooltip-content-arrow-size:var(--gov-tooltip-s-arrow-size, 0.4375rem);--gov-tooltip-content-letter-spacing:var(--gov-tooltip-s-letter-spacing, 0.0125rem);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)}.gov-tooltip-content[size=s][persist=true i]{padding-right:var(--gov-tooltip-s-persist-space, 3rem)}.gov-tooltip-content[size=l]{--gov-tooltip-content-padding:var(--gov-tooltip-l-padding, 1rem);--gov-tooltip-content-arrow-size:var(--gov-tooltip-l-arrow-size, 0.875rem);--gov-tooltip-content-letter-spacing:var(--gov-tooltip-l-letter-spacing, 0.002rem);font-weight:var(--gov-text-xl-font-weight);font-size:var(--gov-text-xl-font-size);line-height:var(--gov-text-xl-line-height);letter-spacing:var(--gov-text-xl-letter-spacing)}.gov-tooltip-content[size=l][persist=true i]{padding-right:var(--gov-tooltip-s-persist-space, 4rem)}.gov-tooltip-content[position=top]::before{left:50%;transform:translateX(-50%)}.gov-tooltip-content[position=top]::before{top:100%;border-bottom-width:0;border-top-color:var(--gov-tooltip-content-bg-color, var(--gov-color-primary-300))}.gov-tooltip-content[position=bottom]::before{left:50%;transform:translateX(-50%)}.gov-tooltip-content[position=bottom]::before{bottom:100%;border-top-width:0;border-bottom-color:var(--gov-tooltip-content-bg-color, var(--gov-color-primary-300))}.gov-tooltip-content[position=left]::before{top:50%;transform:translateY(-50%)}.gov-tooltip-content[position=left]::before{left:100%;border-right-width:0;border-left-color:var(--gov-tooltip-content-bg-color, var(--gov-color-primary-300))}.gov-tooltip-content[position=right]::before{top:50%;transform:translateY(-50%)}.gov-tooltip-content[position=right]::before{right:100%;border-left-width:0;border-right-color:var(--gov-tooltip-content-bg-color, var(--gov-color-primary-300))}";
+const GovTooltipContentStyle0 = govTooltipContentCss;
 
 const GovTooltipContent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.variant = TooltipVariant.PRIMARY;
-    this.size = TooltipSize._M;
-    this.persist = false;
-    this.isVisible = false;
-    this.parentId = null;
-  }
-  visibleContent(newValue) {
-    clearTimeout(this.timeout);
-    if (newValue === false) {
-      this.timeout = setTimeout(() => {
-        this.host.style.visibility = "hidden";
-      }, 250);
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.variant = TooltipVariant.PRIMARY;
+        this.size = TooltipSize._M;
+        this.persist = false;
+        this.isVisible = false;
+        this.parentId = null;
     }
-    else {
-      this.host.style.visibility = "visible";
+    visibleContent(newValue) {
+        clearTimeout(this.timeout);
+        if (newValue === false) {
+            this.timeout = setTimeout(() => {
+                this.host.style.visibility = "hidden";
+            }, 250);
+        }
+        else {
+            this.host.style.visibility = "visible";
+        }
     }
-  }
-  hideContent() {
-    this.isVisible = false;
-    this.persist = false;
-    const parentEl = document.getElementById(this.parentId);
-    if (parentEl) {
-      parentEl.hide().catch();
+    hideContent() {
+        this.isVisible = false;
+        this.persist = false;
+        const parentEl = document.getElementById(this.parentId);
+        if (parentEl) {
+            parentEl.hide().catch();
+        }
     }
-  }
-  render() {
-    return (h(Host, { class: TooltipContentClass.root, role: "tooltip", hidden: !this.isVisible, "aria-hidden": !toBoolAttr(this.isVisible), "is-visible": this.isVisible }, h("slot", null), this.persist ? (h("gov-button", { "on-gov-click": this.hideContent.bind(this), variant: this.variant, size: this.size, type: "base", inverse: this.variant === TooltipVariant.SECONDARY }, h("gov-icon", { slot: "left-icon", name: "x-lg", type: "basic" }))) : null));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "isVisible": ["visibleContent"]
-  }; }
+    render() {
+        return (h(Host, { key: 'd4fedddcace4cc8c33c683482820f706f7424754', class: TooltipContentClass.root, role: "tooltip", hidden: !this.isVisible, "aria-hidden": !toBoolAttr(this.isVisible), "is-visible": this.isVisible }, h("slot", { key: '687cf17bda8c74143bfcedf314ca95fc7cb52c6c' }), this.persist ? (h("gov-button", { "on-gov-click": this.hideContent.bind(this), variant: this.variant, size: this.size, type: "base", inverse: this.variant === TooltipVariant.SECONDARY }, h("gov-icon", { slot: "left-icon", name: "x-lg", type: "basic" }))) : null));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "isVisible": ["visibleContent"]
+    }; }
 };
-GovTooltipContent.style = govTooltipContentCss;
+GovTooltipContent.style = GovTooltipContentStyle0;
 
 export { GovTooltipContent as gov_tooltip_content };
 

package/dist/esm/gov-tooltip-content.entry.js.map

@@ -1 +1 @@
-{"file":"gov-tooltip-content.entry.js","mappings":";;;;;;;AAAA,MAAM,oBAAoB,GAAG,+8IAA+8I;;MCQ/9I,iBAAiB;;;mBAOmB,cAAc,CAAC,OAAO;gBAI5B,WAAW,CAAC,EAAE;mBAI5B,KAAK;qBAI6B,KAAK;oBAId,IAAI;;EAGzD,cAAc,CAAC,QAAiB;IAC/B,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAC1B,IAAI,QAAQ,KAAK,KAAK,EAAE;MACvB,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;QACzB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAA;OACrC,EAAE,GAAG,CAAC,CAAA;KACP;SAAM;MACN,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAA;KACtC;GACD;EAED,WAAW;IACV,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;IACtB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;IACpB,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAA0B,CAAA;IAChF,IAAI,QAAQ,EAAE;MACb,QAAQ,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAA;KACvB;GACD;EAED,MAAM;IACL,QACC,EAAC,IAAI,IACJ,KAAK,EAAE,mBAAmB,CAAC,IAAI,EAC/B,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,CAAC,IAAI,CAAC,SAAS,iBACV,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,gBAC5B,IAAI,CAAC,SAAS,IAC1B,eAAa,EACZ,IAAI,CAAC,OAAO,IACZ,kCACe,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,cAAc,CAAC,SAAS,IAClD,gBAAU,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAa,CACzD,IACV,IAAI,CACF,EACP;GACD;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-tooltip/gov-tooltip-content.scss?tag=gov-tooltip-content","../../../packages/core/src/components/gov-tooltip/gov-tooltip-content.tsx"],"sourcesContent":["/*\n *   Tooltip - Content\n */\n\n$class: \".gov-tooltip-content\";\n\n#{$class} {\n\t@include z-index(\"bar\", 1);\n\t@include typography($font-size-m);\n\tposition: absolute;\n\tdisplay: none;\n\twidth: max-content;\n\n\tmax-width: $tooltip-content-max-width;\n\tpadding: rem-calc(16);\n\tborder-radius: rem-calc(3);\n\tbackground-color: $tooltip-content-bg-color;\n\tcolor: $tooltip-content-text-color;\n\tletter-spacing: rem-calc(0.2);\n\tvisibility: hidden;\n\topacity: 0;\n\ttransition: opacity 0.2s ease-in;\n\n\t&::before {\n\t\t@include pseudo();\n\t\twidth: 0;\n\t\theight: 0;\n\t\tborder: rem-calc(10) solid transparent;\n\t}\n\n\t& gov-button {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t}\n\n\t@include parameter(\"persist\") {\n\t\tpadding-right: rem-calc(52);\n\t}\n\n\t// STATES\n\t@include parameter(\"is-visible\") {\n\t\tdisplay: block;\n\t\topacity: 1;\n\t}\n\n\t// VARIANTS\n\t@each $variant, $definitions in $tooltip-content-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\t--#{$prefix}tooltip-content-bg-color: #{get(\"bg-color\", $definitions)};\n\t\t\t--#{$prefix}tooltip-content-text-color: #{get(\"text-color\", $definitions)};\n\n\t\t\t// STATES\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\t--#{$prefix}tooltip-content-bg-color: #{color(\"neutral.white\")};\n\t\t\t\t--#{$prefix}tooltip-content-text-color: #{get(\"text-color-inverse\", $definitions)};\n\t\t\t}\n\t\t}\n\t}\n\t@each $size, $definitions in $tooltip-content-sizes {\n\t\t&[size=\"#{$size}\"] {\n\t\t\t--#{$prefix}tooltip-content-padding: #{get(\"padding\", $definitions)};\n\t\t\t--#{$prefix}tooltip-content-arrow-size: #{get(\"arrow-size\", $definitions)};\n\t\t\t--#{$prefix}tooltip-content-letter-spacing: #{get(\"letter-spacing\", $definitions)};\n\t\t\t@include typography(get(\"typography\", $definitions));\n\n\t\t\t&[persist=\"true\" i] {\n\t\t\t\tpadding-right: #{get(\"persist-space\", $definitions)};\n\t\t\t}\n\t\t}\n\t}\n\t@each $position, $definitions in $tooltip-content-positions {\n\t\t$oppositeProperty: get(\"oppositeProperty\", $definitions);\n\n\t\t&[position=\"#{$position}\"] {\n\t\t\t&::before {\n\t\t\t\t#{get(\"directionProperty\", $definitions)}: 50%;\n\t\t\t\ttransform: #{get(\"transformFn\", $definitions) }(-50%);\n\t\t\t}\n\n\t\t\t&::before {\n\t\t\t\t#{$position}: 100%;\n\t\t\t\tborder-#{$oppositeProperty}-width: 0;\n\t\t\t\tborder-#{$position}-color: $tooltip-content-bg-color;\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\"\nimport { TooltipContentClass, TooltipSize, TooltipSizeType, TooltipVariant, TooltipVariantType } from \"./constants\"\nimport { toBoolAttr } from \"../../helpers/Dom/template\"\n\n@Component({\n\ttag: \"gov-tooltip-content\",\n\tstyleUrl: \"gov-tooltip-content.scss\",\n})\nexport class GovTooltipContent {\n\tprivate timeout\n\n\t@Element() host: HTMLGovTooltipContentElement\n\t/**\n\t * Style variation of the tooltip\n\t */\n\t@Prop() readonly variant?: TooltipVariantType = TooltipVariant.PRIMARY\n\t/**\n\t * Tooltip’s size.\n\t */\n\t@Prop() readonly size?: TooltipSizeType = TooltipSize._M\n\t/**\n\t * Tooltip is still visible.\n\t */\n\t@Prop() persist?: boolean = false\n\t/**\n\t * Indicates display of tooltip content\n\t */\n\t@Prop({ attribute: \"is-visible\", mutable: true }) isVisible = false\n\t/**\n\t * Indicates display of tooltip content\n\t */\n\t@Prop({ attribute: \"parent-id\" }) parentId: string = null\n\n\t@Watch(\"isVisible\")\n\tvisibleContent(newValue: boolean): void {\n\t\tclearTimeout(this.timeout)\n\t\tif (newValue === false) {\n\t\t\tthis.timeout = setTimeout(() => {\n\t\t\t\tthis.host.style.visibility = \"hidden\"\n\t\t\t}, 250)\n\t\t} else {\n\t\t\tthis.host.style.visibility = \"visible\"\n\t\t}\n\t}\n\n\thideContent() {\n\t\tthis.isVisible = false\n\t\tthis.persist = false\n\t\tconst parentEl = document.getElementById(this.parentId) as HTMLGovTooltipElement\n\t\tif (parentEl) {\n\t\t\tparentEl.hide().catch()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={TooltipContentClass.root}\n\t\t\t\trole={\"tooltip\"}\n\t\t\t\thidden={!this.isVisible}\n\t\t\t\taria-hidden={!toBoolAttr(this.isVisible)}\n\t\t\t\tis-visible={this.isVisible}>\n\t\t\t\t<slot></slot>\n\t\t\t\t{this.persist ? (\n\t\t\t\t\t<gov-button\n\t\t\t\t\t\ton-gov-click={this.hideContent.bind(this)}\n\t\t\t\t\t\tvariant={this.variant}\n\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\ttype={\"base\"}\n\t\t\t\t\t\tinverse={this.variant === TooltipVariant.SECONDARY}>\n\t\t\t\t\t\t<gov-icon slot={\"left-icon\"} name={\"x-lg\"} type={\"basic\"}></gov-icon>\n\t\t\t\t\t</gov-button>\n\t\t\t\t) : null}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"gov-tooltip-content.entry.js","mappings":";;;;;;;AAAA,MAAM,oBAAoB,GAAG,+8IAA+8I,CAAC;AAC7+I,gCAAe,oBAAoB;;MCOtB,iBAAiB;;;uBAOmB,cAAc,CAAC,OAAO;oBAI5B,WAAW,CAAC,EAAE;uBAI5B,KAAK;yBAI6B,KAAK;wBAId,IAAI;;IAGzD,cAAc,CAAC,QAAiB;QAC/B,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QAC1B,IAAI,QAAQ,KAAK,KAAK,EAAE;YACvB,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;gBACzB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAA;aACrC,EAAE,GAAG,CAAC,CAAA;SACP;aAAM;YACN,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAA;SACtC;KACD;IAED,WAAW;QACV,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;QACtB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;QACpB,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAA0B,CAAA;QAChF,IAAI,QAAQ,EAAE;YACb,QAAQ,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAA;SACvB;KACD;IAED,MAAM;QACL,QACC,EAAC,IAAI,qDACJ,KAAK,EAAE,mBAAmB,CAAC,IAAI,EAC/B,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,CAAC,IAAI,CAAC,SAAS,iBACV,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,gBAC5B,IAAI,CAAC,SAAS,IAC1B,8DAAa,EACZ,IAAI,CAAC,OAAO,IACZ,kCACe,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,cAAc,CAAC,SAAS,IAClD,gBAAU,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAa,CACzD,IACV,IAAI,CACF,EACP;KACD;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-tooltip/gov-tooltip-content.scss?tag=gov-tooltip-content","../../../packages/core/src/components/gov-tooltip/gov-tooltip-content.tsx"],"sourcesContent":["/*\n *   Tooltip - Content\n */\n\n$class: \".gov-tooltip-content\";\n\n#{$class} {\n\t@include z-index(\"bar\", 1);\n\t@include typography($font-size-m);\n\tposition: absolute;\n\tdisplay: none;\n\twidth: max-content;\n\n\tmax-width: $tooltip-content-max-width;\n\tpadding: rem-calc(16);\n\tborder-radius: rem-calc(3);\n\tbackground-color: $tooltip-content-bg-color;\n\tcolor: $tooltip-content-text-color;\n\tletter-spacing: rem-calc(0.2);\n\tvisibility: hidden;\n\topacity: 0;\n\ttransition: opacity 0.2s ease-in;\n\n\t&::before {\n\t\t@include pseudo();\n\t\twidth: 0;\n\t\theight: 0;\n\t\tborder: rem-calc(10) solid transparent;\n\t}\n\n\t& gov-button {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t}\n\n\t@include parameter(\"persist\") {\n\t\tpadding-right: rem-calc(52);\n\t}\n\n\t// STATES\n\t@include parameter(\"is-visible\") {\n\t\tdisplay: block;\n\t\topacity: 1;\n\t}\n\n\t// VARIANTS\n\t@each $variant, $definitions in $tooltip-content-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\t--#{$prefix}tooltip-content-bg-color: #{get(\"bg-color\", $definitions)};\n\t\t\t--#{$prefix}tooltip-content-text-color: #{get(\"text-color\", $definitions)};\n\n\t\t\t// STATES\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\t--#{$prefix}tooltip-content-bg-color: #{color(\"neutral.white\")};\n\t\t\t\t--#{$prefix}tooltip-content-text-color: #{get(\"text-color-inverse\", $definitions)};\n\t\t\t}\n\t\t}\n\t}\n\t@each $size, $definitions in $tooltip-content-sizes {\n\t\t&[size=\"#{$size}\"] {\n\t\t\t--#{$prefix}tooltip-content-padding: #{get(\"padding\", $definitions)};\n\t\t\t--#{$prefix}tooltip-content-arrow-size: #{get(\"arrow-size\", $definitions)};\n\t\t\t--#{$prefix}tooltip-content-letter-spacing: #{get(\"letter-spacing\", $definitions)};\n\t\t\t@include typography(get(\"typography\", $definitions));\n\n\t\t\t&[persist=\"true\" i] {\n\t\t\t\tpadding-right: #{get(\"persist-space\", $definitions)};\n\t\t\t}\n\t\t}\n\t}\n\t@each $position, $definitions in $tooltip-content-positions {\n\t\t$oppositeProperty: get(\"oppositeProperty\", $definitions);\n\n\t\t&[position=\"#{$position}\"] {\n\t\t\t&::before {\n\t\t\t\t#{get(\"directionProperty\", $definitions)}: 50%;\n\t\t\t\ttransform: #{get(\"transformFn\", $definitions) }(-50%);\n\t\t\t}\n\n\t\t\t&::before {\n\t\t\t\t#{$position}: 100%;\n\t\t\t\tborder-#{$oppositeProperty}-width: 0;\n\t\t\t\tborder-#{$position}-color: $tooltip-content-bg-color;\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\"\nimport { TooltipContentClass, TooltipSize, TooltipSizeType, TooltipVariant, TooltipVariantType } from \"./constants\"\nimport { toBoolAttr } from \"../../helpers/Dom/template\"\n\n@Component({\n\ttag: \"gov-tooltip-content\",\n\tstyleUrl: \"gov-tooltip-content.scss\",\n})\nexport class GovTooltipContent {\n\tprivate timeout\n\n\t@Element() host: HTMLGovTooltipContentElement\n\t/**\n\t * Style variation of the tooltip\n\t */\n\t@Prop() readonly variant?: TooltipVariantType = TooltipVariant.PRIMARY\n\t/**\n\t * Tooltip’s size.\n\t */\n\t@Prop() readonly size?: TooltipSizeType = TooltipSize._M\n\t/**\n\t * Tooltip is still visible.\n\t */\n\t@Prop() persist?: boolean = false\n\t/**\n\t * Indicates display of tooltip content\n\t */\n\t@Prop({ attribute: \"is-visible\", mutable: true }) isVisible = false\n\t/**\n\t * Indicates display of tooltip content\n\t */\n\t@Prop({ attribute: \"parent-id\" }) parentId: string = null\n\n\t@Watch(\"isVisible\")\n\tvisibleContent(newValue: boolean): void {\n\t\tclearTimeout(this.timeout)\n\t\tif (newValue === false) {\n\t\t\tthis.timeout = setTimeout(() => {\n\t\t\t\tthis.host.style.visibility = \"hidden\"\n\t\t\t}, 250)\n\t\t} else {\n\t\t\tthis.host.style.visibility = \"visible\"\n\t\t}\n\t}\n\n\thideContent() {\n\t\tthis.isVisible = false\n\t\tthis.persist = false\n\t\tconst parentEl = document.getElementById(this.parentId) as HTMLGovTooltipElement\n\t\tif (parentEl) {\n\t\t\tparentEl.hide().catch()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={TooltipContentClass.root}\n\t\t\t\trole={\"tooltip\"}\n\t\t\t\thidden={!this.isVisible}\n\t\t\t\taria-hidden={!toBoolAttr(this.isVisible)}\n\t\t\t\tis-visible={this.isVisible}>\n\t\t\t\t<slot></slot>\n\t\t\t\t{this.persist ? (\n\t\t\t\t\t<gov-button\n\t\t\t\t\t\ton-gov-click={this.hideContent.bind(this)}\n\t\t\t\t\t\tvariant={this.variant}\n\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\ttype={\"base\"}\n\t\t\t\t\t\tinverse={this.variant === TooltipVariant.SECONDARY}>\n\t\t\t\t\t\t<gov-icon slot={\"left-icon\"} name={\"x-lg\"} type={\"basic\"}></gov-icon>\n\t\t\t\t\t</gov-button>\n\t\t\t\t) : null}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}