@gov-design-system-ce/components 0.0.1

package/dist/cjs/gov-statsbar-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gov-statsbar-item.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,o1CAAo1C;;MCUl2C,eAAe;EAG3B;;wBAM2D,SAAS;IALnE,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAOD,oBAAoB,CAAC,QAAgB;IACpCC,kBAAY,CAACC,8BAAoB,EAAE,QAAQ,EAAEC,2BAAiB,CAAC,IAAI,CAAC,CAAA;GACpE;EAED,iBAAiB;IAChB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;GAC5C;EAED,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAEF,2BAAiB,CAAC,IAAI,IAClCC,yBACE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtBA,kBAAM,KAAK,EAAED,2BAAiB,CAAC,IAAI,IAClCC,kBAAM,IAAI,EAAC,MAAM,GAAG,CACd,CACP,EAEDA,eAAG,KAAK,EAAED,2BAAiB,CAAC,MAAM,IACjCC,qBAAQ,CACL,EAEH,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtBA,iBAAK,KAAK,EAAED,2BAAiB,CAAC,IAAI,IACjCC,kBAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN,CACQ,CACJ,EACP;GACD;;;;;;;;;;","names":["govHost","validateProp","StatsBarIconPosition","StatsBarItemClass","h","Host"],"sources":["../../../packages/core/src/components/gov-statsbar/gov-statsbar-item.scss?tag=gov-statsbar-item","../../../packages/core/src/components/gov-statsbar/gov-statsbar-item.tsx"],"sourcesContent":["/*\n *   Statsbar - Item\n */\n\n$class: \".gov-statsbar-item\";\n\n#{$class} {\n\tposition: relative;\n\tdisplay: block;\n\tpadding: rem-calc(20);\n\n\t&__icon,\n\t&__number {\n\t\tmargin-bottom: rem-calc(16);\n\t}\n\n\t&__icon {\n\t\tdisplay: block;\n\t\twidth: rem-calc(32);\n\t\theight: rem-calc(32);\n\t}\n\n\t&__number {\n\t\t@include typography($font-size-5xl);\n\t}\n\n\t&__text {\n\t\t@include typography($font-size-xl);\n\t\tletter-spacing: em-calc(0.2);\n\n\t\t> :last-child {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t}\n\n\t// Variants\n\t&[icon-position=\"left\"] {\n\t\tpadding-left: rem-calc(48);\n\n\t\t#{$class} {\n\t\t\t&__icon {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: rem-calc(24);\n\t\t\t\tleft: 0;\n\t\t\t}\n\t\t}\n\t}\n\n\t// Media queries\n\t@include mq($from: sm) {\n\t\tflex: 1 0 50%;\n\t\tmax-width: 50%;\n\t}\n\n\t@include mq($from: md) {\n\t\tpadding: rem-calc(40);\n\n\t\t&__icon {\n\t\t\twidth: rem-calc(48);\n\t\t\theight: rem-calc(48);\n\t\t}\n\n\t\t// Variants\n\t\t&[icon-position=\"left\"] {\n\t\t\tpadding-left: rem-calc(64);\n\n\t\t\t#{$class} {\n\t\t\t\t&__icon {\n\t\t\t\t\ttop: rem-calc(44);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@include mq($from: lg) {\n\t\tflex-basis: auto;\n\t\tmax-width: 25%;\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.d'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { StatsBarItemClass, StatsBarIconPosition, StatsBarIconPositionType } from './constants'\n\n@Component({\n\ttag: 'gov-statsbar-item',\n\tstyleUrl: 'gov-statsbar-item.scss',\n})\nexport class GovStatsbarItem {\n\th: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovStatsbarItemElement\n\n\t@Prop() readonly iconPosition?: StatsBarIconPositionType = undefined\n\n\t@Watch('iconPosition')\n\tvalidateIconPosition(newValue: string): void {\n\t\tvalidateProp(StatsBarIconPosition, newValue, StatsBarItemClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateIconPosition(this.iconPosition)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={StatsBarItemClass.root}>\n\t\t\t\t<article>\n\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t<span class={StatsBarItemClass.icon}>\n\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<p class={StatsBarItemClass.number}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</p>\n\n\t\t\t\t\t{this.h.hasSlot('text') && (\n\t\t\t\t\t\t<div class={StatsBarItemClass.text}>\n\t\t\t\t\t\t\t<slot name=\"text\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</article>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-statsbar.cjs.entry.js

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f0dd3088.js');
+const props = require('./props-bb89fb59.js');
+const constants = require('./constants-404ee283.js');
+const variants = require('./variants-04113a72.js');
+require('./gov.log-4527e960.js');
+
+const govStatsbarCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-statsbar{display:block;padding:1.25rem 0}.gov-statsbar__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)}@media (min-width: 48em){.gov-statsbar__section{padding-right:var(--gov-container-padding, 2.5rem);padding-left:var(--gov-container-padding, 2.5rem)}}.gov-statsbar[variant=primary]{background-color:var(--gov-statsbar-primary-bg-color, var(--gov-color-primary-200));color:var(--gov-statsbar-primary-text-color, var(--gov-color-primary))}.gov-statsbar[variant=primary][inverse=\"\"],.gov-statsbar[variant=primary][inverse=true i],.gov-statsbar[variant=primary][inverse=\"1\"]{background:var(--gov-color-secondary-100);color:var(--gov-statsbar-primary-text-color-inverse, var(--gov-color-primary))}.gov-statsbar[variant=secondary]{background-color:var(--gov-statsbar-secondary-bg-color, var(--gov-color-secondary));color:var(--gov-statsbar-secondary-text-color, var(--gov-color-secondary-100))}.gov-statsbar[variant=secondary][inverse=\"\"],.gov-statsbar[variant=secondary][inverse=true i],.gov-statsbar[variant=secondary][inverse=\"1\"]{background:var(--gov-color-secondary-100);color:var(--gov-statsbar-secondary-text-color-inverse, var(--gov-color-secondary))}@media (min-width: 30em){.gov-statsbar__section{display:flex;flex-wrap:wrap;justify-content:center}}@media (min-width: 48em){.gov-statsbar{padding:0}}";
+
+const GovStatsbar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.iconPosition = undefined;
+    this.variant = variants.Variants.PRIMARY;
+  }
+  validateIconPosition(newValue) {
+    props.validateProp(constants.StatsBarIconPosition, newValue, constants.StatsBarClass.root);
+  }
+  validateVariant(newValue) {
+    props.validateProp(constants.StatsBarVariant, newValue, constants.StatsBarClass.root);
+  }
+  componentWillLoad() {
+    this.validateIconPosition(this.iconPosition);
+    this.validateVariant(this.variant);
+  }
+  componentDidLoad() {
+    this.host.querySelectorAll(constants.StatsBarItemClass.root).forEach((node) => {
+      if (this.iconPosition === 'left') {
+        node.setAttribute('icon-position', 'left');
+      }
+    });
+  }
+  render() {
+    return (index.h(index.Host, { class: constants.StatsBarClass.root, variant: this.variant }, index.h("section", { class: constants.StatsBarClass.section }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "iconPosition": ["validateIconPosition"],
+    "variant": ["validateVariant"]
+  }; }
+};
+GovStatsbar.style = govStatsbarCss;
+
+exports.gov_statsbar = GovStatsbar;
+
+//# sourceMappingURL=gov-statsbar.cjs.entry.js.map

package/dist/cjs/gov-statsbar.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gov-statsbar.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,cAAc,GAAG,smDAAsmD;;MCShnD,WAAW;;;wBAGoC,SAAS;mBACKA,iBAAQ,CAAC,OAAO;;EAGzF,oBAAoB,CAAC,QAAgB;IACpCC,kBAAY,CAACC,8BAAoB,EAAE,QAAQ,EAAEC,uBAAa,CAAC,IAAI,CAAC,CAAA;GAChE;EAGD,eAAe,CAAC,QAAgB;IAC/BF,kBAAY,CAACG,yBAAe,EAAE,QAAQ,EAAED,uBAAa,CAAC,IAAI,CAAC,CAAA;GAC3D;EAED,iBAAiB;IAChB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IAC5C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAClC;EAED,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAACE,2BAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,IAAS;MACpE,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE;QACjC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;OAC1C;KACD,CAAC,CAAA;GACF;EAED,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAEJ,uBAAa,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACrDG,qBAAS,KAAK,EAAEH,uBAAa,CAAC,OAAO,IACpCG,qBAAQ,CACC,CACJ,EACP;GACD;;;;;;;;;;;","names":["Variants","validateProp","StatsBarIconPosition","StatsBarClass","StatsBarVariant","StatsBarItemClass","h","Host"],"sources":["../../../packages/core/src/components/gov-statsbar/gov-statsbar.scss?tag=gov-statsbar","../../../packages/core/src/components/gov-statsbar/gov-statsbar.tsx"],"sourcesContent":["/*\n *   Statsbar\n */\n\n$class: \".gov-statsbar\";\n\n#{$class} {\n\tdisplay: block;\n\tpadding: rem-calc(20) 0;\n\t&__section {\n\t\t@include container();\n\t}\n\n\t// VARIANTS\n\t// colors\n\t@each $variant, $definitions in $statsbar-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\tbackground-color: #{get(\"bg-color\", $definitions)};\n\t\t\tcolor: #{get(\"text-color\", $definitions)};\n\n\t\t\t// STATES\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\tbackground: color(\"secondary.100\");\n\t\t\t\tcolor: #{get(\"text-color-inverse\", $definitions)};\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t&__section {\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: wrap;\n\t\t\tjustify-content: center;\n\t\t}\n\t}\n\t@include mq($from: md) {\n\t\tpadding: 0;\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { StatsBarClass, StatsBarVariant, StatsBarVariantType, StatsBarItemClass, StatsBarIconPosition, StatsBarIconPositionType } from './constants'\nimport { Variants } from '../../core/constants/variants'\n\n@Component({\n\ttag: 'gov-statsbar',\n\tstyleUrl: 'gov-statsbar.scss',\n})\nexport class GovStatsbar {\n\t@Element() host: HTMLGovStatsbarElement\n\n\t@Prop() readonly iconPosition?: StatsBarIconPositionType = undefined\n\t@Prop({ attribute: 'variant' }) readonly variant?: StatsBarVariantType = Variants.PRIMARY\n\n\t@Watch('iconPosition')\n\tvalidateIconPosition(newValue: string): void {\n\t\tvalidateProp(StatsBarIconPosition, newValue, StatsBarClass.root)\n\t}\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(StatsBarVariant, newValue, StatsBarClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateIconPosition(this.iconPosition)\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(StatsBarItemClass.root).forEach((node: any) => {\n\t\t\tif (this.iconPosition === 'left') {\n\t\t\t\tnode.setAttribute('icon-position', 'left')\n\t\t\t}\n\t\t})\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={StatsBarClass.root} variant={this.variant}>\n\t\t\t\t<section class={StatsBarClass.section}>\n\t\t\t\t\t<slot />\n\t\t\t\t</section>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-stepper-item.cjs.entry.js

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f0dd3088.js');
+const gov_log = require('./gov.log-4527e960.js');
+const props = require('./props-bb89fb59.js');
+const constants = require('./constants-57e09cb3.js');
+const string_utils = require('./string.utils-f9b3501b.js');
+const template = require('./template-26608353.js');
+const variants = require('./variants-04113a72.js');
+require('./sizes-79872c2a.js');
+
+const govStepperItemCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-stepper-item{position:relative;display:block;width:100%}.gov-stepper-item__header{position:relative;width:100%}.gov-stepper-item__header>.gov-icon{flex:0 0 auto;width:0.75rem;height:0.75rem}.gov-stepper-item__title{margin:0;padding:0;font-family:\"Roboto\", sans-serif;font-weight:400;box-sizing:border-box;display:flex;gap:1rem;align-items:center}.gov-stepper-item__prefix{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);display:flex;flex:0 0 auto;justify-content:center;align-items:center;border-radius:50%;text-align:center}.gov-stepper-item__prefix i,.gov-stepper-item__prefix .gov-icon{width:1.125rem;height:1.125rem}.gov-stepper-item__content p:last-child{margin-bottom:0}.gov-stepper-item[variant=primary] .gov-stepper-item__header{color:var(--gov-wizzard-primary-color, var(--gov-color-primary-800))}.gov-stepper-item[variant=primary] .gov-stepper-item__prefix{background:var(--gov-wizzard-primary-indicator-bg, var(--gov-color-primary-300));color:var(--gov-wizzard-primary-indicator-color, var(--gov-color-primary-800))}.gov-stepper-item[variant=secondary] .gov-stepper-item__header{color:var(--gov-wizzard-secondary-color, var(--gov-color-secondary-700))}.gov-stepper-item[variant=secondary] .gov-stepper-item__prefix{background:var(--gov-wizzard-secondary-indicator-bg, var(--gov-color-secondary-400));color:var(--gov-wizzard-secondary-indicator-color, var(--gov-color-secondary-700))}.gov-stepper-item[variant=success] .gov-stepper-item__header{color:var(--gov-wizzard-success-color, var(--gov-color-success-500))}.gov-stepper-item[variant=success] .gov-stepper-item__prefix{background:var(--gov-wizzard-success-indicator-bg, var(--gov-color-success));color:var(--gov-wizzard-success-indicator-color, var(--gov-color-secondary-100))}.gov-stepper-item[variant=error] .gov-stepper-item__header{color:var(--gov-wizzard-error-color, var(--gov-color-error-500))}.gov-stepper-item[variant=error] .gov-stepper-item__prefix{background:var(--gov-wizzard-error-indicator-bg, var(--gov-color-error));color:var(--gov-wizzard-error-indicator-color, var(--gov-color-secondary-100))}.gov-stepper-item[variant=warning] .gov-stepper-item__header{color:var(--gov-wizzard-warning-color, var(--gov-color-warning-500))}.gov-stepper-item[variant=warning] .gov-stepper-item__prefix{background:var(--gov-wizzard-warning-indicator-bg, var(--gov-color-warning));color:var(--gov-wizzard-warning-indicator-color, var(--gov-color-secondary-100))}.gov-stepper-item::before{content:\"\";position:absolute;display:block;width:0.125rem}.gov-stepper-item:last-child::before{content:none}.gov-stepper-item[variant=primary]::before{background:var(--gov-wizzard-primary-indicator-bg, var(--gov-color-primary-300))}.gov-stepper-item[variant=secondary]::before{background:var(--gov-wizzard-secondary-indicator-bg, var(--gov-color-secondary-400))}.gov-stepper-item[variant=success]::before{background:var(--gov-wizzard-success-indicator-bg, var(--gov-color-success))}.gov-stepper-item[variant=error]::before{background:var(--gov-wizzard-error-indicator-bg, var(--gov-color-error))}.gov-stepper-item[variant=warning]::before{background:var(--gov-wizzard-warning-indicator-bg, var(--gov-color-warning))}.gov-stepper-item[size=s]{min-height:5rem}.gov-stepper-item[size=s]::before{top:3rem;bottom:1rem;left:0.9375rem}.gov-stepper-item[size=s]:last-child{min-height:0}.gov-stepper-item[size=s] .gov-stepper-item__title{font-weight:var(--gov-text-l-font-weight);font-size:var(--gov-text-l-font-size);line-height:var(--gov-text-l-line-height);letter-spacing:var(--gov-text-l-letter-spacing)}.gov-stepper-item[size=s] .gov-stepper-item__prefix{width:2rem;height:2rem}.gov-stepper-item[size=s] .gov-stepper-item__content{padding:1rem 1rem 2rem 3rem}.gov-stepper-item[size=m]{min-height:5.5rem}.gov-stepper-item[size=m]::before{top:3.5rem;bottom:1rem;left:1.1875rem}.gov-stepper-item[size=m]:last-child{min-height:0}.gov-stepper-item[size=m] .gov-stepper-item__title{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-stepper-item[size=m] .gov-stepper-item__prefix{width:2.5rem;height:2.5rem}.gov-stepper-item[size=m] .gov-stepper-item__content{padding:1rem 1rem 2rem 3.5rem}";
+
+const GovStepperItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.govChange = index.createEvent(this, "gov-change", 7);
+    this.isExpandedState = undefined;
+    this.variant = variants.Variants.PRIMARY;
+    this.identifier = undefined;
+    this.label = undefined;
+    this.triggerTag = "h3";
+    this.h = template.govHost(this.host);
+    this.triggerId = string_utils.createID("GovStepperItem");
+    this.contentId = string_utils.createID("GovStepperContent");
+  }
+  validateLabel(newValue) {
+    if (!newValue) {
+      gov_log.govErrorLog(`[${constants.StepperItemClass.root}]: Parameter label is required.`);
+    }
+  }
+  validateTriggerTag(newValue) {
+    const validTags = ["h1", "h2", "h3", "h4", "h5", "h6", "span"];
+    if (newValue) {
+      if (!validTags.includes(newValue)) {
+        gov_log.govErrorLog(`[${constants.StepperItemClass.root}]: Tag ${newValue} is not allowed.`);
+      }
+    }
+  }
+  validateVariant(newValue) {
+    props.validateProp(variants.Variants, newValue, constants.StepperItemClass.root);
+  }
+  componentWillLoad() {
+    this.validateLabel(this.label);
+    this.validateVariant(this.variant);
+    this.validateTriggerTag(this.triggerTag);
+  }
+  render() {
+    const triggerId = this.identifier || this.triggerId;
+    const contentId = this.contentId;
+    const { label } = this;
+    const TriggerTag = this.triggerTag;
+    return (index.h(index.Host, { class: constants.StepperItemClass.root, variant: this.variant }, index.h("div", { id: triggerId, class: constants.StepperItemClass.header, role: "listitem" }, index.h(TriggerTag, { class: constants.StepperItemClass.title }, this.h.hasSlot("prefix") &&
+      index.h("span", { class: constants.StepperItemClass.prefix }, index.h("slot", { name: "prefix" })), index.h("span", { class: constants.StepperItemClass.label }, label))), this.h.hasSlot('content') && (index.h("div", { class: constants.StepperItemClass.content, id: contentId, "aria-labelledby": triggerId, role: "tabpanel" }, index.h("slot", { name: "content" })))));
+  }
+  /**
+   * Returns the current state of the component
+   */
+  async currentState() {
+    return this.isExpandedState;
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "label": ["validateLabel"],
+    "triggerTag": ["validateTriggerTag"],
+    "variant": ["validateVariant"]
+  }; }
+};
+GovStepperItem.style = govStepperItemCss;
+
+exports.gov_stepper_item = GovStepperItem;
+
+//# sourceMappingURL=gov-stepper-item.cjs.entry.js.map

