@oiz/stzh-components 1.4.0-npmjstest → 2.0.0-beta

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import scrollIntoView from "scroll-into-view-if-needed";
-import Sortable from "sortablejs";
+import Sortable from "../../libraries/sortable";
+import { cloneElement } from "../../utils/utils";
 import { fetchTranslations } from "../../utils/translation-utils";
 const CLASS_ITEM = 'is-sortable-item';
 const CLASS_GHOST = "is-ghost";
@@ -23,6 +24,11 @@ export class StzhSortable {
       var _a;
       return (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
     };
+    /** Algorithm how the ghost element will be cloned */
+    this.ghostClone = (dragElement) => {
+      const [clonedElement] = cloneElement(dragElement);
+      return clonedElement;
+    };
     /** Filtered elements that should prevent dragging inside the drag item elements */
     this.filterElements = [
       "[data-stzh-sortable-filtered]",
@@ -78,17 +84,13 @@ export class StzhSortable {
     };
     this.onKeydown = (event) => {
       const currentTarget = event.currentTarget;
+      const target = event.target;
       if (!this.getContainer() || this.disabled) {
         return;
       }
-      if (event.key === " "
-        || (event.key === "Tab"
-          && this.selectedItem
-          && this.selectedItem === event.currentTarget)) {
-        event.preventDefault();
-      }
-      const isFilteredElement = currentTarget.matches(this._filterElements.join(', '));
+      const isFilteredElement = target.matches(this._filterElements.join(', '));
       if (event.key === " " && !isFilteredElement) {
+        event.preventDefault();
         if (!this.selectedItem) {
           this.selectedItem = currentTarget;
           this.selectedItem.parentElement.classList.add(CLASS_PARENT_SELECTED);
@@ -104,6 +106,9 @@ export class StzhSortable {
           this.resetActiveItem();
         }
       }
+      else if (event.key === "Tab" && this.selectedItem && this.selectedItem === event.currentTarget) {
+        event.preventDefault();
+      }
       else if (event.key === "Escape" && this.selectedItem) {
         this.resetItemOnBlur = false;
         this.updateAriaLive(this.localization.canceled);
@@ -145,6 +150,7 @@ export class StzhSortable {
   }
   /** Move item */
   async moveItem(item, direction) {
+    var _a;
     if (!item
       || !item.nextElementSibling && direction === "down"
       || !item.previousElementSibling && direction === "up") {
@@ -159,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);
@@ -260,6 +280,7 @@ export class StzhSortable {
       delay: 200,
       delayOnTouchOnly: true,
       disabled: this.disabled,
+      ghostClone: this.ghostClone,
       // changed sorting within list
       onUpdate: this.updated
     });
@@ -378,6 +399,29 @@ export class StzhSortable {
         },
         "defaultValue": "() => {\n    return this.containerElement?.firstElementChild;\n  }"
       },
+      "ghostClone": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Function",
+          "resolved": "Function",
+          "references": {
+            "Function": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Algorithm how the ghost element will be cloned"
+        },
+        "defaultValue": "(dragElement: HTMLElement) => {\n    const [clonedElement] = cloneElement(dragElement);\n    return clonedElement;\n  }"
+      },
       "filterElements": {
         "type": "string",
         "mutable": false,
@@ -419,6 +463,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() {
@@ -494,6 +558,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-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

@@ -386,6 +386,9 @@ stzh-upload *::after {
 .stzh-upload.dz-started .stzh-upload__clickarea {
   margin-bottom: var(--stzh-space-small);
 }
+.stzh-upload:has(.stzh-upload__preview) .stzh-upload__clickarea {
+  margin-bottom: var(--stzh-space-small);
+}
 .stzh-upload.dz-drag-hover .stzh-upload__clickarea {
   background-color: var(--stzh-color-primary4);
 }

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

@@ -18,7 +18,11 @@ let uploadCounter = 0;
  */
 export class StzhUpload {
   constructor() {
-    /* Initially pre existing files (e.g. already uploaded by the user) */
+    /**
+     * Initially pre existing files (e.g. already uploaded by the user).
+     * Array of objects that must at least include `name` and `size` attribute:
+     * `[{"name":"file1.txt", "size": 12345}, {"name":"file2.txt", "size": 12345}]`
+     */
     this.existingFiles = [];
     this._existingFiles = [];
     /** Label */
@@ -224,6 +228,7 @@ export class StzhUpload {
     if (this.dropzone) {
       return;
     }
+    const self = this;
     this.dropzone = new Dropzone(this.dropzoneElement, {
       url: this.url,
       method: this.method,
@@ -258,7 +263,35 @@ export class StzhUpload {
       dictResponseError: this.localization.responseError,
       dictInvalidFileType: this.localization.invalidFileType,
       dictFileTooBig: this.localization.fileTooBig,
-      error: (file, message, xhr) => {
+      // 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);
+        }
+        // move file uploads with errors to another element, so they are grouped together
+        if (file.status === "error") {
+          self.errorsElement.appendChild(file.previewElement);
+        }
+        if (file._removeLink) {
+          file._removeLink.innerHTML = this.options.dictRemoveFile;
+        }
+        if (file.previewElement) {
+          return file.previewElement.classList.add("dz-complete");
+        }
+      },
+      // Called whenever a file is removed.
+      // Taken fom https://github.com/dropzone/dropzone/blob/v5.9.3/src/options.js#L649
+      removedfile(file) {
+        if (file.previewElement != null && file.previewElement.parentNode != null) {
+          file.previewElement.parentNode.removeChild(file.previewElement);
+        }
+        // set focus to upload
+        self.buttonElement.setFocus();
+        return this._updateMaxFilesReachedClass();
+      },
+      error(file, message, xhr) {
         if (file.previewElement) {
           file.previewElement.classList.add("dz-error");
           if (typeof message !== "string" && message.error) {
@@ -266,19 +299,19 @@ export class StzhUpload {
           }
           else if (xhr) {
             if (xhr.status === 401 || xhr.status === 403) {
-              message = this.localization.accessError;
+              message = self.localization.accessError;
             }
             else if (xhr.status === 413) {
-              message = this.localization.fileTooBigServer;
+              message = self.localization.fileTooBigServer;
             }
             else if (xhr.status === 415) {
-              message = this.localization.invalidFileType;
+              message = self.localization.invalidFileType;
             }
             else if (xhr.status >= 500) {
-              message = this.localization.serverError;
+              message = self.localization.serverError;
             }
             else {
-              const defaultError = this.localization.responseError
+              const defaultError = self.localization.responseError
                 .replace("{{statusCode}}", xhr.status);
               message = defaultError;
             }
@@ -323,7 +356,7 @@ export class StzhUpload {
               </div>
             </div>
             <div class="stzh-upload__actions">
-              <button class="stzh-upload__delete" data-dz-remove title="${this.localization.cancelUpload}">
+              <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>
@@ -420,7 +453,7 @@ export class StzhUpload {
       "stzh-upload--has-error": errorUsed,
       "stzh-upload--has-instructions": !!this.description || !!this.localization.description
     };
-    return (h(Host, null, h("div", { class: classes, ref: (el) => (this.dropzoneElement = el) }, this.label && h("div", { class: "stzh-upload__label" }, this.label), h("div", { class: "stzh-upload__clickarea", ref: (el) => (this.clickareaElement = el) }, h("div", { class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, this.description ? this.description : this.localization.description), h("stzh-button", { size: "small", class: "stzh-upload__button", "aria-describedby": `${this.uploadId}-instruction ${this.uploadId}-description`, disabled: this.disabled }, this.button ? this.button : this.localization.button)), h(StzhInputDescription, { classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error }))));
+    return (h(Host, null, h("div", { class: classes, ref: (el) => (this.dropzoneElement = el) }, this.label && h("div", { class: "stzh-upload__label" }, this.label), h("div", { class: "stzh-upload__clickarea", ref: (el) => (this.clickareaElement = el) }, h("div", { class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, this.description ? this.description : this.localization.description), h("stzh-button", { size: "small", class: "stzh-upload__button", ref: (el) => (this.buttonElement = el), "aria-describedby": `${this.uploadId}-instruction ${this.uploadId}-description`, disabled: this.disabled }, this.button ? this.button : this.localization.button)), h(StzhInputDescription, { classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error }), h("div", { class: "stzh-upload__errors", ref: (el) => (this.errorsElement = el) }))));
   }
   static get is() { return "stzh-upload"; }
   static get originalStyleUrls() {
@@ -452,7 +485,7 @@ export class StzhUpload {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Initially pre existing files (e.g. already uploaded by the user).\nArray of objects that must at least include `name` and `size` attribute:\n`[{\"name\":\"file1.txt\", \"size\": 12345}, {\"name\":\"file2.txt\", \"size\": 12345}]`"
         },
         "attribute": "existing-files",
         "reflect": false,

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

@@ -11,20 +11,22 @@ export default {
     actions: {
       handles: [
         'stzhFileAdded',
-        'stzhFileSending',
-        'stzhFileSendingMultiple',
+        'stzhFilesAdded',
+        'stzhFileRemoved',
+        'stzhSending',
+        'stzhSendingMultiple',
         'stzhProcessing',
         'stzhProcessingMultiple',
         'stzhProgress',
         'stzhProgressTotal',
-        'stzhCancel',
-        'stzhCancelMultiple',
+        'stzhCanceled',
+        'stzhCanceledMultiple',
         'stzhSuccess',
         'stzhSuccessMultiple',
         'stzhError',
         'stzhErrorMultiple',
         'stzhComplete',
-        'stzhCompleteMultiple',
+        'stzhCompleteMultiple'
       ]
     },
     docs: {
@@ -62,8 +64,8 @@ ExistingFiles.args = {
   description: 'To upload files drag & drop them in this area. Allowed file formats: [txt, pdf, docx] (max. 25 MB)',
   'accepted-files': '.txt,.pdf,.docs',
   'existing-files': `[
-    { "name": "Filename.pdf", "size": 12345 },
-    { "name": "Filename2.pdf", "size": 22345 },
-    { "name": "Filename3.pdf", "size": 32345 }
+    { "name": "Filename.pdf", "size": 12345, "id": "upload-1" },
+    { "name": "Filename2.pdf", "size": 22345, "id": "upload-2" },
+    { "name": "Filename3.pdf", "size": 32345, "id": "upload-3" }
   ]`
 };

package/dist/collection/global/js/helpers/autofocus.js

@@ -1,4 +1,6 @@
-import { name as packageName } from '../../../../package.json';
+import { name as packageNameScoped } from '../../../../package.json';
+
+const packageName = packageNameScoped.substring(packageNameScoped.indexOf('/')+1);
 
 /**
  * Execute setFocus method if it exists

package/dist/collection/global/js/script.js

@@ -5,7 +5,7 @@ import { observeScrollbarWidth } from './helpers/scrollbar-width';
 export default function () {
   window.stzhComponents = {
     version,
-    labels: 'flyout',
+    labels: 'fixed',
     cacheTranslations: true,
     pathTranslations: '/',
     formats: {},