@oiz/stzh-components 2.1.0-beta → 2.2.0-beta

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

@@ -0,0 +1,167 @@
+@charset "UTF-8";
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Richtext
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Appnav
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Accordions
+ */
+/**
+ * Buttons
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Container
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+}
+:host[hidden] {
+  display: none;
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+}
+
+@media screen and (min-width: 600px) {
+  :host {
+    --col-left-width: 50%;
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host {
+    --col-left-width: 45%;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([size=small]) {
+    --col-left-width: 33%;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([size=large]) {
+    --col-left-width: 55%;
+  }
+}
+
+:host ::slotted([slot=left]) {
+  margin-bottom: var(--stzh-space-xxxlarge);
+}
+@media screen and (min-width: 600px) {
+  :host ::slotted([slot=left]) {
+    margin-bottom: 0;
+  }
+}
+
+:host([floating]:not([floating=false])) ::slotted([slot=left]) {
+  float: left;
+  width: 100%;
+}
+@media screen and (min-width: 600px) {
+  :host([floating]:not([floating=false])) ::slotted([slot=left]) {
+    width: calc(var(--col-left-width) - var(--stzh-space-large) / 2);
+    margin-right: var(--stzh-space-large);
+  }
+}
+
+.stzh-textandimage {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin: 0 calc(var(--stzh-space-large) / -2);
+  /* Floating variant */
+}
+.stzh-textandimage__left, .stzh-textandimage__right  {
+  width: auto;
+  padding: 0 calc(var(--stzh-space-large) / 2);
+}
+@media screen and (min-width: 600px) {
+  .stzh-textandimage__left {
+    width: var(--col-left-width);
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-textandimage__right {
+    width: calc(100% - var(--col-left-width));
+  }
+}
+.stzh-textandimage--is-floating .stzh-textandimage__left {
+  width: auto;
+}

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

@@ -0,0 +1,78 @@
+import { Host, h, } from "@stencil/core";
+import { hasSlot } from "../../utils/utils";
+/**
+ * @slot left - Slot for left column content
+ * @slot right - Slot for right column content
+ */
+export class StzhTextandimage {
+  constructor() {
+    this.floating = false;
+    this.size = "default";
+  }
+  render() {
+    const leftSlotUsed = hasSlot(this.element, "left");
+    const rightSlotUsed = hasSlot(this.element, "right");
+    const classes = {
+      "stzh-textandimage": true,
+      "stzh-textandimage--has-left": leftSlotUsed,
+      "stzh-textandimage--has-right": rightSlotUsed,
+      "stzh-textandimage--is-floating": this.floating,
+      [`stzh-textandimage--size-${this.size}`]: !!this.size
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-textandimage__left" }, h("slot", { name: "left" }), this.floating && h("slot", { name: "right" })), !this.floating &&
+      h("div", { class: "stzh-textandimage__right" }, h("slot", { name: "right" })))));
+  }
+  static get is() { return "stzh-textandimage"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-textandimage.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-textandimage.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "floating": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to float left content"
+        },
+        "attribute": "floating",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"small\" | \"large\"",
+          "resolved": "\"default\" | \"large\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variant"
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}

package/dist/collection/components/stzh-textandimage/stzh-textandimage.stories.js

