@swisspost/design-system-components 1.3.10 → 1.5.0

package/dist/collection/components/post-alert/post-alert.js

@@ -0,0 +1,256 @@
+import { h, Host } from '@stencil/core';
+import { version } from '../../../package.json';
+import { fadeOut } from '../../animations';
+import { checkEmptyOrOneOf, checkEmptyOrPattern, checkNonEmpty, checkType } from '../../utils';
+import { ALERT_TYPES } from './alert-types';
+export class PostAlert {
+  constructor() {
+    this.alertId = crypto.randomUUID();
+    this.classes = undefined;
+    this.hasActions = undefined;
+    this.hasHeading = undefined;
+    this.onDismissButtonClick = () => this.dismiss();
+    this.dismissible = false;
+    this.dismissLabel = undefined;
+    this.fixed = false;
+    this.icon = undefined;
+    this.type = 'primary';
+  }
+  validateDismissible(isDismissible = this.dismissible) {
+    checkType(isDismissible, 'boolean', 'The post-alert "dismissible" prop should be a boolean.');
+    setTimeout(() => this.validateDismissLabel());
+  }
+  validateDismissLabel(dismissLabel = this.dismissLabel) {
+    if (this.dismissible) {
+      checkNonEmpty(dismissLabel, 'Dismissible post-alert\'s require a "dismiss-label" prop.');
+    }
+  }
+  validateFixed(isFixed = this.fixed) {
+    checkType(isFixed, 'boolean', 'The post-alert "fixed" prop should be a boolean.');
+  }
+  validateIcon(icon = this.icon) {
+    checkEmptyOrPattern(icon, /\d{4}|none/, 'The post-alert "icon" prop should be a 4-digits string.');
+  }
+  validateType(type = this.type) {
+    checkEmptyOrOneOf(type, ALERT_TYPES, `The post-alert requires a type form: ${ALERT_TYPES.join(', ')}`);
+  }
+  connectedCallback() {
+    this.validateDismissible();
+    this.validateFixed();
+    this.validateIcon();
+    this.validateType();
+  }
+  componentWillRender() {
+    var _a;
+    this.hasHeading = this.host.querySelectorAll('[slot=heading]').length > 0;
+    this.hasActions = this.host.querySelectorAll('[slot=actions]').length > 0;
+    this.classes = `alert alert-${(_a = this.type) !== null && _a !== void 0 ? _a : 'primary'}`;
+    if (this.dismissible)
+      this.classes += ' alert-dismissible';
+    if (this.hasActions)
+      this.classes += ' alert-action';
+    if (this.fixed)
+      this.classes += ' alert-fixed-bottom';
+    if (this.icon === 'none')
+      this.classes += ' no-icon';
+  }
+  /**
+   * Triggers alert dismissal programmatically (same as clicking on the close button (×)).
+   */
+  async dismiss() {
+    const dismissal = fadeOut(this.host);
+    await dismissal.finished;
+    this.host.remove();
+    this.dismissed.emit();
+  }
+  render() {
+    const defaultAlertContent = [
+      this.icon && this.icon !== 'none' && (h("post-icon", { key: `${this.alertId}-icon`, name: this.icon })),
+      this.hasHeading && (h("div", { key: `${this.alertId}-heading`, class: "alert-heading" }, h("slot", { name: "heading" }))),
+      h("slot", { key: `${this.alertId}-message` })
+    ];
+    const actionAlertContent = [
+      h("div", { key: `${this.alertId}-content`, class: "alert-content" }, defaultAlertContent),
+      h("div", { key: `${this.alertId}-buttons`, class: "alert-buttons" }, h("slot", { name: "actions" })),
+    ];
+    return (h(Host, { "data-version": version }, h("div", { role: "alert", class: this.classes }, this.dismissible && (h("button", { class: "btn-close", onClick: this.onDismissButtonClick }, h("span", { class: "visually-hidden" }, this.dismissLabel))), this.hasActions
+      ? actionAlertContent
+      : defaultAlertContent)));
+  }
+  static get is() { return "post-alert"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["post-alert.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["post-alert.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dismissible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, a close button (\u00D7) is displayed and the alert can be dismissed by the user."
+        },
+        "attribute": "dismissible",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "dismissLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label to use for the close button of a dismissible alert."
+        },
+        "attribute": "dismiss-label",
+        "reflect": false
+      },
+      "fixed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the alert is positioned at the bottom of the window, from edge to edge."
+        },
+        "attribute": "fixed",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The icon to display in the alert. By default, the icon depends on the alert type.\n\nIf `none`, no icon is displayed."
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "AlertType",
+          "resolved": "\"danger\" | \"gray\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
+          "references": {
+            "AlertType": {
+              "location": "import",
+              "path": "./alert-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The type of the alert."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "alertId": {},
+      "classes": {},
+      "hasActions": {},
+      "hasHeading": {},
+      "onDismissButtonClick": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dismissed",
+        "name": "dismissed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "An event emitted when the alert element is dismissed, after the transition.\nIt has no payload and only relevant for dismissible alerts."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "dismiss": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Triggers alert dismissal programmatically (same as clicking on the close button (\u00D7)).",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "dismissible",
+        "methodName": "validateDismissible"
+      }, {
+        "propName": "dismissLabel",
+        "methodName": "validateDismissLabel"
+      }, {
+        "propName": "fixed",
+        "methodName": "validateFixed"
+      }, {
+        "propName": "icon",
+        "methodName": "validateIcon"
+      }, {
+        "propName": "type",
+        "methodName": "validateType"
+      }];
+  }
+}
+//# sourceMappingURL=post-alert.js.map

