@oiz/stzh-components 0.0.1-pretest → 1.4.0-npmjstest

package/dist/components/stzh-overlay.js

@@ -3,114 +3,114 @@ import { c as createFocusTrap } from './focus-trap.esm.js';
 
 const stzhOverlayCss = ".sc-stzh-overlay-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-overlay-h{display:none}.sc-stzh-overlay-h *.sc-stzh-overlay,.sc-stzh-overlay-h *.sc-stzh-overlay::before,.sc-stzh-overlay-h *.sc-stzh-overlay::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-overlay.sc-stzh-overlay{display:none;z-index:var(--stzh-z-index-overlay);position:fixed;top:0;left:0;width:100%;height:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:stretch;justify-content:stretch;-ms-flex-align:stretch;align-items:stretch}.stzh-overlay__backdrop.sc-stzh-overlay{z-index:1;background-color:var(--stzh-color-white);opacity:0.95;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-overlay__content.sc-stzh-overlay{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;position:relative;-ms-flex-positive:1;flex-grow:1;overflow:auto}.stzh-overlay__content-inner.sc-stzh-overlay{margin-top:auto;margin-bottom:auto;outline:none}.stzh-overlay--is-open.sc-stzh-overlay{display:-ms-flexbox;display:flex}";
 
-const CLASS_BODY_OPEN = "stzh-overlay-open";
-const StzhOverlay$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.stzhOpen = createEvent(this, "stzhOpen", 7);
-    this.stzhClose = createEvent(this, "stzhClose", 7);
-    /** Whether overlay is open */
-    this.open = false;
-    /** Stay in original position (true) or move to body (false) */
-    this.stay = true;
-    /** Accessible label for dialog */
-    this.a11yLabel = "";
-  }
-  async show() {
-    this.open = true;
-    this.stzhOpen.emit({
-      component: "stzh-overlay"
-    });
-  }
-  async hide() {
-    this.open = false;
-    this.stzhClose.emit({
-      component: "stzh-overlay"
-    });
-  }
-  getSiblings() {
-    if (!this.parentElement) {
-      return [];
-    }
-    return Array.from(this.parentElement.children).filter((child) => child !== this.element);
-  }
-  disableSiblings() {
-    this.getSiblings().forEach((sibling) => {
-      sibling.setAttribute("aria-hidden", "true");
-    });
-  }
-  enableSiblings() {
-    this.getSiblings().forEach((sibling) => {
-      sibling.removeAttribute("aria-hidden");
-    });
-  }
-  dialogShown() {
-    document.body.classList.add(CLASS_BODY_OPEN);
-    this.disableSiblings();
-    if (this.trap) {
-      this.trap.activate();
-    }
-  }
-  dialogHidden() {
-    document.body.classList.remove(CLASS_BODY_OPEN);
-    this.enableSiblings();
-    if (this.trap) {
-      this.trap.deactivate();
-    }
-  }
-  connectedCallback() {
-    if (!this.stay && this.element.parentElement !== document.body) {
-      document.body.appendChild(this.element);
-    }
-    this.parentElement = this.element.parentElement;
-  }
-  componentDidRender() {
-    this.open ? this.dialogShown() : this.dialogHidden();
-  }
-  componentDidUpdate() {
-    this.trap.updateContainerElements(this.element);
-  }
-  componentDidLoad() {
-    this.trap = createFocusTrap(this.element, {
-      fallbackFocus: this.dialogElement,
-      returnFocusOnDeactivate: true
-    });
-    if (this.open) {
-      this.dialogShown();
-    }
-  }
-  disconnectedCallback() {
-    this.dialogHidden();
-  }
-  render() {
-    const classes = {
-      "stzh-overlay": true,
-      "stzh-overlay--is-open": this.open
-    };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-overlay__backdrop" }), h("div", { class: "stzh-overlay__content" }, h("div", { class: "stzh-overlay__content-inner", ref: (el) => (this.dialogElement = el), tabindex: "-1", role: "dialog", "aria-label": this.a11yLabel, "aria-hidden": this.open ? "false" : "true" }, h("slot", null))))));
-  }
-  get element() { return this; }
-  static get style() { return stzhOverlayCss; }
-}, [6, "stzh-overlay", {
-    "open": [1028],
-    "stay": [4],
-    "a11yLabel": [1, "a11y-label"],
-    "show": [64],
-    "hide": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["stzh-overlay"];
-  components.forEach(tagName => { switch (tagName) {
-    case "stzh-overlay":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StzhOverlay$1);
-      }
-      break;
-  } });
+const CLASS_BODY_OPEN = "stzh-overlay-open";
+const StzhOverlay$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.stzhOpen = createEvent(this, "stzhOpen", 7);
+    this.stzhClose = createEvent(this, "stzhClose", 7);
+    /** Whether overlay is open */
+    this.open = false;
+    /** Stay in original position (true) or move to body (false) */
+    this.stay = true;
+    /** Accessible label for dialog */
+    this.a11yLabel = "";
+  }
+  async show() {
+    this.open = true;
+    this.stzhOpen.emit({
+      component: "stzh-overlay"
+    });
+  }
+  async hide() {
+    this.open = false;
+    this.stzhClose.emit({
+      component: "stzh-overlay"
+    });
+  }
+  getSiblings() {
+    if (!this.parentElement) {
+      return [];
+    }
+    return Array.from(this.parentElement.children).filter((child) => child !== this.element);
+  }
+  disableSiblings() {
+    this.getSiblings().forEach((sibling) => {
+      sibling.setAttribute("aria-hidden", "true");
+    });
+  }
+  enableSiblings() {
+    this.getSiblings().forEach((sibling) => {
+      sibling.removeAttribute("aria-hidden");
+    });
+  }
+  dialogShown() {
+    document.body.classList.add(CLASS_BODY_OPEN);
+    this.disableSiblings();
+    if (this.trap) {
+      this.trap.activate();
+    }
+  }
+  dialogHidden() {
+    document.body.classList.remove(CLASS_BODY_OPEN);
+    this.enableSiblings();
+    if (this.trap) {
+      this.trap.deactivate();
+    }
+  }
+  connectedCallback() {
+    if (!this.stay && this.element.parentElement !== document.body) {
+      document.body.appendChild(this.element);
+    }
+    this.parentElement = this.element.parentElement;
+  }
+  componentDidRender() {
+    this.open ? this.dialogShown() : this.dialogHidden();
+  }
+  componentDidUpdate() {
+    this.trap.updateContainerElements(this.element);
+  }
+  componentDidLoad() {
+    this.trap = createFocusTrap(this.element, {
+      fallbackFocus: this.dialogElement,
+      returnFocusOnDeactivate: true
+    });
+    if (this.open) {
+      this.dialogShown();
+    }
+  }
+  disconnectedCallback() {
+    this.dialogHidden();
+  }
+  render() {
+    const classes = {
+      "stzh-overlay": true,
+      "stzh-overlay--is-open": this.open
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-overlay__backdrop" }), h("div", { class: "stzh-overlay__content" }, h("div", { class: "stzh-overlay__content-inner", ref: (el) => (this.dialogElement = el), tabindex: "-1", role: "dialog", "aria-label": this.a11yLabel, "aria-hidden": this.open ? "false" : "true" }, h("slot", null))))));
+  }
+  get element() { return this; }
+  static get style() { return stzhOverlayCss; }
+}, [6, "stzh-overlay", {
+    "open": [1028],
+    "stay": [4],
+    "a11yLabel": [1, "a11y-label"],
+    "show": [64],
+    "hide": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-overlay"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-overlay":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhOverlay$1);
+      }
+      break;
+  } });
 }
 
 const StzhOverlay = StzhOverlay$1;