package/dist/cjs/gov-stepper-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gov-stepper-item.entry.cjs.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,s7IAAs7I;;MCen8I,cAAc;EAK1B;;;;mBAYwCA,iBAAQ,CAAC,OAAO;;;sBAYU,IAAI;IAvBrE,IAAI,CAAC,CAAC,GAAGC,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,CAAC,SAAS,GAAGC,qBAAQ,CAAC,gBAAgB,CAAC,CAAA;IAC3C,IAAI,CAAC,SAAS,GAAGA,qBAAQ,CAAC,mBAAmB,CAAC,CAAA;GAC9C;EA4BD,aAAa,CAAC,QAAgB;IAC7B,IAAI,CAAC,QAAQ,EAAE;MACdC,mBAAW,CAAC,IAAIC,0BAAgB,CAAC,IAAI,iCAAiC,CAAC,CAAA;KACvE;GACD;EAGD,kBAAkB,CAAC,QAAgB;IAClC,MAAM,SAAS,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAA;IAC9D,IAAI,QAAQ,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAClCD,mBAAW,CAAC,IAAIC,0BAAgB,CAAC,IAAI,UAAU,QAAQ,kBAAkB,CAAC,CAAA;OAC1E;KACD;GACD;EAGD,eAAe,CAAC,QAAgB;IAC/BC,kBAAY,CAACL,iBAAQ,EAAE,QAAQ,EAAEI,0BAAgB,CAAC,IAAI,CAAC,CAAA;GACvD;EAED,iBAAiB;IAChB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAClC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;GACxC;EAED,MAAM;IACL,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAA;IACnD,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAA;IAChC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IACtB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;IAElC,QAECE,QAACC,UAAI,IAAC,KAAK,EAAEH,0BAAgB,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACxDE,iBACC,EAAE,EAAE,SAAS,EACb,KAAK,EAAEF,0BAAgB,CAAC,MAAM,EAC9B,IAAI,EAAC,UAAU,IACfE,QAAC,UAAU,IAAC,KAAK,EAAEF,0BAAgB,CAAC,KAAK,IACvC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC;MACxBE,kBAAM,KAAK,EAAEF,0BAAgB,CAAC,MAAM,IACnCE,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,EAERA,kBAAM,KAAK,EAAEF,0BAAgB,CAAC,KAAK,IACjC,KAAK,CACA,CACK,CACR,EAEL,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,KACzBE,iBACC,KAAK,EAAEF,0BAAgB,CAAC,OAAO,EAC/B,EAAE,EAAE,SAAS,qBACI,SAAS,EAC1B,IAAI,EAAC,UAAU,IACfE,kBAAM,IAAI,EAAC,SAAS,GAAG,CAClB,CACN,CAEK,EACP;GACD;;;;EAMD,MAAM,YAAY;IACjB,OAAO,IAAI,CAAC,eAAe,CAAA;GAC3B;;;;;;;;;;;;","names":["Variants","govHost","createID","govErrorLog","StepperItemClass","validateProp","h","Host"],"sources":["../../../packages/core/src/components/gov-stepper/gov-stepper-item.scss?tag=gov-stepper-item","../../../packages/core/src/components/gov-stepper/gov-stepper-item.tsx"],"sourcesContent":["/*\n *   Stepper - Item\n */\n\n@import \"../gov-wizzard/gov-wizzard-item-core.scss\";\n$class: \".gov-stepper-item\";\n\n$connect-gap: rem-calc(16);\n\n#{$class} {\n\t@include wizzard-item-core;\n\t&::before {\n\t\t@include pseudo();\n\t\twidth: rem-calc(2);\n\t}\n\t&:last-child::before {\n\t\tcontent: none;\n\t}\n\n\t// VARIANTS\n\t// colors\n\t@each $variant, $definitions in $wizzard-core-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\t&::before {\n\t\t\t\tbackground: get(\"indicator-bg\", $definitions);\n\t\t\t}\n\t\t}\n\t}\n\t// sizes\n\t@each $size, $definitions in $stepper-sizes {\n\t\t&[size=\"#{$size}\"] {\n\t\t\tmin-height: calc(get(\"indicator-size\", $definitions) + 3 * $connect-gap);\n\t\t\t&::before {\n\t\t\t\ttop: calc(get(\"indicator-size\", $definitions) + $connect-gap);\n\t\t\t\tbottom: $connect-gap;\n\t\t\t\tleft: calc((get(\"indicator-size\", $definitions) - rem-calc(2)) / 2);\n\t\t\t}\n\t\t\t&:last-child {\n\t\t\t\tmin-height: 0;\n\t\t\t}\n\t\t\t#{$class} {\n\t\t\t\t&__title {\n\t\t\t\t\t@include typography(get(\"font\", $definitions));\n\t\t\t\t}\n\t\t\t\t&__prefix {\n\t\t\t\t\twidth: get(\"indicator-size\", $definitions);\n\t\t\t\t\theight: get(\"indicator-size\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__content {\n\t\t\t\t\tpadding: get(\"content-padding\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Prop, State, Watch, Host, Method, Event, EventEmitter } from \"@stencil/core\"\nimport { govErrorLog } from \"../../helpers/Log/gov.log\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { StepperItemClass, VariantType } from \"./constants\"\nimport { createID } from \"../../utils/string.utils\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovStepperItemChangeEvent } from \"./gov-stepper-item.d\"\nimport { Variants } from \"../../core/constants/variants\"\nimport { GovHost } from \"../../helpers/Dom/template.d\"\n\n\n@Component({\n\ttag: \"gov-stepper-item\",\n\tstyleUrl: \"gov-stepper-item.scss\",\n})\nexport class GovStepperItem {\n\tprivate h: GovHost\n\tprivate readonly triggerId: string\n\tprivate readonly contentId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.triggerId = createID(\"GovStepperItem\")\n\t\tthis.contentId = createID(\"GovStepperContent\")\n\t}\n\n\t@Element() readonly host: HTMLGovStepperItemElement\n\t@State() isExpandedState: boolean\n\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly variant: VariantType = Variants.PRIMARY\n\t/**\n\t * Custom stepper item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Item name of the stepper\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Used to change the HMTL tag in the stepper trigger for correct semantic structure\n\t */\n\t@Prop({ attribute: \"trigger-tag\" }) readonly triggerTag: string = \"h3\"\n\n\t/**\n\t * Called when the accordion state changes\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<GovStepperItemChangeEvent>\n\n\t@Watch(\"label\")\n\tvalidateLabel(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${StepperItemClass.root}]: Parameter label is required.`)\n\t\t}\n\t}\n\n\t@Watch(\"triggerTag\")\n\tvalidateTriggerTag(newValue: string): void {\n\t\tconst validTags = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\", \"span\"]\n\t\tif (newValue) {\n\t\t\tif (!validTags.includes(newValue)) {\n\t\t\t\tgovErrorLog(`[${StepperItemClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, StepperItemClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateLabel(this.label)\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateTriggerTag(this.triggerTag)\n\t}\n\n\trender() {\n\t\tconst triggerId = this.identifier || this.triggerId\n\t\tconst contentId = this.contentId\n\t\tconst { label } = this\n\t\tconst TriggerTag = this.triggerTag\n\n\t\treturn (\n\t\t\t\n\t\t\t<Host class={StepperItemClass.root} variant={this.variant}>\n\t\t\t\t<div\n\t\t\t\t\tid={triggerId}\n\t\t\t\t\tclass={StepperItemClass.header}\n\t\t\t\t\trole=\"listitem\">\n\t\t\t\t\t<TriggerTag class={StepperItemClass.title}>\n\t\t\t\t\t\t{this.h.hasSlot(\"prefix\") && \n\t\t\t\t\t\t\t<span class={StepperItemClass.prefix}>\n\t\t\t\t\t\t\t\t<slot name=\"prefix\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<span class={StepperItemClass.label}>\n\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</TriggerTag>\n\t\t\t\t</div>\n\n\t\t\t\t{this.h.hasSlot('content') && (\n\t\t\t\t\t<div \n\t\t\t\t\t\tclass={StepperItemClass.content} \n\t\t\t\t\t\tid={contentId} \n\t\t\t\t\t\taria-labelledby={triggerId} \n\t\t\t\t\t\trole=\"tabpanel\">\n\t\t\t\t\t\t<slot name=\"content\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync currentState(): Promise<boolean> {\n\t\treturn this.isExpandedState\n\t}\n\n}\n"],"version":3}

