npm - @oiz/stzh-components - Versions diffs - 3.0.0-beta4 → 3.0.0-beta5 - Mend

@oiz/stzh-components 3.0.0-beta4 → 3.0.0-beta5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (590) hide show

package/dist/components/stzh-chipselect2.js CHANGED Viewed

@@ -1,15 +1,14 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { S as StzhInputDescription } from './stzh-input-description.js';
-import { d as defineCustomElement$8 } from './stzh-badge2.js';
-import { d as defineCustomElement$7 } from './stzh-chip2.js';
-import { d as defineCustomElement$6 } from './stzh-clamp2.js';
-import { d as defineCustomElement$5 } from './stzh-dropdown2.js';
+import { d as defineCustomElement$7 } from './stzh-badge2.js';
+import { d as defineCustomElement$6 } from './stzh-chip2.js';
+import { d as defineCustomElement$5 } from './stzh-clamp2.js';
 import { d as defineCustomElement$4 } from './stzh-icon2.js';
 import { d as defineCustomElement$3 } from './stzh-link2.js';
 import { d as defineCustomElement$2 } from './stzh-popover2.js';
 import { d as defineCustomElement$1 } from './stzh-text2.js';
-const stzhChipselectCss = ".sc-stzh-chipselect-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-chipselect-h{display:none}.sc-stzh-chipselect-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipselect-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipselect-h *.sc-stzh-chipselect,.sc-stzh-chipselect-h *.sc-stzh-chipselect::before,.sc-stzh-chipselect-h *.sc-stzh-chipselect::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-chipselect-h .has-focus.sc-stzh-chipselect{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect{outline-style:none !important}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect::-moz-focus-inner{border:0 !important}[disabled].sc-stzh-chipselect-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-chipselect__marker-symbol.sc-stzh-chipselect{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-chipselect__marker-text.sc-stzh-chipselect{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chipselect__description-wrapper.sc-stzh-chipselect{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect__description.sc-stzh-chipselect{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-chipselect__error.sc-stzh-chipselect{color:var(--stzh-color-error60)}.stzh-chipselect__error-list.sc-stzh-chipselect{list-style:none;margin:0;padding:0}.stzh-chipselect__description.sc-stzh-chipselect{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-chipselect__description-long.sc-stzh-chipselect{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-chipselect__description-long.sc-stzh-chipselect{margin-top:0}}.stzh-chipselect__description-long-popover.sc-stzh-chipselect{--width:auto;--max-width:27.3125rem}.stzh-chipselect__description-long-button.sc-stzh-chipselect{display:flex;justify-content:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-chipselect.sc-stzh-chipselect stzh-icon.stzh-chipselect__description-long-icon.sc-stzh-chipselect{--size:var(--stzh-icon-size-xsmall)}.stzh-chipselect--has-error.sc-stzh-chipselect .stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect--has-description.sc-stzh-chipselect .stzh-chipselect__description.sc-stzh-chipselect{margin-top:var(--stzh-space-xxxsmall)}.stzh-chipselect__chips.sc-stzh-chipselect{display:flex;align-items:center;flex-wrap:wrap;margin:calc(var(--stzh-space-small) / -2) calc(var(--stzh-space-xsmall) / -2);border-radius:var(--stzh-button-border-radius)}@media screen and (max-width: 899px){.stzh-chipselect__chips.sc-stzh-chipselect{display:none}}.stzh-chipselect__chip.sc-stzh-chipselect{margin:calc(var(--stzh-space-small) / 2) calc(var(--stzh-space-xsmall) / 2)}.stzh-chipselect__chip.is-focused.sc-stzh-chipselect,.stzh-chipselect__chip.is-focused[active].sc-stzh-chipselect:not([active=false]){--border-color:var(--stzh-color-primary-hover)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-chipselect__chip.is-focused.sc-stzh-chipselect,.stzh-chipselect__chip.is-focused[active].sc-stzh-chipselect:not([active=false]){--border-color:Highlight}}.stzh-chipselect__chip.is-focused[active].sc-stzh-chipselect:not([active=false]){--background-color:var(--stzh-color-primary-hover)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-chipselect__chip.is-focused[active].sc-stzh-chipselect:not([active=false]){--background-color:Canvas}}@media screen and (min-width: 900px){.stzh-chipselect__dropdown.sc-stzh-chipselect{display:none}}@media screen and (max-width: 899px){.stzh-chipselect__description-wrapper.sc-stzh-chipselect{display:none}}.stzh-chipselect--has-error.sc-stzh-chipselect .stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect--has-description.sc-stzh-chipselect .stzh-chipselect__description.sc-stzh-chipselect{margin-top:var(--stzh-space-xsmall)}";
+const stzhChipselectCss = ".sc-stzh-chipselect-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-chipselect-h{display:none}.sc-stzh-chipselect-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipselect-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipselect-h *.sc-stzh-chipselect,.sc-stzh-chipselect-h *.sc-stzh-chipselect::before,.sc-stzh-chipselect-h *.sc-stzh-chipselect::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-chipselect-h .has-focus.sc-stzh-chipselect{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect{outline-style:none !important}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect::-moz-focus-inner{border:0 !important}[disabled].sc-stzh-chipselect-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-chipselect__marker-symbol.sc-stzh-chipselect{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-chipselect__marker-text.sc-stzh-chipselect{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chipselect__description-wrapper.sc-stzh-chipselect{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect__description.sc-stzh-chipselect{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-chipselect__error.sc-stzh-chipselect{color:var(--stzh-color-error60)}.stzh-chipselect__error-list.sc-stzh-chipselect{list-style:none;margin:0;padding:0}.stzh-chipselect__description.sc-stzh-chipselect{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-chipselect__description-long.sc-stzh-chipselect{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-chipselect__description-long.sc-stzh-chipselect{margin-top:0}}.stzh-chipselect__description-long-popover.sc-stzh-chipselect{--width:auto;--max-width:27.3125rem}.stzh-chipselect__description-long-button.sc-stzh-chipselect{display:flex;justify-content:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-chipselect.sc-stzh-chipselect stzh-icon.stzh-chipselect__description-long-icon.sc-stzh-chipselect{--size:var(--stzh-icon-size-xsmall)}.stzh-chipselect--has-error.sc-stzh-chipselect .stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect--has-description.sc-stzh-chipselect .stzh-chipselect__description.sc-stzh-chipselect{margin-top:var(--stzh-space-xxxsmall)}.stzh-chipselect__label.sc-stzh-chipselect{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--stzh-heading-color);display:block;margin-bottom:var(--stzh-space-xsmall)}.stzh-chipselect__label.sc-stzh-chipselect:empty{display:none}.stzh-chipselect__marker.sc-stzh-chipselect{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-chipselect__chips.sc-stzh-chipselect{display:flex;align-items:center;flex-wrap:wrap;border-radius:var(--stzh-button-border-radius);-moz-column-gap:var(--stzh-space-medium);column-gap:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-chipselect__chips.sc-stzh-chipselect{row-gap:var(--stzh-space-medium)}}.stzh-chipselect__chip.is-focused.sc-stzh-chipselect,.stzh-chipselect__chip.is-focused[active].sc-stzh-chipselect:not([active=false]){--background-color:var(--stzh-color-secondary40)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-chipselect__chip.is-focused.sc-stzh-chipselect,.stzh-chipselect__chip.is-focused[active].sc-stzh-chipselect:not([active=false]){--background-color:Highlight}}.stzh-chipselect__chip.is-focused[active].sc-stzh-chipselect:not([active=false]){--background-color:var(--stzh-color-primary90)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-chipselect__chip.is-focused[active].sc-stzh-chipselect:not([active=false]){--background-color:Canvas}}.stzh-chipselect--has-error.sc-stzh-chipselect .stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect--has-description.sc-stzh-chipselect .stzh-chipselect__description.sc-stzh-chipselect{margin-top:var(--stzh-space-xsmall)}.stzh-chipselect--has-label-hidden.sc-stzh-chipselect .stzh-chipselect__label.sc-stzh-chipselect{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chipselect--is-disabled.sc-stzh-chipselect .stzh-chipselect__chips.sc-stzh-chipselect,.stzh-chipselect--is-disabled.sc-stzh-chipselect .stzh-chipselect__label.sc-stzh-chipselect{cursor:not-allowed}";
 let chipselectCounter = 0;
 const StzhChipselect = /*@__PURE__*/ proxyCustomElement(class StzhChipselect extends HTMLElement {
@@ -18,7 +17,7 @@ const StzhChipselect = /*@__PURE__*/ proxyCustomElement(class StzhChipselect ext
     this.__registerHost();
     this.stzhChange = createEvent(this, "stzhChange", 7);
     this._data = [];
-    this._dataDropdown = [];
+    this._value = [];
     this.handleReset = async () => {
       this.value = this.defaultValue;
       // this.stzhChange.emit({
@@ -27,25 +26,37 @@ const StzhChipselect = /*@__PURE__*/ proxyCustomElement(class StzhChipselect ext
       // });
     };
     this.handleChipClick = async (data, index) => {
-      this.value = data.value;
+      if (this.multiple) {
+        if (data.value === "" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === "")) {
+          this.value = [];
+        }
+        else if (data.value !== "") {
+          this.value = this._value.includes(data.value)
+            ? this._value.filter(value => value !== data.value)
+            : [...this._value, data.value];
+        }
+      }
+      else {
+        this.value = [data.value];
+      }
       this.activeFocusOptionIndex = index;
       await this.waitForNextRender();
       this.stzhChange.emit({
         component: "stzh-chipselect",
-        value: this.value
-      });
-    };
-    this.handleDropdownChange = async (event) => {
-      this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;
-      this.activeFocusOptionIndex = this._data.findIndex(data => {
-        return data.value === this.value;
-      });
-      await this.waitForNextRender();
-      this.stzhChange.emit({
-        component: "stzh-chipselect",
-        value: this.value
+        value: this.multiple ? this._value[0] : this._value
       });
     };
+    // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {
+    //   this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;
+    //   this.activeFocusOptionIndex = this._data.findIndex(data => {
+    //     return data.value === this.value;
+    //   });
+    //   await this.waitForNextRender();
+    //   this.stzhChange.emit({
+    //     component: "stzh-chipselect",
+    //     value: this.value
+    //   })
+    // }
     this.handleKeydown = (event) => {
       let newActiveIndex = null;
       const activeOptionIndex = this.activeFocusOptionIndex;
@@ -77,6 +88,8 @@ const StzhChipselect = /*@__PURE__*/ proxyCustomElement(class StzhChipselect ext
     this.data = [];
     this.name = undefined;
     this.label = "";
+    this.labelHidden = false;
+    this.multiple = false;
     this.value = "";
     this.defaultValue = "";
     this.description = undefined;
@@ -97,6 +110,19 @@ const StzhChipselect = /*@__PURE__*/ proxyCustomElement(class StzhChipselect ext
       });
     }
   }
+  valueWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._value = JSON.parse(newValue);
+      }
+      catch (ex) {
+        this._value = newValue ? [newValue] : [];
+      }
+    }
+    else {
+      this._value = newValue ? newValue : [];
+    }
+  }
   dataWatcher(newValue) {
     if (typeof newValue === "string") {
       this._data = JSON.parse(newValue);
@@ -104,14 +130,14 @@ const StzhChipselect = /*@__PURE__*/ proxyCustomElement(class StzhChipselect ext
     else {
       this._data = newValue;
     }
-    this._dataDropdown = this._data.map((data) => {
-      return {
-        text: data.counter
-          ? `${data.label} (${data.counter})`
-          : data.label,
-        value: data.value
-      };
-    });
+    // this._dataDropdown = this._data.map((data) => {
+    //   return {
+    //     text: data.counter
+    //       ? `${data.label} (${data.counter})`
+    //       : data.label,
+    //     value: data.value
+    //   }
+    // });
   }
   errorWatcher(newValue) {
     if (typeof newValue === "string") {
@@ -146,6 +172,7 @@ const StzhChipselect = /*@__PURE__*/ proxyCustomElement(class StzhChipselect ext
     this.id = `stzh-chipselect-${chipselectCounter++}`;
     this.dataWatcher(this.data);
     this.errorWatcher(this.error);
+    this.valueWatcher(this.value);
     this.defaultValue = this.defaultValue || this.value;
     if (!this.localization) {
       this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "chipselect");
@@ -162,16 +189,30 @@ const StzhChipselect = /*@__PURE__*/ proxyCustomElement(class StzhChipselect ext
       "stzh-chipselect--has-error": errorUsed,
       "stzh-chipselect--is-invalid": this.invalid || errorUsed,
       "stzh-chipselect--is-disabled": this.disabled,
-      "stzh-chipselect--is-required": this.required
+      "stzh-chipselect--is-required": this.required,
+      "stzh-chipselect--has-label-hidden": this.labelHidden,
     };
-    return (h(Host, { "is-invalid": this.invalid || errorUsed }, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value, defaultValue: this.defaultValue }), this._data.length > 0 &&
-      h(Fragment, null, h("div", { class: "stzh-chipselect__chips", role: "listbox", tabindex: "0", "aria-multiselectable": "false", "aria-activedescendant": `${this.id}-option-${this.activeFocusOptionIndex}`, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, index) => (h("stzh-chip", { role: "option", class: {
+    return (h(Host, { "is-invalid": this.invalid || errorUsed }, h("div", { class: classes }, this.multiple
+      ?
+        h(Fragment, null, this._value.map((value) => h("input", { type: "hidden", name: this.name, value: value })))
+      :
+        h("input", { type: "hidden", name: this.name, value: this.value }), h("label", { class: "stzh-chipselect__label", htmlFor: this.id }, this.label ? this.label : h("slot", null), !this.hideOptional &&
+      h("span", { class: "stzh-chipselect__marker" }, h("span", { class: "stzh-chipselect__marker-symbol", "aria-hidden": "true" }, this.required
+        ? this.localization.$globals.requiredFieldMarker
+        : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-chipselect__marker-text" }, this.required
+        ? this.localization.$globals.requiredFieldText
+        : this.localization.$globals.optionalFieldText))), this._data.length > 0 &&
+      h(Fragment, null, h("div", { id: this.id, class: "stzh-chipselect__chips", role: "listbox", tabindex: "0", "aria-multiselectable": this.multiple ? "true" : "false", "aria-activedescendant": `${this.id}-option-${this.activeFocusOptionIndex}`, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, index) => (h("stzh-chip", { role: "option", class: {
           "stzh-chipselect__chip": true,
           "is-focused": this.activeFocusOptionIndex === index
-        }, label: data.label, counter: data.counter, icon: data.icon, type: data.type, inverted: data.inverted, variant: data.variant, size: data.size, disabled: this.disabled || data.disabled, active: this.value === data.value, "aria-selected": this.value === data.value ? "true" : "false", id: `${this.id}-option-${index}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index) })))), h(StzhInputDescription, { classPrefix: "stzh-chipselect", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }), h("stzh-dropdown", { class: "stzh-chipselect__dropdown", disabled: this.disabled, error: this._error, description: this.description, descriptionLong: this.descriptionLong, required: this.required, invalid: this.invalid, items: [this.value], label: this.label, options: this._dataDropdown, hideOptional: this.hideOptional, onStzhChange: this.handleDropdownChange })))));
+        }, label: data.label, counter: data.counter, icon: data.icon, type: data.type, inverted: data.inverted, variant: data.variant, size: data.size || "small", disabled: this.disabled || data.disabled, active: this._value.includes(data.value)
+          || (!data.value && this.multiple && (this._value.length === 0 || (this._value.length === 1 && this._value[0] === ""))), "aria-selected": this._value.includes(data.value)
+          || (!data.value && this.multiple && (this._value.length === 0 || (this._value.length === 1 && this._value[0] === "")))
+          ? "true" : "false", id: `${this.id}-option-${index}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index) })))), h(StzhInputDescription, { classPrefix: "stzh-chipselect", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
   }
   get element() { return this; }
   static get watchers() { return {
+    "value": ["valueWatcher"],
     "data": ["dataWatcher"],
     "error": ["errorWatcher"]
   }; }
@@ -181,6 +222,8 @@ const StzhChipselect = /*@__PURE__*/ proxyCustomElement(class StzhChipselect ext
     "data": [1],
     "name": [513],
     "label": [1],
+    "labelHidden": [4, "label-hidden"],
+    "multiple": [1028],
     "value": [1025],
     "defaultValue": [1025, "default-value"],
     "description": [1],
@@ -194,6 +237,7 @@ const StzhChipselect = /*@__PURE__*/ proxyCustomElement(class StzhChipselect ext
     "a11yDescribedby": [1, "a11y-describedby"],
     "activeFocusOptionIndex": [32]
   }, [[4, "reset", "resetListener"]], {
+    "value": ["valueWatcher"],
     "data": ["dataWatcher"],
     "error": ["errorWatcher"]
   }]);
@@ -201,7 +245,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["stzh-chipselect", "stzh-badge", "stzh-chip", "stzh-clamp", "stzh-dropdown", "stzh-icon", "stzh-link", "stzh-popover", "stzh-text"];
+  const components = ["stzh-chipselect", "stzh-badge", "stzh-chip", "stzh-clamp", "stzh-icon", "stzh-link", "stzh-popover", "stzh-text"];
   components.forEach(tagName => { switch (tagName) {
     case "stzh-chipselect":
       if (!customElements.get(tagName)) {
@@ -209,21 +253,16 @@ function defineCustomElement() {
       }
       break;
     case "stzh-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "stzh-chip":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }
       break;
-    case "stzh-clamp":
+    case "stzh-chip":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }
       break;
-    case "stzh-dropdown":
+    case "stzh-clamp":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }

package/dist/components/stzh-chipselect2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-chipselect2.js","mappings":"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","names":[],"sources":["src/components/stzh-chipselect/stzh-chipselect.scss?tag=stzh-chipselect&encapsulation=scoped","src/components/stzh-chipselect/stzh-chipselect.tsx"],"sourcesContent":[":host {\n &[disabled]:not([disabled=\"false\"]) {\n --description-color: #{$formDisabledColor};\n }\n}\n\n.stzh-chipselect {\n\t@include input-description;\n\n &__chips {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n margin: calc(#{space('small')} / -2) calc(#{space('xsmall')} / -2);\n border-radius: $buttonBorderRadius;\n\n @include mq($to: medium) {\n display: none;\n }\n }\n\n &__chip {\n margin: calc(#{space('small')} / 2) calc(#{space('xsmall')} / 2);\n\n &.is-focused,\n &.is-focused[active]:not([active=false]) {\n --border-color: #{$colorPrimaryHover};\n\n @include highContrast() {\n --border-color: Highlight;\n }\n }\n\n &.is-focused[active]:not([active=false]) {\n --background-color: #{$colorPrimaryHover};\n\n @include highContrast() {\n --background-color: Canvas;\n }\n }\n }\n\n &__dropdown {\n @include mq($from: medium) {\n display: none;\n }\n }\n\n &__description-wrapper {\n @include mq($to: medium) {\n display: none;\n }\n }\n\n &--has-error &__error,\n &--has-description &__description {\n margin-top: space('xsmall');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n State,\n Fragment,\n Listen,\n} from \"@stencil/core\";\n\nimport {\n StzhChipselectItem,\n StzhChipselectChangeEvent,\n StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet chipselectCounter = 0;\n\n/*\n @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n /\n@Component({\n tag: \"stzh-chipselect\",\n styleUrl: \"stzh-chipselect.scss\",\n scoped: true\n})\nexport class StzhChipselect {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* The list of chips /\n @Prop() data: string \| StzhChipselectItem[] = [];\n private _data: StzhChipselectItem[] = [];\n private _dataDropdown: any[] = [];\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Value /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /* Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /* Whether all chips are disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form ot hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n @State() activeFocusOptionIndex: number = 0;\n\n @Element() element: HTMLStzhChipselectElement;\n\n /* Change event */\n @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"data\")\n dataWatcher(newValue: StzhChipselectItem[] \| string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n } else {\n this._data = newValue;\n }\n\n this._dataDropdown = this._data.map((data) => {\n return {\n text: data.counter\n ? `${data.label} (${data.counter})`\n : data.label,\n value: data.value\n }\n });\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n private id: string;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => this.renderPromiseResolve = resolve);\n }\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // });\n }\n\n private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n this.value = data.value;\n this.activeFocusOptionIndex = index;\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.value\n })\n }\n\n private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n this.activeFocusOptionIndex = this._data.findIndex(data => {\n return data.value === this.value;\n });\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.value\n })\n }\n\n private handleKeydown = (event: KeyboardEvent) => {\n let newActiveIndex: number = null;\n const activeOptionIndex = this.activeFocusOptionIndex;\n\n if (event.key === \"ArrowUp\" \|\| event.key === \"ArrowLeft\") {\n event.preventDefault();\n\n if (activeOptionIndex > 0) {\n newActiveIndex = activeOptionIndex - 1;\n }\n } else if (event.key === \"ArrowDown\" \|\| event.key === \"ArrowRight\") {\n event.preventDefault();\n\n if (activeOptionIndex < this._data.length - 1) {\n newActiveIndex = activeOptionIndex + 1;\n }\n } else if (event.key === \" \" \|\| event.key === \"Enter\") {\n event.preventDefault();\n this.value = this._data[activeOptionIndex].value;\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.value\n });\n }\n\n if (newActiveIndex !== null) {\n this.activeFocusOptionIndex = newActiveIndex;\n }\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n this.dataWatcher(this.data);\n this.errorWatcher(this.error);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n }\n }\n\n render() {\n const descriptionUsed = !!this.description;\n const descriptionLongUsed = !!this.descriptionLong;\n const errorUsed = !!this.error;\n\n const classes = {\n \"stzh-chipselect\": true,\n \"stzh-chipselect--has-description\": descriptionUsed,\n \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n \"stzh-chipselect--has-error\": errorUsed,\n \"stzh-chipselect--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-chipselect--is-disabled\": this.disabled,\n \"stzh-chipselect--is-required\": this.required\n };\n\n return (\n <Host is-invalid={this.invalid \|\| errorUsed}>\n <div class={classes}>\n <input\n type=\"hidden\"\n name={this.name}\n value={this.value}\n defaultValue={this.defaultValue}\n />\n\n {this._data.length > 0 &&\n <Fragment>\n <div\n class=\"stzh-chipselect__chips\"\n role=\"listbox\"\n tabindex=\"0\"\n aria-multiselectable=\"false\"\n aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n onKeyDown={this.handleKeydown}\n >\n {this._data.map((data, index) => (\n <stzh-chip\n role=\"option\"\n class={{\n \"stzh-chipselect__chip\": true,\n \"is-focused\": this.activeFocusOptionIndex === index\n }}\n label={data.label}\n counter={data.counter}\n icon={data.icon}\n type={data.type}\n inverted={data.inverted}\n variant={data.variant}\n size={data.size}\n disabled={this.disabled \|\| data.disabled}\n active={this.value === data.value}\n aria-selected={this.value === data.value ? \"true\" : \"false\"}\n id={`${this.id}-option-${index}`}\n a11yTabindex=\"-1\"\n onClick={() => this.handleChipClick(data, index)}\n ></stzh-chip>\n ))}\n </div>\n\n <StzhInputDescription\n classPrefix=\"stzh-chipselect\"\n id={`${this.id}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n\n <stzh-dropdown\n class=\"stzh-chipselect__dropdown\"\n disabled={this.disabled}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n required={this.required}\n invalid={this.invalid}\n items={[this.value]}\n label={this.label}\n options={this._dataDropdown}\n hideOptional={this.hideOptional}\n onStzhChange={this.handleDropdownChange}\n ></stzh-dropdown>\n </Fragment>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-chipselect2.js","mappings":"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","names":[],"sources":["src/components/stzh-chipselect/stzh-chipselect.scss?tag=stzh-chipselect&encapsulation=scoped","src/components/stzh-chipselect/stzh-chipselect.tsx"],"sourcesContent":[":host {\n &[disabled]:not([disabled=\"false\"]) {\n --description-color: #{$formDisabledColor};\n }\n}\n\n.stzh-chipselect {\n\t@include input-description;\n\n &__label {\n @include font('heavy');\n @include fontSize('micro');\n @include truncate;\n color: $headingColor;\n display: block;\n margin-bottom: space('xsmall');\n\n &:empty {\n display: none;\n }\n }\n\n &__marker {\n @include fontSize('nano');\n margin-left: calc(-0.25em + #{space('xsmall')});\n }\n\n &__chips {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n border-radius: $buttonBorderRadius;\n column-gap: space('medium');\n\n @include mq($from: medium) {\n row-gap: space('medium');\n }\n\n // @include mq($to: medium) {\n // display: none;\n // }\n }\n\n &__chip {\n &.is-focused,\n &.is-focused[active]:not([active=false]) {\n --background-color: #{$colorSecondary40};\n\n @include highContrast() {\n --background-color: Highlight;\n }\n }\n\n &.is-focused[active]:not([active=false]) {\n --background-color: #{$colorPrimary90};\n\n @include highContrast() {\n --background-color: Canvas;\n }\n }\n }\n\n // &__dropdown {\n // @include mq($from: medium) {\n // display: none;\n // }\n // }\n\n // &__description-wrapper {\n // @include mq($to: medium) {\n // display: none;\n // }\n // }\n\n &--has-error &__error,\n &--has-description &__description {\n margin-top: space('xsmall');\n }\n\n /* Hidden label /\n\n &--has-label-hidden &__label {\n @include visuallyhidden;\n }\n\n / Disabled /\n\n &--is-disabled &__chips,\n &--is-disabled &__label {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n State,\n Fragment,\n Listen,\n} from \"@stencil/core\";\n\nimport {\n StzhChipselectItem,\n StzhChipselectChangeEvent,\n // StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet chipselectCounter = 0;\n\n/\n @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n /\n@Component({\n tag: \"stzh-chipselect\",\n styleUrl: \"stzh-chipselect.scss\",\n scoped: true\n})\nexport class StzhChipselect {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* The list of chips /\n @Prop() data: string \| StzhChipselectItem[] = [];\n private _data: StzhChipselectItem[] = [];\n // private _dataDropdown: any[] = [];\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label is hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Multiple /\n @Prop({ mutable: true }) multiple: boolean = false;\n\n /* Value /\n @Prop({ mutable: true }) value: string \| string[] = \"\";\n private _value: string[] = [];\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string \| string[] = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /* Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /* Whether all chips are disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form ot hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n @State() activeFocusOptionIndex: number = 0;\n\n @Element() element: HTMLStzhChipselectElement;\n\n /* Change event /\n @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._value = JSON.parse(newValue);\n } catch(ex) {\n this._value = newValue ? [newValue] : [];\n }\n } else {\n this._value = newValue ? newValue : [];\n }\n }\n\n @Watch(\"data\")\n dataWatcher(newValue: StzhChipselectItem[] \| string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n } else {\n this._data = newValue;\n }\n\n // this._dataDropdown = this._data.map((data) => {\n // return {\n // text: data.counter\n // ? `${data.label} (${data.counter})`\n // : data.label,\n // value: data.value\n // }\n // });\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n private id: string;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => this.renderPromiseResolve = resolve);\n }\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // });\n }\n\n private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n if (this.multiple) {\n if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n this.value = [];\n } else if (data.value !== \"\") {\n this.value = this._value.includes(data.value)\n ? this._value.filter(value => value !== data.value)\n : [...this._value, data.value];\n }\n } else {\n this.value = [data.value]\n }\n\n this.activeFocusOptionIndex = index;\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.multiple ? this._value[0] : this._value\n })\n }\n\n // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n // this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n // this.activeFocusOptionIndex = this._data.findIndex(data => {\n // return data.value === this.value;\n // });\n\n // await this.waitForNextRender();\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // })\n // }\n\n private handleKeydown = (event: KeyboardEvent) => {\n let newActiveIndex: number = null;\n const activeOptionIndex = this.activeFocusOptionIndex;\n\n if (event.key === \"ArrowUp\" \|\| event.key === \"ArrowLeft\") {\n event.preventDefault();\n\n if (activeOptionIndex > 0) {\n newActiveIndex = activeOptionIndex - 1;\n }\n } else if (event.key === \"ArrowDown\" \|\| event.key === \"ArrowRight\") {\n event.preventDefault();\n\n if (activeOptionIndex < this._data.length - 1) {\n newActiveIndex = activeOptionIndex + 1;\n }\n } else if (event.key === \" \" \|\| event.key === \"Enter\") {\n event.preventDefault();\n this.value = this._data[activeOptionIndex].value;\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.value\n });\n }\n\n if (newActiveIndex !== null) {\n this.activeFocusOptionIndex = newActiveIndex;\n }\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n this.dataWatcher(this.data);\n this.errorWatcher(this.error);\n this.valueWatcher(this.value);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n }\n }\n\n render() {\n const descriptionUsed = !!this.description;\n const descriptionLongUsed = !!this.descriptionLong;\n const errorUsed = !!this.error;\n\n const classes = {\n \"stzh-chipselect\": true,\n \"stzh-chipselect--has-description\": descriptionUsed,\n \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n \"stzh-chipselect--has-error\": errorUsed,\n \"stzh-chipselect--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-chipselect--is-disabled\": this.disabled,\n \"stzh-chipselect--is-required\": this.required,\n \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n };\n\n return (\n <Host is-invalid={this.invalid \|\| errorUsed}>\n <div class={classes}>\n {this.multiple\n ?\n <Fragment>\n {this._value.map((value) =>\n <input type=\"hidden\" name={this.name} value={value} />\n )}\n </Fragment>\n :\n <input\n type=\"hidden\"\n name={this.name}\n value={this.value}\n />\n }\n\n <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional &&\n <span class=\"stzh-chipselect__marker\">\n <span class=\"stzh-chipselect__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker\n }\n </span>\n <span class=\"stzh-chipselect__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText\n }\n </span>\n </span>\n }\n </label>\n\n {this._data.length > 0 &&\n <Fragment>\n <div\n id={this.id}\n class=\"stzh-chipselect__chips\"\n role=\"listbox\"\n tabindex=\"0\"\n aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n onKeyDown={this.handleKeydown}\n >\n {this._data.map((data, index) => (\n <stzh-chip\n role=\"option\"\n class={{\n \"stzh-chipselect__chip\": true,\n \"is-focused\": this.activeFocusOptionIndex === index\n }}\n label={data.label}\n counter={data.counter}\n icon={data.icon}\n type={data.type}\n inverted={data.inverted}\n variant={data.variant}\n size={data.size \|\| \"small\"}\n disabled={this.disabled \|\| data.disabled}\n active={\n this._value.includes(data.value)\n \|\| (!data.value && this.multiple && (this._value.length === 0 \|\| (this._value.length === 1 && this._value[0] === \"\")))\n }\n aria-selected={\n this._value.includes(data.value)\n \|\| (!data.value && this.multiple && (this._value.length === 0 \|\| (this._value.length === 1 && this._value[0] === \"\")))\n ? \"true\" : \"false\"\n }\n id={`${this.id}-option-${index}`}\n a11yTabindex=\"-1\"\n onClick={() => this.handleChipClick(data, index)}\n ></stzh-chip>\n ))}\n </div>\n\n <StzhInputDescription\n classPrefix=\"stzh-chipselect\"\n id={`${this.id}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n\n {/ <stzh-dropdown\n class=\"stzh-chipselect__dropdown\"\n multiple={this.multiple}\n disabled={this.disabled}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n required={this.required}\n invalid={this.invalid}\n items={[this.value]}\n label={this.label}\n labelHidden={this.labelHidden}\n options={this._dataDropdown}\n hideOptional={this.hideOptional}\n onStzhChange={this.handleDropdownChange}\n ></stzh-dropdown> */}\n </Fragment>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/stzh-contact.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { d as defineCustomElement$4 } from './stzh-heading2.js';
 import { d as defineCustomElement$3 } from './stzh-icon2.js';
 import { d as defineCustomElement$2 } from './stzh-link2.js';
-const stzhContactCss = ".sc-stzh-contact-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-contact-h{display:none}.sc-stzh-contact-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-contact-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-contact-h *.sc-stzh-contact,.sc-stzh-contact-h *.sc-stzh-contact::before,.sc-stzh-contact-h *.sc-stzh-contact::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-contact-h .has-focus.sc-stzh-contact{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-contact-h .stzh-fylingfocus-focused.sc-stzh-contact{outline-style:none !important}.sc-stzh-contact-h .stzh-fylingfocus-focused.sc-stzh-contact::-moz-focus-inner{border:0 !important}.sc-stzh-contact-h{--grid-template-areas:var(\n    --stzh-contact-grid-template-areas,\n    \"heading heading heading heading\"\n    \"image image image image\"\n    \"info info info info\"\n    \"availability availability availability availability\"\n    \"additional additional additional additional\"\n  );--grid-template-columns:var(\n    --stzh-contact-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 900px){.sc-stzh-contact-h{--grid-template-areas:var(\n      --stzh-contact-grid-template-areas,\n      \"heading heading heading heading heading heading heading heading\"\n      \"image image image image . . . .\"\n      \"info info info info availability availability availability availability\"\n      \"additional additional additional additional additional additional additional additional\"\n    );--grid-template-columns:var(\n      --stzh-contact-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}@media print{.sc-stzh-contact-h{page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}}.sc-stzh-contact-h .sc-stzh-contact-s>[slot=image]{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.stzh-contact.sc-stzh-contact{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 900px){.stzh-contact.sc-stzh-contact{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-contact.sc-stzh-contact{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-contact.sc-stzh-contact{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-contact.sc-stzh-contact{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-contact.sc-stzh-contact{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-contact__main-heading.sc-stzh-contact{grid-area:heading}.stzh-contact__main-heading.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-contact__main-heading.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-contact__main-heading.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-large)}}.stzh-contact__image-wrapper.sc-stzh-contact{grid-area:image;background-color:var(--stzh-color-secondary20)}.stzh-contact__image.sc-stzh-contact{position:relative}.stzh-contact__info.sc-stzh-contact{grid-area:info}.stzh-contact__heading.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__name.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__address.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__numbers.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__emails.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__pobox.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__availability-title.sc-stzh-contact:not(:empty):not(:last-child){margin-bottom:var(--stzh-space-xsmall)}.stzh-contact__number.sc-stzh-contact,.stzh-contact__email.sc-stzh-contact{display:flex;align-items:center}.stzh-contact__heading.sc-stzh-contact,.stzh-contact__availability-title.sc-stzh-contact{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);margin:0px}@media screen and (min-width: 900px){.stzh-contact__heading.sc-stzh-contact,.stzh-contact__availability-title.sc-stzh-contact{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-contact__availability.sc-stzh-contact{grid-area:availability;margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-contact__availability.sc-stzh-contact{margin-top:0px}}.stzh-contact__availability-list.sc-stzh-contact,.stzh-contact__availability-hour-list.sc-stzh-contact{list-style:none;margin:0;padding:0}.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-xsmall);display:grid}@media screen and (min-width: 900px){.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-medium)}}.stzh-contact__availability-weekday.sc-stzh-contact{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height))}@media screen and (min-width: 900px){.stzh-contact__availability-weekday.sc-stzh-contact{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.stzh-contact__availability-hours.sc-stzh-contact{display:flex;flex-wrap:wrap;-moz-column-gap:var(--stzh-space-xsmall);column-gap:var(--stzh-space-xsmall)}.stzh-contact__availability-hours-separator.sc-stzh-contact{width:0.0625rem;background-color:currentColor;flex-shrink:0}.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-medium);grid-area:additional;display:grid}@media screen and (min-width: 600px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-xxlarge)}}.stzh-contact__additional.sc-stzh-contact:not(:empty){margin-top:var(--stzh-space-medium)}.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image-wrapper.sc-stzh-contact{margin-bottom:var(--stzh-space-medium)}.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:4rem;height:4rem}@media screen and (min-width: 600px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:5rem;height:5rem}}@media screen and (min-width: 900px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:6.25rem;height:6.25rem}}@media screen and (min-width: 1260px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:7.5rem;height:7.5rem}}@media screen and (min-width: 1600px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:8.75rem;height:8.75rem}}";
+const stzhContactCss = ".sc-stzh-contact-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-contact-h{display:none}.sc-stzh-contact-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-contact-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-contact-h *.sc-stzh-contact,.sc-stzh-contact-h *.sc-stzh-contact::before,.sc-stzh-contact-h *.sc-stzh-contact::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-contact-h .has-focus.sc-stzh-contact{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-contact-h .stzh-fylingfocus-focused.sc-stzh-contact{outline-style:none !important}.sc-stzh-contact-h .stzh-fylingfocus-focused.sc-stzh-contact::-moz-focus-inner{border:0 !important}.sc-stzh-contact-h{--grid-template-areas:var(\n    --stzh-contact-grid-template-areas,\n    \"heading heading heading heading\"\n    \"image image image image\"\n    \"info info info info\"\n    \"availability availability availability availability\"\n    \"additional additional additional additional\"\n  );--grid-template-columns:var(\n    --stzh-contact-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 900px){.sc-stzh-contact-h{--grid-template-areas:var(\n      --stzh-contact-grid-template-areas,\n      \"heading heading heading heading heading heading heading heading\"\n      \"image image image image . . . .\"\n      \"info info info info availability availability availability availability\"\n      \"additional additional additional additional additional additional additional additional\"\n    );--grid-template-columns:var(\n      --stzh-contact-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}@media print{.sc-stzh-contact-h{page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}}.sc-stzh-contact-h .sc-stzh-contact-s>[slot=image]{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.stzh-contact.sc-stzh-contact{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 900px){.stzh-contact.sc-stzh-contact{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-contact.sc-stzh-contact{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-contact.sc-stzh-contact{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-contact.sc-stzh-contact{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-contact.sc-stzh-contact{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-contact__main-heading.sc-stzh-contact{grid-area:heading}.stzh-contact__main-heading.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-contact__main-heading.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-contact__main-heading.sc-stzh-contact:not(:empty){margin-bottom:var(--stzh-space-large)}}.stzh-contact__image-wrapper.sc-stzh-contact{grid-area:image;background-color:var(--stzh-color-secondary20)}.stzh-contact__image.sc-stzh-contact{position:relative}.stzh-contact__info.sc-stzh-contact{grid-area:info}.stzh-contact__heading.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__name.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__address.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__numbers.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__emails.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__pobox.sc-stzh-contact:not(:empty):not(:last-child),.stzh-contact__availability-title.sc-stzh-contact:not(:empty):not(:last-child){margin-bottom:var(--stzh-space-xsmall)}.stzh-contact__number.sc-stzh-contact,.stzh-contact__email.sc-stzh-contact{display:flex;align-items:center}.stzh-contact__heading.sc-stzh-contact,.stzh-contact__name.sc-stzh-contact,.stzh-contact__availability-title.sc-stzh-contact{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);margin:0px}@media screen and (min-width: 900px){.stzh-contact__heading.sc-stzh-contact,.stzh-contact__name.sc-stzh-contact,.stzh-contact__availability-title.sc-stzh-contact{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-contact__heading.sc-stzh-contact,.stzh-contact__name.is-heading.sc-stzh-contact,.stzh-contact__availability-title.sc-stzh-contact{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-contact__availability.sc-stzh-contact{grid-area:availability;margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-contact__availability.sc-stzh-contact{margin-top:0px}}.stzh-contact__availability-list.sc-stzh-contact,.stzh-contact__availability-hour-list.sc-stzh-contact{list-style:none;margin:0;padding:0}.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-xsmall);display:grid}@media screen and (min-width: 900px){.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-contact__availability-list.sc-stzh-contact{gap:var(--stzh-space-medium)}}.stzh-contact__availability-weekday.sc-stzh-contact{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height))}@media screen and (min-width: 900px){.stzh-contact__availability-weekday.sc-stzh-contact{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.stzh-contact__availability-hours.sc-stzh-contact{display:flex;flex-wrap:wrap;-moz-column-gap:var(--stzh-space-xsmall);column-gap:var(--stzh-space-xsmall)}.stzh-contact__availability-hours-separator.sc-stzh-contact{width:0.0625rem;background-color:currentColor;flex-shrink:0}.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-medium);grid-area:additional;display:grid}@media screen and (min-width: 600px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-contact__additional.sc-stzh-contact{gap:var(--stzh-space-xxlarge)}}.stzh-contact__additional.sc-stzh-contact:not(:empty){margin-top:var(--stzh-space-medium)}.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image-wrapper.sc-stzh-contact{margin-bottom:var(--stzh-space-medium)}.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:4rem;height:4rem}@media screen and (min-width: 600px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:5rem;height:5rem}}@media screen and (min-width: 900px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:6.25rem;height:6.25rem}}@media screen and (min-width: 1260px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:7.5rem;height:7.5rem}}@media screen and (min-width: 1600px){.stzh-contact--has-image.sc-stzh-contact .stzh-contact__image.sc-stzh-contact{width:8.75rem;height:8.75rem}}";
 function formatTel(tel) {
   return tel.replace(/\s/g, '');
@@ -23,6 +23,7 @@ const StzhContact$1 = /*@__PURE__*/ proxyCustomElement(class StzhContact extends
     this.heading = undefined;
     this.headingLevel = "3";
     this.name = undefined;
+    this.nameHeadingLevel = "";
     this.address = undefined;
     this.street = undefined;
     this.streetInfo = undefined;
@@ -88,13 +89,17 @@ const StzhContact$1 = /*@__PURE__*/ proxyCustomElement(class StzhContact extends
       "stzh-contact--has-links": hasLinks
     };
     const HeadingLevel = `h${this.headingLevel}`;
+    const NameHeadingLevel = this.nameHeadingLevel ? `h${this.nameHeadingLevel}` : 'div';
     const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;
     return (h(Host, null, h("div", { class: classes, itemscope: true, itemtype: `http://schema.org/${this.type}` }, h("div", { class: "stzh-contact__main-heading", itemprop: (this.type === "Organization" && !this.heading
         || this.type === "Person" && !this.name) ? "name" : null }, this.mainHeading
       ? h("stzh-heading", { level: this.mainHeadingLevel }, this.mainHeading)
       : h("slot", { name: "main-heading" })), h("div", { class: "stzh-contact__image-wrapper" }, h("div", { class: "stzh-contact__image" }, h("slot", { name: "image" }))), h("div", { class: "stzh-contact__info" }, this.heading &&
       h(HeadingLevel, { class: "stzh-contact__heading", itemprop: this.type === "Organization" || !this.name ? "name" : null, innerHTML: this.heading }), this.name &&
-      h("div", { class: "stzh-contact__name", itemprop: this.type === "Person" ? "name" : null }, this.name), h("div", { class: "stzh-contact__address", itemprop: "address", itemscope: true, itemtype: "http://schema.org/PostalAddress", innerHTML: this.address }, !this.address &&
+      h(NameHeadingLevel, { class: {
+          "stzh-contact__name": true,
+          "is-heading": this.nameHeadingLevel !== "",
+        }, itemprop: this.type === "Person" ? "name" : null }, this.name), h("div", { class: "stzh-contact__address", itemprop: "address", itemscope: true, itemtype: "http://schema.org/PostalAddress", innerHTML: this.address }, !this.address &&
       h(Fragment, null, this.street &&
         h("div", { class: "stzh-contact__street", itemprop: "streetAddress" }, this.street, this.streetInfo &&
           h(Fragment, null, h("br", null), " ", this.streetInfo)), this.postalCode &&
@@ -134,6 +139,7 @@ const StzhContact$1 = /*@__PURE__*/ proxyCustomElement(class StzhContact extends
     "heading": [1],
     "headingLevel": [1, "heading-level"],
     "name": [1],
+    "nameHeadingLevel": [1, "name-heading-level"],
     "address": [1],
     "street": [1],
     "streetInfo": [1, "street-info"],

package/dist/components/stzh-contact.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-contact.js","mappings":"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","names":["StzhContact"],"sources":["src/components/stzh-contact/stzh-contact.scss?tag=stzh-contact&encapsulation=scoped","src/components/stzh-contact/stzh-contact.tsx"],"sourcesContent":[":host {\n --grid-template-areas: var(\n --stzh-contact-grid-template-areas,\n \"heading heading heading heading\"\n \"image image image image\"\n \"info info info info\"\n \"availability availability availability availability\"\n \"additional additional additional additional\"\n );\n\n --grid-template-columns: var(\n --stzh-contact-grid-template-columns,\n #{$gridColumns}\n );\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-contact-grid-template-areas,\n \"heading heading heading heading heading heading heading heading\"\n \"image image image image . . . .\"\n \"info info info info availability availability availability availability\"\n \"additional additional additional additional additional additional additional additional\"\n );\n\n --grid-template-columns: var(\n --stzh-contact-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n }\n\n ::slotted([slot=\"image\"]) {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n}\n\n.stzh-contact {\n @include fontCurve('p1');\n @include gridGutter;\n display: grid;\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n &__main-heading {\n grid-area: heading;\n\n &:not(:empty) {\n @include spaceCurve('margin-bottom', 'small');\n }\n }\n\n &__image-wrapper {\n grid-area: image;\n background-color: $colorSecondary20;\n }\n\n &__image {\n position: relative;\n }\n\n &__info {\n grid-area: info;\n }\n\n &__heading,\n &__name,\n &__address,\n &__numbers,\n &__emails,\n &__pobox,\n &__availability-title {\n &:not(:empty):not(:last-child) {\n margin-bottom: space('xsmall');\n }\n }\n\n &__number,\n &__email {\n display: flex;\n align-items: center;\n }\n\n &__heading,\n &__availability-title {\n @include font('heavy');\n @include fontCurve('p1');\n margin: 0px;\n }\n\n &__availability {\n grid-area: availability;\n margin-top: space('xlarge');\n\n @include mq($from: medium) {\n margin-top: 0px;\n }\n }\n\n &__availability-list,\n &__availability-hour-list {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n &__availability-list {\n @include spaceCurve('gap', 'tiny');\n display: grid;\n }\n\n &__availability-weekday {\n @include fontCurve('p2');\n }\n\n &__availability-hours {\n display: flex;\n flex-wrap: wrap;\n column-gap: space('xsmall');\n }\n\n &__availability-hours-separator {\n width: 1px;\n background-color: currentColor;\n flex-shrink: 0;\n }\n\n &__additional {\n @include spaceCurve('gap', 'regular');\n grid-area: additional;\n display: grid;\n\n &:not(:empty) {\n margin-top: space('medium');\n }\n }\n\n /* Has image /\n\n &--has-image &__image-wrapper {\n margin-bottom: space('medium');\n }\n\n &--has-image &__image {\n width: 64px;\n height: 64px;\n\n @include mq($from: small) {\n width: 80px;\n height: 80px;\n }\n\n @include mq($from: medium) {\n width: 100px;\n height: 100px;\n }\n\n @include mq($from: large) {\n width: 120px;\n height: 120px;\n }\n\n @include mq($from: ultra) {\n width: 140px;\n height: 140px;\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Fragment,\n Watch\n} from \"@stencil/core\";\n\nimport {\n ContactNumber,\n ContactEmail,\n StzhContactAvailabilityItem\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nfunction formatTel(tel: string) {\n return tel.replace(/\\s/g,'');\n}\n\n/\n @slot main-heading - slot for main heading\n * @slot image - slot for image\n * @slot address - slot for address (alternative for `address` property or separate properties `street`, `streetInfo`, `postalCode` & `location`)\n * @slot pobox - slot for pobox (alternative for `pobox` property or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`)\n * @slot slot for additional (e.g. accordion with contact form, map or datalist)\n /\n@Component({\n tag: \"stzh-contact\",\n styleUrl: \"stzh-contact.scss\",\n scoped: true\n})\nexport class StzhContact {\n /* Type /\n @Prop() type: \"Organization\" \| \"Person\" = \"Organization\";\n\n /* Main heading /\n @Prop() mainHeading: string;\n\n /* Main heading level /\n @Prop() mainHeadingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"2\";\n\n /* Heading /\n @Prop() heading: string;\n\n /* Heading level /\n @Prop() headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Name /\n @Prop() name: string;\n\n /* Address (alternative for address slot or separate properties `street`, `streetInfo`, `postalCode` & `location`) /\n @Prop() address: string;\n\n /* Street /\n @Prop() street: string;\n\n /* Additional street info /\n @Prop() streetInfo: string;\n\n /* Postal code /\n @Prop() postalCode: string;\n\n /* Location / city /\n @Prop() location: string;\n\n /\n Numbers\n * Array of objects that can include the attributes `type` = `tel`\|`fax`, `label`, `number`\n * and optionally `analyticsId` for setting `s-object-id` to the link element\n * (for Adobe Analytics, default value is `label` and `number`).\n /\n @Prop() numbers: ContactNumber[] \| string = [];\n private _numbers: ContactNumber[] = [];\n\n /\n Numbers\n * Array of objects that can include the attributes `label`, `number`, `text`, `href`\n * and optionally `analyticsId` for setting `s-object-id` to the link element\n * (for Adobe Analytics, default value is `label` and `text`).\n /\n @Prop() emails: ContactEmail[] \| string = [];\n private _emails: ContactEmail[] = [];\n\n /* Pobox (alternative for pobox slot or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`) /\n @Prop() pobox: string;\n\n /* Post office box heading /\n @Prop() poboxHeading: string;\n\n /* Post office box title /\n @Prop() poboxTitle: string;\n\n /* Post office box postal code /\n @Prop() poboxPostalCode: string;\n\n /* Post office box location / city /\n @Prop() poboxLocation: string;\n\n /* Availability title /\n @Prop() availabilityTitle: string;\n\n /* Availability title level /\n @Prop() availabilityTitleLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Availability times */\n @Prop() availability: string \| StzhContactAvailabilityItem[];\n private _availability: StzhContactAvailabilityItem[] = [];\n // private _availabilityDataItems: StzhDatalistItemEntry[] = [];\n\n @Watch(\"availability\")\n availabilityWatcher(newValue: string \| StzhContactAvailabilityItem[]) {\n if (typeof newValue === \"string\") {\n this._availability = JSON.parse(newValue);\n } else {\n this._availability = newValue;\n }\n\n // if (this._availability) {\n // this._availabilityDataItems = this._availability.map((item) => ({\n // value: item.hours.join(' \| '),\n // label: item.weekday\n // }));\n // }\n }\n\n @Watch(\"numbers\")\n numbersWatcher(newValue: ContactNumber[] \| string) {\n if (typeof newValue === \"string\") {\n this._numbers = JSON.parse(newValue);\n } else {\n this._numbers = newValue;\n }\n }\n\n @Watch(\"emails\")\n emailsWatcher(newValue: ContactEmail[] \| string) {\n if (typeof newValue === \"string\") {\n this._emails = JSON.parse(newValue);\n } else {\n this._emails = newValue;\n }\n }\n\n @Element() element: HTMLStzhFigureElement;\n\n async componentWillLoad() {\n this.numbersWatcher(this.numbers);\n this.emailsWatcher(this.emails);\n this.availabilityWatcher(this.availability);\n }\n\n render() {\n const hasImage = hasSlot(this.element, \"image\");\n const hasAddress = !!this.address \|\| hasSlot(this.element, \"address\");\n const hasAddons = hasSlot(this.element, \"addons\");\n const hasLinks = hasSlot(this.element, \"links\");\n\n const classes = {\n \"stzh-contact\": true,\n \"stzh-contact--has-image\": hasImage,\n \"stzh-contact--has-address\": hasAddress,\n \"stzh-contact--has-addons\": hasAddons,\n \"stzh-contact--has-links\": hasLinks\n };\n\n const HeadingLevel = `h${this.headingLevel}`;\n const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;\n\n return (\n <Host>\n <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n <div\n class=\"stzh-contact__main-heading\"\n itemprop={(this.type === \"Organization\" && !this.heading\n \|\| this.type === \"Person\" && !this.name) ? \"name\" : null}\n >\n {this.mainHeading\n ? <stzh-heading level={this.mainHeadingLevel}>{this.mainHeading}</stzh-heading>\n : <slot name=\"main-heading\"></slot>\n }\n </div>\n\n <div class=\"stzh-contact__image-wrapper\">\n <div class=\"stzh-contact__image\">\n <slot name=\"image\"></slot>\n </div>\n </div>\n\n <div class=\"stzh-contact__info\">\n {this.heading &&\n <HeadingLevel\n class=\"stzh-contact__heading\"\n itemprop={this.type === \"Organization\" \|\| !this.name ? \"name\" : null}\n innerHTML={this.heading}\n ></HeadingLevel>\n }\n\n {this.name &&\n <div\n class=\"stzh-contact__name\"\n itemprop={this.type === \"Person\" ? \"name\" : null}\n >\n {this.name}\n </div>\n }\n\n <div\n class=\"stzh-contact__address\"\n itemprop=\"address\"\n itemscope\n itemtype=\"http://schema.org/PostalAddress\"\n innerHTML={this.address}\n >\n {!this.address &&\n <Fragment>\n {this.street &&\n <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n {this.street}\n {this.streetInfo &&\n <Fragment>\n <br /> {this.streetInfo}\n </Fragment>\n }\n </div>\n }\n\n {this.postalCode &&\n <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n {this.postalCode} \n </span>\n }\n\n {this.location &&\n <span class=\"stzh-contact__locality\" itemprop=\"addressLocality\">\n {this.location}\n </span>\n }\n\n <slot name=\"address\"></slot>\n </Fragment>\n }\n </div>\n\n {this._numbers.length > 0 &&\n <div class=\"stzh-contact__numbers\">\n {this._numbers.map((number) =>\n <div class=\"stzh-contact__number\">\n <span>{number.label} </span>\n <stzh-link\n size=\"inherit\"\n height=\"auto\"\n class=\"stzh-contact__number-link\"\n href={`${number.type}:${formatTel(number.number)}`}\n analyticsId={number.analyticsId \|\| (`${number.label} ${number.number}`)}\n itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}\n >\n {number.number}\n </stzh-link>\n </div>\n )}\n </div>\n }\n\n {this._emails.length > 0 &&\n <div class=\"stzh-contact__emails\">\n {this._emails.map((email) =>\n <div class=\"stzh-contact__email\">\n <span>{email.label} </span>\n {email.href\n ?\n <stzh-link\n size=\"inherit\"\n height=\"auto\"\n class=\"stzh-container__email-link\"\n href={`mailto:${email.href}`}\n analyticsId={email.analyticsId \|\| (`${email.label} ${email.text}`)}\n itemprop=\"email\"\n >\n {email.text}\n </stzh-link>\n :\n <span\n class=\"stzh-container__email-link\"\n itemprop=\"email\"\n >\n {email.text}\n </span>\n }\n </div>\n )}\n </div>\n }\n\n <div\n class=\"stzh-contact__pobox\"\n innerHTML={this.pobox}\n >\n {!this.pobox &&\n <Fragment>\n {this.poboxHeading &&\n <div class=\"stzh-contact__pobox-heading\">{this.poboxHeading}</div>\n }\n {this.poboxTitle &&\n <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>\n }\n {this.poboxPostalCode &&\n <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode} </span>\n }\n {this.poboxLocation &&\n <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>\n }\n <slot name=\"pobox\"></slot>\n </Fragment>\n }\n </div>\n </div>\n\n {this.availability &&\n <div class=\"stzh-contact__availability\">\n {this.availabilityTitle &&\n <AvailabilityTitleElement\n class=\"stzh-contact__availability-title\"\n >\n {this.availabilityTitle}\n </AvailabilityTitleElement>\n }\n\n {this._availability.length > 0 &&\n <ul class=\"stzh-contact__availability-list\">\n {this._availability.map((item) =>\n <li class=\"stzh-contact__availability-list-item\">\n <div class=\"stzh-contact__availability-weekday\">{item.weekday}</div>\n {item.hours.length > 0\n ?\n <div class=\"stzh-contact__availability-hours\">\n {item.hours.map((hour, index) =>\n <Fragment>\n <div class=\"stzh-contact__availability-hour\">{hour}</div>\n {index < item.hours.length - 1 &&\n <div class=\"stzh-contact__availability-hours-separator\"></div>\n }\n </Fragment>\n )}\n </div>\n :\n <div class=\"stzh-contact__availability-hours\">\n -\n </div>\n }\n </li>\n )}\n </ul>\n }\n </div>\n }\n\n <div class=\"stzh-contact__additional\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-contact.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,m2RAAm2R;;ACkB13R,SAAS,SAAS,CAAC,GAAW;EAC5B,OAAO,GAAG,CAAC,OAAO,CAAC,KAAK,EAAC,EAAE,CAAC,CAAC;AAC/B,CAAC;MAcYA,aAAW;;;;IA4Cd,aAAQ,GAAoB,EAAE,CAAC;IAS/B,YAAO,GAAmB,EAAE,CAAC;IAyB7B,kBAAa,GAAkC,EAAE,CAAC;gBA5EhB,cAAc;;4BAMN,GAAG;;wBAMP,GAAG;;4BAMM,EAAE;;;;;;mBAuBb,EAAE;kBASJ,EAAE;;;;;;;kCAsBY,GAAG;;;;EAQ3D,mBAAmB,CAAC,QAAgD;IAClE,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KAC3C;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;;;;;;;GAQF;EAGD,cAAc,CAAC,QAAkC;IAC/C,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACtC;SAAM;MACL,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;KAC1B;GACF;EAGD,aAAa,CAAC,QAAiC;IAC7C,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACrC;SAAM;MACL,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;KACzB;GACF;EAID,MAAM,iBAAiB;IACrB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GAC7C;EAED,MAAM;IACJ,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAChD,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACtE,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,yBAAyB,EAAE,QAAQ;MACnC,2BAA2B,EAAE,UAAU;MACvC,0BAA0B,EAAE,SAAS;MACrC,yBAAyB,EAAE,QAAQ;KACpC,CAAC;IAEF,MAAM,YAAY,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;IAC7C,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,IAAI,CAAC,gBAAgB,EAAE,GAAG,KAAK,CAAC;IACrF,MAAM,wBAAwB,GAAG,IAAI,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAEnE,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,EAAE,SAAS,QAAC,QAAQ,EAAE,qBAAqB,IAAI,CAAC,IAAI,EAAE,IACvE,WACE,KAAK,EAAC,4BAA4B,EAClC,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,CAAC,IAAI,CAAC,OAAO;WACnD,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,IAAI,IAEzD,IAAI,CAAC,WAAW;QACb,oBAAc,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAG,IAAI,CAAC,WAAW,CAAgB;QAC7E,YAAM,IAAI,EAAC,cAAc,GAAQ,CAEjC,EAEN,WAAK,KAAK,EAAC,6BAA6B,IACtC,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,EAEN,WAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,OAAO;MACX,EAAC,YAAY,IACX,KAAK,EAAC,uBAAuB,EAC7B,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,IAAI,EACpE,SAAS,EAAE,IAAI,CAAC,OAAO,GACT,EAGjB,IAAI,CAAC,IAAI;MACR,EAAC,gBAAgB,IACf,KAAK,EAAE;UACL,oBAAoB,EAAE,IAAI;UAC1B,YAAY,EAAE,IAAI,CAAC,gBAAgB,KAAK,EAAE;SAC3C,EACD,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,MAAM,GAAG,IAAI,IAE/C,IAAI,CAAC,IAAI,CACO,EAGrB,WACE,KAAK,EAAC,uBAAuB,EAC7B,QAAQ,EAAC,SAAS,EAClB,SAAS,QACT,QAAQ,EAAC,iCAAiC,EAC1C,SAAS,EAAE,IAAI,CAAC,OAAO,IAEtB,CAAC,IAAI,CAAC,OAAO;MACZ,EAAC,QAAQ,QACN,IAAI,CAAC,MAAM;QACV,WAAK,KAAK,EAAC,sBAAsB,EAAC,QAAQ,EAAC,eAAe,IACvD,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,UAAU;UACd,EAAC,QAAQ,QACP,aAAM,OAAE,IAAI,CAAC,UAAU,CACd,CAET,EAGP,IAAI,CAAC,UAAU;QACd,YAAM,KAAK,EAAC,2BAA2B,EAAC,QAAQ,EAAC,YAAY,IAC1D,IAAI,CAAC,UAAU,WACX,EAGR,IAAI,CAAC,QAAQ;QACZ,YAAM,KAAK,EAAC,wBAAwB,EAAC,QAAQ,EAAC,iBAAiB,IAC5D,IAAI,CAAC,QAAQ,CACT,EAGT,YAAM,IAAI,EAAC,SAAS,GAAQ,CACnB,CAET,EAEL,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;MACvB,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,MAAM,KACxB,WAAK,KAAK,EAAC,sBAAsB,IAC/B,gBAAO,MAAM,CAAC,KAAK,WAAc,EACjC,iBACE,IAAI,EAAC,SAAS,EACd,MAAM,EAAC,MAAM,EACb,KAAK,EAAC,2BAA2B,EACjC,IAAI,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAClD,WAAW,EAAE,MAAM,CAAC,WAAW,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC,EACvE,QAAQ,EAAE,MAAM,CAAC,IAAI,KAAK,KAAK,GAAG,WAAW,GAAG,WAAW,IAE1D,MAAM,CAAC,MAAM,CACJ,CACR,CACP,CACG,EAGP,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;MACtB,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,KACtB,WAAK,KAAK,EAAC,qBAAqB,IAC9B,gBAAO,KAAK,CAAC,KAAK,WAAc,EAC/B,KAAK,CAAC,IAAI;;UAET,iBACE,IAAI,EAAC,SAAS,EACd,MAAM,EAAC,MAAM,EACb,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAE,UAAU,KAAK,CAAC,IAAI,EAAE,EAC5B,WAAW,EAAE,KAAK,CAAC,WAAW,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,EAClE,QAAQ,EAAC,OAAO,IAEf,KAAK,CAAC,IAAI,CACD;;UAEZ,YACE,KAAK,EAAC,4BAA4B,EAClC,QAAQ,EAAC,OAAO,IAEf,KAAK,CAAC,IAAI,CACN,CAEL,CACP,CACG,EAGR,WACE,KAAK,EAAC,qBAAqB,EAC3B,SAAS,EAAE,IAAI,CAAC,KAAK,IAEpB,CAAC,IAAI,CAAC,KAAK;MACV,EAAC,QAAQ,QACN,IAAI,CAAC,YAAY;QAChB,WAAK,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,YAAY,CAAO,EAEnE,IAAI,CAAC,UAAU;QACd,WAAK,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,UAAU,CAAO,EAE/D,IAAI,CAAC,eAAe;QACnB,YAAM,KAAK,EAAC,iCAAiC,IAAE,IAAI,CAAC,eAAe,WAAc,EAElF,IAAI,CAAC,aAAa;QACjB,YAAM,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,aAAa,CAAQ,EAExE,YAAM,IAAI,EAAC,OAAO,GAAQ,CACjB,CAET,CACF,EAEL,IAAI,CAAC,YAAY;MAChB,WAAK,KAAK,EAAC,4BAA4B,IACpC,IAAI,CAAC,iBAAiB;QACrB,EAAC,wBAAwB,IACvB,KAAK,EAAC,kCAAkC,IAEvC,IAAI,CAAC,iBAAiB,CACE,EAG5B,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC;QAC5B,UAAI,KAAK,EAAC,iCAAiC,IACxC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,KAC3B,UAAI,KAAK,EAAC,sCAAsC,IAC9C,WAAK,KAAK,EAAC,oCAAoC,IAAE,IAAI,CAAC,OAAO,CAAO,EACnE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;;YAEpB,WAAK,KAAK,EAAC,kCAAkC,IAC1C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAC1B,EAAC,QAAQ,QACP,WAAK,KAAK,EAAC,iCAAiC,IAAE,IAAI,CAAO,EACxD,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;cAC5B,WAAK,KAAK,EAAC,4CAA4C,GAAO,CAEvD,CACZ,CACG;;YAEN,WAAK,KAAK,EAAC,kCAAkC,QAEvC,CAEL,CACN,CACE,CAEH,EAGR,WAAK,KAAK,EAAC,0BAA0B,IACnC,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhContact"],"sources":["src/components/stzh-contact/stzh-contact.scss?tag=stzh-contact&encapsulation=scoped","src/components/stzh-contact/stzh-contact.tsx"],"sourcesContent":[":host {\n --grid-template-areas: var(\n --stzh-contact-grid-template-areas,\n \"heading heading heading heading\"\n \"image image image image\"\n \"info info info info\"\n \"availability availability availability availability\"\n \"additional additional additional additional\"\n );\n\n --grid-template-columns: var(\n --stzh-contact-grid-template-columns,\n #{$gridColumns}\n );\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-contact-grid-template-areas,\n \"heading heading heading heading heading heading heading heading\"\n \"image image image image . . . .\"\n \"info info info info availability availability availability availability\"\n \"additional additional additional additional additional additional additional additional\"\n );\n\n --grid-template-columns: var(\n --stzh-contact-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n }\n\n ::slotted([slot=\"image\"]) {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n}\n\n.stzh-contact {\n @include fontCurve('p1');\n @include gridGutter;\n display: grid;\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n &__main-heading {\n grid-area: heading;\n\n &:not(:empty) {\n @include spaceCurve('margin-bottom', 'small');\n }\n }\n\n &__image-wrapper {\n grid-area: image;\n background-color: $colorSecondary20;\n }\n\n &__image {\n position: relative;\n }\n\n &__info {\n grid-area: info;\n }\n\n &__heading,\n &__name,\n &__address,\n &__numbers,\n &__emails,\n &__pobox,\n &__availability-title {\n &:not(:empty):not(:last-child) {\n margin-bottom: space('xsmall');\n }\n }\n\n &__number,\n &__email {\n display: flex;\n align-items: center;\n }\n\n &__heading,\n &__name,\n &__availability-title {\n @include fontCurve('p1');\n margin: 0px;\n }\n\n &__heading,\n &__name.is-heading,\n &__availability-title {\n @include font('heavy');\n }\n\n &__availability {\n grid-area: availability;\n margin-top: space('xlarge');\n\n @include mq($from: medium) {\n margin-top: 0px;\n }\n }\n\n &__availability-list,\n &__availability-hour-list {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n &__availability-list {\n @include spaceCurve('gap', 'tiny');\n display: grid;\n }\n\n &__availability-weekday {\n @include fontCurve('p2');\n }\n\n &__availability-hours {\n display: flex;\n flex-wrap: wrap;\n column-gap: space('xsmall');\n }\n\n &__availability-hours-separator {\n width: 1px;\n background-color: currentColor;\n flex-shrink: 0;\n }\n\n &__additional {\n @include spaceCurve('gap', 'regular');\n grid-area: additional;\n display: grid;\n\n &:not(:empty) {\n margin-top: space('medium');\n }\n }\n\n /* Has image /\n\n &--has-image &__image-wrapper {\n margin-bottom: space('medium');\n }\n\n &--has-image &__image {\n width: 64px;\n height: 64px;\n\n @include mq($from: small) {\n width: 80px;\n height: 80px;\n }\n\n @include mq($from: medium) {\n width: 100px;\n height: 100px;\n }\n\n @include mq($from: large) {\n width: 120px;\n height: 120px;\n }\n\n @include mq($from: ultra) {\n width: 140px;\n height: 140px;\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Fragment,\n Watch\n} from \"@stencil/core\";\n\nimport {\n ContactNumber,\n ContactEmail,\n StzhContactAvailabilityItem\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nfunction formatTel(tel: string) {\n return tel.replace(/\\s/g,'');\n}\n\n/\n @slot main-heading - slot for main heading\n * @slot image - slot for image\n * @slot address - slot for address (alternative for `address` property or separate properties `street`, `streetInfo`, `postalCode` & `location`)\n * @slot pobox - slot for pobox (alternative for `pobox` property or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`)\n * @slot slot for additional (e.g. accordion with contact form, map or datalist)\n /\n@Component({\n tag: \"stzh-contact\",\n styleUrl: \"stzh-contact.scss\",\n scoped: true\n})\nexport class StzhContact {\n /* Type /\n @Prop() type: \"Organization\" \| \"Person\" = \"Organization\";\n\n /* Main heading /\n @Prop() mainHeading: string;\n\n /* Main heading level /\n @Prop() mainHeadingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"2\";\n\n /* Heading /\n @Prop() heading: string;\n\n /* Heading level /\n @Prop() headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Name /\n @Prop() name: string;\n\n /* Name heading level /\n @Prop() nameHeadingLevel: \"\" \| \"1\" \| \"2\" \| \"3\" \| \"4\" = \"\";\n\n /* Address (alternative for address slot or separate properties `street`, `streetInfo`, `postalCode` & `location`) /\n @Prop() address: string;\n\n /* Street /\n @Prop() street: string;\n\n /* Additional street info /\n @Prop() streetInfo: string;\n\n /* Postal code /\n @Prop() postalCode: string;\n\n /* Location / city /\n @Prop() location: string;\n\n /\n Numbers\n * Array of objects that can include the attributes `type` = `tel`\|`fax`, `label`, `number`\n * and optionally `analyticsId` for setting `s-object-id` to the link element\n * (for Adobe Analytics, default value is `label` and `number`).\n /\n @Prop() numbers: ContactNumber[] \| string = [];\n private _numbers: ContactNumber[] = [];\n\n /\n Numbers\n * Array of objects that can include the attributes `label`, `number`, `text`, `href`\n * and optionally `analyticsId` for setting `s-object-id` to the link element\n * (for Adobe Analytics, default value is `label` and `text`).\n /\n @Prop() emails: ContactEmail[] \| string = [];\n private _emails: ContactEmail[] = [];\n\n /* Pobox (alternative for pobox slot or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`) /\n @Prop() pobox: string;\n\n /* Post office box heading /\n @Prop() poboxHeading: string;\n\n /* Post office box title /\n @Prop() poboxTitle: string;\n\n /* Post office box postal code /\n @Prop() poboxPostalCode: string;\n\n /* Post office box location / city /\n @Prop() poboxLocation: string;\n\n /* Availability title /\n @Prop() availabilityTitle: string;\n\n /* Availability title level /\n @Prop() availabilityTitleLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* Availability times */\n @Prop() availability: string \| StzhContactAvailabilityItem[];\n private _availability: StzhContactAvailabilityItem[] = [];\n // private _availabilityDataItems: StzhDatalistItemEntry[] = [];\n\n @Watch(\"availability\")\n availabilityWatcher(newValue: string \| StzhContactAvailabilityItem[]) {\n if (typeof newValue === \"string\") {\n this._availability = JSON.parse(newValue);\n } else {\n this._availability = newValue;\n }\n\n // if (this._availability) {\n // this._availabilityDataItems = this._availability.map((item) => ({\n // value: item.hours.join(' \| '),\n // label: item.weekday\n // }));\n // }\n }\n\n @Watch(\"numbers\")\n numbersWatcher(newValue: ContactNumber[] \| string) {\n if (typeof newValue === \"string\") {\n this._numbers = JSON.parse(newValue);\n } else {\n this._numbers = newValue;\n }\n }\n\n @Watch(\"emails\")\n emailsWatcher(newValue: ContactEmail[] \| string) {\n if (typeof newValue === \"string\") {\n this._emails = JSON.parse(newValue);\n } else {\n this._emails = newValue;\n }\n }\n\n @Element() element: HTMLStzhFigureElement;\n\n async componentWillLoad() {\n this.numbersWatcher(this.numbers);\n this.emailsWatcher(this.emails);\n this.availabilityWatcher(this.availability);\n }\n\n render() {\n const hasImage = hasSlot(this.element, \"image\");\n const hasAddress = !!this.address \|\| hasSlot(this.element, \"address\");\n const hasAddons = hasSlot(this.element, \"addons\");\n const hasLinks = hasSlot(this.element, \"links\");\n\n const classes = {\n \"stzh-contact\": true,\n \"stzh-contact--has-image\": hasImage,\n \"stzh-contact--has-address\": hasAddress,\n \"stzh-contact--has-addons\": hasAddons,\n \"stzh-contact--has-links\": hasLinks\n };\n\n const HeadingLevel = `h${this.headingLevel}`;\n const NameHeadingLevel = this.nameHeadingLevel ? `h${this.nameHeadingLevel}` : 'div';\n const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;\n\n return (\n <Host>\n <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n <div\n class=\"stzh-contact__main-heading\"\n itemprop={(this.type === \"Organization\" && !this.heading\n \|\| this.type === \"Person\" && !this.name) ? \"name\" : null}\n >\n {this.mainHeading\n ? <stzh-heading level={this.mainHeadingLevel}>{this.mainHeading}</stzh-heading>\n : <slot name=\"main-heading\"></slot>\n }\n </div>\n\n <div class=\"stzh-contact__image-wrapper\">\n <div class=\"stzh-contact__image\">\n <slot name=\"image\"></slot>\n </div>\n </div>\n\n <div class=\"stzh-contact__info\">\n {this.heading &&\n <HeadingLevel\n class=\"stzh-contact__heading\"\n itemprop={this.type === \"Organization\" \|\| !this.name ? \"name\" : null}\n innerHTML={this.heading}\n ></HeadingLevel>\n }\n\n {this.name &&\n <NameHeadingLevel\n class={{\n \"stzh-contact__name\": true,\n \"is-heading\": this.nameHeadingLevel !== \"\",\n }}\n itemprop={this.type === \"Person\" ? \"name\" : null}\n >\n {this.name}\n </NameHeadingLevel>\n }\n\n <div\n class=\"stzh-contact__address\"\n itemprop=\"address\"\n itemscope\n itemtype=\"http://schema.org/PostalAddress\"\n innerHTML={this.address}\n >\n {!this.address &&\n <Fragment>\n {this.street &&\n <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n {this.street}\n {this.streetInfo &&\n <Fragment>\n <br /> {this.streetInfo}\n </Fragment>\n }\n </div>\n }\n\n {this.postalCode &&\n <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n {this.postalCode} \n </span>\n }\n\n {this.location &&\n <span class=\"stzh-contact__locality\" itemprop=\"addressLocality\">\n {this.location}\n </span>\n }\n\n <slot name=\"address\"></slot>\n </Fragment>\n }\n </div>\n\n {this._numbers.length > 0 &&\n <div class=\"stzh-contact__numbers\">\n {this._numbers.map((number) =>\n <div class=\"stzh-contact__number\">\n <span>{number.label} </span>\n <stzh-link\n size=\"inherit\"\n height=\"auto\"\n class=\"stzh-contact__number-link\"\n href={`${number.type}:${formatTel(number.number)}`}\n analyticsId={number.analyticsId \|\| (`${number.label} ${number.number}`)}\n itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}\n >\n {number.number}\n </stzh-link>\n </div>\n )}\n </div>\n }\n\n {this._emails.length > 0 &&\n <div class=\"stzh-contact__emails\">\n {this._emails.map((email) =>\n <div class=\"stzh-contact__email\">\n <span>{email.label} </span>\n {email.href\n ?\n <stzh-link\n size=\"inherit\"\n height=\"auto\"\n class=\"stzh-container__email-link\"\n href={`mailto:${email.href}`}\n analyticsId={email.analyticsId \|\| (`${email.label} ${email.text}`)}\n itemprop=\"email\"\n >\n {email.text}\n </stzh-link>\n :\n <span\n class=\"stzh-container__email-link\"\n itemprop=\"email\"\n >\n {email.text}\n </span>\n }\n </div>\n )}\n </div>\n }\n\n <div\n class=\"stzh-contact__pobox\"\n innerHTML={this.pobox}\n >\n {!this.pobox &&\n <Fragment>\n {this.poboxHeading &&\n <div class=\"stzh-contact__pobox-heading\">{this.poboxHeading}</div>\n }\n {this.poboxTitle &&\n <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>\n }\n {this.poboxPostalCode &&\n <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode} </span>\n }\n {this.poboxLocation &&\n <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>\n }\n <slot name=\"pobox\"></slot>\n </Fragment>\n }\n </div>\n </div>\n\n {this.availability &&\n <div class=\"stzh-contact__availability\">\n {this.availabilityTitle &&\n <AvailabilityTitleElement\n class=\"stzh-contact__availability-title\"\n >\n {this.availabilityTitle}\n </AvailabilityTitleElement>\n }\n\n {this._availability.length > 0 &&\n <ul class=\"stzh-contact__availability-list\">\n {this._availability.map((item) =>\n <li class=\"stzh-contact__availability-list-item\">\n <div class=\"stzh-contact__availability-weekday\">{item.weekday}</div>\n {item.hours.length > 0\n ?\n <div class=\"stzh-contact__availability-hours\">\n {item.hours.map((hour, index) =>\n <Fragment>\n <div class=\"stzh-contact__availability-hour\">{hour}</div>\n {index < item.hours.length - 1 &&\n <div class=\"stzh-contact__availability-hours-separator\"></div>\n }\n </Fragment>\n )}\n </div>\n :\n <div class=\"stzh-contact__availability-hours\">\n -\n </div>\n }\n </li>\n )}\n </ul>\n }\n </div>\n }\n\n <div class=\"stzh-contact__additional\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}