@oiz/stzh-components 2.6.0-beta → 2.7.0-alpha

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

@@ -0,0 +1,438 @@
+import { Host, h, } from "@stencil/core";
+import { fetchTranslations } from "../../utils/translation-utils";
+/**
+ */
+export class StzhTimepicker {
+  constructor() {
+    this.onRootFocus = () => {
+      if (this.input) {
+        this.input.setFocus();
+      }
+    };
+    this.onDropdownChange = (event) => {
+      this.value = event.detail.value;
+      this.stzhChange.emit({
+        component: "stzh-timepicker",
+        value: this.value
+      });
+    };
+    this.min = 0;
+    this.max = 1439;
+    this.step = 15;
+    this.name = "";
+    this.value = "";
+    this.popoverPlacement = "bottom";
+    this.label = "";
+    this.readonly = false;
+    this.disabled = false;
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.invalid = false;
+    this.required = false;
+    this.showMarker = false;
+    this.size = "default";
+    this.a11yDescribedby = '';
+    this.localization = undefined;
+  }
+  minMaxWatcher() {
+    this.updateDropdownOptions();
+  }
+  updateDropdownOptions() {
+    const options = [];
+    for (let i = this.min; i <= this.max; i = i + this.step) {
+      let hours = Math.floor(i / 60);
+      let minutes = i % 60;
+      let paddedHours = ('00' + hours).slice(-2);
+      let paddedMinutes = ('00' + minutes).slice(-2);
+      let time = `${paddedHours}.${paddedMinutes}`;
+      options.push({ text: time, value: time });
+    }
+    this._dropdownOptions = options;
+  }
+  async componentWillLoad() {
+    this.minMaxWatcher();
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "timepicker");
+    }
+  }
+  render() {
+    const classes = {
+      "stzh-timepicker": true
+    };
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes }, h("stzh-dropdown", { class: "stzh-timepicker__dropdown", iconAngle: "clock", label: this.label, ref: (el) => (this.input = el), onStzhChange: this.onDropdownChange, options: this._dropdownOptions, items: [this.value], required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, popoverPlacement: this.popoverPlacement, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, invalid: this.invalid, showMarker: this.showMarker }))));
+  }
+  static get is() { return "stzh-timepicker"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-timepicker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-timepicker.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Minimum time allowed to be picked in minutes. Can not be lower than 0.\nThis setting can be used alone or together with the max property."
+        },
+        "attribute": "min",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Maximum time allowed to be picked in minutes. Can not be higher than 1440 (24h * 60).\nThis setting can be used alone or together with the min property."
+        },
+        "attribute": "max",
+        "reflect": false,
+        "defaultValue": "1439"
+      },
+      "step": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Time added for each step in minutes."
+        },
+        "attribute": "step",
+        "reflect": false,
+        "defaultValue": "15"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the hidden date picker input."
+        },
+        "attribute": "name",
+        "reflect": true,
+        "defaultValue": "\"\""
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value of hidden date picker input (current selected date in ISO format)."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "popoverPlacement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\"",
+          "resolved": "\"bottom\" | \"bottom-center\" | \"bottom-end\" | \"top\" | \"top-center\" | \"top-end\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Popover placement for the dropdown (if applicable)"
+        },
+        "attribute": "popover-placement",
+        "reflect": true,
+        "defaultValue": "\"bottom\""
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label for dropdown"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the element is readonly or not"
+        },
+        "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the element is disabled or not"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Description message (use description slot as alternative)"
+        },
+        "attribute": "description",
+        "reflect": false
+      },
+      "descriptionLong": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Long description message appearing in a popover (use description-long slot as alternative)"
+        },
+        "attribute": "description-long",
+        "reflect": false
+      },
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "One or multiple error message (use error slot as alternative)"
+        },
+        "attribute": "error",
+        "reflect": false
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Invalid status"
+        },
+        "attribute": "invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Required status"
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "showMarker": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing"
+        },
+        "attribute": "show-marker",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"small\"",
+          "resolved": "\"default\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variant"
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "a11yDescribedby": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Id of the element which describes the input"
+        },
+        "attribute": "a11y-describedby",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhTimepickerLocalizedText",
+          "resolved": "{ $locale: \"de\" | \"en\"; $formats: StzhLocaleFormats; $globals: StzhLocaleGlobals; }",
+          "references": {
+            "StzhTimepickerLocalizedText": {
+              "location": "import",
+              "path": "./stzh-timepicker.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings."
+        }
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhChange",
+        "name": "stzhChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Timepicker change event"
+        },
+        "complexType": {
+          "original": "StzhTimepickerChangeEvent",
+          "resolved": "{ component: \"stzh-timepicker\"; value: string; }",
+          "references": {
+            "StzhTimepickerChangeEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "min",
+        "methodName": "minMaxWatcher"
+      }, {
+        "propName": "max",
+        "methodName": "minMaxWatcher"
+      }];
+  }
+}
+//# sourceMappingURL=stzh-timepicker.js.map

