@oiz/stzh-components 3.8.0 → 3.8.2

package/dist/cjs/{utils-3e79835b.js → utils-43e6c48e.js}

@@ -30,6 +30,11 @@ function setPropsIfNull(element, attributes) {
     }
   });
 }
+function setProps(element, attributes) {
+  Object.keys(attributes).forEach((attribute) => {
+    element[attribute] = attributes[attribute];
+  });
+}
 function isStzhElement(element) {
   if (!element || element.nodeType !== 1) {
     return false;
@@ -63,7 +68,7 @@ function isVisible(element) {
     // @ts-ignore
     return element.checkVisibility({
       checkOpacity: false,
-      checkVisibilityCSS: false,
+      checkVisibilityCSS: false
     });
   }
   else {
@@ -80,7 +85,7 @@ function offset(element) {
   let win = element.ownerDocument.defaultView;
   return {
     top: rect.top + win.pageYOffset,
-    left: rect.left + win.pageXOffset,
+    left: rect.left + win.pageXOffset
   };
 }
 async function raf() {
@@ -186,6 +191,7 @@ exports.isStzhElement = isStzhElement;
 exports.isVisible = isVisible;
 exports.offset = offset;
 exports.raf = raf;
+exports.setProps = setProps;
 exports.setPropsIfNull = setPropsIfNull;
 
-//# sourceMappingURL=utils-3e79835b.js.map
+//# sourceMappingURL=utils-43e6c48e.js.map

package/dist/cjs/utils-43e6c48e.js.map

@@ -0,0 +1 @@
+{"file":"utils-43e6c48e.js","mappings":"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","names":["dashCase"],"sources":["src/utils/utils.ts"],"sourcesContent":["import { dashCase } from \"./string-utils\";\n\n// Determines whether an element has a slot. If name is specified, the function will look for a corresponding named\n// slot, otherwise it will look for a \"default\" slot (e.g. a non-empty text node or an element with no slot attribute).\nexport function hasSlot(el: HTMLElement, name?: string) {\n  // Look for a named slot\n  if (name) {\n    return el.querySelector(`[slot=\"${name}\"]`) !== null;\n  }\n\n  // Look for a default slot\n  return Array.from(childNodes(el)).some((node) => {\n    if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== \"\") {\n      return true;\n    }\n\n    if (node.nodeType === node.ELEMENT_NODE) {\n      const el = node as HTMLElement;\n      if (!el.hasAttribute(\"slot\")) {\n        return true;\n      }\n    }\n\n    return false;\n  });\n}\n\nexport function setPropsIfNull(element: Element, attributes: any) {\n  Object.keys(attributes).forEach((attribute) => {\n    if (element.getAttribute(dashCase(attribute)) === null) {\n      element[attribute] = attributes[attribute];\n    }\n  });\n}\n\nexport function setProps(element: Element, attributes: any) {\n  Object.keys(attributes).forEach((attribute) => {\n    element[attribute] = attributes[attribute];\n  });\n}\n\nexport function isStzhElement(element: Element) {\n  if (!element || element.nodeType !== 1) {\n    return false;\n  }\n\n  return element.tagName.toLowerCase().indexOf(\"stzh-\") === 0;\n}\n\n// returns content of <meta name=\"\" content=\"\"> tags or '' if empty/non existant\nexport function getMeta(name) {\n  const meta = document.querySelector(\n    `meta[name=\"${name}\"],[property=\"${name}\"]`\n  );\n  return meta ? meta.getAttribute(\"content\") : \"\";\n}\n\nexport function parents(node: Element | Node) {\n  const parents = [];\n\n  while (node) {\n    parents.unshift(node);\n    node = node.parentNode;\n  }\n\n  return parents;\n}\n\nexport function childNodes(node: Element) {\n  const childNodes = node.childNodes;\n\n  // check if element is stencil element without shadow dom\n  // and then detect elements that were slotted into the element\n  if (node[\"s-sc\"]) {\n    const result = [];\n\n    for (let i = 0; i < childNodes.length; i++) {\n      const slot = childNodes[i][\"s-nr\"];\n\n      if (slot) {\n        result.push(slot);\n      }\n    }\n\n    return result;\n  }\n\n  return Array.from(childNodes);\n}\n\nexport function isVisible(element: HTMLElement): boolean {\n  // @ts-ignore\n  if (typeof element.checkVisibility !== \"undefined\") {\n    // @ts-ignore\n    return element.checkVisibility({\n      checkOpacity: false,\n      checkVisibilityCSS: false\n    });\n  } else {\n    return !!(\n      element.offsetWidth ||\n      element.offsetHeight ||\n      element.getClientRects().length\n    );\n  }\n}\n\nexport function offset(element): { top: number; left: number } {\n  if (!element.getClientRects().length) {\n    return { top: 0, left: 0 };\n  }\n\n  let rect = element.getBoundingClientRect();\n  let win = element.ownerDocument.defaultView;\n\n  return {\n    top: rect.top + win.pageYOffset,\n    left: rect.left + win.pageXOffset\n  };\n}\n\nexport async function raf() {\n  return new Promise<void>((resolve) => {\n    requestAnimationFrame(() => {\n      resolve();\n    });\n  });\n}\n\nexport async function setTimeout(time: number) {\n  return new Promise<void>((resolve) => {\n    window.setTimeout(() => {\n      resolve();\n    }, time);\n  });\n}\n\nexport enum StzhEnvironmentEnum {\n  UNKNOWN = \"UNKNOWN\",\n  DEV = \"DEV\",\n  UAT = \"UAT\",\n  PROD = \"PROD\",\n}\n\nexport function getStzhEnvironment(): StzhEnvironmentEnum {\n  const url = window.location.href;\n  if (\n    url.includes(\"test.stadt-zuerich.loc\") ||\n    url.match(/\\.dev\\.cmp\\.szh\\.loc/)\n  ) {\n    return StzhEnvironmentEnum.DEV;\n  } else if (\n    url.includes(\"integ.stadt-zuerich.ch\") ||\n    url.includes(\"stzh-desi-unic-preview.netlify.app\") ||\n    url.match(/\\.uat\\.cmp\\.szh\\.loc/)\n  ) {\n    return StzhEnvironmentEnum.UAT;\n  } else if (\n    url.includes(\"https://www.stadt-zuerich.ch\") ||\n    url.includes(\"designsystem.stadt-zuerich.ch\") ||\n    url.match(/\\.cmp\\.szh\\.loc/)\n  ) {\n    return StzhEnvironmentEnum.PROD;\n  } else {\n    return StzhEnvironmentEnum.UNKNOWN;\n  }\n}\n\nexport function addWordBreakToLinks(links: HTMLElement[]) {\n  links.forEach((link) => {\n    if (link.textContent?.includes(\"_\")) {\n      link.innerHTML = link.textContent.replace(/_/g, \"_<wbr>\");\n    }\n  });\n}\n\n// `extras.experimentalSlotFixes` stencil config flag resolves cloning light dom elements\n// so our own cloneElement / cloneWrappedStzhElement helpers are not needed right now\n// (used before in cardlist and sortable component).\n\n// export function children(node: Element) {\n//   return childNodes(node).map((n: any) => n.nodeType === 1);\n// }\n\n// const nativeCloneNodeFn = Node.prototype.cloneNode;\n\n// export function cloneElement(node: Element, deep: boolean) {\n//   const clonedNode = nativeCloneNodeFn.call(node, false);\n//   const srcChildNodes = childNodes(node);\n\n//   if (deep) {\n//     for (let i = 0; i < srcChildNodes.length; i++) {\n//       if (srcChildNodes[i].nodeType !== 2) {\n//         const childClone = cloneElement(srcChildNodes[i], true);\n//         clonedNode.appendChild(childClone);\n//       }\n//     }\n//   }\n\n//   return clonedNode;\n// }\n\n// // Clone an stzh-* element that is using stencil polyfilled slots (no shadow dom)\n// // and potentially wrapped in normal elements (e.g. angular component)\n// export function cloneWrappedStzhElement(elementToClone: Element): [Element, Element, Element] {\n//   let clonedElement: Element;\n//   let clonedStzhElement: Element;\n//   let originalStzhElement: Element;\n\n//   if (isStzhElement(elementToClone)) {\n//     clonedElement = cloneElement(elementToClone, true);\n//     clonedStzhElement = clonedElement;\n//     originalStzhElement = elementToClone;\n//   } else {\n//     clonedElement = elementToClone.cloneNode() as Element;\n\n//     let clonedInnerElementLast: Element = clonedElement;\n//     let originalInnerElementLast: Element = elementToClone;\n\n//     // clone inner root elements separately until we find a stzh element\n//     while (originalInnerElementLast.children.length === 1 && !isStzhElement(originalInnerElementLast.children[0])) {\n//       originalInnerElementLast = originalInnerElementLast.children[0];\n//       const clonedInnerElementCurrent = originalInnerElementLast.cloneNode() as Element;\n\n//       clonedInnerElementLast.appendChild(clonedInnerElementCurrent);\n//       clonedInnerElementLast = clonedInnerElementCurrent;\n//     }\n\n//     if (isStzhElement(originalInnerElementLast.children[0])) {\n//       clonedStzhElement = cloneElement(originalInnerElementLast.children[0], true);\n//       originalStzhElement = originalInnerElementLast.children[0];\n//       clonedInnerElementLast.appendChild(clonedStzhElement);\n//     } else {\n//       // no root stzh element found, so we give up and just deep clone the root\n//       clonedElement = cloneElement(elementToClone, true);\n//     }\n//   }\n\n//   return [clonedElement, clonedStzhElement, originalStzhElement];\n// }\n"],"version":3}

package/dist/collection/components/stzh-fieldset/stzh-fieldset.css

@@ -303,6 +303,48 @@
     margin-bottom: var(--stzh-space-small);
   }
 }
+:host ::slotted(.stzh-fieldset-row > stzh-fieldset),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-fieldset),
+:host ::slotted(stzh-fieldset) {
+  margin-top: var(--stzh-space-medium);
+}
+@media screen and (min-width: 600px) {
+  :host ::slotted(.stzh-fieldset-row > stzh-fieldset),
+  :host ::slotted(.layout_column > .stzh-fieldset-row > stzh-fieldset),
+  :host ::slotted(stzh-fieldset) {
+    margin-top: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  :host ::slotted(.stzh-fieldset-row > stzh-fieldset),
+  :host ::slotted(.layout_column > .stzh-fieldset-row > stzh-fieldset),
+  :host ::slotted(stzh-fieldset) {
+    margin-top: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted(.stzh-fieldset-row > stzh-fieldset),
+  :host ::slotted(.layout_column > .stzh-fieldset-row > stzh-fieldset),
+  :host ::slotted(stzh-fieldset) {
+    margin-top: var(--stzh-space-xxlarge);
+  }
+}
+:host ::slotted(.stzh-fieldset-row > stzh-fieldset) .stzh-fieldset__legend,
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-fieldset) .stzh-fieldset__legend,
+:host ::slotted(stzh-fieldset) .stzh-fieldset__legend {
+  font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
+  line-height: var(--stzh-font-curve-p1-default-heading-line-height, var(--stzh-font-milli-heading-line-height));
+  letter-spacing: var(--stzh-font-curve-p1-default-heading-letter-spacing);
+}
+@media screen and (min-width: 900px) {
+  :host ::slotted(.stzh-fieldset-row > stzh-fieldset) .stzh-fieldset__legend,
+  :host ::slotted(.layout_column > .stzh-fieldset-row > stzh-fieldset) .stzh-fieldset__legend,
+  :host ::slotted(stzh-fieldset) .stzh-fieldset__legend {
+    font-size: var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));
+    line-height: var(--stzh-font-curve-p1-medium-heading-line-height, var(--stzh-font-centi-heading-line-height));
+    letter-spacing: var(--stzh-font-curve-p1-medium-heading-letter-spacing);
+  }
+}
 :host > .section > stzh-chipgroup, :host > stzh-chipgroup, :host > .section > stzh-chipselect, :host > stzh-chipselect {
   margin-bottom: var(--stzh-space-xlarge);
 }