package/dist/collection/components/post-alert/post-alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-alert.js","sourceRoot":"","sources":["../../../../src/components/post-alert/post-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { version } from '../../../package.json';\nimport { fadeOut } from '../../animations';\nimport { checkEmptyOrOneOf, checkEmptyOrPattern, checkNonEmpty, checkType } from '../../utils';\nimport { ALERT_TYPES, AlertType } from './alert-types';\n\n@Component({\n  tag: 'post-alert',\n  styleUrl: 'post-alert.scss',\n  shadow: true,\n})\nexport class PostAlert {\n  @Element() host: HTMLPostAlertElement;\n\n  @State() alertId = crypto.randomUUID();\n  @State() classes: string;\n  @State() hasActions: boolean;\n  @State() hasHeading: boolean;\n  @State() onDismissButtonClick = () => this.dismiss();\n\n  /**\n   * If `true`, a close button (×) is displayed and the alert can be dismissed by the user.\n   */\n  @Prop() readonly dismissible: boolean = false;\n\n  @Watch('dismissible')\n  validateDismissible(isDismissible = this.dismissible) {\n    checkType(isDismissible, 'boolean', 'The post-alert \"dismissible\" prop should be a boolean.');\n    setTimeout(() => this.validateDismissLabel());\n  }\n\n  /**\n   * The label to use for the close button of a dismissible alert.\n   */\n  @Prop() readonly dismissLabel: string;\n\n  @Watch('dismissLabel')\n  validateDismissLabel(dismissLabel = this.dismissLabel) {\n    if (this.dismissible) {\n      checkNonEmpty(dismissLabel, 'Dismissible post-alert\\'s require a \"dismiss-label\" prop.');\n    }\n  }\n\n  /**\n   * If `true`, the alert is positioned at the bottom of the window, from edge to edge.\n   */\n  @Prop() readonly fixed: boolean = false;\n\n  @Watch('fixed')\n  validateFixed(isFixed = this.fixed) {\n    checkType(isFixed, 'boolean', 'The post-alert \"fixed\" prop should be a boolean.');\n  }\n\n  /**\n   * The icon to display in the alert. By default, the icon depends on the alert type.\n   *\n   * If `none`, no icon is displayed.\n   */\n  @Prop() readonly icon: string;\n\n  @Watch('icon')\n  validateIcon(icon = this.icon) {\n    checkEmptyOrPattern(icon, /\\d{4}|none/, 'The post-alert \"icon\" prop should be a 4-digits string.');\n  }\n\n  /**\n   * The type of the alert.\n   */\n  @Prop() readonly type: AlertType = 'primary';\n\n  @Watch('type')\n  validateType(type = this.type) {\n    checkEmptyOrOneOf(type, ALERT_TYPES, `The post-alert requires a type form: ${ALERT_TYPES.join(', ')}`);\n  }\n\n  /**\n   * An event emitted when the alert element is dismissed, after the transition.\n   * It has no payload and only relevant for dismissible alerts.\n   */\n  @Event() dismissed: EventEmitter<void>;\n\n  connectedCallback() {\n    this.validateDismissible();\n    this.validateFixed();\n    this.validateIcon();\n    this.validateType();\n  }\n\n  componentWillRender() {\n    this.hasHeading = this.host.querySelectorAll('[slot=heading]').length > 0;\n    this.hasActions = this.host.querySelectorAll('[slot=actions]').length > 0;\n\n    this.classes = `alert alert-${this.type ?? 'primary'}`;\n    if (this.dismissible) this.classes += ' alert-dismissible';\n    if (this.hasActions) this.classes += ' alert-action';\n    if (this.fixed) this.classes += ' alert-fixed-bottom';\n    if (this.icon === 'none') this.classes += ' no-icon';\n  }\n\n  /**\n   * Triggers alert dismissal programmatically (same as clicking on the close button (×)).\n   */\n  @Method()\n  async dismiss() {\n    const dismissal = fadeOut(this.host);\n\n    await dismissal.finished;\n\n    this.host.remove();\n    this.dismissed.emit();\n  }\n\n  render() {\n    const defaultAlertContent = [\n      this.icon && this.icon !== 'none' && (\n        <post-icon key={`${this.alertId}-icon`} name={this.icon} />\n      ),\n      this.hasHeading && (\n        <div key={`${this.alertId}-heading`} class=\"alert-heading\">\n          <slot name=\"heading\"/>\n        </div>\n      ),\n      <slot key={`${this.alertId}-message`}/>\n    ];\n\n    const actionAlertContent = [\n      <div key={`${this.alertId}-content`} class=\"alert-content\">\n        {defaultAlertContent}\n      </div>,\n      <div key={`${this.alertId}-buttons`} class=\"alert-buttons\">\n        <slot name=\"actions\"/>\n      </div>,\n    ];\n\n    return (\n      <Host data-version={version}>\n        <div role=\"alert\" class={this.classes}>\n          {this.dismissible && (\n            <button class=\"btn-close\" onClick={this.onDismissButtonClick}>\n              <span class=\"visually-hidden\">{this.dismissLabel}</span>\n            </button>\n          )}\n\n          {this.hasActions\n            ? actionAlertContent\n            : defaultAlertContent\n          }\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/post-collapsible/post-collapsible.css

@@ -21,6 +21,13 @@
  * will be available as sass-variables
  * but should not be used.
 */
+/**
+ * Colors used by the post style guide
+ */
+/**
+ * Maps. Allow maps to have custom colors from the project
+ * by always merging into a default empty map
+ */
 .accordion-item {
   border-block-start: 2px solid hsl(0, 0%, 90%);
 }

package/dist/collection/components/post-tab-header/post-tab-header.css

@@ -0,0 +1,337 @@
+/**
+ * Colors used by the post style guide
+ */
+/**
+ * Maps. Allow maps to have custom colors from the project
+ * by always merging into a default empty map
+ */
+.tab-title {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  padding: 1rem;
+  transition: background-color 100ms;
+  border-right: 1px solid transparent;
+  border-left: 1px solid transparent;
+  outline-color: currentColor;
+  opacity: 0.7;
+  color: var(--post-contrast-color);
+  text-decoration: none;
+}
+.tab-title:focus {
+  background-color: unset;
+  color: var(--post-contrast-color);
+}
+.tab-title:hover {
+  opacity: 1;
+  background-color: #fff;
+  color: var(--post-contrast-color);
+}
+.tab-title:focus-visible {
+  outline: transparent;
+  opacity: 1;
+  background-color: #fff;
+  color: var(--post-contrast-color);
+  box-shadow: none;
+}
+.tab-title:focus-visible::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 2px;
+  right: 1px;
+  bottom: 0;
+  left: 1px;
+  box-shadow: 0 0 0 1px #fff, 0 0 0 2px hsl(0, 0%, 20%);
+}
+.tab-title.active {
+  z-index: 1;
+  border-right-color: hsl(0, 0%, 80%);
+  border-left-color: hsl(0, 0%, 80%);
+  opacity: 1;
+  background-color: #fff;
+  color: var(--post-contrast-color);
+  font-weight: 700;
+}
+.tab-title.active::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  right: -1px;
+  left: -1px;
+  height: 0.25rem;
+  background-color: #fc0;
+}
+:is(.bg-dark, .bg-primary, .bg-black, .bg-danger, .bg-nightblue, .bg-nightblue-bright, .bg-petrol, .bg-coral, .bg-olive, .bg-purple, .bg-purple-bright, .bg-aubergine, .bg-aubergine-bright) .tab-title:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+:is(.bg-dark, .bg-primary, .bg-black, .bg-danger, .bg-nightblue, .bg-nightblue-bright, .bg-petrol, .bg-coral, .bg-olive, .bg-purple, .bg-purple-bright, .bg-aubergine, .bg-aubergine-bright) .tab-title:focus-visible {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+@media (forced-colors: active), (-ms-high-contrast: active), (-ms-high-contrast: white-on-black) {
+  .tab-title {
+    opacity: 1;
+    border-left-color: Canvas;
+    border-right-color: Canvas;
+    color: LinkText;
+  }
+  .tab-title:hover, .tab-title:focus, .tab-title:focus-within, .tab-title:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: -0.25rem;
+  }
+  .tab-title.active {
+    border-left-color: ButtonText;
+    border-right-color: ButtonText;
+    color: Highlight;
+  }
+  .tab-title.active::before {
+    background-color: Highlight;
+  }
+}
+
+.bg-yellow .tab-title {
+  background-color: #fc0;
+}
+.bg-yellow .tab-title.active {
+  background-color: #fc0;
+}
+.bg-yellow .nav-item {
+  background-color: #fc0;
+}
+
+.bg-light .tab-title {
+  background-color: #faf9f8;
+}
+.bg-light .tab-title.active {
+  background-color: #faf9f8;
+}
+.bg-light .nav-item {
+  background-color: #faf9f8;
+}
+
+.bg-gray .tab-title {
+  background-color: #f4f3f1;
+}
+.bg-gray .tab-title.active {
+  background-color: #f4f3f1;
+}
+.bg-gray .nav-item {
+  background-color: #f4f3f1;
+}
+
+.bg-dark .tab-title {
+  background-color: hsl(0, 0%, 20%);
+}
+.bg-dark .tab-title.active {
+  background-color: hsl(0, 0%, 20%);
+}
+.bg-dark .nav-item {
+  background-color: hsl(0, 0%, 20%);
+}
+
+.bg-primary .tab-title {
+  background-color: hsl(0, 0%, 20%);
+}
+.bg-primary .tab-title.active {
+  background-color: hsl(0, 0%, 20%);
+}
+.bg-primary .nav-item {
+  background-color: hsl(0, 0%, 20%);
+}
+
+.bg-white .tab-title {
+  background-color: #fff;
+}
+.bg-white .tab-title.active {
+  background-color: #fff;
+}
+.bg-white .nav-item {
+  background-color: #fff;
+}
+
+.bg-black .tab-title {
+  background-color: #000;
+}
+.bg-black .tab-title.active {
+  background-color: #000;
+}
+.bg-black .nav-item {
+  background-color: #000;
+}
+
+.bg-success .tab-title {
+  background-color: #2c911c;
+}
+.bg-success .tab-title.active {
+  background-color: #2c911c;
+}
+.bg-success .nav-item {
+  background-color: #2c911c;
+}
+
+.bg-info .tab-title {
+  background-color: #cce4ee;
+}
+.bg-info .tab-title.active {
+  background-color: #cce4ee;
+}
+.bg-info .nav-item {
+  background-color: #cce4ee;
+}
+
+.bg-warning .tab-title {
+  background-color: #f49e00;
+}
+.bg-warning .tab-title.active {
+  background-color: #f49e00;
+}
+.bg-warning .nav-item {
+  background-color: #f49e00;
+}
+
+.bg-danger .tab-title {
+  background-color: #a51728;
+}
+.bg-danger .tab-title.active {
+  background-color: #a51728;
+}
+.bg-danger .nav-item {
+  background-color: #a51728;
+}
+
+.bg-nightblue .tab-title {
+  background-color: #004976;
+}
+.bg-nightblue .tab-title.active {
+  background-color: #004976;
+}
+.bg-nightblue .nav-item {
+  background-color: #004976;
+}
+
+.bg-nightblue-bright .tab-title {
+  background-color: #0076a8;
+}
+.bg-nightblue-bright .tab-title.active {
+  background-color: #0076a8;
+}
+.bg-nightblue-bright .nav-item {
+  background-color: #0076a8;
+}
+
+.bg-petrol .tab-title {
+  background-color: #006d68;
+}
+.bg-petrol .tab-title.active {
+  background-color: #006d68;
+}
+.bg-petrol .nav-item {
+  background-color: #006d68;
+}
+
+.bg-petrol-bright .tab-title {
+  background-color: #00968f;
+}
+.bg-petrol-bright .tab-title.active {
+  background-color: #00968f;
+}
+.bg-petrol-bright .nav-item {
+  background-color: #00968f;
+}
+
+.bg-coral .tab-title {
+  background-color: #9e2a2f;
+}
+.bg-coral .tab-title.active {
+  background-color: #9e2a2f;
+}
+.bg-coral .nav-item {
+  background-color: #9e2a2f;
+}
+
+.bg-coral-bright .tab-title {
+  background-color: #e03c31;
+}
+.bg-coral-bright .tab-title.active {
+  background-color: #e03c31;
+}
+.bg-coral-bright .nav-item {
+  background-color: #e03c31;
+}
+
+.bg-olive .tab-title {
+  background-color: #716135;
+}
+.bg-olive .tab-title.active {
+  background-color: #716135;
+}
+.bg-olive .nav-item {
+  background-color: #716135;
+}
+
+.bg-olive-bright .tab-title {
+  background-color: #aa9d2e;
+}
+.bg-olive-bright .tab-title.active {
+  background-color: #aa9d2e;
+}
+.bg-olive-bright .nav-item {
+  background-color: #aa9d2e;
+}
+
+.bg-purple .tab-title {
+  background-color: #80276c;
+}
+.bg-purple .tab-title.active {
+  background-color: #80276c;
+}
+.bg-purple .nav-item {
+  background-color: #80276c;
+}
+
+.bg-purple-bright .tab-title {
+  background-color: #c5299b;
+}
+.bg-purple-bright .tab-title.active {
+  background-color: #c5299b;
+}
+.bg-purple-bright .nav-item {
+  background-color: #c5299b;
+}
+
+.bg-aubergine .tab-title {
+  background-color: #523178;
+}
+.bg-aubergine .tab-title.active {
+  background-color: #523178;
+}
+.bg-aubergine .nav-item {
+  background-color: #523178;
+}
+
+.bg-aubergine-bright .tab-title {
+  background-color: #7566a0;
+}
+.bg-aubergine-bright .tab-title.active {
+  background-color: #7566a0;
+}
+.bg-aubergine-bright .nav-item {
+  background-color: #7566a0;
+}
+
+[class*=bg-] .tab-title.active:focus::after {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+@supports selector(*:focus-visible) {
+  [class*=bg-] .tab-title.active:focus::after {
+    background-color: unset;
+  }
+  [class*=bg-] .tab-title.active:focus-visible::after {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+}
+
+:host {
+  display: block;
+}

package/dist/collection/components/post-tab-header/post-tab-header.js

@@ -0,0 +1,68 @@
+import { h, Host } from '@stencil/core';
+import { version } from '../../../package.json';
+import { checkNonEmpty } from '../../utils';
+export class PostTabHeader {
+  constructor() {
+    this.tabId = undefined;
+    this.panel = undefined;
+  }
+  validateFor(newValue) {
+    checkNonEmpty(newValue, 'The "panel" prop is required for the post-tab-header.');
+  }
+  componentWillLoad() {
+    this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;
+  }
+  render() {
+    return (h(Host, { "data-version": version }, h("li", { class: "nav-item" }, h("a", { "aria-selected": "false", class: "tab-title nav-link", href: "#", id: this.tabId, role: "tab" }, h("slot", null)))));
+  }
+  static get is() { return "post-tab-header"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["post-tab-header.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["post-tab-header.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "panel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLPostTabPanelElement['name']",
+          "resolved": "string",
+          "references": {
+            "HTMLPostTabPanelElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the panel controlled by the tab header."
+        },
+        "attribute": "panel",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "tabId": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "panel",
+        "methodName": "validateFor"
+      }];
+  }
+}
+//# sourceMappingURL=post-tab-header.js.map

package/dist/collection/components/post-tab-header/post-tab-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-tab-header.js","sourceRoot":"","sources":["../../../../src/components/post-tab-header/post-tab-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAO5C,MAAM,OAAO,aAAa;;;;;EAWxB,WAAW,CAAC,QAAyC;IACnD,aAAa,CAAC,QAAQ,EAAE,uDAAuD,CAAC,CAAC;EACnF,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,KAAK,GAAG,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;EAC5D,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,oBAAe,OAAO;MACzB,UAAI,KAAK,EAAC,UAAU;QAClB,0BACgB,OAAO,EACrB,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAC,GAAG,EACR,EAAE,EAAE,IAAI,CAAC,KAAK,EACd,IAAI,EAAC,KAAK;UAEV,eAAO,CACL,CACD,CACA,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { version } from '../../../package.json';\nimport { checkNonEmpty } from '../../utils';\n\n@Component({\n  tag: 'post-tab-header',\n  styleUrl: 'post-tab-header.scss',\n  shadow: true,\n})\nexport class PostTabHeader {\n  @Element() host: HTMLPostTabHeaderElement;\n\n  @State() tabId: string;\n\n  /**\n   * The name of the panel controlled by the tab header.\n   */\n  @Prop() readonly panel: HTMLPostTabPanelElement['name'];\n\n  @Watch('panel')\n  validateFor(newValue: HTMLPostTabPanelElement['name']) {\n    checkNonEmpty(newValue, 'The \"panel\" prop is required for the post-tab-header.');\n  }\n\n  componentWillLoad() {\n    this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <li class=\"nav-item\">\n          <a\n            aria-selected=\"false\"\n            class=\"tab-title nav-link\"\n            href=\"#\"\n            id={this.tabId}\n            role=\"tab\"\n          >\n            <slot/>\n          </a>\n        </li>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/post-tab-panel/post-tab-panel.css

@@ -0,0 +1,3 @@
+:host {
+  display: none;
+}