@oiz/stzh-components 1.5.0-alpha → 2.0.0

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

@@ -95,24 +95,30 @@
 }
 
 :host {
+  --cursor: grab;
+  --grabbing-cursor: grabbing;
   --unselected-item-opacity: 0.6;
   --ghost-item-background: var(--stzh-color-grey5);
   --ghost-item-box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.32);
 }
+:host[disabled] {
+  --cursor: inherit;
+}
+:host[disabled] ::slotted(*) *.is-sortable-item {
+  -webkit-user-select: auto;
+     -moz-user-select: auto;
+          user-select: auto;
+}
 :host ::slotted(*) *.is-sortable-item {
   position: relative;
   transition: opacity var(--stzh-base-transition-animation-speed);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  cursor: move;
-  cursor: -webkit-grab;
-  cursor: grab;
+  cursor: var(--cursor);
 }
 :host ::slotted(*) *.is-sortable-item.is-drag, :host ::slotted(*) *.is-sortable-item.is-chosen, :host ::slotted(*) *.is-sortable-item.is-ghost, :host ::slotted(*) *.is-sortable-item.is-selected {
-  cursor: move;
-  cursor: -webkit-grabbing;
-  cursor: grabbing;
+  cursor: var(--grabbing-cursor);
 }
 :host ::slotted(*) *.is-sortable-item.is-drag {
   opacity: 1 !important;

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

@@ -150,6 +150,7 @@ export class StzhSortable {
   }
   /** Move item */
   async moveItem(item, direction) {
+    var _a;
     if (!item
       || !item.nextElementSibling && direction === "down"
       || !item.previousElementSibling && direction === "up") {
@@ -164,8 +165,22 @@ export class StzhSortable {
     }
     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);
@@ -287,7 +302,8 @@ export class StzhSortable {
   }
   render() {
     const classes = {
-      "stzh-sortable": true
+      "stzh-sortable": true,
+      "stzh-sortable--disabled": this.disabled
     };
     return (h(Host, null, h("div", { class: classes }, h("div", { id: `${this.sortableId}-description`, class: "stzh-sortable__description" }, this.localization.description), h("div", { ref: (el) => (this.ariaLiveElement = el), "aria-live": "assertive", class: "stzh-sortable__aria-live" }), h("div", { ref: (el) => (this.containerElement = el), class: "stzh-sortable__container" }, h("slot", null)))));
   }
@@ -448,6 +464,26 @@ export class StzhSortable {
             }
           }
         }
+      }, {
+        "method": "stzhDisable",
+        "name": "stzhDisable",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Disable event"
+        },
+        "complexType": {
+          "original": "StzhSortableDisableEvent",
+          "resolved": "{ component: \"stzh-sortable\"; disabled: boolean; }",
+          "references": {
+            "StzhSortableDisableEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
       }];
   }
   static get methods() {
@@ -523,6 +559,9 @@ export class StzhSortable {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "disabled",
+        "methodName": "disabledWatcher"
+      }, {
         "propName": "filterElements",
         "methodName": "filterElementsWatcher"
       }];

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

