@oiz/stzh-components 1.5.0-alpha → 2.0.0-beta

package/dist/cjs/stzh-sortable.cjs.entry.js

@@ -3869,6 +3869,7 @@ const StzhSortable = class {
   constructor(hostRef) {
     index$1.registerInstance(this, hostRef);
     this.stzhUpdate = index$1.createEvent(this, "stzhUpdate", 7);
+    this.stzhDisable = index$1.createEvent(this, "stzhDisable", 7);
     /** Wether sorting is disabled or not */
     this.disabled = false;
     /** HTML attribute that is used by the `toArray()` method */
@@ -4004,6 +4005,7 @@ const StzhSortable = class {
   }
   /** Move item */
   async moveItem(item, direction) {
+    var _a;
     if (!item
       || !item.nextElementSibling && direction === "down"
       || !item.previousElementSibling && direction === "up") {
@@ -4018,8 +4020,22 @@ const StzhSortable = class {
     }
     this.updateAriaLive(this.localization.moved, item);
     this.focusItem(item);
+    const currentIndex = Array.from((_a = item.parentElement) === null || _a === void 0 ? void 0 : _a.children).indexOf(item);
+    this.stzhUpdate.emit({
+      component: "stzh-sortable",
+      data: await this.toArray(),
+      item,
+      newIndex: currentIndex,
+      oldIndex: currentIndex + (direction === "up" ? 1 : -1)
+    });
     this.resetItemOnBlur = true;
   }
+  disabledWatcher() {
+    this.stzhDisable.emit({
+      component: "stzh-sortable",
+      disabled: this.disabled
+    });
+  }
   filterElementsWatcher(newValue) {
     if (typeof newValue === "string") {
       this._filterElements = JSON.parse(newValue);
@@ -4147,6 +4163,7 @@ const StzhSortable = class {
   }
   get element() { return index$1.getElement(this); }
   static get watchers() { return {
+    "disabled": ["disabledWatcher"],
     "filterElements": ["filterElementsWatcher"]
   }; }
 };

package/dist/cjs/stzh-tooltip.cjs.entry.js

@@ -44,6 +44,8 @@ const StzhTooltip = class {
     this.content = "";
     /** Default placement of tooltip relative to trigger element */
     this.placement = "bottom";
+    /** Position strategy */
+    this.strategy = "absolute";
     /** Shifting of tooltip content */
     this.skidding = 0;
     /** Distance from tooltip content to trigger (default: arrow height + 8px = 16) */
@@ -68,7 +70,7 @@ const StzhTooltip = class {
         return;
       }
       const { x = 0, y = 0, strategy = "absolute", placement, middlewareData } = await arrow.computePosition(this.triggerElement.firstElementChild, this.contentElement, {
-        // strategy: 'fixed',
+        strategy: this.strategy,
         placement: this.placement,
         middleware: [
           arrow.offset({

package/dist/collection/assets/i18n/de.json

@@ -115,14 +115,19 @@
   "datamessagelist-item": {
     "actionsPopoverLabel": "Aktionen"
   },
-  "servicecard": {
+  "actionset": {
+    "actions": "Aktionen",
+    "furtherActions": "Weitere Aktionen"
+  },
+  "card": {
+    "select": "auswählen",
     "actionsPopoverLabel": "Aktionen",
     "actionMoveUp": "Kachel nach oben schieben",
     "actionMoveDown": "Kachel nach unten schieben",
     "actionAdd": "Zu «Meine Services» hinzufügen",
     "actionRemove": "Aus «Meine Services» entfernen"
   },
-  "servicecard-list": {
+  "card-list": {
     "expandAll": "alle aufklappen",
     "collapseAll": "alle zuklappen"
   },

package/dist/collection/assets/i18n/en.json

@@ -115,14 +115,19 @@
   "datamessagelist-item": {
     "actionsPopoverLabel": "Actions"
   },
-  "servicecard": {
+  "actionset": {
+    "actions": "Actions",
+    "furtherActions": "Further Actions"
+  },
+  "card": {
+    "select": "select",
     "actionsPopoverLabel": "Actions",
     "actionMoveUp": "Move card up",
     "actionMoveDown": "Move card down",
     "actionAdd": "Add to «My Services»",
     "actionRemove": "Remove from «My Services»"
   },
-  "servicecard-list": {
+  "card-list": {
     "expandAll": "expand all",
     "collapseAll": "collapse all"
   },

package/dist/collection/assets/icons/mono/recycling-outline.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_10250_80320)">
+<path d="M23.25 12.7501L19.4374 8.71131L16.1261 12.7913L17.8736 14.2096L18.5696 13.3516C18.3589 15.1518 17.5314 16.8235 16.2275 18.0825C14.9237 19.3416 13.2241 20.1103 11.4176 20.2579L11.5894 22.5016C13.9539 22.309 16.1753 21.291 17.8649 19.6257C19.5545 17.9604 20.6045 15.7539 20.8313 13.3924L21.6911 14.2819L23.25 12.7501Z" stroke="#4D4D4D" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.28225 17.3101L5.63288 18.3102C4.32349 17.1514 3.441 15.5866 3.1268 13.8665C2.81259 12.1465 3.08487 10.3707 3.9 8.82381L1.91138 7.77194C0.792692 9.89257 0.468576 12.3431 0.997483 14.6817C1.52639 17.0202 2.87351 19.0928 4.79588 20.5257L3.35513 21.0263L3.75 23.2501L9.19988 21.6856L7.4055 16.5657L5.28225 17.3101ZM16.971 7.58256L18.7429 6.15681C17.8066 4.94393 16.6052 3.96132 15.2307 3.28418C13.8562 2.60704 12.345 2.25331 10.8128 2.25006H10.8116C9.68353 2.27439 8.56747 2.48746 7.50975 2.88044L8.076 1.50381L6 0.73056L3.76988 6.24194L9.2085 7.37819L9.66638 5.17769L8.64 4.88706C9.34205 4.657 10.0729 4.52672 10.8113 4.50006C12.0046 4.51173 13.1803 4.79544 14.2475 5.32959C15.3147 5.86375 16.2464 6.63428 16.971 7.58256Z" stroke="#4D4D4D" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_10250_80320">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/collection/assets/icons/mono/recycling.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_10250_80321)">
+<path d="M6.37538 0.750061L4.5 5.43906M4.5 5.43906L9 6.37544M4.5 5.43906C6.5384 3.84847 9.12499 3.13241 11.6912 3.44828C14.2573 3.76416 16.5931 5.08612 18.1849 7.12356M23.25 14.2504L19.989 10.8754M19.989 10.8754L17.25 14.2504M19.989 10.8754C20.3125 12.2456 20.3357 13.6691 20.057 15.0491C19.7783 16.429 19.2044 17.7324 18.3746 18.8696C17.5447 20.0068 16.4786 20.9511 15.2495 21.6375C14.0204 22.3239 12.6573 22.7362 11.2538 22.8462M2.625 23.2504L7.12313 22.2747M7.12313 22.2747L5.625 18.0004M7.12313 22.2747C5.82055 21.793 4.63581 21.0388 3.6481 20.0625C2.66039 19.0862 1.89246 17.9103 1.39567 16.6134C0.898869 15.3165 0.68464 13.9285 0.767302 12.5421C0.849964 11.1558 1.22761 9.80311 1.875 8.57444" stroke="#4D4D4D" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_10250_80321">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/collection/assets/icons/mono/smartphone.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_10250_80319)">
+<path d="M4.5 3.75006V1.87506C4.5 1.57669 4.61853 1.29054 4.8295 1.07957C5.04048 0.868588 5.32663 0.750061 5.625 0.750061H18.375C18.6734 0.750061 18.9595 0.868588 19.1705 1.07957C19.3815 1.29054 19.5 1.57669 19.5 1.87506V3.75006M4.5 3.75006H19.5M4.5 3.75006V18.7501M19.5 3.75006V18.7501M19.5 18.7501V22.1251C19.5 22.4234 19.3815 22.7096 19.1705 22.9206C18.9595 23.1315 18.6734 23.2501 18.375 23.2501H5.625C5.32663 23.2501 5.04048 23.1315 4.8295 22.9206C4.61853 22.7096 4.5 22.4234 4.5 22.1251V18.7501M19.5 18.7501H4.5M11.25 21.0001H12.75" stroke="#4D4D4D" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_10250_80319">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/collection/assets/icons/mono/target.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_9415_65741)">
+<path d="M12 0.750061V6.75006M12 17.2501V23.2501M6.75 12.0001H0.75M23.25 12.0001H17.25" stroke="#4D4D4D" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 20.2501C16.5563 20.2501 20.25 16.5564 20.25 12.0001C20.25 7.44371 16.5563 3.75006 12 3.75006C7.44365 3.75006 3.75 7.44371 3.75 12.0001C3.75 16.5564 7.44365 20.2501 12 20.2501Z" stroke="#4D4D4D" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_9415_65741">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/collection/collection-manifest.json

@@ -3,11 +3,14 @@
     "./components/stzh-accordion/stzh-accordion.js",
     "./components/stzh-accordion-item/stzh-accordion-item.js",
     "./components/stzh-actions/stzh-actions.js",
+    "./components/stzh-actionset/stzh-actionset.js",
     "./components/stzh-appnav/stzh-appnav.js",
     "./components/stzh-appointments/stzh-appointments.js",
     "./components/stzh-badge/stzh-badge.js",
     "./components/stzh-button/stzh-button.js",
     "./components/stzh-calendar/stzh-calendar.js",
+    "./components/stzh-card/stzh-card.js",
+    "./components/stzh-card-list/stzh-card-list.js",
     "./components/stzh-cell/stzh-cell.js",
     "./components/stzh-checkbox/stzh-checkbox.js",
     "./components/stzh-checkboxgroup/stzh-checkboxgroup.js",
@@ -15,6 +18,7 @@
     "./components/stzh-chip-select/stzh-chip-select.js",
     "./components/stzh-container/stzh-container.js",
     "./components/stzh-cspace/stzh-cspace.js",
+    "./components/stzh-datalist/stzh-datalist.js",
     "./components/stzh-datamessagelist/stzh-datamessagelist.js",
     "./components/stzh-datamessagelist-item/stzh-datamessagelist-item.js",
     "./components/stzh-datatable/stzh-datatable.js",
@@ -56,8 +60,6 @@
     "./components/stzh-row/stzh-row.js",
     "./components/stzh-saptcha/stzh-saptcha.js",
     "./components/stzh-section/stzh-section.js",
-    "./components/stzh-servicecard/stzh-servicecard.js",
-    "./components/stzh-servicecard-list/stzh-servicecard-list.js",
     "./components/stzh-skiplink/stzh-skiplink.js",
     "./components/stzh-sortable/stzh-sortable.js",
     "./components/stzh-status/stzh-status.js",

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;
+  }
+}