@@ -0,0 +1,56 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Textandimage',
+  component: 'stzh-textandimage',
+  parameters: {
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('textandimage'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-textandimage {...args}>
+    <div slot="left">
+      <stzh-figure caption="Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna.">
+        <img src="media/images/example2.jpg" loading="lazy" alt="Example image" />
+      </stzh-figure>
+    </div>
+    <div slot="right">
+      <stzh-richtext>
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
+        <ul>
+          <li>Laboris laborum aute id laboris esse aliquip nisi anim velit</li>
+          <li>
+            Minim sunt eiusmod do laborum
+            <ul>
+              <li>Laboris laborum aute</li>
+              <li>Laboris esse aliquip</li>
+            </ul>
+          </li>
+        </ul>
+        <p><strong>Laboris laborum aute</strong> id laboris culpa esse <b>aliquip nisi anim</b> velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
+      </stzh-richtext>
+    </div>
+  </stzh-textandimage>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -286,11 +289,12 @@
   color: var(--stzh-color-grey61);
 }
 .stzh-toggle--is-disabled .stzh-toggle__input ~ .stzh-toggle__mark .stzh-toggle__check {
-  border-color: var(--stzh-color-grey25);
+  border-color: var(--stzh-color-grey13);
 }
 .stzh-toggle--is-disabled .stzh-toggle__input:checked ~ .stzh-toggle__mark {
   background-color: var(--stzh-color-black8);
 }
 .stzh-toggle--is-disabled .stzh-toggle__input:checked ~ .stzh-toggle__mark .stzh-toggle__check {
   background-color: var(--stzh-color-grey25);
+  border-color: var(--stzh-color-grey25);
 }

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { arrow, computePosition, offset, shift, flip, autoUpdate } from "@floating-ui/dom";
 import { createFocusTrap } from "focus-trap";
+import { isStzhElement } from "../../utils/utils";
 import { fetchTranslations } from "../../utils/translation-utils";
 import { waitForEvent } from "../../utils/event-utils";
 import { stopAnimations, animateTo } from "../../utils/animation-utils";
@@ -223,8 +224,7 @@ export class StzhTooltip {
     return this._trigger.indexOf(trigger) > -1;
   }
   async componentWillLoad() {
-    this.labelId = `stzh-tooltip-label-${tooltipCounter}`;
-    tooltipCounter++;
+    this.labelId = `stzh-tooltip-label-${tooltipCounter++}`;
     this.triggerWatcher(this.trigger);
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, "tooltip");
@@ -233,8 +233,9 @@ export class StzhTooltip {
   componentDidRender() {
     this.computePosition();
     if (this.interactive) {
+      const isStzh = isStzhElement(this.triggerElement.firstElementChild);
       this.triggerElement.firstElementChild
-        .setAttribute("aria-expanded", this.open ? "true" : "false");
+        .setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", this.open ? "true" : "false");
     }
     if (this.trap) {
       this.open ? this.trap.activate() : this.trap.deactivate();
@@ -279,11 +280,13 @@ export class StzhTooltip {
     if (this.autoUpdateCleanup) {
       this.autoUpdateCleanup();
     }
-    this.triggerElement.firstElementChild.removeEventListener("click", this.onClickTrigger);
-    this.triggerElement.firstElementChild.removeEventListener("mouseenter", this.onMouseEnterTrigger);
-    this.triggerElement.firstElementChild.removeEventListener("mouseleave", this.onMouseLeaveTrigger);
-    this.triggerElement.firstElementChild.removeEventListener("focusin", this.onFocusTrigger);
-    this.triggerElement.firstElementChild.removeEventListener("focusout", this.onBlurTrigger);
+    if (this.triggerElement && this.triggerElement.firstElementChild) {
+      this.triggerElement.firstElementChild.removeEventListener("click", this.onClickTrigger);
+      this.triggerElement.firstElementChild.removeEventListener("mouseenter", this.onMouseEnterTrigger);
+      this.triggerElement.firstElementChild.removeEventListener("mouseleave", this.onMouseLeaveTrigger);
+      this.triggerElement.firstElementChild.removeEventListener("focusin", this.onFocusTrigger);
+      this.triggerElement.firstElementChild.removeEventListener("focusout", this.onBlurTrigger);
+    }
   }
   render() {
     const classes = {

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -274,6 +277,18 @@ stzh-upload *::after {
 .stzh-upload__preview:not(.dz-error):last-child, .stzh-upload__errors:last-child .stzh-upload__preview:last-child {
   border-bottom: 0.0625rem solid var(--stzh-base-border-color);
 }
+.stzh-upload__errors .stzh-upload__preview:first-child, .stzh-upload__errors:empty + .stzh-upload__preview {
+  border-top-left-radius: var(--stzh-button-border-radius);
+  border-top-right-radius: var(--stzh-button-border-radius);
+}
+.stzh-upload__preview:last-child {
+  border-bottom-left-radius: var(--stzh-button-border-radius);
+  border-bottom-right-radius: var(--stzh-button-border-radius);
+}
+.stzh-upload:has(> .stzh-upload__preview) .stzh-upload__errors .stzh-upload__preview:last-child {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
 .stzh-upload__preview.dz-error .stzh-upload__title {
   color: var(--stzh-color-error);
 }
@@ -383,21 +398,15 @@ stzh-upload *::after {
   content: " | ";
 }
 .stzh-upload__download, .stzh-upload__delete {
-  cursor: pointer;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border: none;
-  padding: 0;
-  background: none;
-  display: flex;
-  color: var(--stzh-base-color);
   margin-left: var(--stzh-space-xsmall);
 }
-.stzh-upload__download {
+.stzh-upload__download[variant=tertiary][icon-only], .stzh-upload__delete[variant=tertiary][icon-only] {
+  --color: var(--stzh-color-grey70);
+}
+.stzh-upload__download[variant=tertiary] {
   display: none;
 }
-.stzh-upload__download[href] {
+.stzh-upload__download[variant=tertiary][href] {
   display: flex;
 }
 .stzh-upload__error-message {
@@ -408,11 +417,11 @@ stzh-upload *::after {
   transition: color var(--stzh-base-transition-animation-speed);
   display: none;
 }
-.stzh-upload.dz-started .stzh-upload__clickarea {
-  margin-bottom: var(--stzh-space-small);
+.stzh-upload.dz-started .stzh-upload__errors {
+  margin-top: var(--stzh-space-small);
 }
-.stzh-upload:has(.stzh-upload__preview) .stzh-upload__clickarea {
-  margin-bottom: var(--stzh-space-small);
+.stzh-upload:has(.stzh-upload__preview) .stzh-upload__errors {
+  margin-top: var(--stzh-space-small);
 }
 .stzh-upload.dz-drag-hover .stzh-upload__clickarea {
   background-color: var(--stzh-color-primary4);
@@ -433,5 +442,5 @@ stzh-upload *::after {
 }
 .stzh-upload--is-disabled .stzh-upload__clickarea {
   cursor: not-allowed;
-  background-color: var(--stzh-color-grey5);
+  background-color: var(--stzh-color-black8);
 }

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

@@ -293,13 +293,11 @@ export class StzhUpload {
             </div>
           </div>
           <div class="stzh-upload__actions">
-            <a class="stzh-upload__download" ${ATTR_LINK} aria-label="${this.localization.download}" title="${this.localization.download}">
-              <stzh-icon class="stzh-upload__download-icon" name="download"></stzh-icon>
-            </a>
-            <button class="stzh-upload__delete" data-dz-remove aria-label="${this.localization.cancelUpload}" title="${this.localization.cancelUpload}">
-              <stzh-icon class="stzh-upload__delete-icon" name="delete"></stzh-icon>
-              <stzh-icon class="stzh-upload__delete-icon-error" name="close"></stzh-icon>
-            </button>
+            <stzh-button variant="tertiary" size="tiny" icon-only icon="download" class="stzh-upload__download" ${ATTR_LINK} aria-label="${this.localization.download}" title="${this.localization.download}"></stzh-button>
+            <stzh-button variant="tertiary" size="tiny" icon-only class="stzh-upload__delete" data-dz-remove aria-label="${this.localization.cancelUpload}" title="${this.localization.cancelUpload}">
+              <stzh-icon slot="icon" class="stzh-upload__delete-icon" name="delete"></stzh-icon>
+              <stzh-icon slot="icon" class="stzh-upload__delete-icon-error" name="close"></stzh-icon>
+            </stzh-button>
           </div>
         </div>
       </div>

package/dist/collection/components/stzh-vbz-linechip/stzh-vbz-linechip.css

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

package/dist/collection/components/stzh-vbz-linechip/stzh-vbz-linechip.js

@@ -87,7 +87,7 @@ export class StzhVbzLinechip {
         "mutable": false,
         "complexType": {
           "original": "VBZ.Lines",
-          "resolved": "\"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"10\" | \"11\" | \"12\" | \"13\" | \"14\" | \"15\" | \"16\" | \"17\" | \"19\" | \"20\" | \"21\" | \"23\" | \"24\" | \"25\" | \"29\" | \"31\" | \"32\" | \"33\" | \"34\" | \"35\" | \"36\" | \"37\" | \"38\" | \"39\" | \"40\" | \"45\" | \"46\" | \"54\" | \"61\" | \"62\" | \"63\" | \"64\" | \"66\" | \"67\" | \"69\" | \"70\" | \"72\" | \"73\" | \"75\" | \"76\" | \"77\" | \"78\" | \"79\" | \"80\" | \"83\" | \"89\" | \"91\" | \"94\" | \"95\" | \"99\" | \"151\" | \"152\" | \"153\" | \"156\" | \"161\" | \"162\" | \"163\" | \"165\" | \"184\" | \"185\" | \"200\" | \"201\" | \"215\" | \"220\" | \"235\" | \"236\" | \"245\" | \"301\" | \"302\" | \"303\" | \"304\" | \"305\" | \"306\" | \"307\" | \"308\" | \"309\" | \"311\" | \"314\" | \"315\" | \"317\" | \"321\" | \"323\" | \"325\" | \"350\" | \"444\" | \"445\" | \"701\" | \"702\" | \"703\" | \"704\" | \"705\" | \"720\" | \"721\" | \"725\" | \"726\" | \"727\" | \"742\" | \"743\" | \"744\" | \"745\" | \"747\" | \"748\" | \"751\" | \"752\" | \"753\" | \"754\" | \"759\" | \"760\" | \"765\" | \"768\" | \"781\" | \"786\" | \"787\" | \"910\" | \"912\" | \"916\" | \"917\" | \"918\" | \"919\" | \"E\" | \"N\" | \"N1\" | \"N2\" | \"N4\" | \"N5\" | \"N6\" | \"N7\" | \"N8\" | \"N9\" | \"N10\" | \"N11\" | \"N12\" | \"N13\" | \"N14\" | \"N15\" | \"N16\" | \"N17\" | \"N18\" | \"N19\" | \"N30\" | \"N31\" | \"N32\" | \"N33\" | \"N34\" | \"N45\" | \"N72\" | \"N78\" | \"SN1\" | \"SN4\" | \"SN5\" | \"SN6\" | \"SN7\" | \"SN8\" | \"SN9\" | \"S2\" | \"S3\" | \"S4\" | \"S5\" | \"S6\" | \"S7\" | \"S8\" | \"S9\" | \"S10\" | \"S11\" | \"S14\" | \"S15\" | \"S16\" | \"S18\" | \"S19\" | \"S20\" | \"S21\" | \"S23\" | \"S24\" | \"S25\"",
+          "resolved": "\"2\" | \"4\" | \"5\" | \"3\" | \"6\" | \"7\" | \"8\" | \"9\" | \"10\" | \"11\" | \"12\" | \"13\" | \"14\" | \"15\" | \"16\" | \"17\" | \"19\" | \"20\" | \"21\" | \"23\" | \"24\" | \"25\" | \"29\" | \"31\" | \"32\" | \"33\" | \"34\" | \"35\" | \"36\" | \"37\" | \"38\" | \"39\" | \"40\" | \"45\" | \"46\" | \"54\" | \"61\" | \"62\" | \"63\" | \"64\" | \"66\" | \"67\" | \"69\" | \"70\" | \"72\" | \"73\" | \"75\" | \"76\" | \"77\" | \"78\" | \"79\" | \"80\" | \"83\" | \"89\" | \"91\" | \"94\" | \"95\" | \"99\" | \"151\" | \"152\" | \"153\" | \"156\" | \"161\" | \"162\" | \"163\" | \"165\" | \"184\" | \"185\" | \"200\" | \"201\" | \"215\" | \"220\" | \"235\" | \"236\" | \"245\" | \"301\" | \"302\" | \"303\" | \"304\" | \"305\" | \"306\" | \"307\" | \"308\" | \"309\" | \"311\" | \"314\" | \"315\" | \"317\" | \"321\" | \"323\" | \"325\" | \"350\" | \"444\" | \"445\" | \"701\" | \"702\" | \"703\" | \"704\" | \"705\" | \"720\" | \"721\" | \"725\" | \"726\" | \"727\" | \"742\" | \"743\" | \"744\" | \"745\" | \"747\" | \"748\" | \"751\" | \"752\" | \"753\" | \"754\" | \"759\" | \"760\" | \"765\" | \"768\" | \"781\" | \"786\" | \"787\" | \"910\" | \"912\" | \"916\" | \"917\" | \"918\" | \"919\" | \"E\" | \"N\" | \"N1\" | \"N2\" | \"N4\" | \"N5\" | \"N6\" | \"N7\" | \"N8\" | \"N9\" | \"N10\" | \"N11\" | \"N12\" | \"N13\" | \"N14\" | \"N15\" | \"N16\" | \"N17\" | \"N18\" | \"N19\" | \"N30\" | \"N31\" | \"N32\" | \"N33\" | \"N34\" | \"N45\" | \"N72\" | \"N78\" | \"SN1\" | \"SN4\" | \"SN5\" | \"SN6\" | \"SN7\" | \"SN8\" | \"SN9\" | \"S2\" | \"S3\" | \"S4\" | \"S5\" | \"S6\" | \"S7\" | \"S8\" | \"S9\" | \"S10\" | \"S11\" | \"S14\" | \"S15\" | \"S16\" | \"S18\" | \"S19\" | \"S20\" | \"S21\" | \"S23\" | \"S24\" | \"S25\"",
           "references": {
             "VBZ": {
               "location": "import",

package/dist/collection/components/stzh-vbz-majorticker/stzh-vbz-majorticker.css

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -96,5 +99,6 @@
 
 .stzh-vbz-majorticker__ghettobox {
   --background-color: var(--stzh-color-coral);
-  --stzh-base-invert-color: var(--stzh-color-black);
+  --color: var(--stzh-color-black);
+  --close-color: var(--stzh-color-black);
 }