package/dist/collection/components/stzh-section/stzh-section.js

@@ -1,10 +1,38 @@
-import { Host, h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
+import { setProps } from "../../utils/utils";
 /**
  * @slot - Slot for any content
  * @slot heading - Slot for `stzh-heading` element
  */
 export class StzhSection {
   constructor() {
+    /**
+     * Searches for any slotted `stzh-cspace` or `stzh-richtext` elements (or their descendants)
+     * and sets their properties accordingly.
+     */
+    this.init = () => {
+      if (this.variant !== "contextbox" || !this.slotElement) {
+        return;
+      }
+      const assignedElements = this.slotElement.assignedElements({ flatten: true });
+      const nestedCspaceOrRichtext = [];
+      // Check each assigned element and its descendants for a matching tag name
+      assignedElements.forEach((assignedElement) => {
+        if (assignedElement.matches("stzh-cspace, stzh-richtext")) {
+          nestedCspaceOrRichtext.push(assignedElement);
+        }
+        nestedCspaceOrRichtext.push(...Array.from(assignedElement.querySelectorAll("stzh-cspace, stzh-richtext")));
+      });
+      nestedCspaceOrRichtext.forEach(cspaceOrRichtext => {
+        setProps(cspaceOrRichtext, {
+          removeFirstMargin: true,
+          removeLastMargin: true
+        });
+      });
+    };
+    this.onSlotChange = () => {
+      this.init();
+    };
     this.variant = "default";
     this.background = "default";
     this.marginTop = "default";
@@ -13,13 +41,16 @@ export class StzhSection {
     this.paddingBottom = "default";
     this.breakout = false;
   }
+  componentDidLoad() {
+    this.init();
+  }
   render() {
     return (h(Host, null, h("section", { class: {
         "stzh-section": true,
-        [`stzh-section--is-breakout`]: this.breakout,
+        "stzh-section--is-breakout": this.breakout,
         [`stzh-section--${this.variant}`]: !!this.variant,
-        [`stzh-section--margin-bottom-${this.marginBottom}`]: !!this.marginBottom,
-      } }, h("div", { class: "stzh-section__outer" }, h("div", { class: "stzh-section__heading" }, h("slot", { name: "heading" })), h("div", { class: "stzh-section__wrapper" }, h("slot", null))))));
+        [`stzh-section--margin-bottom-${this.marginBottom}`]: !!this.marginBottom
+      } }, h("div", { class: "stzh-section__outer" }, h("div", { class: "stzh-section__heading" }, h("slot", { name: "heading" })), h("div", { class: "stzh-section__wrapper" }, h("slot", { onSlotchange: this.onSlotChange, ref: el => (this.slotElement = el) }))))));
   }
   static get is() { return "stzh-section"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/stzh-section/stzh-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-section.js","sourceRoot":"","sources":["../../../../src/components/stzh-section/stzh-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAMH,MAAM,OAAO,WAAW;;mBAE4E,SAAS;sBAG5C,SAAS;qBAGf,SAAS;wBAGN,SAAS;sBAGX,SAAS;yBAGN,SAAS;oBAGzB,KAAK;;EAElD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eACE,KAAK,EAAE;UACL,cAAc,EAAE,IAAI;UACpB,CAAC,2BAA2B,CAAC,EAAE,IAAI,CAAC,QAAQ;UAC5C,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;UACjD,CAAC,+BAA+B,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY;SAC1E;QAED,WAAK,KAAK,EAAC,qBAAqB;UAC9B,WAAK,KAAK,EAAC,uBAAuB;YAChC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB;UACN,WAAK,KAAK,EAAC,uBAAuB;YAChC,eAAa,CACT,CACF,CACE,CACL,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n * @slot heading - Slot for `stzh-heading` element\n */\n@Component({\n  tag: \"stzh-section\",\n  styleUrl: \"stzh-section.scss\",\n  shadow: true,\n})\nexport class StzhSection {\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"highlight\" | \"contextbox\" | \"greybox\" | \"poimax\" = \"default\";\n\n  /** Background color */\n  @Prop({ reflect: true }) background: \"default\" | \"secondary\" = \"default\";\n\n  /** Margin top spacing */\n  @Prop({ reflect: true }) marginTop: \"default\" | \"none\" = \"default\";\n\n  /** Margin bottom spacing */\n  @Prop({ reflect: true }) marginBottom: \"default\" | \"none\" = \"default\";\n\n  /** Padding top spacing */\n  @Prop({ reflect: true }) paddingTop: \"default\" | \"none\" = \"default\";\n\n  /** Padding bottom spacing */\n  @Prop({ reflect: true }) paddingBottom: \"default\" | \"none\" = \"default\";\n\n  /** Whether to breakout container */\n  @Prop({ reflect: true }) breakout: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <section\n          class={{\n            \"stzh-section\": true,\n            [`stzh-section--is-breakout`]: this.breakout,\n            [`stzh-section--${this.variant}`]: !!this.variant,\n            [`stzh-section--margin-bottom-${this.marginBottom}`]: !!this.marginBottom,\n          }}\n        >\n          <div class=\"stzh-section__outer\">\n            <div class=\"stzh-section__heading\">\n              <slot name=\"heading\"></slot>\n            </div>\n            <div class=\"stzh-section__wrapper\">\n              <slot></slot>\n            </div>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-section.js","sourceRoot":"","sources":["../../../../src/components/stzh-section/stzh-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C;;;GAGG;AAMH,MAAM,OAAO,WAAW;;IAwBtB;;;OAGG;IACK,SAAI,GAAG,GAAG,EAAE;MAClB,IAAI,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACtD,OAAO;OACR;MAED,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;MAC9E,MAAM,sBAAsB,GAAkB,EAAE,CAAC;MAEjD,0EAA0E;MAC1E,gBAAgB,CAAC,OAAO,CAAC,CAAC,eAA4B,EAAE,EAAE;QACxD,IAAI,eAAe,CAAC,OAAO,CAAC,4BAA4B,CAAC,EAAE;UACzD,sBAAsB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAC9C;QACD,sBAAsB,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAc,4BAA4B,CAAC,CAAC,CAAC,CAAC;MAC1H,CAAC,CAAC,CAAC;MAEH,sBAAsB,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE;QAChD,QAAQ,CAAC,gBAAgB,EAAE;UACzB,iBAAiB,EAAE,IAAI;UACvB,gBAAgB,EAAE,IAAI;SAC4B,CAAC,CAAC;MACxD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,iBAAY,GAAG,GAAG,EAAE;MAC1B,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC,CAAC;mBAlDgG,SAAS;sBAG5C,SAAS;qBAGf,SAAS;wBAGN,SAAS;sBAGX,SAAS;yBAGN,SAAS;oBAGzB,KAAK;;EAkClD,gBAAgB;IACd,IAAI,CAAC,IAAI,EAAE,CAAC;EACd,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eACE,KAAK,EAAE;UACL,cAAc,EAAE,IAAI;UACpB,2BAA2B,EAAE,IAAI,CAAC,QAAQ;UAC1C,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;UACjD,CAAC,+BAA+B,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY;SAC1E;QAED,WAAK,KAAK,EAAC,qBAAqB;UAC9B,WAAK,KAAK,EAAC,uBAAuB;YAChC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB;UACN,WAAK,KAAK,EAAC,uBAAuB;YAChC,YAAM,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAqB,CAAC,GAAS,CACjG,CACF,CACE,CACL,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\nimport { setProps } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n * @slot heading - Slot for `stzh-heading` element\n */\n@Component({\n  tag: \"stzh-section\",\n  styleUrl: \"stzh-section.scss\",\n  shadow: true\n})\nexport class StzhSection {\n  private slotElement: HTMLSlotElement;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"highlight\" | \"contextbox\" | \"greybox\" | \"poimax\" = \"default\";\n\n  /** Background color */\n  @Prop({ reflect: true }) background: \"default\" | \"secondary\" = \"default\";\n\n  /** Margin top spacing */\n  @Prop({ reflect: true }) marginTop: \"default\" | \"none\" = \"default\";\n\n  /** Margin bottom spacing */\n  @Prop({ reflect: true }) marginBottom: \"default\" | \"none\" = \"default\";\n\n  /** Padding top spacing */\n  @Prop({ reflect: true }) paddingTop: \"default\" | \"none\" = \"default\";\n\n  /** Padding bottom spacing */\n  @Prop({ reflect: true }) paddingBottom: \"default\" | \"none\" = \"default\";\n\n  /** Whether to breakout container */\n  @Prop({ reflect: true }) breakout: boolean = false;\n\n  /**\n   * Searches for any slotted `stzh-cspace` or `stzh-richtext` elements (or their descendants)\n   * and sets their properties accordingly.\n   */\n  private init = () => {\n    if (this.variant !== \"contextbox\" || !this.slotElement) {\n      return;\n    }\n\n    const assignedElements = this.slotElement.assignedElements({ flatten: true });\n    const nestedCspaceOrRichtext: HTMLElement[] = [];\n\n    // Check each assigned element and its descendants for a matching tag name\n    assignedElements.forEach((assignedElement: HTMLElement) => {\n      if (assignedElement.matches(\"stzh-cspace, stzh-richtext\")) {\n        nestedCspaceOrRichtext.push(assignedElement);\n      }\n      nestedCspaceOrRichtext.push(...Array.from(assignedElement.querySelectorAll<HTMLElement>(\"stzh-cspace, stzh-richtext\")));\n    });\n\n    nestedCspaceOrRichtext.forEach(cspaceOrRichtext => {\n      setProps(cspaceOrRichtext, {\n        removeFirstMargin: true,\n        removeLastMargin: true\n      } as HTMLStzhCspaceElement | HTMLStzhRichtextElement);\n    });\n  };\n\n  private onSlotChange = () => {\n    this.init();\n  };\n\n  componentDidLoad() {\n    this.init();\n  }\n\n  render() {\n    return (\n      <Host>\n        <section\n          class={{\n            \"stzh-section\": true,\n            \"stzh-section--is-breakout\": this.breakout,\n            [`stzh-section--${this.variant}`]: !!this.variant,\n            [`stzh-section--margin-bottom-${this.marginBottom}`]: !!this.marginBottom\n          }}\n        >\n          <div class=\"stzh-section__outer\">\n            <div class=\"stzh-section__heading\">\n              <slot name=\"heading\"></slot>\n            </div>\n            <div class=\"stzh-section__wrapper\">\n              <slot onSlotchange={this.onSlotChange} ref={el => (this.slotElement = el as HTMLSlotElement)}></slot>\n            </div>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-upload/stzh-upload.js

@@ -136,6 +136,7 @@ export class StzhUpload {
     this.photographingConfig = undefined;
     this.photographingWebsocket = undefined;
     this.photographingToken = undefined;
+    this.hiddenInputFiles = [];
   }
   resetListener(event) {
     if (event.target.contains(this.element)) {
@@ -486,7 +487,7 @@ export class StzhUpload {
       // Receives `event`
       drop: e => {
         var _a;
-        // Merge files in hidden input.
+        // Preserve files in hidden input when preventHiddenInputClear is true
         if (this.preventHiddenInputClear) {
           const hiddenFileInput = (_a = this.hiddenInputContainerElement) === null || _a === void 0 ? void 0 : _a.querySelector("input");
           const dataTransfer = new DataTransfer();
@@ -504,6 +505,7 @@ export class StzhUpload {
       // Receives `file`
       // Taken from https://github.com/dropzone/dropzone/blob/v5.9.3/src/options.js#L594
       async addedfile(file) {
+        var _a;
         file._id = previewCounter++;
         self.totalFilesState.push(file);
         let sessCheck = sessionStorage.getItem("totalFilesState");
@@ -513,6 +515,26 @@ export class StzhUpload {
         else {
           sessionStorage.setItem("totalFilesState", JSON.stringify(self.totalFilesState));
         }
+        // Preserve files in hidden input when preventHiddenInputClear is true
+        if (self.preventHiddenInputClear) {
+          const hiddenFileInput = (_a = self.hiddenInputContainerElement) === null || _a === void 0 ? void 0 : _a.querySelector("input");
+          if (hiddenFileInput) {
+            let fileAlreadyExists = false;
+            if (file instanceof File) {
+              fileAlreadyExists = self.hiddenInputFiles.some(existingFile => existingFile.name === file.name && existingFile.size === file.size);
+              if (!fileAlreadyExists) {
+                self.hiddenInputFiles.push(file);
+              }
+            }
+            if (self.hiddenInputFiles.length > 0) {
+              const dataTransfer = new DataTransfer();
+              self.hiddenInputFiles.forEach(trackedFile => {
+                dataTransfer.items.add(trackedFile);
+              });
+              hiddenFileInput.files = dataTransfer.files;
+            }
+          }
+        }
         if (self.preventDuplicateFileNames) {
           if (self.totalFilesState.length > 0) {
             self.duplicateDetected = false; // reset
@@ -745,14 +767,16 @@ export class StzhUpload {
         sessionStorage.setItem("totalFilesState", JSON.stringify(this.totalFilesState));
       }
       if (this.preventHiddenInputClear) {
+        // Remove the file from our tracked array
+        this.hiddenInputFiles = this.hiddenInputFiles.filter(trackedFile => trackedFile.name !== file.name);
         const hiddenFileInput = (_a = this.hiddenInputContainerElement) === null || _a === void 0 ? void 0 : _a.querySelector("input");
-        const dataTransfer = new DataTransfer();
-        for (let i = 0; i < hiddenFileInput.files.length; i++) {
-          if (hiddenFileInput.files[i].name !== file.name) {
-            dataTransfer.items.add(hiddenFileInput.files[i]);
-          }
+        if (hiddenFileInput) {
+          const dataTransfer = new DataTransfer();
+          this.hiddenInputFiles.forEach(trackedFile => {
+            dataTransfer.items.add(trackedFile);
+          });
+          hiddenFileInput.files = dataTransfer.files;
         }
-        hiddenFileInput.files = dataTransfer.files;
       }
       return (this.stzhFileRemove.emit({
         component: "stzh-upload",
@@ -1712,7 +1736,8 @@ export class StzhUpload {
       "photographingHost": {},
       "photographingConfig": {},
       "photographingWebsocket": {},
-      "photographingToken": {}
+      "photographingToken": {},
+      "hiddenInputFiles": {}
     };
   }
   static get events() {