@@ -6,7 +6,7 @@ export default {
   component: 'stzh-sortable',
   parameters: {
     actions: {
-      handles: ['stzhUpdate']
+      handles: ['stzhUpdate', 'stzhDisabled']
     },
     layout: 'padded',
     docs: {

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

@@ -131,6 +131,11 @@ stzh-table *::after {
     padding-bottom: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  .stzh-table__header {
+    padding-bottom: var(--stzh-space-large);
+  }
+}
 @media screen and (min-width: 1024px) {
   .stzh-table__header {
     margin-bottom: var(--stzh-space-large);

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

@@ -37,6 +37,8 @@ export class StzhTooltip {
     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) */
@@ -61,7 +63,7 @@ export class StzhTooltip {
         return;
       }
       const { x = 0, y = 0, strategy = "absolute", placement, middlewareData } = await computePosition(this.triggerElement.firstElementChild, this.contentElement, {
-        // strategy: 'fixed',
+        strategy: this.strategy,
         placement: this.placement,
         middleware: [
           offset({
@@ -395,6 +397,24 @@ export class StzhTooltip {
         "reflect": false,
         "defaultValue": "\"bottom\""
       },
+      "strategy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"absolute\" | \"fixed\"",
+          "resolved": "\"absolute\" | \"fixed\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Position strategy"
+        },
+        "attribute": "strategy",
+        "reflect": false,
+        "defaultValue": "\"absolute\""
+      },
       "skidding": {
         "type": "number",
         "mutable": false,

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

@@ -218,7 +218,7 @@ stzh-upload *::after {
   font-size: var(--stzh-font-milli-font-size);
   line-height: var(--stzh-font-milli-text-line-height);
   letter-spacing: var(--stzh-font-curve---text-letter-spacing);
-  padding: var(--stzh-space-large);
+  padding: var(--stzh-space-xxlarge);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -230,14 +230,9 @@ stzh-upload *::after {
   border-image-repeat: round;
   transition: background-color var(--stzh-base-transition-animation-speed);
 }
-@media screen and (min-width: 600px) {
-  .stzh-upload__clickarea {
-    padding: var(--stzh-space-xlarge);
-  }
-}
 @media screen and (min-width: 1024px) {
   .stzh-upload__clickarea {
-    padding: var(--stzh-space-xxlarge);
+    padding: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -259,6 +254,11 @@ stzh-upload *::after {
     margin-top: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  .stzh-upload__button {
+    margin-top: var(--stzh-space-large);
+  }
+}
 .stzh-upload stzh-icon.stzh-upload__delete-icon-error {
   display: none;
 }
@@ -283,6 +283,12 @@ stzh-upload *::after {
 .stzh-upload__preview.dz-complete .stzh-upload__info-wrapper-complete {
   display: flex;
 }
+.stzh-upload__preview.dz-empty .stzh-upload__extension::after {
+  content: "";
+}
+.stzh-upload__preview.dz-empty .stzh-upload__size {
+  display: none;
+}
 .stzh-upload__inner {
   height: 3.875rem;
   display: flex;
@@ -364,6 +370,9 @@ stzh-upload *::after {
 .stzh-upload__extension {
   text-transform: uppercase;
 }
+.stzh-upload__extension::after {
+  content: " | ";
+}
 .stzh-upload__delete {
   cursor: pointer;
   -webkit-appearance: none;

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

@@ -263,12 +263,56 @@ export class StzhUpload {
       dictResponseError: this.localization.responseError,
       dictInvalidFileType: this.localization.invalidFileType,
       dictFileTooBig: this.localization.fileTooBig,
+      // Called when a file is added to the queue
+      // Receives `file`
+      // Taken from https://github.com/dropzone/dropzone/blob/v5.9.3/src/options.js#L594
+      addedfile(file) {
+        if (this.element === this.previewsContainer) {
+          this.element.classList.add("dz-started");
+        }
+        if (this.previewsContainer && !this.options.disablePreviews) {
+          file.previewElement = Dropzone.createElement(this.options.previewTemplate.trim());
+          file.previewTemplate = file.previewElement; // Backwards compatibility
+          this.previewsContainer.appendChild(file.previewElement);
+          if (file.size == 0) {
+            file.previewElement.classList.add('dz-empty');
+          }
+          for (var node of file.previewElement.querySelectorAll("[data-dz-name]")) {
+            node.textContent = file.name;
+          }
+          for (node of file.previewElement.querySelectorAll("[data-dz-size]")) {
+            node.innerHTML = this.filesize(file.size);
+          }
+          if (this.options.addRemoveLinks) {
+            file._removeLink = Dropzone.createElement(`<a class="dz-remove" href="javascript:undefined;" data-dz-remove>${this.options.dictRemoveFile}</a>`);
+            file.previewElement.appendChild(file._removeLink);
+          }
+          let removeFileEvent = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (file.status === Dropzone.UPLOADING) {
+              return Dropzone.confirm(this.options.dictCancelUploadConfirmation, () => this.removeFile(file));
+            }
+            else {
+              if (this.options.dictRemoveFileConfirmation) {
+                return Dropzone.confirm(this.options.dictRemoveFileConfirmation, () => this.removeFile(file));
+              }
+              else {
+                return this.removeFile(file);
+              }
+            }
+          };
+          for (let removeLink of file.previewElement.querySelectorAll("[data-dz-remove]")) {
+            removeLink.addEventListener("click", removeFileEvent);
+          }
+        }
+      },
       // When the upload is finished, either with success or an error.
       // Taken from https://github.com/dropzone/dropzone/blob/v5.9.3/src/options.js#L752
       complete(file) {
         for (let node of file.previewElement.querySelectorAll("[data-dz-remove]")) {
-          node.setAttribute('title', this.options.dictRemoveFile);
-          node.setAttribute('aria-label', this.options.dictRemoveFile);
+          node.setAttribute("title", this.options.dictRemoveFile);
+          node.setAttribute("aria-label", this.options.dictRemoveFile);
         }
         // move file uploads with errors to another element, so they are grouped together
         if (file.status === "error") {
@@ -348,7 +392,6 @@ export class StzhUpload {
               </div>
               <div class="stzh-upload__meta">
                 <span class="stzh-upload__extension" data-dz-extension></span>
-                |
                 <span class="stzh-upload__size" data-dz-size></span>
               </div>
               <div class="stzh-upload__error-message">

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

@@ -66,6 +66,6 @@ ExistingFiles.args = {
   'existing-files': `[
     { "name": "Filename.pdf", "size": 12345, "id": "upload-1" },
     { "name": "Filename2.pdf", "size": 22345, "id": "upload-2" },
-    { "name": "Filename3.pdf", "size": 32345, "id": "upload-3" }
+    { "name": "Filename3.pdf", "size": 0, "id": "upload-3" }
   ]`
 };

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

@@ -154,19 +154,14 @@
   line-height: var(--stzh-font-micro-text-line-height);
   margin-top: var(--stzh-space-xsmall);
 }
-@media screen and (min-width: 600px) {
-  .stzh-vbz-ticker__description {
-    margin-top: var(--stzh-space-small);
-  }
-}
 @media screen and (min-width: 1024px) {
   .stzh-vbz-ticker__description {
-    margin-top: var(--stzh-space-medium);
+    margin-top: var(--stzh-space-small);
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-vbz-ticker__description {
-    margin-top: var(--stzh-space-large);
+    margin-top: var(--stzh-space-medium);
   }
 }
 .stzh-vbz-ticker__link {

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

@@ -123,19 +123,14 @@
 :host([curve=tiny]) {
   --space: var(--stzh-space-xsmall);
 }
-@media screen and (min-width: 600px) {
-  :host([curve=tiny]) {
-    --space: var(--stzh-space-small);
-  }
-}
 @media screen and (min-width: 1024px) {
   :host([curve=tiny]) {
-    --space: var(--stzh-space-medium);
+    --space: var(--stzh-space-small);
   }
 }
 @media screen and (min-width: 1260px) {
   :host([curve=tiny]) {
-    --space: var(--stzh-space-large);
+    --space: var(--stzh-space-medium);
   }
 }
 
@@ -147,6 +142,11 @@
     --space: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  :host([curve=small]) {
+    --space: var(--stzh-space-large);
+  }
+}
 
 :host([curve=regular]) {
   --space: var(--stzh-space-medium);
@@ -163,35 +163,25 @@
 }
 
 :host([curve=medium]) {
-  --space: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host([curve=medium]) {
-    --space: var(--stzh-space-large);
-  }
+  --space: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   :host([curve=medium]) {
-    --space: var(--stzh-space-xlarge);
+    --space: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host([curve=medium]) {
-    --space: var(--stzh-space-xxlarge);
+    --space: var(--stzh-space-xxxlarge);
   }
 }
 
 :host([curve=large]) {
-  --space: var(--stzh-space-large);
-}
-@media screen and (min-width: 600px) {
-  :host([curve=large]) {
-    --space: var(--stzh-space-xlarge);
-  }
+  --space: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 1024px) {
   :host([curve=large]) {
-    --space: var(--stzh-space-xxlarge);
+    --space: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -201,13 +191,18 @@
 }
 
 :host([curve=big]) {
-  --space: var(--stzh-space-xxlarge);
+  --space: var(--stzh-space-xxxlarge);
 }
 @media screen and (min-width: 600px) {
   :host([curve=big]) {
     --space: var(--stzh-space-xxxxlarge);
   }
 }
+@media screen and (min-width: 1024px) {
+  :host([curve=big]) {
+    --space: var(--stzh-space-big);
+  }
+}
 @media screen and (min-width: 1260px) {
   :host([curve=big]) {
     --space: var(--stzh-space-xbig);
@@ -215,7 +210,7 @@
 }
 
 :host([curve=huge]) {
-  --space: var(--stzh-space-xxxlarge);
+  --space: var(--stzh-space-xxxxlarge);
 }
 @media screen and (min-width: 600px) {
   :host([curve=huge]) {

package/dist/collection/pages/meinkonto.stories.js

@@ -10,6 +10,41 @@ export default {
   }
 };
 
+const actions = `[
+  {
+    "id": "message",
+    "onlyCollapseText": true,
+    "icon": "mail",
+    "badge": "3",
+    "label": "Messages"
+  }
+]`;
+
+const actions2 = `[
+  {
+    "id": "add",
+    "icon": "plus",
+    "label": "Add address"
+  },
+  {
+    "id": "edit",
+    "icon": "edit",
+    "label": "Edit"
+  },
+  {
+    "id": "delete",
+    "icon": "delete",
+    "label": "Remove"
+  },
+  {
+    "id": "message",
+    "onlyCollapseText": true,
+    "icon": "mail",
+    "badge": "3",
+    "label": "Messages"
+  }
+]`;
+
 const TemplateServices = (args) => (
   <div class="stzh-theme-ma"> { /* use theme class on <html> class */ }
     <stzh-visuallyhidden>
@@ -135,97 +170,67 @@ const TemplateServices = (args) => (
 
         <stzh-vspace curve="large"></stzh-vspace>
 
-        <stzh-servicecard-list show-toggle-link>
+        <stzh-card-list show-toggle-link sortable-enabled>
           <stzh-text slot="description">
             Services are shown here, which you marked with <stzh-icon name="star-filled"></stzh-icon>
           </stzh-text>
-          <stzh-servicecard
-            collapsible
-            starrable
-            heading="Lorem ipsum 1"
-            subtitle="Dolor si 1"
-            actions='[
-              {
-                "id": "message",
-                "onlyCollapseText": true,
-                "icon": "mail",
-                "badge": "3",
-                "label": "Messages"
-              }
-            ]'
-          >
-            <div slot="left">Content Left</div>
-            <div slot="right">Content Right</div>
-          </stzh-servicecard>
-          <stzh-servicecard
-            collapsible
-            starrable
-            heading="Lorem ipsum 2"
-            subtitle='["Dolor si 2", "Dolor si 2.1", "Dolor si 2.2"]'
-            subtitle-interactive 
-            actions='[
-              {
-                "id": "add",
-                "icon": "plus",
-                "label": "Add address"
-              },
-              {
-                "id": "edit",
-                "icon": "edit",
-                "label": "Edit"
-              },
-              {
-                "id": "delete",
-                "icon": "delete",
-                "label": "Remove"
-              },
-              {
-                "id": "message",
-                "onlyCollapseText": true,
-                "icon": "mail",
-                "badge": "3",
-                "label": "Messages"
-              }
-            ]'
-          >
-            <div slot="left">Content Left</div>
-            <table slot="middle">
-              <tr>
-                <th>Cell Label</th>
-                <td>Cell Value</td>
-              </tr>
-              <tr>
-                <th>Cell Label</th>
-                <td>Cell Value</td>
-              </tr>
-              <tr>
-                <th>Cell Label</th>
-                <td>Cell Value</td>
-              </tr>
-            </table>
-            <div slot="right">Content Right</div>
-          </stzh-servicecard>
-          <stzh-servicecard collapsible starrable heading="Lorem ipsum 3" subtitle="Dolor si 3">
-            <div slot="left">Content Left</div>
-            <stzh-button label="Button Right 1" slot="right" fullwidth></stzh-button>
-            <stzh-popover slot="right">
-              <stzh-button label="Button Right 2" fullwidth icon="angle-up" icon-position="right"></stzh-button>
-              <stzh-menu slot="content">
-                <stzh-menu-item label="Test"></stzh-menu-item>
-              </stzh-menu>
-            </stzh-popover>
-          </stzh-servicecard>
-          <stzh-servicecard collapsible starrable heading="Lorem ipsum 4">
-            <div slot="left">Content Left</div>
-            <stzh-section slot="middle">
-              Content Middle Section 1
-            </stzh-section>
-            <stzh-section slot="middle">
-              Content Middle Section 2
-            </stzh-section>
-            <stzh-button label="Button Right" slot="right" fullwidth></stzh-button>
-          </stzh-servicecard>
-        </stzh-servicecard-list>
+          <stzh-card collapsible starrable heading="Lorem ipsum 1" subtitle="Dolor si 1" header-actions={actions}>
+            <div slot="content">Content</div>
+          </stzh-card>
+          <stzh-card collapsible heading="Lorem ipsum 2" subtitle='["Dolor si 2", "Dolor si 2.1", "Dolor si 2.2"]' subtitle-interactive header-actions={actions2}>
+            <stzh-row slot="content" span-small="6">
+              <stzh-cell>
+                <stzh-datalist
+                  items='[
+                    {
+                      "label": "Label",
+                      "value": "Value 1",
+                      "meta": "Metainfo",
+                      "icon": "delete"
+                    },
+                    {
+                      "label": "Really Long Label",
+                      "value": "Value 2",
+                      "meta": "Metainfo",
+                      "icon": "delete"
+                    },
+                    {
+                      "label": "Label",
+                      "value": "Value 3",
+                      "meta": "Metainfo"
+                    }
+                  ]'></stzh-datalist>
+              </stzh-cell>
+              <stzh-cell>
+              <stzh-datalist
+                  items='[
+                    {
+                      "label": "Label",
+                      "value": "Value 4",
+                      "meta": "Metainfo",
+                      "icon": "delete"
+                    },
+                    {
+                      "label": "Label",
+                      "value": "Value 5",
+                      "icon": "delete",
+                      "href": "http://example.com"
+                    }
+                  ]'></stzh-datalist>
+              </stzh-cell>
+            </stzh-row>
+          </stzh-card>
+          <stzh-card collapsible starrable heading="Lorem ipsum 3" subtitle="Dolor si 3" footer-actions={actions2}>
+            <div slot="content">Content</div>
+          </stzh-card>
+          <stzh-card collapsible starrable heading="Lorem ipsum 4">
+            <stzh-cspace slot="content">
+              <p>Content with Input:</p>
+              <stzh-input></stzh-input>
+              <stzh-button label="Button Right" fullwidth></stzh-button>
+            </stzh-cspace>
+          </stzh-card>
+        </stzh-card-list>
       </stzh-container>
 
       <stzh-vspace curve="big"></stzh-vspace>