npm - @oiz/stzh-components - Versions diffs - 2.6.0-aalpha → 2.6.0 - Mend

@oiz/stzh-components 2.6.0-aalpha → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (262) hide show

package/dist/collection/components/stzh-radiogroup/stzh-radiogroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-radiogroup.js","sourceRoot":"","sources":["../../../src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Element,\n Watch,\n h,\n Listen\n} from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nconst SELECTOR_RADIO = 'stzh-radio, stzh-button[type=radio], stzh-card';\n\nlet radiogroupCounter = 0;\n\n/*\n @slot - Slot for `stzh-radio`, `stzh-button[type=\"radio\"]` or `stzh-card` elements\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-radiogroup\",\n styleUrl: \"stzh-radiogroup.scss\",\n scoped: true\n})\nexport class StzhRadiogroup {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name /\n @Prop({ reflect: true }) name: string;\n\n /* The legend /\n @Prop() legend: string;\n\n /* Hide legend to show only for screenreaders /\n @Prop({ reflect: true }) hideLegend: boolean = false;\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 /* Select a radio by value /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* Direction /\n @Prop({ reflect: true }) direction: \"vertical\" \| \"horizontal\" = \"vertical\";\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 /* Current checked radio element (readonly) /\n @Prop() checkedRadio: HTMLStzhRadioElement \| null = null;\n\n /* Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) /\n @Prop() preventUpdateProperties: string[] \| string = [];\n private _preventUpdateProperties: string[] = [];\n\n /* Host element /\n @Element() element: HTMLElement;\n\n @Watch(\"name\")\n watchName(newValue: string) {\n this.updateRadiosProperty(\"name\", newValue);\n }\n\n @Watch(\"disabled\")\n watchDisabled(newValue: boolean) {\n this.updateRadiosProperty(\"disabled\", newValue);\n }\n\n @Watch(\"invalid\")\n watchInvalid(newValue: boolean) {\n this.updateRadiosProperty(\"invalid\", newValue);\n }\n\n @Watch(\"required\")\n watchRequired(newValue: boolean) {\n this.updateRadiosProperty(\"required\", newValue);\n }\n\n @Watch(\"value\")\n watchValue(newValue: string) {\n this.updateCheckedRadioByValue(newValue);\n }\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 @Watch(\"preventUpdateProperties\")\n preventUpdatePropertiesWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n this._preventUpdateProperties = JSON.parse(newValue);\n } else {\n this._preventUpdateProperties = newValue;\n }\n }\n\n @Listen(\"stzhChange\")\n onChange(event: CustomEvent<StzhRadioChangeEvent>) {\n this.value = event.detail.value;\n }\n\n /* Radio elements */\n private radios: HTMLStzhRadioElement[];\n private radiogroupId: string;\n private observer: MutationObserver;\n\n private updateRadiosProperty(prop: string, value: any) {\n this.radios.forEach((radio: HTMLStzhRadioElement) => {\n if (prop === \"name\" \|\| (this._preventUpdateProperties.indexOf(prop) === -1)) {\n radio[camelCase(prop)] = value;\n }\n });\n }\n\n private updateCheckedRadioByValue(value: string) {\n this.checkedRadio = this.radios.find(radio => radio.value === value);\n\n if (this.checkedRadio) {\n this.checkedRadio.checked = true;\n }\n\n this.uncheckRadios();\n }\n\n private uncheckRadios() {\n // make sure that no other radios are checked than the current one or no one\n this.radios.forEach((radio: HTMLStzhRadioElement) => {\n if (!this.checkedRadio \|\| radio !== this.checkedRadio) {\n radio.checked = false;\n }\n });\n }\n\n private init = () => {\n // update radios\n this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n this.updateRadiosProperty(\"show-marker\", false);\n this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n\n this.watchValue(this.value);\n this.watchName(this.name);\n this.watchDisabled(this.disabled);\n this.watchInvalid(this.invalid);\n this.watchRequired(this.required);\n }\n\n async componentWillLoad() {\n this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;\n this.errorWatcher(this.error);\n this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n if (!this.localization) {\n this.localization = await fetchTranslations(this.element, 'radiogroup');\n }\n }\n\n componentShouldUpdate(_newValue, _oldValue, prop: string) {\n return prop !== \"checkedRadio\";\n }\n\n componentDidRender() {\n this.init();\n }\n\n connectedCallback() {\n if (!this.value) {\n this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n // try to find a checkbox that might has checked set to true\n const checkedRadio = this.radios.find(radio => radio.checked);\n\n if (checkedRadio) {\n this.value = checkedRadio.value;\n }\n }\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true,\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\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-radiogroup\": true,\n \"stzh-radiogroup--has-description\": descriptionUsed,\n \"stzh-radiogroup--has-description-long\": descriptionLongUsed,\n \"stzh-radiogroup--has-error\": errorUsed,\n \"stzh-radiogroup--is-required\": this.required,\n \"stzh-radiogroup--is-disabled\": this.disabled,\n \"stzh-radiogroup--is-invalid\": this.invalid,\n \"stzh-radiogroup--hide-legend\": this.hideLegend,\n [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction\n };\n\n return (\n <fieldset class={classes}>\n {this.legend &&\n <legend class=\"stzh-radiogroup__legend\">\n {this.legend}\n {this.showMarker &&\n <span class=\"stzh-radiogroup__marker\">\n <span class=\"stzh-radiogroup__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-radiogroup__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText\n }\n </span>\n </span>\n }\n </legend>\n }\n <div class=\"stzh-radiogroup__fields\">\n <slot></slot>\n </div>\n <StzhInputDescription\n classPrefix=\"stzh-radiogroup\"\n id={`${this.radiogroupId}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n </fieldset>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-radiogroup.js","sourceRoot":"","sources":["../../../src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Element,\n Watch,\n h,\n Listen\n} from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nconst SELECTOR_RADIO = 'stzh-radio, stzh-button[type=radio], stzh-card';\n\nlet radiogroupCounter = 0;\n\n/*\n @slot - Slot for `stzh-radio`, `stzh-button[type=\"radio\"]` or `stzh-card` elements\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-radiogroup\",\n styleUrl: \"stzh-radiogroup.scss\",\n scoped: true\n})\nexport class StzhRadiogroup {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name /\n @Prop({ reflect: true }) name: string;\n\n /* The legend /\n @Prop() legend: string;\n\n /* Hide legend to show only for screenreaders /\n @Prop({ reflect: true }) hideLegend: boolean = false;\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 /* Select a radio by value /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* Direction /\n @Prop({ reflect: true }) direction: \"vertical\" \| \"horizontal\" = \"vertical\";\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 /* Current checked radio element (readonly) /\n @Prop() checkedRadio: HTMLStzhRadioElement \| null = null;\n\n /* Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) /\n @Prop() preventUpdateProperties: string[] \| string = [];\n private _preventUpdateProperties: string[] = [];\n\n /* Host element /\n @Element() element: HTMLElement;\n\n @Watch(\"name\")\n watchName(newValue: string) {\n this.updateRadiosProperty(\"name\", newValue);\n }\n\n @Watch(\"disabled\")\n watchDisabled(newValue: boolean) {\n this.updateRadiosProperty(\"disabled\", newValue);\n }\n\n @Watch(\"invalid\")\n watchInvalid(newValue: boolean) {\n this.updateRadiosProperty(\"invalid\", newValue);\n }\n\n @Watch(\"required\")\n watchRequired(newValue: boolean) {\n this.updateRadiosProperty(\"required\", newValue);\n }\n\n @Watch(\"value\")\n watchValue(newValue: string) {\n this.updateCheckedRadioByValue(newValue);\n }\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 @Watch(\"preventUpdateProperties\")\n preventUpdatePropertiesWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n this._preventUpdateProperties = JSON.parse(newValue);\n } else {\n this._preventUpdateProperties = newValue;\n }\n }\n\n @Listen(\"stzhChange\")\n onChange(event: CustomEvent<StzhRadioChangeEvent>) {\n this.value = event.detail.value;\n }\n\n /* Radio elements */\n private radios: HTMLStzhRadioElement[];\n private radiogroupId: string;\n private observer: MutationObserver;\n\n private updateRadiosProperty(prop: string, value: any) {\n this.radios.forEach((radio: HTMLStzhRadioElement) => {\n if (prop === \"name\" \|\| (this._preventUpdateProperties.indexOf(prop) === -1)) {\n radio[camelCase(prop)] = value;\n }\n });\n }\n\n private updateCheckedRadioByValue(value: string) {\n this.checkedRadio = this.radios.find(radio => radio.value === value);\n\n if (this.checkedRadio) {\n this.checkedRadio.checked = true;\n }\n\n this.uncheckRadios();\n }\n\n private uncheckRadios() {\n // make sure that no other radios are checked than the current one or no one\n this.radios.forEach((radio: HTMLStzhRadioElement) => {\n if (!this.checkedRadio \|\| radio !== this.checkedRadio) {\n radio.checked = false;\n }\n });\n }\n\n private init = () => {\n // update radios\n this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n this.updateRadiosProperty(\"show-marker\", false);\n this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n\n this.watchValue(this.value);\n this.watchName(this.name);\n this.watchDisabled(this.disabled);\n this.watchInvalid(this.invalid);\n this.watchRequired(this.required);\n }\n\n async componentWillLoad() {\n this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;\n this.errorWatcher(this.error);\n this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n if (!this.localization) {\n this.localization = await fetchTranslations(this.element, 'radiogroup');\n }\n }\n\n componentShouldUpdate(_newValue, _oldValue, prop: string) {\n return prop !== \"checkedRadio\";\n }\n\n componentDidRender() {\n this.init();\n }\n\n connectedCallback() {\n if (!this.value) {\n this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n // try to find a checkbox that might has checked set to true\n const checkedRadio = this.radios.find(radio => radio.checked);\n\n if (checkedRadio) {\n this.value = checkedRadio.value;\n }\n }\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true,\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\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-radiogroup\": true,\n \"stzh-radiogroup--has-description\": descriptionUsed,\n \"stzh-radiogroup--has-description-long\": descriptionLongUsed,\n \"stzh-radiogroup--has-error\": errorUsed,\n \"stzh-radiogroup--is-required\": this.required,\n \"stzh-radiogroup--is-disabled\": this.disabled,\n \"stzh-radiogroup--is-invalid\": this.invalid,\n \"stzh-radiogroup--hide-legend\": this.hideLegend,\n [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction\n };\n\n return (\n <fieldset class={classes}>\n {this.legend &&\n <legend class=\"stzh-radiogroup__legend\">\n {this.legend}\n {this.showMarker &&\n <span class=\"stzh-radiogroup__marker\">\n <span class=\"stzh-radiogroup__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-radiogroup__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText\n }\n </span>\n </span>\n }\n </legend>\n }\n <div class=\"stzh-radiogroup__fields\">\n <slot></slot>\n </div>\n <StzhInputDescription\n classPrefix=\"stzh-radiogroup\"\n id={`${this.radiogroupId}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n </fieldset>\n );\n }\n}\n"]}

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

@@ -130,8 +130,6 @@ stzh-table[disable-min-width]:not([disable-min-width=false]) {
   /* Scroll left/right shadow variant */
 }
 .stzh-table__header {
-  display: flex;
-  flex-direction: column;
   border-bottom: 0.0625rem solid var(--stzh-base-border-color);
   padding-bottom: var(--stzh-space-small);
   margin-bottom: var(--stzh-space-medium);
@@ -156,28 +154,29 @@ stzh-table[disable-min-width]:not([disable-min-width=false]) {
     margin-bottom: var(--stzh-space-xlarge);
   }
 }
-@media screen and (min-width: 1024px) {
-  .stzh-table__header {
-    flex-direction: row;
-    justify-content: space-between;
-  }
+.stzh-table__sub-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 .stzh-table__heading {
   margin-bottom: var(--stzh-space-small);
 }
-@media screen and (min-width: 1024px) {
-  .stzh-table__heading {
-    margin-bottom: 0;
-  }
-}
 .stzh-table__header .stzh-table__search {
-  width: var(--stzh-table-input-width);
+  flex-grow: 1;
 }
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 600px) {
   .stzh-table__header .stzh-table__search {
-    margin-left: var(--stzh-space-large);
+    width: var(--stzh-table-input-width);
+    flex-grow: 0;
   }
 }
+.stzh-table__action-button {
+  flex-shrink: 0;
+}
+.stzh-table__action-button:not(:empty) {
+  margin-left: var(--stzh-space-medium);
+}
 .stzh-table__outer-wrapper {
   position: relative;
 }
@@ -214,7 +213,7 @@ stzh-table[disable-min-width]:not([disable-min-width=false]) {
           appearance: none;
   background: none;
   border: none;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   font-size: inherit;
   line-height: inherit;
@@ -224,8 +223,8 @@ stzh-table[disable-min-width]:not([disable-min-width=false]) {
 .stzh-table__sort-button:hover, .stzh-table__sort-button:focus {
   color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
-.stzh-table__sort-icon {
-  opacity: 0;
+.stzh-table stzh-icon.stzh-table__sort-icon {
+  display: none;
 }
 .stzh-table table {
   width: 100%;
@@ -370,7 +369,7 @@ stzh-table[disable-min-width]:not([disable-min-width=false]) {
   padding: 0;
 }
 td.has-sorted .stzh-table__sort-icon, th.has-sorted .stzh-table__sort-icon {
-  opacity: 1;
+  display: inline-flex;
 }
 td.has-sorted-desc .stzh-table__sort-icon, th.has-sorted-desc .stzh-table__sort-icon {
   transform: rotate(180deg);

package/dist/collection/components/stzh-table/stzh-table.js CHANGED Viewed

@@ -7,6 +7,7 @@ const CLASS_IS_STICKY_RIGHT = "is-sticky-right";
  * @slot - Slot for table element
  * @slot heading - Slot for `stzh-heading`
  * @slot search - Slot for search `stzh-input` element
+ * @slot action-button - Slot for action `stzh-button` element
  *
  * @prop --max-height: Maximum height of table
  * @prop --min-width: Minium width of table
@@ -140,7 +141,7 @@ export class StzhTable {
       "has-scroll-left-shadow": this.hasScrollLeft && this.cellsStickyLeft.length === 0,
       "has-scroll-right-shadow": this.hasScrollRight && this.cellsStickyRight.length === 0
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-table__header" }, h("div", { class: "stzh-table__heading" }, h("slot", { name: "heading" })), h("div", { class: "stzh-table__search" }, h("slot", { name: "search" }))), h("div", { class: "stzh-table__outer-wrapper" }, h("div", { ref: (el) => (this.tableWrapper = el), class: "stzh-table__wrapper", onScroll: this.handleScroll }, h("slot", null))))));
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-table__header" }, h("div", { class: "stzh-table__heading" }, h("slot", { name: "heading" })), h("div", { class: "stzh-table__sub-header" }, h("div", { class: "stzh-table__search" }, h("slot", { name: "search" })), h("div", { class: "stzh-table__action-button" }, h("slot", { name: "action-button" })))), h("div", { class: "stzh-table__outer-wrapper" }, h("div", { ref: (el) => (this.tableWrapper = el), class: "stzh-table__wrapper", onScroll: this.handleScroll }, h("slot", null))))));
   }
   static get is() { return "stzh-table"; }
   static get originalStyleUrls() {

package/dist/collection/components/stzh-table/stzh-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-table.js","sourceRoot":"","sources":["../../../src/components/stzh-table/stzh-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\nconst CLASS_HAS_STICKED = \"has-sticked\";\nconst CLASS_IS_STICKY_LEFT = \"is-sticky-left\";\nconst CLASS_IS_STICKY_RIGHT = \"is-sticky-right\";\n\n/*\n @slot - Slot for table element\n * @slot heading - Slot for `stzh-heading`\n * @slot search - Slot for search `stzh-input` element\n \n @prop --max-height: Maximum height of table\n * @prop --min-width: Minium width of table\n * @prop --cell-padding: Cells padding\n /\n@Component({\n tag: \"stzh-table\",\n styleUrl: \"stzh-table.scss\"\n})\nexport class StzhTable {\n /* Columns that should be sticky on the left side (column indexes separated by comma) /\n @Prop() fixedLeft: number = null;\n\n /* Columns that should be sticky on the right side (column indexes separated by comma) /\n @Prop() fixedRight: number = null;\n\n /\n Whether to disable min-width of the table.\n \n If `false`, the default `min-width` is `700px`\n * If `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n \n You can also overwrite the min-width via CSS with the custom property `--min-width`.\n */\n @Prop({ reflect: true }) disableMinWidth: boolean = false;\n\n @State() hasScrollLeft: boolean = false;\n @State() hasScrollRight: boolean = false;\n @State() isScrollable: boolean = false;\n @State() cellsStickyLeft: number[] = [];\n @State() cellsStickyRight: number[] = [];\n\n @Element() element: HTMLStzhTableElement;\n\n @Watch(\"fixedLeft\")\n @Watch(\"fixedRight\")\n fixedCellWatcher() {\n this.updateCellClasses();\n this.updateScrollStates();\n }\n\n private tableWrapper: HTMLDivElement;\n private observer: MutationObserver;\n private debounceScroll: number;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private updateCellClasses = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n rows.forEach((row: HTMLTableRowElement) => {\n const cells = Array.from(row.children);\n cells.forEach((cell: HTMLTableCellElement, index) => {\n cell.classList.remove(CLASS_IS_STICKY_LEFT);\n cell.classList.remove(CLASS_IS_STICKY_RIGHT);\n\n if (index === this.fixedLeft) {\n cell.classList.add(CLASS_IS_STICKY_LEFT);\n }\n\n if (index === this.fixedRight) {\n cell.classList.add(CLASS_IS_STICKY_RIGHT);\n }\n });\n });\n }\n\n private updateScrollStates = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const wrapperScrollLeft = this.tableWrapper.scrollLeft;\n const wrapperScrollWidth = this.tableWrapper.scrollWidth;\n const wrapperClientWidth = this.tableWrapper.clientWidth;\n\n this.isScrollable = wrapperScrollWidth > wrapperClientWidth;\n this.hasScrollLeft = wrapperScrollLeft > 0;\n this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n const firstRow = rows[0];\n\n if (!firstRow) {\n return;\n }\n\n this.cellsStickyLeft = [];\n this.cellsStickyRight = [];\n const cells: Element[] = Array.from(firstRow.children);\n\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n const offsetLeft = cell.offsetLeft;\n const offsetRight = offsetLeft + cell.offsetWidth;\n\n if (\n this.hasScrollLeft\n && index === this.fixedLeft\n && Math.ceil(wrapperScrollLeft) >= offsetLeft\n ) {\n this.cellsStickyLeft.push(index);\n }\n\n if (\n this.hasScrollRight\n && index === this.fixedRight\n && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight\n ) {\n this.cellsStickyRight.push(index);\n }\n });\n\n rows.forEach((row: HTMLTableRowElement) => {\n const cells = Array.from(row.children);\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n if (\n this.cellsStickyLeft.indexOf(index) > -1\n \|\| this.cellsStickyRight.indexOf(index) > -1\n ) {\n cell.classList.add(CLASS_HAS_STICKED);\n } else {\n cell.classList.remove(CLASS_HAS_STICKED);\n }\n });\n });\n }\n\n private init = () => {\n const searchInput = this.element.querySelector(\n 'stzh-input[slot=\"search\"], [slot=\"search\"] stzh-input'\n );\n\n if (searchInput) {\n setPropsIfNull(searchInput, {\n size: \"small\"\n } as HTMLStzhInputElement)\n }\n\n this.updateCellClasses();\n this.updateScrollStates();\n }\n\n handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateScrollStates);\n }\n\n private handleScroll = () => {\n if (this.debounceScroll) {\n window.cancelAnimationFrame(this.debounceScroll);\n }\n\n this.debounceScroll = requestAnimationFrame(this.updateScrollStates);\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-table\": true,\n \"is-scrollable\": this.isScrollable,\n \"has-scroll-left\": this.hasScrollLeft,\n \"has-scroll-right\": this.hasScrollRight,\n \"has-scroll-left-shadow\": this.hasScrollLeft && this.cellsStickyLeft.length === 0,\n \"has-scroll-right-shadow\": this.hasScrollRight && this.cellsStickyRight.length === 0\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-table__header\">\n <div class=\"stzh-table__heading\">\n <slot name=\"heading\"></slot>\n </div>\n <div class=\"stzh-table__search\">\n <slot name=\"search\"></slot>\n </div>\n </div>\n <div class=\"stzh-table__outer-wrapper\">\n <div\n ref={(el) => (this.tableWrapper = el as HTMLDivElement)}\n class=\"stzh-table__wrapper\"\n onScroll={this.handleScroll}\n >\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-table.js","sourceRoot":"","sources":["../../../src/components/stzh-table/stzh-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\nconst CLASS_HAS_STICKED = \"has-sticked\";\nconst CLASS_IS_STICKY_LEFT = \"is-sticky-left\";\nconst CLASS_IS_STICKY_RIGHT = \"is-sticky-right\";\n\n/*\n @slot - Slot for table element\n * @slot heading - Slot for `stzh-heading`\n * @slot search - Slot for search `stzh-input` element\n * @slot action-button - Slot for action `stzh-button` element\n \n @prop --max-height: Maximum height of table\n * @prop --min-width: Minium width of table\n * @prop --cell-padding: Cells padding\n /\n@Component({\n tag: \"stzh-table\",\n styleUrl: \"stzh-table.scss\"\n})\nexport class StzhTable {\n /* Columns that should be sticky on the left side (column indexes separated by comma) /\n @Prop() fixedLeft: number = null;\n\n /* Columns that should be sticky on the right side (column indexes separated by comma) /\n @Prop() fixedRight: number = null;\n\n /\n Whether to disable min-width of the table.\n \n If `false`, the default `min-width` is `700px`\n * If `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n \n You can also overwrite the min-width via CSS with the custom property `--min-width`.\n */\n @Prop({ reflect: true }) disableMinWidth: boolean = false;\n\n @State() hasScrollLeft: boolean = false;\n @State() hasScrollRight: boolean = false;\n @State() isScrollable: boolean = false;\n @State() cellsStickyLeft: number[] = [];\n @State() cellsStickyRight: number[] = [];\n\n @Element() element: HTMLStzhTableElement;\n\n @Watch(\"fixedLeft\")\n @Watch(\"fixedRight\")\n fixedCellWatcher() {\n this.updateCellClasses();\n this.updateScrollStates();\n }\n\n private tableWrapper: HTMLDivElement;\n private observer: MutationObserver;\n private debounceScroll: number;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private updateCellClasses = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n rows.forEach((row: HTMLTableRowElement) => {\n const cells = Array.from(row.children);\n cells.forEach((cell: HTMLTableCellElement, index) => {\n cell.classList.remove(CLASS_IS_STICKY_LEFT);\n cell.classList.remove(CLASS_IS_STICKY_RIGHT);\n\n if (index === this.fixedLeft) {\n cell.classList.add(CLASS_IS_STICKY_LEFT);\n }\n\n if (index === this.fixedRight) {\n cell.classList.add(CLASS_IS_STICKY_RIGHT);\n }\n });\n });\n }\n\n private updateScrollStates = () => {\n if (!this.tableWrapper) {\n return;\n }\n\n const wrapperScrollLeft = this.tableWrapper.scrollLeft;\n const wrapperScrollWidth = this.tableWrapper.scrollWidth;\n const wrapperClientWidth = this.tableWrapper.clientWidth;\n\n this.isScrollable = wrapperScrollWidth > wrapperClientWidth;\n this.hasScrollLeft = wrapperScrollLeft > 0;\n this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;\n\n const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n const firstRow = rows[0];\n\n if (!firstRow) {\n return;\n }\n\n this.cellsStickyLeft = [];\n this.cellsStickyRight = [];\n const cells: Element[] = Array.from(firstRow.children);\n\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n const offsetLeft = cell.offsetLeft;\n const offsetRight = offsetLeft + cell.offsetWidth;\n\n if (\n this.hasScrollLeft\n && index === this.fixedLeft\n && Math.ceil(wrapperScrollLeft) >= offsetLeft\n ) {\n this.cellsStickyLeft.push(index);\n }\n\n if (\n this.hasScrollRight\n && index === this.fixedRight\n && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight\n ) {\n this.cellsStickyRight.push(index);\n }\n });\n\n rows.forEach((row: HTMLTableRowElement) => {\n const cells = Array.from(row.children);\n cells.forEach((cell: HTMLTableCellElement, index: number) => {\n if (\n this.cellsStickyLeft.indexOf(index) > -1\n \|\| this.cellsStickyRight.indexOf(index) > -1\n ) {\n cell.classList.add(CLASS_HAS_STICKED);\n } else {\n cell.classList.remove(CLASS_HAS_STICKED);\n }\n });\n });\n }\n\n private init = () => {\n const searchInput = this.element.querySelector(\n 'stzh-input[slot=\"search\"], [slot=\"search\"] stzh-input'\n );\n\n if (searchInput) {\n setPropsIfNull(searchInput, {\n size: \"small\"\n } as HTMLStzhInputElement)\n }\n\n this.updateCellClasses();\n this.updateScrollStates();\n }\n\n handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateScrollStates);\n }\n\n private handleScroll = () => {\n if (this.debounceScroll) {\n window.cancelAnimationFrame(this.debounceScroll);\n }\n\n this.debounceScroll = requestAnimationFrame(this.updateScrollStates);\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-table\": true,\n \"is-scrollable\": this.isScrollable,\n \"has-scroll-left\": this.hasScrollLeft,\n \"has-scroll-right\": this.hasScrollRight,\n \"has-scroll-left-shadow\": this.hasScrollLeft && this.cellsStickyLeft.length === 0,\n \"has-scroll-right-shadow\": this.hasScrollRight && this.cellsStickyRight.length === 0\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-table__header\">\n <div class=\"stzh-table__heading\">\n <slot name=\"heading\"></slot>\n </div> \n <div class=\"stzh-table__sub-header\">\n <div class=\"stzh-table__search\">\n <slot name=\"search\"></slot>\n </div>\n <div class=\"stzh-table__action-button\">\n <slot name=\"action-button\"></slot>\n </div>\n </div>\n </div>\n <div class=\"stzh-table__outer-wrapper\">\n <div\n ref={(el) => (this.tableWrapper = el as HTMLDivElement)}\n class=\"stzh-table__wrapper\"\n onScroll={this.handleScroll}\n >\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/stzh-table/stzh-table.stories.js CHANGED Viewed

@@ -11,6 +11,7 @@ const TEMPLATE = `
 <stzh-table>
   <stzh-heading slot="heading" level="2">Table heading</stzh-heading>
   <stzh-input slot="search" label="Search"></stzh-input>
+  <stzh-button slot="action-button" variant="primary" icon="plus" size="small">Create</stzh-button>
   <table>
     <thead>
       <tr>

package/dist/collection/components/stzh-textandimage/stzh-textandimage.stories.js CHANGED Viewed

@@ -10,7 +10,7 @@ const story = createComponentStory(COMPONENT_NAME);
 const TEMPLATE = `
 <stzh-textandimage>
   <div slot="left">
-    <stzh-figure caption="Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna.">
+    <stzh-figure caption="Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna." copyright="© gettyimages">
       <img src="media/images/example2.jpg" loading="lazy" alt="Example image" />
     </stzh-figure>
   </div>

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

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"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 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"]}
1	+ {"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 CHANGED Viewed

@@ -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": []
+        }
       }
     };
   }