package/dist/cjs/gov-stepper.cjs.entry.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f0dd3088.js');
+const props = require('./props-bb89fb59.js');
+const constants = require('./constants-57e09cb3.js');
+const sizes = require('./sizes-79872c2a.js');
+require('./gov.log-4527e960.js');
+require('./variants-04113a72.js');
+
+const govStepperCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-stepper{position:relative;display:block;width:100%}";
+
+const GovStepper = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.govChange = index.createEvent(this, "gov-change", 7);
+    this.size = sizes.Sizes._M;
+  }
+  validateSize(newValue) {
+    props.validateProp(sizes.Sizes, newValue, constants.StepperClass.root);
+  }
+  componentWillLoad() {
+    this.validateSize(this.size);
+  }
+  componentDidLoad() {
+    this.host.querySelectorAll(constants.StepperItemClass.root).forEach((child) => {
+      child.setAttribute('size', this.size);
+      child.addEventListener('gov-change', (e) => {
+        e.stopPropagation();
+        this.govChange.emit(e.detail);
+      });
+    });
+  }
+  render() {
+    return (index.h(index.Host, { class: constants.StepperClass.root, role: "list", size: this.size }, index.h("slot", null)));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "size": ["validateSize"]
+  }; }
+};
+GovStepper.style = govStepperCss;
+
+exports.gov_stepper = GovStepper;
+
+//# sourceMappingURL=gov-stepper.cjs.entry.js.map

