@oiz/stzh-components 1.5.0-alpha → 2.0.0

package/dist/collection/components/stzh-accordion-item/stzh-accordion-item.js

@@ -3,21 +3,22 @@ import { waitForEvent } from "../../utils/event-utils";
 import { stopAnimations, animateTo, shimKeyframesHeightAuto } from "../../utils/animation-utils";
 const ANIMATION_SHOW = {
   keyframes: [
-    { height: '0', opacity: '0' },
-    { height: 'auto', opacity: '1' }
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
   ],
-  options: { duration: 300, easing: 'linear' }
+  options: { duration: 300, easing: "linear" }
 };
 const ANIMATION_HIDE = {
   keyframes: [
-    { height: 'auto', opacity: '1' },
-    { height: '0', opacity: '0' }
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
   ],
-  options: { duration: 300, easing: 'linear' }
+  options: { duration: 300, easing: "linear" }
 };
 let accordionItemCounter = 0;
 /**
  * @slot - Slot for any content
+ * @slot icon - Slot for icon element
  */
 export class StzhAccordionItem {
   constructor() {
@@ -29,6 +30,16 @@ export class StzhAccordionItem {
     this.heading = "";
     /** Subtitle */
     this.subtitle = "";
+    /** Description */
+    this.description = "";
+    /** Icon (use instead of icon slot) */
+    this.icon = "";
+    /** Badge */
+    this.badge = "";
+    /** Whether badge should be displayed empty */
+    this.badgeEmpty = false;
+    /** Badge type */
+    this.badgeType = "default";
     /** Heading level */
     this.headingLevel = "3";
     this.toggledByMethod = false;
@@ -83,32 +94,34 @@ export class StzhAccordionItem {
     if (newValue) {
       if (this.toggledByMethod) {
         this.stzhOpen.emit({
-          component: 'stzh-accordion-item'
+          component: "stzh-accordion-item"
         });
       }
       await stopAnimations(this.bodyElement);
       this.bodyElement.hidden = false;
       await animateTo(this.bodyElement, shimKeyframesHeightAuto(ANIMATION_SHOW.keyframes, this.bodyElement.scrollHeight), ANIMATION_SHOW.options);
-      this.bodyElement.style.height = 'auto';
+      this.bodyElement.style.height = "auto";
+      this.bodyElement.style.overflow = "auto";
       if (this.toggledByMethod) {
         this.stzhOpened.emit({
-          component: 'stzh-accordion-item'
+          component: "stzh-accordion-item"
         });
       }
     }
     else {
       if (this.toggledByMethod) {
         this.stzhClose.emit({
-          component: 'stzh-accordion-item'
+          component: "stzh-accordion-item"
         });
       }
       await stopAnimations(this.bodyElement);
       await animateTo(this.bodyElement, shimKeyframesHeightAuto(ANIMATION_HIDE.keyframes, this.bodyElement.scrollHeight), ANIMATION_HIDE.options);
       this.bodyElement.hidden = true;
-      this.bodyElement.style.height = 'auto';
+      this.bodyElement.style.height = "0px";
+      this.bodyElement.style.overflow = "hidden";
       if (this.toggledByMethod) {
         this.stzhClosed.emit({
-          component: 'stzh-accordion-item'
+          component: "stzh-accordion-item"
         });
       }
     }
@@ -150,17 +163,23 @@ export class StzhAccordionItem {
   }
   componentDidLoad() {
     this.bodyElement.hidden = !this.open;
-    this.bodyElement.style.height = this.open ? "auto" : "0";
+    this.bodyElement.style.height = this.open ? "auto" : "0px";
+    this.bodyElement.style.overflow = this.open ? "auto" : "hidden";
   }
   render() {
     const Heading = `h${this.headingLevel}`;
     const classes = {
       "stzh-accordion-item": true,
+      "stzh-accordion-item--has-description": !!this.description,
       "stzh-accordion-item--has-subtitle": !!this.subtitle,
       "stzh-accordion-item--is-open": this.open,
       "stzh-accordion-item--is-disabled": this.disabled,
     };
-    return (h(Host, null, h("div", { class: classes }, h(Heading, { id: `${this.accordionItemId}-header`, class: "stzh-accordion-item__heading", onClick: this.handleHeaderClick }, h("button", { ref: (el) => (this.buttonElement = el), class: "stzh-accordion-item__button", "aria-controls": `${this.accordionItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, disabled: this.disabled, onKeyDown: this.onButtonKeydown, type: "button" }, h("span", { class: "stzh-accordion-item__button-text" }, h("span", { class: "stzh-accordion-item__subtitle" }, this.subtitle), h("span", { class: "stzh-accordion-item__heading" }, this.heading)), h("span", { class: "stzh-accordion-item__button-icon" }))), h("div", { id: `${this.accordionItemId}-content`, ref: (el) => (this.bodyElement = el), class: "stzh-accordion-item__content", "aria-labelledby": `${this.accordionItemId}-header`, role: "region", onKeyDown: this.onContentKeydown }, h("div", { class: "stzh-accordion-item__content-inner" }, h("slot", null))))));
+    return (h(Host, null, h("div", { class: classes }, h(Heading, { id: `${this.accordionItemId}-header`, class: "stzh-accordion-item__heading", onClick: this.handleHeaderClick }, h("button", { ref: (el) => (this.buttonElement = el), class: "stzh-accordion-item__button", "aria-controls": `${this.accordionItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, disabled: this.disabled, onKeyDown: this.onButtonKeydown, type: "button" }, h("span", { class: "stzh-accordion-item__icon-wrapper" }, this.icon ?
+      h("stzh-icon", { class: "stzh-accordion-item__icon", name: this.icon })
+      :
+        h("slot", { name: "icon" })), h("span", { class: "stzh-accordion-item__button-text" }, h("span", { class: "stzh-accordion-item__subtitle" }, this.subtitle), h("span", { class: "stzh-accordion-item__heading" }, this.heading), h("span", { class: "stzh-accordion-item__description" }, this.description)), h("span", { class: "stzh-accordion-item__button-icon" }), (this.badge || this.badgeEmpty) &&
+      h("stzh-badge", { class: "stzh-accordion-item__badge", label: this.badge, type: this.badgeType }))), h("div", { id: `${this.accordionItemId}-content`, ref: (el) => (this.bodyElement = el), class: "stzh-accordion-item__content", "aria-labelledby": `${this.accordionItemId}-header`, role: "region", onKeyDown: this.onContentKeydown }, h("div", { class: "stzh-accordion-item__content-inner" }, h("slot", null))))));
   }
   static get is() { return "stzh-accordion-item"; }
   static get encapsulation() { return "scoped"; }
@@ -248,6 +267,96 @@ export class StzhAccordionItem {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Description"
+        },
+        "attribute": "description",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon (use instead of icon slot)"
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "badge": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Badge"
+        },
+        "attribute": "badge",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "badgeEmpty": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether badge should be displayed empty"
+        },
+        "attribute": "badge-empty",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "badgeType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"success\" | \"warning\" | \"error\" | \"info\"",
+          "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Badge type"
+        },
+        "attribute": "badge-type",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
       "headingLevel": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/stzh-accordion-item/stzh-accordion-item.stories.js

@@ -38,6 +38,15 @@ Default.args = {
   heading: 'Lorem ipsum'
 };
 
+export const WithDescription = Template.bind({});
+WithDescription.args = {
+  heading: 'Lorem ipsum',
+  description: 'Description',
+  icon: 'question-help',
+  'badge-empty': true,
+  'badge-type': 'warning'
+};
+
 export const WithSubtitle = Template.bind({});
 WithSubtitle.args = {
   heading: 'Lorem ipsum',

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

@@ -0,0 +1,147 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * 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;
+}
+
+.stzh-actionset {
+  /* Stack variant */
+}
+.stzh-actionset__actions {
+  display: flex;
+  align-items: center;
+}
+.stzh-actionset__actions-wrapper {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+}
+.stzh-actionset__action:not(:last-child) {
+  margin-right: var(--stzh-space-xsmall);
+}
+.stzh-actionset__action-popover {
+  opacity: 0;
+}
+.stzh-actionset--has-collapsed-items .stzh-actionset__action-popover {
+  --width: auto;
+  opacity: 1;
+}
+@media screen and (max-width: 599px) {
+  .stzh-actionset--stack .stzh-actionset__actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+@media screen and (max-width: 599px) {
+  .stzh-actionset--stack .stzh-actionset__actions-wrapper {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+@media screen and (max-width: 599px) {
+  .stzh-actionset--stack .stzh-actionset__action:not(:last-child) {
+    margin-bottom: var(--stzh-space-xsmall);
+    margin-right: 0;
+  }
+}
+@media screen and (max-width: 599px) {
+  .stzh-actionset--stack .stzh-actionset__action-popover {
+    margin-top: var(--stzh-space-xsmall);
+  }
+}
+@media screen and (max-width: 599px) {
+  .stzh-actionset--stack:not(.stzh-actionset--has-collapsed-items) .stzh-actionset__action-popover {
+    display: none;
+  }
+}