@oiz/stzh-components 4.0.1-beta → 4.0.2
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.
- package/dist/cjs/{app-globals-f56c764f.js → app-globals-c8895928.js} +2 -2
- package/dist/cjs/{app-globals-f56c764f.js.map → app-globals-c8895928.js.map} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/stzh-card.cjs.entry.js +1 -1
- package/dist/cjs/stzh-card.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-checkbox_3.cjs.entry.js +7 -6
- package/dist/cjs/stzh-checkbox_3.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-components.cjs.js +1 -1
- package/dist/cjs/stzh-ghettobox_3.cjs.entry.js +1 -1
- package/dist/cjs/stzh-ghettobox_3.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-upload.cjs.entry.js +4 -4
- package/dist/cjs/stzh-upload.cjs.entry.js.map +1 -1
- package/dist/collection/components/stzh-card/stzh-card.css +0 -3
- package/dist/collection/components/stzh-checkbox/stzh-checkbox.css +1 -1
- package/dist/collection/components/stzh-checkbox/stzh-checkbox.js +6 -5
- package/dist/collection/components/stzh-checkbox/stzh-checkbox.js.map +1 -1
- package/dist/collection/components/stzh-ghettobox/stzh-ghettobox.css +6 -0
- package/dist/collection/components/stzh-upload/stzh-upload.css +1 -1
- package/dist/collection/components/stzh-upload/stzh-upload.js +3 -3
- package/dist/collection/components/stzh-upload/stzh-upload.js.map +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/{p-e48a4be2.js → p-12df4eec.js} +8 -7
- package/dist/components/p-12df4eec.js.map +1 -0
- package/dist/components/{p-a8454c30.js → p-57db4298.js} +2 -2
- package/dist/components/p-57db4298.js.map +1 -0
- package/dist/components/{p-1e02d63c.js → p-c64f4bd8.js} +2 -2
- package/dist/components/p-c64f4bd8.js.map +1 -0
- package/dist/components/stzh-card.js +1 -1
- package/dist/components/stzh-checkbox.js +1 -1
- package/dist/components/stzh-geo-ref-data.js +1 -1
- package/dist/components/stzh-ghettobox.js +1 -1
- package/dist/components/stzh-microsite-teaserlist.js +1 -1
- package/dist/components/stzh-upload.js +4 -4
- package/dist/components/stzh-upload.js.map +1 -1
- package/dist/components/stzh-vbz-majorticker.js +1 -1
- package/dist/esm/{app-globals-24afa4b5.js → app-globals-d1453470.js} +2 -2
- package/dist/esm/{app-globals-24afa4b5.js.map → app-globals-d1453470.js.map} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/stzh-card.entry.js +1 -1
- package/dist/esm/stzh-card.entry.js.map +1 -1
- package/dist/esm/stzh-checkbox_3.entry.js +7 -6
- package/dist/esm/stzh-checkbox_3.entry.js.map +1 -1
- package/dist/esm/stzh-components.js +1 -1
- package/dist/esm/stzh-ghettobox_3.entry.js +1 -1
- package/dist/esm/stzh-ghettobox_3.entry.js.map +1 -1
- package/dist/esm/stzh-upload.entry.js +4 -4
- package/dist/esm/stzh-upload.entry.js.map +1 -1
- package/dist/stzh-components/{p-79a63bd9.entry.js → p-120cc8be.entry.js} +2 -2
- package/dist/stzh-components/p-120cc8be.entry.js.map +1 -0
- package/dist/stzh-components/{p-ffed4972.entry.js → p-2b24520c.entry.js} +2 -2
- package/dist/stzh-components/p-2b24520c.entry.js.map +1 -0
- package/dist/stzh-components/p-3d7508f7.entry.js +2 -0
- package/dist/stzh-components/p-3d7508f7.entry.js.map +1 -0
- package/dist/stzh-components/p-4a00611c.entry.js +2 -0
- package/dist/stzh-components/p-4a00611c.entry.js.map +1 -0
- package/dist/stzh-components/p-eb16c8df.js +2 -0
- package/dist/stzh-components/{p-cfff191d.js.map → p-eb16c8df.js.map} +1 -1
- package/dist/stzh-components/stzh-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/components/p-1e02d63c.js.map +0 -1
- package/dist/components/p-a8454c30.js.map +0 -1
- package/dist/components/p-e48a4be2.js.map +0 -1
- package/dist/stzh-components/p-79a63bd9.entry.js.map +0 -1
- package/dist/stzh-components/p-836ee7e5.entry.js +0 -2
- package/dist/stzh-components/p-836ee7e5.entry.js.map +0 -1
- package/dist/stzh-components/p-cfff191d.js +0 -2
- package/dist/stzh-components/p-e452b478.entry.js +0 -2
- package/dist/stzh-components/p-e452b478.entry.js.map +0 -1
- package/dist/stzh-components/p-ffed4972.entry.js.map +0 -1
|
@@ -378,9 +378,6 @@
|
|
|
378
378
|
.stzh-card__card-action-popover {
|
|
379
379
|
--width: auto;
|
|
380
380
|
}
|
|
381
|
-
.stzh-card:hover, .stzh-card:focus {
|
|
382
|
-
background-color: var(--stzh-color-secondary10);
|
|
383
|
-
}
|
|
384
381
|
.stzh-card--service .stzh-card__subtitle {
|
|
385
382
|
font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
|
|
386
383
|
line-height: var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));
|
|
@@ -319,7 +319,7 @@
|
|
|
319
319
|
.stzh-checkbox__input:checked:hover ~ .stzh-checkbox__mark {
|
|
320
320
|
border-color: var(--label-hover-checked-color);
|
|
321
321
|
}
|
|
322
|
-
.stzh-
|
|
322
|
+
.stzh-checkbox--is-checked .stzh-checkbox__check {
|
|
323
323
|
opacity: 1;
|
|
324
324
|
}
|
|
325
325
|
.stzh-checkbox--is-invalid .stzh-checkbox__input ~ .stzh-checkbox__label, .stzh-checkbox--is-invalid .stzh-checkbox__input ~ .stzh-checkbox__mark .stzh-checkbox__check {
|
|
@@ -120,14 +120,15 @@ export class StzhCheckbox {
|
|
|
120
120
|
"stzh-checkbox--has-error": errorUsed,
|
|
121
121
|
"stzh-checkbox--is-required": this.required,
|
|
122
122
|
"stzh-checkbox--is-invalid": this.invalid || errorUsed,
|
|
123
|
-
"stzh-checkbox--is-disabled": this.disabled
|
|
123
|
+
"stzh-checkbox--is-disabled": this.disabled,
|
|
124
|
+
"stzh-checkbox--is-checked": this.checked
|
|
124
125
|
};
|
|
125
|
-
return (h(Host, { key: '
|
|
126
|
-
h("span", { key: '
|
|
126
|
+
return (h(Host, { key: 'b456ff76d193f5eeca01a13b74c89b93f6ff09e6', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'b00ed1c5f9c65b2794338903491fb8126524a93c', class: classes }, h("label", { key: 'f67e70fa169a1ee8632050eda8cf40322609a28b', class: "stzh-checkbox__field-wrapper" }, h("input", { key: '20e9bccc86dc93d627eb7cae7e832fd8eda43f41', class: "stzh-checkbox__input", ref: (el) => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { key: 'f76d293080b732665760637c8fe8072c6ed126c2', class: "stzh-checkbox__mark" }, h("div", { key: '799d4aaf71559c1436e460b79f2c7cb6f933a76e', class: "stzh-checkbox__check", innerHTML: Check })), h("div", { key: '1b196d9c3b2b2e0e8159df2dc425af087b3ff6b4', class: "stzh-checkbox__label" }, this.label ? this.label : h("slot", null), !this.hideOptional &&
|
|
127
|
+
h("span", { key: '17393a4c46c20c49c84a187600ac20ccd3c01318', class: "stzh-checkbox__marker" }, h("span", { key: '79f77fcee85c0b679c328073112231925398937f', class: "stzh-checkbox__marker-symbol", "aria-hidden": "true" }, this.required
|
|
127
128
|
? this.localization.$globals.requiredFieldMarker
|
|
128
|
-
: this.localization.$globals.optionalFieldMarker), h("span", { key: '
|
|
129
|
+
: this.localization.$globals.optionalFieldMarker), h("span", { key: '1cbfc08350a2470bebc4e1f962e073d9b1a3ab47', class: "stzh-checkbox__marker-text" }, this.required
|
|
129
130
|
? this.localization.$globals.requiredFieldText
|
|
130
|
-
: this.localization.$globals.optionalFieldText)))), (((_b = this._error) === null || _b === void 0 ? void 0 : _b.length) > 0 || this.description || this.descriptionLong) && (h(StzhInputDescription, { key: '
|
|
131
|
+
: this.localization.$globals.optionalFieldText)))), (((_b = this._error) === null || _b === void 0 ? void 0 : _b.length) > 0 || this.description || this.descriptionLong) && (h(StzhInputDescription, { key: '9047ffee464857b30de80fa26a8dfd2028c0bff4', classPrefix: "stzh-checkbox", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
|
|
131
132
|
}
|
|
132
133
|
static get is() { return "stzh-checkbox"; }
|
|
133
134
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stzh-checkbox.js","sourceRoot":"","sources":["../../../../src/components/stzh-checkbox/stzh-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Host,\n Component,\n Prop,\n Event,\n EventEmitter,\n Element,\n h,\n Watch,\n Listen\n} from \"@stencil/core\";\n\nimport {\n StzhCheckboxChangeEvent,\n StzhCheckboxFocusEvent,\n StzhCheckboxBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nimport Check from './assets/check.svg';\n\nlet checkboxCounter = 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 description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n tag: \"stzh-checkbox\",\n styleUrl: \"stzh-checkbox.scss\",\n scoped: true\n})\nexport class StzhCheckbox {\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /** Whether the checkbox 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 /** Checked status */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /** Default checked (used by reset) */\n @Prop({ mutable: true }) defaultChecked: boolean;\n\n /** Label */\n @Prop() label: string = \"\";\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 /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n @Prop() descriptionLongTitle: string;\n\n /** Hide `(optional)` label (or use `required` inside form to hide it) */\n @Prop({ reflect: true }) hideOptional: boolean = false;\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 /** Change event */\n @Event() stzhChange: EventEmitter<StzhCheckboxChangeEvent>;\n\n /** Focus event */\n @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n /** Input blur event */\n @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\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\n @Element() element: HTMLStzhRadioElement;\n\n private input: HTMLInputElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n\n private handleReset = async () => {\n this.checked = this.defaultChecked;\n }\n\n private onInput = (event: InputEvent) => {\n this.checked = this.input.checked;\n this.stzhChange.emit({\n component: \"stzh-checkbox\",\n originalEvent: event,\n value: this.value,\n checked: this.checked\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.input.focus();\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-checkbox\",\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-checkbox\",\n originalEvent: event\n });\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n this.errorWatcher(this.error);\n\n this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'checkbox');\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?.length > 0;\n\n const classes = {\n \"stzh-checkbox\": true,\n \"stzh-checkbox--has-description\": descriptionUsed,\n \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n \"stzh-checkbox--has-error\": errorUsed,\n \"stzh-checkbox--is-required\": this.required,\n \"stzh-checkbox--is-invalid\": this.invalid || errorUsed,\n \"stzh-checkbox--is-disabled\": this.disabled\n };\n\n return (\n <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n <label class=\"stzh-checkbox__field-wrapper\">\n <input\n class=\"stzh-checkbox__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 defaultChecked={this.defaultChecked}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <div class=\"stzh-checkbox__mark\">\n <div class=\"stzh-checkbox__check\" innerHTML={Check} />\n </div>\n <div class=\"stzh-checkbox__label\">\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional &&\n <span class=\"stzh-checkbox__marker\">\n <span class=\"stzh-checkbox__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-checkbox__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 {(this._error?.length > 0 || this.description || this.descriptionLong) && (\n <StzhInputDescription\n classPrefix=\"stzh-checkbox\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"stzh-checkbox.js","sourceRoot":"","sources":["../../../../src/components/stzh-checkbox/stzh-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Host,\n Component,\n Prop,\n Event,\n EventEmitter,\n Element,\n h,\n Watch,\n Listen\n} from \"@stencil/core\";\n\nimport {\n StzhCheckboxChangeEvent,\n StzhCheckboxFocusEvent,\n StzhCheckboxBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nimport Check from './assets/check.svg';\n\nlet checkboxCounter = 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 description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n tag: \"stzh-checkbox\",\n styleUrl: \"stzh-checkbox.scss\",\n scoped: true\n})\nexport class StzhCheckbox {\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /** Whether the checkbox 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 /** Checked status */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /** Default checked (used by reset) */\n @Prop({ mutable: true }) defaultChecked: boolean;\n\n /** Label */\n @Prop() label: string = \"\";\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 /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n @Prop() descriptionLongTitle: string;\n\n /** Hide `(optional)` label (or use `required` inside form to hide it) */\n @Prop({ reflect: true }) hideOptional: boolean = false;\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 /** Change event */\n @Event() stzhChange: EventEmitter<StzhCheckboxChangeEvent>;\n\n /** Focus event */\n @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n /** Input blur event */\n @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\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\n @Element() element: HTMLStzhRadioElement;\n\n private input: HTMLInputElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n\n private handleReset = async () => {\n this.checked = this.defaultChecked;\n }\n\n private onInput = (event: InputEvent) => {\n this.checked = this.input.checked;\n this.stzhChange.emit({\n component: \"stzh-checkbox\",\n originalEvent: event,\n value: this.value,\n checked: this.checked\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.input.focus();\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-checkbox\",\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-checkbox\",\n originalEvent: event\n });\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n this.errorWatcher(this.error);\n\n this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'checkbox');\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?.length > 0;\n\n const classes = {\n \"stzh-checkbox\": true,\n \"stzh-checkbox--has-description\": descriptionUsed,\n \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n \"stzh-checkbox--has-error\": errorUsed,\n \"stzh-checkbox--is-required\": this.required,\n \"stzh-checkbox--is-invalid\": this.invalid || errorUsed,\n \"stzh-checkbox--is-disabled\": this.disabled,\n \"stzh-checkbox--is-checked\": this.checked\n };\n\n return (\n <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n <label class=\"stzh-checkbox__field-wrapper\">\n <input\n class=\"stzh-checkbox__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 defaultChecked={this.defaultChecked}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <div class=\"stzh-checkbox__mark\">\n <div class=\"stzh-checkbox__check\" innerHTML={Check} />\n </div>\n <div class=\"stzh-checkbox__label\">\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional &&\n <span class=\"stzh-checkbox__marker\">\n <span class=\"stzh-checkbox__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-checkbox__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 {(this._error?.length > 0 || this.description || this.descriptionLong) && (\n <StzhInputDescription\n classPrefix=\"stzh-checkbox\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -202,6 +202,12 @@
|
|
|
202
202
|
color: var(--color);
|
|
203
203
|
box-shadow: var(--stzh-box-shadow-message);
|
|
204
204
|
background-color: var(--background-color);
|
|
205
|
+
--stzh-button-secondary-color: var(--stzh-color-error60);
|
|
206
|
+
--stzh-button-secondary-background-color: var(--stzh-color-white90op);
|
|
207
|
+
--stzh-button-secondary-hover-color: var(--stzh-color-error60);
|
|
208
|
+
--stzh-button-secondary-hover-background-color: var(--stzh-color-white);
|
|
209
|
+
--stzh-button-secondary-disabled-color: var(--stzh-color-white60op);
|
|
210
|
+
--stzh-button-secondary-disabled-background-color: var(--stzh-color-white40op);
|
|
205
211
|
}
|
|
206
212
|
.stzh-ghettobox__container {
|
|
207
213
|
margin-left: 1.25rem;
|
|
@@ -677,7 +677,7 @@ stzh-upload[disabled]:not([disabled=false]) {
|
|
|
677
677
|
border-image-source: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB5SURBVHgB7duxCYUwGIXRm/d6p3D/iZzCXrS30EIE4Z4zQEI++JuQjOU/7bkwb+vIA3fr33l7/1/KCZBy4zwjT2fu687nNQIpVx8AAAAA6ONOMOUESDkBUk6AlBMg5QRIOQFSToAAAAAAlPE+IOUESLnh73A5AVLuAFA3JdhPogvLAAAAAElFTkSuQmCC');
|
|
678
678
|
}
|
|
679
679
|
}
|
|
680
|
-
.stzh-upload--has-
|
|
680
|
+
.stzh-upload--has-description .stzh-upload__description {
|
|
681
681
|
margin-top: var(--stzh-space-small);
|
|
682
682
|
}
|
|
683
683
|
.stzh-upload--is-disabled .stzh-upload__clickarea {
|
|
@@ -916,7 +916,7 @@ export class StzhUpload {
|
|
|
916
916
|
}
|
|
917
917
|
}
|
|
918
918
|
render() {
|
|
919
|
-
var _a, _b;
|
|
919
|
+
var _a, _b, _c;
|
|
920
920
|
const errorUsed = hasSlot(this.element, "error") || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
|
|
921
921
|
const description = this.description ? this.description : this.localization.description;
|
|
922
922
|
const classes = {
|
|
@@ -929,9 +929,9 @@ export class StzhUpload {
|
|
|
929
929
|
"stzh-upload--has-instructions": !!this.description || !!this.localization.description
|
|
930
930
|
};
|
|
931
931
|
const descriptionTotalFileSizeLimit = this.localization.descriptionTotalFileSizeLimit;
|
|
932
|
-
return (h(Host, { key: '372f19b86e3c2b232b5a8dd67d03691e7179ab89', "is-invalid": this.invalid || errorUsed }, h("stzh-toastbar", { key: 'd28bdfd74ee090cb42f85e0077996479cf371061' }), h("div", { key: 'e70df11c8b8b82483b471bb196f396acb031725e', class: classes, ref: el => (this.dropzoneElement = el) }, h("div", { key: 'b3c5f0761c8293ad73a806166a0802e079c9ec87', ref: el => (this.hiddenInputContainerElement = el) }), h("div", { key: '4a8d1d0e37582a8584b16b4238a165a9e42a8a99', id: `${this.uploadId}-label` }, this.label && h("div", { key: 'abbae5571a404be201338851cf84db8b068ca568', class: "stzh-upload__label" }, this.label)), h("div", { key: '3a4807ae9045f464563a5909be3dada37c6cf4c8', class: "stzh-upload__clickarea", ref: el => (this.clickareaElement = el) }, h("div", { key: '3692f24185f7f8315181779df3e57cbcaa6733f1', class: "stzh-upload__heading-wrapper" }, h("div", { key: '2faca657db5be326a0f22072717769af99bf003b', class: "stzh-upload__heading-inner-wrapper" }, h("div", { key: 'da32f47f4d27a76a0fc3ee9157f03db46cfba892', class: "stzh-upload__heading" }, this.heading ? this.heading : this.localization.heading), h("div", { key: '789a34f0c16c770614ce8f88750f2f499df25d6a', class: "stzh-upload__buttons-wrapper" }, h("stzh-button", { key: '
|
|
932
|
+
return (h(Host, { key: '372f19b86e3c2b232b5a8dd67d03691e7179ab89', "is-invalid": this.invalid || errorUsed }, h("stzh-toastbar", { key: 'd28bdfd74ee090cb42f85e0077996479cf371061' }), h("div", { key: 'e70df11c8b8b82483b471bb196f396acb031725e', class: classes, ref: el => (this.dropzoneElement = el) }, h("div", { key: 'b3c5f0761c8293ad73a806166a0802e079c9ec87', ref: el => (this.hiddenInputContainerElement = el) }), h("div", { key: '4a8d1d0e37582a8584b16b4238a165a9e42a8a99', id: `${this.uploadId}-label` }, this.label && h("div", { key: 'abbae5571a404be201338851cf84db8b068ca568', class: "stzh-upload__label" }, this.label)), h("div", { key: '3a4807ae9045f464563a5909be3dada37c6cf4c8', class: "stzh-upload__clickarea", ref: el => (this.clickareaElement = el) }, h("div", { key: '3692f24185f7f8315181779df3e57cbcaa6733f1', class: "stzh-upload__heading-wrapper" }, h("div", { key: '2faca657db5be326a0f22072717769af99bf003b', class: "stzh-upload__heading-inner-wrapper" }, h("div", { key: 'da32f47f4d27a76a0fc3ee9157f03db46cfba892', class: "stzh-upload__heading" }, this.heading ? this.heading : this.localization.heading), h("div", { key: '789a34f0c16c770614ce8f88750f2f499df25d6a', class: "stzh-upload__buttons-wrapper" }, h("stzh-button", { key: '78be5a5509a58ea881d2b26a97575cea43dba167', class: "stzh-upload__button", variant: "secondary", size: "small", ref: el => (this.linkElement = el), label: this.button ? this.button : this.localization.button, a11yDescribedby: `${this.uploadId}-label ${this.uploadId}-instruction` + (((_b = this._error) === null || _b === void 0 ? void 0 : _b.length) > 0 ? ` ${this.uploadId}-description` : ""), disabled: this.disabled, a11yControls: `${this.uploadId}-previews` }, h("stzh-icon", { key: '0e0e7ad93b1cfe2b6dd56afe9834f6e25e0a33ac', slot: "icon", name: "upload" })), this.isPhotographingAvailable && (h("stzh-button", { key: '7cde5a2fd64d53037a98caa5955dcb57aee40587', class: "stzh-upload__button-scan", variant: "secondary", size: "small", label: this.buttonScan ? this.buttonScan : this.localization.buttonScan, onClick: this.onButtonScanClick }, h("stzh-icon", { key: '335ab7e35c9f0037b93c3cfe8d62ccfae9a0716a', slot: "icon", name: "camera" })))), h("div", { key: 'de962117e0dfdd82d59a494de1c2458d37780c12', class: "stzh-upload__hint-wrapper" }, h("span", { key: '0a3a068c8fab6329b734e9712e3aa0a78c6fcac5' }, this.localization.buttonIntro)))), h("div", { key: 'd315ff608fe4f0cd4bb8e99cfa97a087a98e459f', class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, h("p", { key: '3df503a0c0348f80664396c67a7c11dd08da8790' }, description
|
|
933
933
|
.replace("{{fileformats}}", this.acceptedFiles)
|
|
934
|
-
.replace("{{filesize}}", `${this.maxFilesize}`), h("br", { key: '
|
|
934
|
+
.replace("{{filesize}}", `${this.maxFilesize}`), h("br", { key: '314799b5dc267da7bd865e12d177c861264e5174' }), descriptionTotalFileSizeLimit.replace("{{maxFilesizeTotal}}", `${this.maxFilesizeTotal}`)))), ((_c = this._error) === null || _c === void 0 ? void 0 : _c.length) > 0 && (h("div", { key: 'cbf0e011fda84d6e902070c44dca6d5bea3275ae', class: "stzh-upload__description-wrapper" }, h(StzhInputDescription, { key: '8624d5036d5f00bc2aa212e885ce3000b6fa354b', classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error }))), h("div", { key: 'd1f42c3e90d4dda7c9281aafd3ba1960acc4a0e2', id: `${this.uploadId}-previews`, class: "stzh-upload__previews-wrapper" }, h("div", { key: 'e4071e3cd6cdbe8a3f855498b4f908b14e3fd0ee', class: "stzh-upload__previews-inner-wrapper" }, h("div", { key: 'b980995e20914a4f88f398bd520898d65d5f9246', class: "stzh-upload__errors", ref: el => (this.errorsElement = el) }), h("div", { key: '161e5cd0a7da0513965a705475085fe58863531c', class: "stzh-upload__previews dropzone-previews", ref: el => (this.previewsElement = el) })))), this.duplicateDetected && (h("div", { key: '9dac9989adb58807619eafb100d01cf770626c07', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: 'fa92c2138a4e4f0a1f958cf40d50be374aa85a72', type: "error", label: this.localization.duplicateFileUploadHeading, onStzhClose: () => this.duplicateDetected = false }, h("stzh-text", { key: '49f36296b9431edda68ae3c6f255a13d2ae5d0d5' }, h("p", { key: 'ffd6227509618b75a1ef6fc716506dfe134fbf94' }, "\u00AB", this.duplicateFileName, "\u00BB (", this.duplicateFileSize, ")"), h("p", { key: '474d3b344bd3647af6c3c6f64ea7607897d208c0' }, this.localization.duplicateFileUploadParagraph))))), this.totalTooBig && (h("div", { key: 'c08c8771edc7400ac544fe75acaab629f6dd3a05', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: '103adbf88ba476aaab229503607b832336b9dcc0', type: "warning", label: this.totalTooBigMessageHeading, onStzhClose: () => this.totalTooBig = false }, h("stzh-text", { key: '94cc793813f1fcd5a72e297ee622ddaa5bb6a911' }, h("p", { key: 'ec88600449ee9e15b8fddee1436278ca4298f114' }, this.totalTooBigMessageBody, " ", this.totalTooBigMessageBody2))))), h("stzh-dialog", { key: '88ed81be63dc34b9e5a58c43579a21f220b9bef0', ref: el => (this.photographingOverlayElement = el), onStzhClose: this.closePhotographingWebsocketConnection, class: this.isPhotographingAvailable && "stzh-dialog--fit-content", heading: this.localization.photographingTitle1 }, h("stzh-button", { key: '5c884f9e625e598327722aa89aa32c40b5edbbef', class: "stzh-upload-photographing__back-button", icon: "arrow-left", size: "small", variant: "tertiary-plain", "no-padding-left": "true", "no-padding-right": "true", onClick: this.closePhotographingOverlay }, this.localization.back), this.isPhotographingAvailable && (h(Fragment, { key: '3082070eacbc47d1f6159d4ff5632fa2494f3536' }, h("div", { key: 'c0bf76856abf5ae81e47c003c5dffacfe2087477', class: "stzh-upload-photographing__info" }, h("div", { key: '8d698e695bcdd26ef0b710e942a6548c415ad468', class: "stzh-upload-photographing__text-qrcode" }, h("div", { key: 'ea3a251e9143a747815b2c327ba3df773963ad9d', class: "stzh-upload-photographing-qrlink-container" }, h("stzh-text", { key: 'e678ec2237833640fe47859b3bdf9a0082ea93f6' }, this.localization.photographingText1)), h("div", { key: 'f7f72d20fcf12b4d2acfd4565facef1d0bcbcd64', class: "stzh-upload-photographing-qrcode-container" }, h("canvas", { key: 'be1fefc080bf187f431857112dd0da355941038e', class: "stzh-upload-photographing-qrcode", ref: el => (this.photographingQrcodeElement = el) })))), h("div", { key: '4b5a3cd2d082977c48cc11335f9ef1e94a1a52e3', class: "stzh-upload-photographing__info" }, h("stzh-heading", { key: 'e4022c75c77ed5bb86a8e913cb97d13f88d83703', level: "3" }, this.localization.photographingTitle2), h("stzh-text", { key: '1bfee472abd65c52da60320e5c7ad14aee6a10a7' }, this.localization.photographingText2)), h("div", { key: '1ece164f154cbec9ec9437aef1f4d2a026ed2e07', class: "stzh-upload-photographing__continue" }, !!this.photographingUrlDetails && (h("stzh-link", { key: '4ab855e30d166330140dff37655c725c668616c5', class: "stzh-upload-photographing-link", href: this.photographingUrlDetails.url + "&label=" + this.cleanLabel(this.label), target: "_blank" }, this.localization.photographingContinue))))))));
|
|
935
935
|
}
|
|
936
936
|
static get is() { return "stzh-upload"; }
|
|
937
937
|
static get originalStyleUrls() {
|