package/dist/cjs/gov-stepper.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gov-stepper.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,aAAa,GAAG,kMAAkM;;MCW3M,UAAU;;;;gBAMaA,WAAK,CAAC,EAAE;;EAO3C,YAAY,CAAC,QAAgB;IAC5BC,kBAAY,CAACD,WAAK,EAAE,QAAQ,EAAEE,sBAAY,CAAC,IAAI,CAAC,CAAA;GAChD;EAGD,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC5B;EAED,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAACC,0BAAgB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAgC;MAC1F,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;MACrC,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAuD;QAC5F,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;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAEH,sBAAY,CAAC,IAAI,EAAE,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAC1DE,qBAAQ,CACF,EACP;GACD;;;;;;;;;;","names":["Sizes","validateProp","StepperClass","StepperItemClass","h","Host"],"sources":["../../../packages/core/src/components/gov-stepper/gov-stepper.scss?tag=gov-stepper","../../../packages/core/src/components/gov-stepper/gov-stepper.tsx"],"sourcesContent":["/*\n *   Stepper\n */\n\n$class: \".gov-stepper\";\n\n#{$class} {\n\tposition: relative;\n\tdisplay: block;\n\twidth: 100%;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { StepperClass, StepperItemClass, SizesType } from './constants'\nimport { GovStepperItemCustomEvent } from '../../components'\nimport { GovStepperItemChangeEvent } from './gov-stepper-item.d'\nimport { Sizes } from '../../core/constants/sizes'\n\n@Component({\n\ttag: 'gov-stepper',\n\tstyleUrl: 'gov-stepper.scss',\n})\nexport class GovStepper {\n\t@Element() readonly host: HTMLGovStepperElement\n\n\t/**\n\t * Style variation of the button.\n\t */\n\t@Prop() readonly size: SizesType = Sizes._M\n\t/**\n\t * Called when the Stepper 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, StepperClass.root)\n\t}\n\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(StepperItemClass.root).forEach((child: HTMLGovStepperItemElement) => {\n\t\t\tchild.setAttribute('size', this.size)\n\t\t\tchild.addEventListener('gov-change', (e: GovStepperItemCustomEvent<GovStepperItemChangeEvent>) => {\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\trender() {\n\t\treturn (\n\t\t\t<Host class={StepperClass.root} role=\"list\" size={this.size}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-tabs-item.cjs.entry.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f0dd3088.js');
+const string_utils = require('./string.utils-f9b3501b.js');
+const template = require('./template-26608353.js');
+const constants = require('./constants-aba7a597.js');
+require('./sizes-79872c2a.js');
+require('./variants-04113a72.js');
+
+const govTabsItemCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-tabs-item{color:var(--gov-tabs-text-color, var(--gov-color-secondary-700))}.gov-tabs-item__inner>*:last-child{margin-bottom:0}";
+
+const GovTabsItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.identifier = undefined;
+    this.triggerIdentifier = undefined;
+    this.label = undefined;
+    this.default = false;
+    this.isActive = false;
+    this.contentId = string_utils.createID("GovTabContent");
+    this.triggeId = string_utils.createID("GovTabTrigger");
+  }
+  render() {
+    return (index.h(index.Host, { class: constants.TabsItemClass.root, default: this.default }, index.h("div", { class: constants.TabsItemClass.inner, role: "tabpanel", id: this.identifier || this.contentId, hidden: !this.isActive, "aria-labelledby": this.triggerIdentifier || this.triggeId, "aria-hidden": template.toBoolAttrIfDefined(!this.isActive) }, index.h("slot", null))));
+  }
+  /**
+   * Returns a unique tab content identifier
+   */
+  async getIdentifier() {
+    return this.identifier || this.contentId;
+  }
+  /**
+   * Returns a unique tab trigger identifier
+   */
+  async getTriggerIdentifier() {
+    return this.triggerIdentifier || this.triggeId;
+  }
+  /**
+   * Set status of tab-item
+   */
+  async setActiveStatus(status) {
+    this.isActive = status;
+  }
+  get host() { return index.getElement(this); }
+};
+GovTabsItem.style = govTabsItemCss;
+
+exports.gov_tabs_item = GovTabsItem;
+
+//# sourceMappingURL=gov-tabs-item.cjs.entry.js.map

package/dist/cjs/gov-tabs-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gov-tabs-item.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,cAAc,GAAG,6QAA6Q;;MCSvR,WAAW;EAMvB;;;;;mBAoBoC,KAAK;oBACZ,KAAK;IApBjC,IAAI,CAAC,SAAS,GAAGA,qBAAQ,CAAC,eAAe,CAAC,CAAA;IAC1C,IAAI,CAAC,QAAQ,GAAGA,qBAAQ,CAAC,eAAe,CAAC,CAAA;GACzC;EAoBD,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAEC,uBAAa,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACrDF,iBAAK,KAAK,EAAEE,uBAAa,CAAC,KAAK,EAAE,IAAI,EAAC,UAAU,EAC3C,EAAE,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,EACrC,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,qBACL,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,QAAQ,iBAC3CC,4BAAmB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IACpDH,qBAAa,CACR,CACA,EACP;GACD;;;;EAMD,MAAM,aAAa;IAClB,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAA;GACxC;;;;EAMD,MAAM,oBAAoB;IACzB,OAAO,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,QAAQ,CAAA;GAC9C;;;;EAMD,MAAM,eAAe,CAAC,MAAe;IACpC,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAA;GACtB;;;;;;;","names":["createID","h","Host","TabsItemClass","toBoolAttrIfDefined"],"sources":["../../../packages/core/src/components/gov-tabs/gov-tabs-item.scss?tag=gov-tabs-item","../../../packages/core/src/components/gov-tabs/gov-tabs-item.tsx"],"sourcesContent":["/*\n *   Tabs - Item\n */\n\n$class: \".gov-tabs-item\";\n\n#{$class} {\n\tcolor: $tabs-text-color;\n\t&__inner > *:last-child {\n\t\tmargin-bottom: 0;\n\t}\n}\n","import { Component, Element, h, Prop, Method, State, Host } from \"@stencil/core\"\nimport { createID } from \"../../utils/string.utils\"\nimport { toBoolAttrIfDefined } from \"../../helpers/Dom/template\"\nimport { TabsItemClass } from \"./constants\"\n\n@Component({\n\ttag: \"gov-tabs-item\",\n\tstyleUrl: \"gov-tabs-item.scss\",\n})\nexport class GovTabsItem {\n\t@Element() host: HTMLGovTabsItemElement\n\n\tprivate readonly contentId: string\n\tprivate readonly triggeId: string\n\n\tconstructor() {\n\t\tthis.contentId = createID(\"GovTabContent\")\n\t\tthis.triggeId = createID(\"GovTabTrigger\")\n\t}\n\n\t/**\n\t * Custom tab item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Custom tab trigger item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly triggerIdentifier: string\n\t/**\n\t * Item name of the tab\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Default selected tab\n\t */\n\t@Prop() readonly default: boolean = false\n\t@State() isActive: boolean = false\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={TabsItemClass.root} default={this.default}>\n\t\t\t\t<div class={TabsItemClass.inner} role=\"tabpanel\"\n\t\t\t\t     id={this.identifier || this.contentId}\n\t\t\t\t     hidden={!this.isActive}\n\t\t\t\t     aria-labelledby={this.triggerIdentifier || this.triggeId}\n\t\t\t\t     aria-hidden={toBoolAttrIfDefined(!this.isActive)}>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Returns a unique tab content identifier\n\t */\n\t@Method()\n\tasync getIdentifier(): Promise<string> {\n\t\treturn this.identifier || this.contentId\n\t}\n\n\t/**\n\t * Returns a unique tab trigger identifier\n\t */\n\t@Method()\n\tasync getTriggerIdentifier(): Promise<string> {\n\t\treturn this.triggerIdentifier || this.triggeId\n\t}\n\n\t/**\n\t * Set status of tab-item\n\t */\n\t@Method()\n\tasync setActiveStatus(status: boolean): Promise<void> {\n\t\tthis.isActive = status\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-tabs.cjs.entry.js