package/dist/collection/components/stzh-timepicker/stzh-timepicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-timepicker.js","sourceRoot":"","sources":["../../../src/components/stzh-timepicker/stzh-timepicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhDropdownOption,\n  StzhDropdownChangeEvent,\n  StzhTimepickerChangeEvent\n} from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhTimepickerLocalizedText } from \"./stzh-timepicker.localization\";\n\n/**\n */\n@Component({\n  tag: \"stzh-timepicker\",\n  styleUrl: \"stzh-timepicker.scss\",\n  scoped: true\n})\nexport class StzhTimepicker {\n  /**\n   * Minimum time allowed to be picked in minutes. Can not be lower than 0.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() min: number = 0\n\n  /**\n   * Maximum time allowed to be picked in minutes. Can not be higher than 1440 (24h * 60).\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() max: number = 1439;\n\n  /** Time added for each step in minutes. */\n  @Prop() step: number = 15;\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of hidden date picker input (current selected date in ISO format). */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Popover placement for the dropdown (if applicable) */\n  @Prop({ reflect: true }) popoverPlacement:  \"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\" = \"bottom\";\n\n  /** Label for dropdown */\n  @Prop() label: string = \"\";\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Id of the element which describes the input */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = '';\n\n  /**  Translation strings. */\n  @Prop() localization: StzhTimepickerLocalizedText;\n\n  /** Timepicker change event */\n  @Event() stzhChange: EventEmitter<StzhTimepickerChangeEvent>;\n\n  @Element() element: HTMLStzhTimepickerElement;\n\n  @Watch(\"min\")\n  @Watch(\"max\")\n  minMaxWatcher() {\n    this.updateDropdownOptions();\n  }\n\n  private input: HTMLStzhDropdownElement;\n  private _dropdownOptions: StzhDropdownOption[];\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.setFocus();\n    }\n  }\n\n  private onDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    this.value = event.detail.value;\n\n    this.stzhChange.emit({\n      component: \"stzh-timepicker\",\n      value: this.value\n    });\n  }\n\n  private updateDropdownOptions(): void {\n    const options = [];\n\n    for (let i = this.min; i <= this.max; i = i + this.step) {\n      let hours: number = Math.floor(i / 60);\n      let minutes: number = i % 60;\n\n      let paddedHours: string = ('00' + hours).slice(-2);\n      let paddedMinutes: string = ('00' + minutes).slice(-2);\n      let time = `${paddedHours}.${paddedMinutes}`;\n\n      options.push({ text: time, value: time });\n    }\n\n    this._dropdownOptions = options;\n  }\n\n  async componentWillLoad() {\n    this.minMaxWatcher();\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"timepicker\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-timepicker\": true\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <stzh-dropdown\n            class=\"stzh-timepicker__dropdown\"\n            iconAngle={\"clock\"}\n            label={this.label}\n            ref={(el) => (this.input = el as HTMLStzhDropdownElement)}\n            onStzhChange={this.onDropdownChange}\n            options={this._dropdownOptions}\n            items={[this.value]}\n            required={this.required}\n            disabled={this.disabled}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            error={this.error}\n            popoverPlacement={this.popoverPlacement}\n            a11yDescribedby={this.a11yDescribedby}\n            name={this.name}\n            size={this.size}\n            invalid={this.invalid}\n            showMarker={this.showMarker}\n          ></stzh-dropdown>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-timepicker/stzh-timepicker.localization.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=stzh-timepicker.localization.js.map