package/dist/components/stzh-page-skiplinks.js

@@ -2,46 +2,46 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const stzhPageSkiplinksCss = ".sc-stzh-page-skiplinks-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-page-skiplinks-h{display:none}.sc-stzh-page-skiplinks-h *.sc-stzh-page-skiplinks,.sc-stzh-page-skiplinks-h *.sc-stzh-page-skiplinks::before,.sc-stzh-page-skiplinks-h *.sc-stzh-page-skiplinks::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-page-skiplinks-h{z-index:var(--stzh-z-index-popup);position:absolute;top:var(--stzh-space-medium);right:var(--stzh-grid-gutter-small)}@media screen and (min-width: 800px){.sc-stzh-page-skiplinks-h{right:50%}}@media screen and (min-width: 1260px){.sc-stzh-page-skiplinks-h{top:var(--stzh-space-xlarge);right:60%}}";
 
-const StzhPageSkiplinks$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.init = () => {
-      const links = this.element.querySelectorAll('stzh-skiplink');
-      links.forEach((link) => {
-        link.setAttribute("role", "listitem");
-      });
-    };
-  }
-  connectedCallback() {
-    this.init();
-    this.observer = new MutationObserver(this.init);
-    this.observer.observe(this.element, {
-      childList: true,
-      subtree: true
-    });
-  }
-  disconnectedCallback() {
-    this.observer.disconnect();
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "stzh-page-skiplinks", role: "list" }, h("slot", null))));
-  }
-  get element() { return this; }
-  static get style() { return stzhPageSkiplinksCss; }
-}, [6, "stzh-page-skiplinks"]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["stzh-page-skiplinks"];
-  components.forEach(tagName => { switch (tagName) {
-    case "stzh-page-skiplinks":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StzhPageSkiplinks$1);
-      }
-      break;
-  } });
+const StzhPageSkiplinks$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.init = () => {
+      const links = this.element.querySelectorAll('stzh-skiplink');
+      links.forEach((link) => {
+        link.setAttribute("role", "listitem");
+      });
+    };
+  }
+  connectedCallback() {
+    this.init();
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "stzh-page-skiplinks", role: "list" }, h("slot", null))));
+  }
+  get element() { return this; }
+  static get style() { return stzhPageSkiplinksCss; }
+}, [6, "stzh-page-skiplinks"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-page-skiplinks"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-page-skiplinks":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhPageSkiplinks$1);
+      }
+      break;
+  } });
 }
 
 const StzhPageSkiplinks = StzhPageSkiplinks$1;

package/dist/components/stzh-pagetitle.js

@@ -3,80 +3,80 @@ import { s as setPropsIfNull, h as hasSlot } from './utils.js';
 
 const stzhPagetitleCss = ".sc-stzh-pagetitle-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-pagetitle-h{display:none}.sc-stzh-pagetitle-h *.sc-stzh-pagetitle,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::before,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-xxlarge)}}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=image]{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-xlarge)}}.stzh-pagetitle__actions.sc-stzh-pagetitle{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}";
 
-const StzhPagetitle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.init = () => {
-      const headings = this.element.querySelectorAll('stzh-heading[slot="heading"], [slot="heading"] stzh-heading');
-      const leads = this.element.querySelectorAll('stzh-text[slot="lead"], [slot="lead"] stzh-text');
-      const actions = this.element.querySelectorAll('stzh-link[slot="action-left"], stzh-link[slot="action-right"], [slot="action-left"] stzh-link, [slot="action-right"] stzh-link');
-      const actionsRight = this.element.querySelectorAll('stzh-link[slot="action-right"], [slot="action-right"] stzh-link');
-      headings.forEach((heading) => {
-        setPropsIfNull(heading, {
-          withBorder: true
-        });
-      });
-      leads.forEach((lead) => {
-        setPropsIfNull(lead, {
-          lead: true
-        });
-      });
-      actionsRight.forEach((link) => {
-        setPropsIfNull(link, {
-          icon: "web-link"
-        });
-      });
-      actions.forEach((link) => {
-        setPropsIfNull(link, {
-          size: "small"
-        });
-      });
-    };
-  }
-  connectedCallback() {
-    this.init();
-    this.observer = new MutationObserver(this.init);
-    this.observer.observe(this.element, {
-      childList: true,
-      subtree: true
-    });
-  }
-  disconnectedCallback() {
-    this.observer.disconnect();
-  }
-  render() {
-    const headingSlotUsed = hasSlot(this.element, 'heading');
-    const imageSlotUsed = hasSlot(this.element, 'image');
-    const leadSlotUsed = hasSlot(this.element, 'lead');
-    const actionLeftSlotUsed = hasSlot(this.element, 'action-left');
-    const actionRightSlotUsed = hasSlot(this.element, 'action-right');
-    const classes = {
-      "stzh-pagetitle": true,
-      "stzh-pagetitle--has-heading": headingSlotUsed,
-      "stzh-pagetitle--has-image": imageSlotUsed,
-      "stzh-pagetitle--has-lead": leadSlotUsed,
-      "stzh-pagetitle--has-action": actionLeftSlotUsed || actionRightSlotUsed,
-      "stzh-pagetitle--has-action-left": actionLeftSlotUsed,
-      "stzh-pagetitle--has-action-right": actionRightSlotUsed,
-    };
-    return (h(Host, null, h("div", { class: classes }, h("slot", { name: "heading" }), h("div", { class: "stzh-pagetitle__actions" }, h("slot", { name: "action-left" }), h("slot", { name: "action-right" })), h("slot", { name: "image" }), h("slot", { name: "lead" }))));
-  }
-  get element() { return this; }
-  static get style() { return stzhPagetitleCss; }
-}, [6, "stzh-pagetitle"]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["stzh-pagetitle"];
-  components.forEach(tagName => { switch (tagName) {
-    case "stzh-pagetitle":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StzhPagetitle$1);
-      }
-      break;
-  } });
+const StzhPagetitle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.init = () => {
+      const headings = this.element.querySelectorAll('stzh-heading[slot="heading"], [slot="heading"] stzh-heading');
+      const leads = this.element.querySelectorAll('stzh-text[slot="lead"], [slot="lead"] stzh-text');
+      const actions = this.element.querySelectorAll('stzh-link[slot="action-left"], stzh-link[slot="action-right"], [slot="action-left"] stzh-link, [slot="action-right"] stzh-link');
+      const actionsRight = this.element.querySelectorAll('stzh-link[slot="action-right"], [slot="action-right"] stzh-link');
+      headings.forEach((heading) => {
+        setPropsIfNull(heading, {
+          withBorder: true
+        });
+      });
+      leads.forEach((lead) => {
+        setPropsIfNull(lead, {
+          lead: true
+        });
+      });
+      actionsRight.forEach((link) => {
+        setPropsIfNull(link, {
+          icon: "web-link"
+        });
+      });
+      actions.forEach((link) => {
+        setPropsIfNull(link, {
+          size: "small"
+        });
+      });
+    };
+  }
+  connectedCallback() {
+    this.init();
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    const headingSlotUsed = hasSlot(this.element, 'heading');
+    const imageSlotUsed = hasSlot(this.element, 'image');
+    const leadSlotUsed = hasSlot(this.element, 'lead');
+    const actionLeftSlotUsed = hasSlot(this.element, 'action-left');
+    const actionRightSlotUsed = hasSlot(this.element, 'action-right');
+    const classes = {
+      "stzh-pagetitle": true,
+      "stzh-pagetitle--has-heading": headingSlotUsed,
+      "stzh-pagetitle--has-image": imageSlotUsed,
+      "stzh-pagetitle--has-lead": leadSlotUsed,
+      "stzh-pagetitle--has-action": actionLeftSlotUsed || actionRightSlotUsed,
+      "stzh-pagetitle--has-action-left": actionLeftSlotUsed,
+      "stzh-pagetitle--has-action-right": actionRightSlotUsed,
+    };
+    return (h(Host, null, h("div", { class: classes }, h("slot", { name: "heading" }), h("div", { class: "stzh-pagetitle__actions" }, h("slot", { name: "action-left" }), h("slot", { name: "action-right" })), h("slot", { name: "image" }), h("slot", { name: "lead" }))));
+  }
+  get element() { return this; }
+  static get style() { return stzhPagetitleCss; }
+}, [6, "stzh-pagetitle"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-pagetitle"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-pagetitle":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhPagetitle$1);
+      }
+      break;
+  } });
 }
 
 const StzhPagetitle = StzhPagetitle$1;