@@ -0,0 +1,188 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f0dd3088.js');
+const props = require('./props-bb89fb59.js');
+const constants = require('./constants-aba7a597.js');
+const template = require('./template-26608353.js');
+const win = require('./win-aa54b884.js');
+const utils = require('./utils-a51135ab.js');
+const string_utils = require('./string.utils-f9b3501b.js');
+const variants = require('./variants-04113a72.js');
+require('./gov.log-4527e960.js');
+require('./sizes-79872c2a.js');
+
+const govTabsCss = ".gov-tabs__list{margin:0;padding:0}.gov-tabs__list>.gov-tabs__item{margin:0;padding:0;background:none}.gov-tabs__list>.gov-tabs__item::before{display:none}.gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-tabs{display:block}.gov-tabs__list{display:flex;flex-wrap:wrap;margin:0rem 0rem 1.4375rem}.gov-tabs__list>.gov-tabs__item{display:flex;margin:0}.gov-tabs__btn{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);display:inline-flex;vertical-align:middle;justify-content:center;align-items:center;border:0;background-color:transparent;text-align:center;text-decoration:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0.75rem 0rem 0.625rem;border-bottom:0.125rem solid transparent;font-family:\"Roboto\", sans-serif;font-weight:700;text-align:center;text-transform:uppercase;transition:150ms linear color, 150ms linear border-color}.gov-tabs__btn:focus{outline:none}.gov-tabs__btn:focus{outline:none}.gov-tabs__btn:focus-visible{border-radius:var(--gov-border-radius, 0.1875rem);outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);outline-offset:0}.gov-tabs[type=text] .gov-tabs__list{gap:0.5rem 2rem;border-bottom:var(--gov-tabs-list-border-width, 0.0625rem solid var(--gov-color-secondary-500))}.gov-tabs[type=badge] .gov-tabs__list{gap:0.5rem 1rem}.gov-tabs[variant=primary][type=text] .gov-tabs__btn{color:var(--gov-tabs-primary-color, var(--gov-color-primary))}@media not all and (pointer: coarse){.gov-tabs[variant=primary][type=text] .gov-tabs__btn:hover{color:var(--gov-tabs-primary-color-hover, var(--gov-color-primary-800))}}.gov-tabs[variant=primary][type=text] .gov-tabs__btn[aria-selected=true]{border-bottom-color:cmake-var(tabs-primary-color-active, var(--gov-color-primary-800));color:cmake-var(tabs-primary-color-active, var(--gov-color-primary-800))}.gov-tabs[variant=secondary][type=text] .gov-tabs__btn{color:var(--gov-tabs-secondary-color, var(--gov-color-secondary-700))}@media not all and (pointer: coarse){.gov-tabs[variant=secondary][type=text] .gov-tabs__btn:hover{color:var(--gov-tabs-secondary-color-hover, var(--gov-color-secondary-900))}}.gov-tabs[variant=secondary][type=text] .gov-tabs__btn[aria-selected=true]{border-bottom-color:cmake-var(tabs-secondary-color-active, var(--gov-color-secondary-900));color:cmake-var(tabs-secondary-color-active, var(--gov-color-secondary-900))}.gov-tabs[variant=success][type=text] .gov-tabs__btn{color:var(--gov-tabs-success-color, var(--gov-color-success-500))}@media not all and (pointer: coarse){.gov-tabs[variant=success][type=text] .gov-tabs__btn:hover{color:var(--gov-tabs-success-color-hover, var(--gov-color-success-700))}}.gov-tabs[variant=success][type=text] .gov-tabs__btn[aria-selected=true]{border-bottom-color:cmake-var(tabs-success-color-active, var(--gov-color-success-700));color:cmake-var(tabs-success-color-active, var(--gov-color-success-700))}.gov-tabs[variant=warning][type=text] .gov-tabs__btn{color:var(--gov-tabs-warning-color, var(--gov-color-warning-500))}@media not all and (pointer: coarse){.gov-tabs[variant=warning][type=text] .gov-tabs__btn:hover{color:var(--gov-tabs-warning-color-hover, var(--gov-color-warning-700))}}.gov-tabs[variant=warning][type=text] .gov-tabs__btn[aria-selected=true]{border-bottom-color:cmake-var(tabs-warning-color-active, var(--gov-color-warning-700));color:cmake-var(tabs-warning-color-active, var(--gov-color-warning-700))}.gov-tabs[variant=error][type=text] .gov-tabs__btn{color:var(--gov-tabs-error-color, var(--gov-color-error-400))}@media not all and (pointer: coarse){.gov-tabs[variant=error][type=text] .gov-tabs__btn:hover{color:var(--gov-tabs-error-color-hover, var(--gov-color-error-600))}}.gov-tabs[variant=error][type=text] .gov-tabs__btn[aria-selected=true]{border-bottom-color:cmake-var(tabs-error-color-active, var(--gov-color-error-600));color:cmake-var(tabs-error-color-active, var(--gov-color-error-600))}";
+
+const GovTabs = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.govChange = index.createEvent(this, "gov-change", 7);
+    this.triggerRefs = {};
+    this.controller = [];
+    this.focusIndex = 0;
+    this.compactControls = false;
+    this.type = "text";
+    this.variant = variants.Variants.PRIMARY;
+    this.wcagLabel = undefined;
+    this.wcagSelectLabel = undefined;
+    this.wcagLabelledBy = undefined;
+    this.formSelectId = string_utils.createID("GovForSelect");
+  }
+  validateType(newValue) {
+    props.validateProp(constants.Types, newValue, constants.TabsClass.root);
+  }
+  validateVariant(newValue) {
+    props.validateProp(variants.Variants, newValue, constants.TabsClass.root);
+  }
+  componentWillLoad() {
+    this.prepareDataSource();
+  }
+  async componentDidRender() {
+    if (win.canValidateWcagOnRender()) {
+      await utils.delay(500);
+      await this.validateWcag();
+    }
+    this.resizeObserver();
+  }
+  prepareDataSource() {
+    this.controller = [];
+    const promises = [];
+    this.host.querySelectorAll(constants.TabsItemClass.root).forEach((tab) => {
+      const controlItem = Promise.all([tab.getIdentifier(), tab.getTriggerIdentifier()])
+        .then(([identifier, triggerIdentifier]) => {
+        const isDefault = typeof tab.getAttribute("default") === "string";
+        return {
+          label: tab.getAttribute("label"),
+          contentIdentifier: identifier,
+          triggerIdentifier: triggerIdentifier,
+          element: tab,
+          active: false,
+          default: isDefault,
+        };
+      });
+      promises.push(controlItem);
+    });
+    Promise.all(promises).then((controllers) => {
+      let defaultTab = controllers.findIndex((controller) => controller.default);
+      if (defaultTab === -1)
+        defaultTab = 0;
+      this.focusIndex = defaultTab;
+      controllers[defaultTab].active = true;
+      this.controller = [...controllers];
+      this.reRender();
+    });
+  }
+  setActiveByIdentifier(identifier) {
+    const temp = [];
+    this.controller.map((item) => {
+      item.active = identifier === item.triggerIdentifier || identifier === item.contentIdentifier;
+      temp.push(item);
+    });
+    this.controller = [...temp];
+  }
+  reRender() {
+    this.controller.map((control) => {
+      control.element.setActiveStatus(control.active);
+    });
+  }
+  /*
+  private evaluateControls() {
+    this.compactControls = false
+    let sumOfWidth = this.tabsRef.querySelector("ul").offsetWidth
+    this.compactControls = this.tabsRef.offsetWidth < sumOfWidth
+  }
+  */
+  resizeObserver() {
+    const resizeObserver = new ResizeObserver(utils.throttle(() => {
+      // this.evaluateControls()
+    }, 200));
+    resizeObserver.observe(this.tabsRef);
+  }
+  render() {
+    return (index.h(index.Host, { class: constants.TabsClass.root, variant: this.variant, type: this.type, role: "tablist", ref: el => this.tabsRef = el, "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy, onKeyDown: this.onKeydownHandler.bind(this) }, index.h("div", { class: constants.TabsClass.tabs, "aria-hidden": template.toBoolAttr(this.compactControls) }, index.h("ul", { class: constants.TabsClass.list }, this.controller.map((control, index$1) => index.h("li", { class: constants.TabsClass.item }, this.type == 'text' ? (index.h("button", { class: constants.TabsClass.btn, id: control.triggerIdentifier, role: "tab", onClick: () => this.onSelectHandler(control, index$1), "aria-selected": template.toBoolAttr(control.active), "aria-controls": control.contentIdentifier, tabindex: control.active ? -1 : 0, ref: el => this.triggerRefs[control.triggerIdentifier] = el }, control.label)) : (index.h("gov-badge", { variant: this.variant, type: template.toBoolAttr(control.active) == "true" ? 'solid' : 'outlined', nativeType: template.toBoolAttr(control.active) == "true" ? "span" : "button", "on-gov-click": () => this.onSelectHandler(control, index$1) }, control.label)))))), index.h("span", { id: this.formSelectId, hidden: true }, this.wcagSelectLabel), this.compactControls ? (index.h("gov-form-select", { "wcag-labelded-by": this.formSelectId, "onGov-change": this.onChangeHandler.bind(this) }, this.controller.map((control) => index.h("option", { value: control.triggerIdentifier, selected: control.active }, control.label)))) : null, index.h("slot", null)));
+  }
+  getCurrentTab() {
+    return this.controller.find((control) => control.active) || null;
+  }
+  onSelectHandler(control, index) {
+    this.focusIndex = index;
+    this.setActiveByIdentifier(control.triggerIdentifier);
+    this.reRender();
+    this.govChange.emit(this.getCurrentTab().element);
+  }
+  onChangeHandler(e) {
+    const triggerId = e.target.value;
+    e.stopPropagation();
+    this.setActiveByIdentifier(triggerId);
+    this.reRender();
+    this.govChange.emit(this.getCurrentTab().element);
+  }
+  onKeydownHandler(e) {
+    const keyCode = e.keyCode;
+    e.stopPropagation();
+    if (keyCode === 39 || keyCode === 37) {
+      if (false === (this.focusIndex >= 0 && this.focusIndex <= (this.controller.length - 1))) {
+        return;
+      }
+      this.controller[this.focusIndex].active = false;
+      if (keyCode === 39) {
+        this.focusIndex++;
+        if (this.focusIndex >= this.controller.length) {
+          this.focusIndex = 0;
+        }
+      }
+      else if (keyCode === 37) {
+        this.focusIndex--;
+        if (this.focusIndex < 0) {
+          this.focusIndex = this.controller.length - 1;
+        }
+      }
+      if ((this.focusIndex >= 0 && this.focusIndex <= (this.controller.length - 1))) {
+        const current = this.controller[this.focusIndex];
+        current.active = true;
+        this.triggerRefs[current.triggerIdentifier].focus();
+        this.controller = [...this.controller];
+        this.reRender();
+        this.govChange.emit(this.getCurrentTab().element);
+      }
+    }
+  }
+  /**
+   * Regenerate tabs controllers
+   */
+  async refresh() {
+    this.prepareDataSource();
+  }
+  /**
+   * Returns the currently selected tabs-item
+   */
+  async currentTab() {
+    return this.getCurrentTab().element || null;
+  }
+  /**
+   * Regenerate tabs controllers
+   */
+  async setActiveTab(identifier) {
+    this.setActiveByIdentifier(identifier);
+    this.reRender();
+  }
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  async validateWcag() {
+    win.validateWcagProp(this.wcagSelectLabel, "wcag-select-label", constants.TabsClass.root);
+    win.validateWcagLabel(this.wcagLabel, this.wcagLabelledBy, constants.TabsClass.root);
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "type": ["validateType"],
+    "variant": ["validateVariant"]
+  }; }
+};
+GovTabs.style = govTabsCss;
+
+exports.gov_tabs = GovTabs;
+
+//# sourceMappingURL=gov-tabs.cjs.entry.js.map

package/dist/cjs/gov-tabs.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gov-tabs.entry.cjs.js","mappings":"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","names":["Variants","createID","validateProp","Types","TabsClass","canValidateWcagOnRender","delay","TabsItemClass","throttle","h","Host","toBoolAttr","index","validateWcagProp","validateWcagLabel"],"sources":["../../../packages/core/src/components/gov-tabs/gov-tabs.scss?tag=gov-tabs","../../../packages/core/src/components/gov-tabs/gov-tabs.tsx"],"sourcesContent":["/*\n *   Tabs\n */\n\n$class: \".gov-tabs\";\n\n#{$class} {\n\tdisplay: block;\n\t&__list {\n\t\t@extend %reset-ul;\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tmargin: rem-calc(0 0 23);\n\t}\n\t&__list > &__item {\n\t\t@extend %reset-ul-li;\n\t\tdisplay: flex;\n\t\tmargin: 0;\n\t}\n\t&__btn {\n\t\t@include typography($font-size-s);\n\t\t@include button-core();\n\t\t@include focus-outline();\n\t\tmargin: 0;\n\t\tpadding: rem-calc(12 0 10);\n\t\tborder-bottom: rem-calc(2) solid transparent;\n\t\tfont-family: $font-family-primary;\n\t\tfont-weight: 700;\n\t\ttext-align: center;\n\t\ttext-transform: uppercase;\n\t\ttransition: $t linear color, $t linear border-color;\n\t}\n\n\t// VARIANTS\n\t// type\n\t@each $type, $definitions in $tabs-types {\n\t\t&[type=\"#{$type}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__list {\n\t\t\t\t\tgap: get(\"item-spacing\", $definitions);\n\t\t\t\t\t@if deep-map-check($definitions, \"border\") {\n\t\t\t\t\t\tborder-bottom: $tabs-list-border;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t// colors\n\t@each $variant, $definitions in $tabs-variants {\n\t\t&[variant=\"#{$variant}\"][type=\"text\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__btn {\n\t\t\t\t\tcolor: get(\"color\", $definitions);\n\t\t\t\t\t@include hover() {\n\t\t\t\t\t\tcolor: get(\"color-hover\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t// STATES\n\t\t\t\t&__btn[aria-selected=\"true\"] {\n\t\t\t\t\tborder-bottom-color: get(\"color-active\", $definitions);\n\t\t\t\t\tcolor: get(\"color-active\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, Host, h, State, Method, Event, EventEmitter, Prop, Watch } from \"@stencil/core\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { TabsItemClass, VariantType } from \"./constants\"\nimport { GovTabControllerItem } from \"./gov-tabs.d\"\nimport { toBoolAttr } from \"../../helpers/Dom/template\"\nimport { validateWcagLabel, validateWcagProp } from \"../../helpers/Validate/wcag\"\nimport { TabsClass, Type, Types } from \"./constants\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay, throttle } from \"../../utils/utils\"\nimport { createID } from \"../../utils/string.utils\"\nimport { Variants } from '../../core/constants/variants'\n\n@Component({\n\ttag: \"gov-tabs\",\n\tstyleUrl: \"gov-tabs.scss\",\n})\nexport class GovTabs {\n\tprivate triggerRefs: { [key: string]: HTMLButtonElement } = {}\n\tprivate tabsRef?: HTMLDivElement\n\n\tprivate readonly formSelectId: string\n\n\tconstructor() {\n\t\tthis.formSelectId = createID(\"GovForSelect\")\n\t}\n\n\t@Element() host: HTMLGovTabsElement\n\t@State() controller: GovTabControllerItem[] = []\n\t@State() focusIndex: number = 0\n\t@State() compactControls: boolean = false\n\t/**\n\t * Tabs type\n\t */\n\t@Prop() readonly type: Type = \"text\";\n\t/**\n\t * Style variation of the tab badges.\n\t */\n\t@Prop() readonly variant: VariantType = Variants.PRIMARY;\n\t/**\n\t * Adds accessible label for the tabs that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: \"wcag-label\" }) readonly wcagLabel: string\n\t/**\n\t * Adds accessible label for the tabs select\n\t */\n\t@Prop({ attribute: \"wcag-select-label\" }) readonly wcagSelectLabel: string\n\t/**\n\t * Indicates the id of a component that labels the tabs.\n\t */\n\t@Prop({ attribute: \"wcag-labelded-by\" }) readonly wcagLabelledBy: string\n\t/**\n\t * Emitted when the tab is changed.\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter\n\n\t@Watch(\"type\")\n\tvalidateType(newValue: string): void {\n\t\tvalidateProp(Types, newValue, TabsClass.root)\n\t}\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\tvalidateProp(Variants, newValue, TabsClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.prepareDataSource()\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\n\t\tthis.resizeObserver()\n\t}\n\n\tprivate prepareDataSource(): void {\n\t\tthis.controller = []\n\t\tconst promises: Promise<GovTabControllerItem>[] = []\n\t\tthis.host.querySelectorAll(TabsItemClass.root).forEach((tab: HTMLGovTabsItemElement) => {\n\t\t\tconst controlItem = Promise.all([tab.getIdentifier(), tab.getTriggerIdentifier()])\n\t\t\t\t.then(([identifier, triggerIdentifier]) => {\n\t\t\t\t\tconst isDefault = typeof tab.getAttribute(\"default\") === \"string\"\n\t\t\t\t\treturn {\n\t\t\t\t\t\tlabel: tab.getAttribute(\"label\"),\n\t\t\t\t\t\tcontentIdentifier: identifier,\n\t\t\t\t\t\ttriggerIdentifier: triggerIdentifier,\n\t\t\t\t\t\telement: tab,\n\t\t\t\t\t\tactive: false,\n\t\t\t\t\t\tdefault: isDefault,\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\tpromises.push(controlItem)\n\t\t})\n\t\tPromise.all(promises).then((controllers) => {\n\t\t\tlet defaultTab = controllers.findIndex((controller) => controller.default)\n\t\t\tif (defaultTab === -1) defaultTab = 0\n\t\t\tthis.focusIndex = defaultTab\n\t\t\tcontrollers[defaultTab].active = true\n\t\t\tthis.controller = [...controllers]\n\t\t\tthis.reRender()\n\t\t})\n\t}\n\n\tprivate setActiveByIdentifier(identifier: string) {\n\t\tconst temp = []\n\t\tthis.controller.map((item) => {\n\t\t\titem.active = identifier === item.triggerIdentifier || identifier === item.contentIdentifier\n\t\t\ttemp.push(item)\n\t\t})\n\t\tthis.controller = [...temp]\n\t}\n\n\tprivate reRender() {\n\t\tthis.controller.map((control) => {\n\t\t\tcontrol.element.setActiveStatus(control.active)\n\t\t})\n\t}\n\n\t/*\n\tprivate evaluateControls() {\n\t\tthis.compactControls = false\n\t\tlet sumOfWidth = this.tabsRef.querySelector(\"ul\").offsetWidth\n\t\tthis.compactControls = this.tabsRef.offsetWidth < sumOfWidth\n\t}\n\t*/\n\n\tprivate resizeObserver() {\n\t\tconst resizeObserver = new ResizeObserver(throttle(() => {\n\t\t\t// this.evaluateControls()\n\t\t}, 200))\n\n\t\tresizeObserver.observe(this.tabsRef)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={TabsClass.root}\n\t\t\t\tvariant={this.variant}\n\t\t\t\ttype={this.type}\n\t\t\t\trole=\"tablist\"\n\t\t\t\tref={el => this.tabsRef = el as HTMLDivElement}\n\t\t\t\taria-label={this.wcagLabel}\n\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\tonKeyDown={this.onKeydownHandler.bind(this)}>\n\n\t\t\t\t<div class={TabsClass.tabs} aria-hidden={toBoolAttr(this.compactControls)}>\n\t\t\t\t\t<ul class={TabsClass.list}>\n\t\t\t\t\t\t{this.controller.map((control, index) =>\n\t\t\t\t\t\t\t<li class={TabsClass.item}>\n\t\t\t\t\t\t\t\t{this.type == 'text' ? (\n\t\t\t\t\t\t\t\t\t<button class={TabsClass.btn}\n\t\t\t\t\t\t\t\t\t\t\tid={control.triggerIdentifier}\n\t\t\t\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => this.onSelectHandler(control, index)}\n\t\t\t\t\t\t\t\t\t\t\taria-selected={toBoolAttr(control.active)}\n\t\t\t\t\t\t\t\t\t\t\taria-controls={control.contentIdentifier}\n\t\t\t\t\t\t\t\t\t\t\ttabindex={control.active ? -1 : 0}\n\t\t\t\t\t\t\t\t\t\t\tref={el => this.triggerRefs[control.triggerIdentifier] = el as HTMLInputElement}>\n\t\t\t\t\t\t\t\t\t\t{control.label}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t): (\n\t\t\t\t\t\t\t\t\t<gov-badge variant={this.variant} type={toBoolAttr(control.active) == \"true\" ? 'solid' : 'outlined'} nativeType={toBoolAttr(control.active) == \"true\" ? \"span\" : \"button\"} on-gov-click={() => this.onSelectHandler(control, index)}>\n\t\t\t\t\t\t\t\t\t\t{control.label}\n\t\t\t\t\t\t\t\t\t</gov-badge>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\n\t\t\t\t<span id={this.formSelectId} hidden>{this.wcagSelectLabel}</span>\n\t\t\t\t{this.compactControls ? (\n\t\t\t\t\t<gov-form-select wcag-labelded-by={this.formSelectId} onGov-change={this.onChangeHandler.bind(this)}>\n\t\t\t\t\t\t{this.controller.map((control) =>\n\t\t\t\t\t\t\t<option value={control.triggerIdentifier} selected={control.active}>\n\t\t\t\t\t\t\t\t{control.label}\n\t\t\t\t\t\t\t</option>)}\n\t\t\t\t\t</gov-form-select>) : null}\n\n\t\t\t\t<slot></slot>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate getCurrentTab(): GovTabControllerItem | null {\n\t\treturn this.controller.find((control) => control.active) || null\n\t}\n\n\tprivate onSelectHandler(control: GovTabControllerItem, index: number) {\n\t\tthis.focusIndex = index\n\t\tthis.setActiveByIdentifier(control.triggerIdentifier)\n\t\tthis.reRender()\n\t\tthis.govChange.emit(this.getCurrentTab().element)\n\t}\n\n\tprivate onChangeHandler(e: CustomEvent) {\n\t\tconst triggerId = (e.target as HTMLSelectElement).value\n\t\te.stopPropagation()\n\t\tthis.setActiveByIdentifier(triggerId)\n\t\tthis.reRender()\n\t\tthis.govChange.emit(this.getCurrentTab().element)\n\t}\n\n\n\tprivate onKeydownHandler(e: KeyboardEvent) {\n\t\tconst keyCode = e.keyCode\n\t\te.stopPropagation()\n\t\tif (keyCode === 39 || keyCode === 37) {\n\t\t\tif (false === (this.focusIndex >= 0 && this.focusIndex <= (this.controller.length - 1))) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.controller[this.focusIndex].active = false\n\t\t\tif (keyCode === 39) {\n\t\t\t\tthis.focusIndex++\n\t\t\t\tif (this.focusIndex >= this.controller.length) {\n\t\t\t\t\tthis.focusIndex = 0\n\t\t\t\t}\n\t\t\t} else if (keyCode === 37) {\n\t\t\t\tthis.focusIndex--\n\t\t\t\tif (this.focusIndex < 0) {\n\t\t\t\t\tthis.focusIndex = this.controller.length - 1\n\t\t\t\t}\n\t\t\t}\n\t\t\tif ((this.focusIndex >= 0 && this.focusIndex <= (this.controller.length - 1))) {\n\t\t\t\tconst current = this.controller[this.focusIndex]\n\t\t\t\tcurrent.active = true\n\t\t\t\tthis.triggerRefs[current.triggerIdentifier].focus()\n\t\t\t\tthis.controller = [...this.controller]\n\t\t\t\tthis.reRender()\n\t\t\t\tthis.govChange.emit(this.getCurrentTab().element)\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Regenerate tabs controllers\n\t */\n\t@Method()\n\tasync refresh(): Promise<void> {\n\t\tthis.prepareDataSource()\n\t}\n\n\t/**\n\t * Returns the currently selected tabs-item\n\t */\n\t@Method()\n\tasync currentTab(): Promise<HTMLGovTabsItemElement | null> {\n\t\treturn this.getCurrentTab().element || null\n\t}\n\n\t/**\n\t * Regenerate tabs controllers\n\t */\n\t@Method()\n\tasync setActiveTab(identifier: string): Promise<void> {\n\t\tthis.setActiveByIdentifier(identifier)\n\t\tthis.reRender()\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\tvalidateWcagProp(this.wcagSelectLabel, \"wcag-select-label\", TabsClass.root)\n\t\tvalidateWcagLabel(this.wcagLabel, this.wcagLabelledBy, TabsClass.root)\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-tile.cjs.entry.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f0dd3088.js');
+const gov_log = require('./gov.log-4527e960.js');
+const template = require('./template-26608353.js');
+
+const TileClass = {
+  root: "gov-tile",
+  icon: "gov-tile__icon",
+  title: "gov-tile__title",
+  link: "gov-tile__link",
+  content: "gov-tile__content",
+};
+
+const govTileCss = ".gov-tile__link::before{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-tile{position:relative;display:block;width:100%;padding:0.75rem;transition:background-color 150ms}.gov-tile__icon{display:flex;margin:0rem 0rem 0.75rem;color:var(--gov-tile-icon-color, var(--gov-color-secondary))}.gov-tile__icon .gov-icon{width:2.5rem;height:2.5rem}.gov-tile__title{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);margin:0 0 0.5rem}.gov-tile__link{display:flex;gap:0.5rem;justify-content:space-between;color:var(--gov-tile-main-color, var(--gov-color-primary));text-decoration:none}.gov-tile__link .gov-icon{flex:0 0 auto;width:0.75rem;height:0.75rem;margin:0.5rem;color:inherit}.gov-tile__content{color:var(--gov-tile-text-color, var(--gov-color-secondary-700))}.gov-tile__content>*:last-child{margin-bottom:0}.gov-tile__content a{position:relative;z-index:1}@media not all and (pointer: coarse){.gov-tile[href]:hover{background:var(--gov-tile-hover-bg, var(--gov-color-primary-200))}.gov-tile[href]:hover .gov-tile__link{color:var(--gov-tile-main-color, var(--gov-color-primary))}}@media (min-width: 30em){.gov-tile[promotion=\"\"],.gov-tile[promotion=true i],.gov-tile[promotion=\"1\"]{display:grid;grid-template-columns:auto 1fr;gap:0 0.875rem}.gov-tile[promotion=\"\"] .gov-tile__icon,.gov-tile[promotion=true i] .gov-tile__icon,.gov-tile[promotion=\"1\"] .gov-tile__icon{grid-area:1/1/3/1;margin:0}.gov-tile[promotion=\"\"] .gov-tile__title,.gov-tile[promotion=true i] .gov-tile__title,.gov-tile[promotion=\"1\"] .gov-tile__title{grid-area:1/2/1/2}.gov-tile[promotion=\"\"] .gov-tile__content,.gov-tile[promotion=true i] .gov-tile__content,.gov-tile[promotion=\"1\"] .gov-tile__content{grid-area:2/2/2/2}}@media (min-width: 48em){.gov-tile{padding:1.5rem}.gov-tile__icon{margin:0rem 0rem 1.5rem}.gov-tile__icon .gov-icon{width:3rem;height:3rem}}@media (min-width: 64em){.gov-tile[promotion=\"\"],.gov-tile[promotion=true i],.gov-tile[promotion=\"1\"]{gap:0 1.625rem}}";
+
+const GovTile = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.promotion = false;
+    this.href = undefined;
+    this.name = undefined;
+    this.h = template.govHost(this.host);
+  }
+  validateName(newValue) {
+    if (!newValue) {
+      gov_log.govErrorLog(`[${TileClass.root}]: Parameter title is required.`);
+    }
+  }
+  componentWillLoad() {
+    this.validateName(this.name);
+  }
+  render() {
+    // tag type
+    return (index.h(index.Host, { class: TileClass.root, promotion: this.promotion }, this.h.hasSlot('icon') && (index.h("div", { class: TileClass.icon }, index.h("slot", { name: "icon" }))), index.h("h3", { class: TileClass.title }, this.href ? (index.h("a", { href: this.href, class: TileClass.link }, this.name, index.h("gov-icon", { name: "arrow-right" }))) : (index.h("span", null, this.name))), index.h("div", { class: TileClass.content }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "name": ["validateName"]
+  }; }
+};
+GovTile.style = govTileCss;
+
+exports.gov_tile = GovTile;
+
+//# sourceMappingURL=gov-tile.cjs.entry.js.map

package/dist/cjs/gov-tile.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gov-tile.entry.cjs.js","mappings":";;;;;;;;AAAO,MAAM,SAAS,GAAG;EACxB,IAAI,EAAE,UAAU;EAChB,IAAI,EAAE,gBAAgB;EACtB,KAAK,EAAE,iBAAiB;EACxB,IAAI,EAAE,gBAAgB;EACtB,OAAO,EAAE,mBAAmB;CAC5B;;ACND,MAAM,UAAU,GAAG,8sEAA8sE;;MCUptE,OAAO;EAGnB;;qBAOsC,KAAK;;;IAN1C,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAmBD,YAAY,CAAC,QAAgB;IAC5B,IAAI,CAAC,QAAQ,EAAE;MACdC,mBAAW,CAAC,IAAI,SAAS,CAAC,IAAI,iCAAiC,CAAC,CAAA;KAChE;GACD;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC5B;EAED,MAAM;;IAEL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAE,SAAS,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,IACpD,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtBD,iBAAK,KAAK,EAAE,SAAS,CAAC,IAAI,IACzBA,kBAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN,EACDA,gBAAI,KAAK,EAAE,SAAS,CAAC,KAAK,IACxB,IAAI,CAAC,IAAI,IACTA,eAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,IAAI,IACvC,IAAI,CAAC,IAAI,EACVA,sBAAU,IAAI,EAAC,aAAa,GAAY,CACrC,KAEJA,sBACE,IAAI,CAAC,IAAI,CACJ,CACP,CACG,EACLA,iBAAK,KAAK,EAAE,SAAS,CAAC,OAAO,IAC5BA,qBAAO,CACF,CACA,EACP;GACD;;;;;;;;;;","names":["govHost","govErrorLog","h","Host"],"sources":["../../../packages/core/src/components/gov-tile/constants.ts","../../../packages/core/src/components/gov-tile/gov-tile.scss?tag=gov-tile","../../../packages/core/src/components/gov-tile/gov-tile.tsx"],"sourcesContent":["export const TileClass = {\n\troot: \"gov-tile\",\n\ticon: \"gov-tile__icon\",\n\ttitle: \"gov-tile__title\",\n\tlink: \"gov-tile__link\",\n\tcontent: \"gov-tile__content\",\n}\n","/*\n *   Tile\n */\n\n$class: \".gov-tile\";\n\n#{$class} {\n\tposition: relative;\n\tdisplay: block;\n\twidth: 100%;\n\tpadding: rem-calc(12);\n\ttransition: background-color $t;\n\t&__icon {\n\t\tdisplay: flex;\n\t\tmargin: rem-calc(0 0 12);\n\t\tcolor: $tile-icon-color;\n\t\t.gov-icon {\n\t\t\twidth: rem-calc(40);\n\t\t\theight: rem-calc(40);\n\t\t}\n\t}\n\t&__title {\n\t\t@include typography($font-size-xl);\n\t\tmargin: 0 0 rem-calc(8);\n\t}\n\t&__link {\n\t\t@extend %link-mask;\n\t\tdisplay: flex;\n\t\tgap: rem-calc(8);\n\t\tjustify-content: space-between;\n\t\tcolor: $tile-main-color;\n\t\ttext-decoration: none;\n\t\t.gov-icon {\n\t\t\tflex: 0 0 auto;\n\t\t\twidth: rem-calc(12);\n\t\t\theight: rem-calc(12);\n\t\t\tmargin: rem-calc(8);\n\t\t\tcolor: inherit;\n\t\t}\n\t}\n\t&__content {\n\t\tcolor: $tile-text-color;\n\t\t& > *:last-child {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t\ta {\n\t\t\tposition: relative;\n\t\t\tz-index: 1;\n\t\t}\n\t}\n\n\t// HOVERS\n\t&[href] {\n\t\t@include hover() {\n\t\t\tbackground: $tile-hover-bg;\n\t\t\t#{$class} {\n\t\t\t\t&__link {\n\t\t\t\t\tcolor: $tile-main-color;\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// VARIANTS\n\t\t@include parameter(\"promotion\") {\n\t\t\tdisplay: grid;\n\t\t\tgrid-template-columns: auto 1fr;\n\t\t\tgap: 0 rem-calc(14);\n\t\t\t#{$class} {\n\t\t\t\t&__icon {\n\t\t\t\t\tgrid-area: 1/1/3/1;\n\t\t\t\t\tmargin: 0;\n\t\t\t\t}\n\t\t\t\t&__title {\n\t\t\t\t\tgrid-area: 1/2/1/2;\n\t\t\t\t}\n\t\t\t\t&__content {\n\t\t\t\t\tgrid-area: 2/2/2/2;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: md) {\n\t\tpadding: rem-calc(24);\n\t\t&__icon {\n\t\t\tmargin: rem-calc(0 0 24);\n\t\t\t.gov-icon {\n\t\t\t\twidth: rem-calc(48);\n\t\t\t\theight: rem-calc(48);\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: lg) {\n\t\t// VARIANTS\n\t\t@include parameter(\"promotion\") {\n\t\t\tgap: 0 rem-calc(26);\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { govErrorLog } from \"../../helpers/Log/gov.log\"\nimport { TileClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.d'\n\n@Component({\n\ttag: 'gov-tile',\n\tstyleUrl: 'gov-tile.scss',\n})\nexport class GovTile {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t/**\n\t * Style variation of the card.\n\t */\n\t@Prop() readonly promotion: boolean = false\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href\n\t */\n\t@Prop() readonly href: string\n\t/**\n\t * Item name\n\t */\n\t@Prop() readonly name: string\n\n\t@Element() host: HTMLGovTileElement\n\n\t@Watch(\"name\")\n\tvalidateName(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${TileClass.root}]: Parameter title is required.`)\n\t\t}\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateName(this.name)\n\t}\n\n\trender() {\n\t\t// tag type\n\t\treturn (\n\t\t\t<Host class={TileClass.root} promotion={this.promotion}>\n\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t<div class={TileClass.icon}>\n\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<h3 class={TileClass.title}>\n\t\t\t\t\t{this.href ? (\n\t\t\t\t\t\t<a href={this.href} class={TileClass.link}>\n\t\t\t\t\t\t\t{this.name}\n\t\t\t\t\t\t\t<gov-icon name=\"arrow-right\"></gov-icon>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{this.name}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</h3>\n\t\t\t\t<div class={TileClass.content}>\n\t\t\t\t\t<slot/>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}