package/dist/collection/components/stzh-timepicker/stzh-timepicker.localization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-timepicker.localization.js","sourceRoot":"","sources":["../../../src/components/stzh-timepicker/stzh-timepicker.localization.ts"],"names":[],"mappings":"","sourcesContent":["import { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nexport type StzhTimepickerLocalizedText = StzhLocaleComponent & {\n}\n"]}

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

@@ -0,0 +1,45 @@
+import { createComponentStory } from '../../utils/story-utils';
+import { withActions } from '@storybook/addon-actions/decorator';
+import readme from './readme.md?raw';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+const COMPONENT_NAME = 'stzh-timepicker';
+const story = createComponentStory(COMPONENT_NAME);
+
+const TEMPLATE = `
+<stzh-timepicker></stzh-timepicker>
+`;
+
+export default {
+  title: 'Components/Timepicker',
+  component: COMPONENT_NAME,
+  parameters: {
+    actions: {
+      handles: ['stzhChange']
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('timepicker'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withActions,
+    withDesign
+  ]
+};
+
+export const Default = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    label: 'Time',
+    description: 'Format: hh.mm',
+  }
+};
+

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

@@ -257,7 +257,7 @@ export class StzhToggle {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting"
+          "text": "Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing"
         },
         "attribute": "show-marker",
         "reflect": true,

package/dist/collection/components/stzh-toggle/stzh-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-toggle.js","sourceRoot":"","sources":["../../../src/components/stzh-toggle/stzh-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,KAAK,EAEL,OAAO,EACP,MAAM,EACN,CAAC,EACD,KAAK,EACN,MAAM,eAAe,CAAC;AAQvB,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAuB,MAAM,+BAA+B,CAAC;AAEvF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAE5E,IAAI,aAAa,GAAG,CAAC,CAAC;AAEtB;;;;;GAKG;AAMH,MAAM,OAAO,UAAU;;IAoFb,mBAAc,GAAY,KAAK,CAAC;IAEhC,YAAO,GAAG,CAAC,KAAiB,EAAE,EAAE;MACtC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;MAClC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,aAAa;QACxB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;IACL,CAAC,CAAA;IAEO,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACxB,IAAI,CAAC,QAAQ,EAAE,CAAC;OACjB;MAED,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC9B,CAAC,CAAA;IAEO,YAAO,GAAG,CAAC,KAAiB,EAAE,EAAE;MACtC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;MAE3B,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE;QACzC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACvC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,aAAa;QACxB,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;IACL,CAAC,CAAA;IAEO,WAAM,GAAG,CAAC,KAAiB,EAAE,EAAE;MACrC,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,MAAM,EAAE;QACvC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;MACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,SAAS,EAAE,aAAa;QACxB,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;IACL,CAAC,CAAA;;oBA/H4C,KAAK;gBAGV,EAAE;iBAGD,EAAE;mBAGC,KAAK;oBAGJ,KAAK;sBAGH,KAAK;mBAGO,KAAK;iBAGxC,EAAE;yBAGiC,OAAO;;;;2BAaC,EAAE;;EAErE,wBAAwB;EAExB,KAAK,CAAC,QAAQ;IACZ,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;EACrB,CAAC;EAYD,YAAY,CAAC,QAA2B;IACtC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI;QACF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;OACpC;MAAC,OAAO,CAAC,EAAE;QACV,IAAI,QAAQ,EAAE;UACZ,IAAI,CAAC,MAAM,GAAG,CAAC,QAAQ,CAAC,CAAC;SAC1B;aAAM;UACL,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;SAClB;OACF;KACF;SAAM,IAAI,QAAQ,EAAE;MACnB,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;KACxB;SAAM;MACL,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;KAClB;IAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;EACxC,CAAC;EAwDD,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,OAAO,GAAG,eAAe,aAAa,EAAE,EAAE,CAAC;IAEhD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAE9B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;KACrE;EACH,CAAC;EAED,MAAM;IACJ,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;IACnF,MAAM,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;IAChG,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;IAEjE,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;MACnB,wBAAwB,EAAE,SAAS;MACnC,0BAA0B,EAAE,IAAI,CAAC,QAAQ;MACzC,yBAAyB,EAAE,IAAI,CAAC,OAAO;MACvC,0BAA0B,EAAE,IAAI,CAAC,QAAQ;MACzC,8BAA8B,EAAE,eAAe;MAC/C,mCAAmC,EAAE,mBAAmB;MACxD,CAAC,0BAA0B,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa;KACvE,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW;MACpE,WAAK,KAAK,EAAE,OAAO;QACjB,aAAO,KAAK,EAAC,4BAA4B;UACvC,aACE,KAAK,EAAC,oBAAoB,EAC1B,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAClD,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,sBACL,GAAG,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,eAAe,EAAE,mBACxD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,kBACjC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC7C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB;UACF,WAAK,KAAK,EAAC,mBAAmB;YAC5B,WAAK,KAAK,EAAC,oBAAoB,GAAO,CAClC;UACN,WAAK,KAAK,EAAC,oBAAoB;YAC5B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,eAAa;YACvC,IAAI,CAAC,UAAU;cACd,YAAM,KAAK,EAAC,qBAAqB;gBAC/B,YAAM,KAAK,EAAC,4BAA4B,iBAAa,MAAM,IACxD,IAAI,CAAC,QAAQ;kBACZ,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB;kBAChD,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB,CAE7C;gBACP,YAAM,KAAK,EAAC,0BAA0B,IACnC,IAAI,CAAC,QAAQ;kBACZ,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB;kBAC9C,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAE3C,CACF,CAEL,CACA;QACR,EAAC,oBAAoB,IACnB,WAAW,EAAC,aAAa,EACzB,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,cAAc,EACjC,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,mBAAmB,EAAE,mBAAmB,EACxC,mBAAmB,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB,GACnE,CACE,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhToggleChangeEvent,\n  StzhToggleFocusEvent,\n  StzhToggleBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet toggleCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-toggle\",\n  styleUrl: \"stzh-toggle.scss\",\n  scoped: true\n})\nexport class StzhToggle {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the toggle is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show noting */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Position of label */\n  @Prop({ reflect: true }) labelPosition: \"right\" | \"left\" = \"right\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Focus input field */\n  @Method()\n  async setFocus() {\n    this.input.focus();\n  }\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhToggleChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhToggleFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhToggleBlurEvent>;\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-toggle\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent('focus', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-toggle\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent('blur', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-toggle\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-toggle-${toggleCounter++}`;\n\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, 'toggle');\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n\n    const classes = {\n      \"stzh-toggle\": true,\n      \"stzh-toggle--has-error\": errorUsed,\n      \"stzh-toggle--is-required\": this.required,\n      \"stzh-toggle--is-invalid\": this.invalid,\n      \"stzh-toggle--is-disabled\": this.disabled,\n      \"stzh-toggle--has-description\": descriptionUsed,\n      \"stzh-toggle--has-description-long\": descriptionLongUsed,\n      [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-toggle__field-wrapper\">\n            <input\n              class=\"stzh-toggle__input\"\n              ref={(el) => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-toggle__mark\">\n              <div class=\"stzh-toggle__check\"></div>\n            </div>\n            <div class=\"stzh-toggle__label\">\n              {this.label ? this.label : <slot></slot>}\n              {this.showMarker &&\n                <span class=\"stzh-toggle__marker\">\n                  <span class=\"stzh-toggle__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-toggle__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </div>\n          </label>\n          <StzhInputDescription\n            classPrefix=\"stzh-toggle\"\n            id={`${this.inputId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-toggle.js","sourceRoot":"","sources":["../../../src/components/stzh-toggle/stzh-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhToggleChangeEvent,\n  StzhToggleFocusEvent,\n  StzhToggleBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet toggleCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-toggle\",\n  styleUrl: \"stzh-toggle.scss\",\n  scoped: true\n})\nexport class StzhToggle {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the toggle is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Position of label */\n  @Prop({ reflect: true }) labelPosition: \"right\" | \"left\" = \"right\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Focus input field */\n  @Method()\n  async setFocus() {\n    this.input.focus();\n  }\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhToggleChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhToggleFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhToggleBlurEvent>;\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-toggle\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent('focus', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-toggle\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent('blur', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-toggle\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-toggle-${toggleCounter++}`;\n\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, 'toggle');\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n\n    const classes = {\n      \"stzh-toggle\": true,\n      \"stzh-toggle--has-error\": errorUsed,\n      \"stzh-toggle--is-required\": this.required,\n      \"stzh-toggle--is-invalid\": this.invalid,\n      \"stzh-toggle--is-disabled\": this.disabled,\n      \"stzh-toggle--has-description\": descriptionUsed,\n      \"stzh-toggle--has-description-long\": descriptionLongUsed,\n      [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-toggle__field-wrapper\">\n            <input\n              class=\"stzh-toggle__input\"\n              ref={(el) => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-toggle__mark\">\n              <div class=\"stzh-toggle__check\"></div>\n            </div>\n            <div class=\"stzh-toggle__label\">\n              {this.label ? this.label : <slot></slot>}\n              {this.showMarker &&\n                <span class=\"stzh-toggle__marker\">\n                  <span class=\"stzh-toggle__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-toggle__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </div>\n          </label>\n          <StzhInputDescription\n            classPrefix=\"stzh-toggle\"\n            id={`${this.inputId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -118,6 +118,12 @@ export class StzhUpload {
   async processQueue() {
     return this.dropzone.processQueue();
   }
+  async removeFile(file, force = false) {
+    return this.dropzone.removeFile(file, force);
+  }
+  async removeAllFiles(onlyCancelCurrentlyUploadingFiles = false, force = false) {
+    return this.dropzone.removeAllFiles(onlyCancelCurrentlyUploadingFiles, force);
+  }
   async componentWillLoad() {
     this.uploadId = `stzh-upload-${uploadCounter++}`;
     this.existingFilesWatcher(this.existingFiles);
@@ -340,8 +346,8 @@ export class StzhUpload {
     this.dropzone.on("removefile", (file) => this.stzhFileRemove.emit({
       component: "stzh-upload", file
     }).defaultPrevented === false);
-    this.dropzone.on("removedfile", (file) => this.stzhFileRemoved.emit({
-      component: "stzh-upload", file
+    this.dropzone.on("removedfile", (file, force) => this.stzhFileRemoved.emit({
+      component: "stzh-upload", file, force
     }));
     this.dropzone.on("sending", (file, xhr, formData) => this.stzhSending.emit({
       component: "stzh-upload", file, xhr, formData
@@ -1069,7 +1075,7 @@ export class StzhUpload {
         },
         "complexType": {
           "original": "StzhUploadFileRemovedEvent",
-          "resolved": "{ component: \"stzh-upload\"; file: StzhUploadFile; }",
+          "resolved": "{ component: \"stzh-upload\"; file: StzhUploadFile; force: boolean; }",
           "references": {
             "StzhUploadFileRemovedEvent": {
               "location": "import",
@@ -1376,6 +1382,50 @@ export class StzhUpload {
           "text": "",
           "tags": []
         }
+      },
+      "removeFile": {
+        "complexType": {
+          "signature": "(file: any, force?: boolean) => Promise<any>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "removeAllFiles": {
+        "complexType": {
+          "signature": "(onlyCancelCurrentlyUploadingFiles?: boolean, force?: boolean) => Promise<any>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }