@oiz/stzh-components 4.5.0 → 4.6.0-beta2

package/dist/components/{p-a6169d66.js.map → p-3c00c24c.js.map}

@@ -1 +1 @@
-{"file":"p-a6169d66.js","mappings":"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","names":[],"sources":["src/components/stzh-pagination/stzh-pagination.scss?tag=stzh-pagination&encapsulation=scoped","src/components/stzh-pagination/stzh-pagination.tsx"],"sourcesContent":[":host {\n  --justify-content: inherit;\n  --padding-left: calc(#{$formInputHeight} + #{space(\"medium\")});\n}\n\n.stzh-pagination {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: space(\"medium\");\n  padding-left: var(--padding-left);\n  justify-content: var(--justify-content);\n\n  &__input {\n    --text-align: center;\n    --input-width: #{$formInputHeight};\n    --padding-top: 0px;\n    --padding-bottom: 0px;\n    --padding-left: 0px;\n    --padding-right: 0px;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  &__total {\n    @include fontSize(\"nano\");\n    color: $colorGrey70;\n  }\n\n  &--size-small {\n    padding-left: calc(#{$formInputHeightSmall} + #{space(\"medium\")});\n  }\n\n  &--size-small &__input {\n    --input-width: #{$formInputHeightSmall};\n  }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhInputChangeEvent, StzhPaginationChangeEvent } from \"../../index\";\n\nimport { StzhPaginationLocalizedText } from \"./stzh-pagination.localization\";\n\n/**\n */\n@Component({\n  tag: \"stzh-pagination\",\n  styleUrl: \"stzh-pagination.scss\",\n  scoped: true,\n})\nexport class StzhPagination {\n  /** Total pages available. */\n  @Prop() total: number = 1;\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Current page. */\n  @Prop({ mutable: true }) value: number = 1;\n\n  /** Label for dropdown */\n  @Prop() label: string = \"\";\n\n  /** Whether label is hidden. */\n  @Prop() labelHidden: boolean = false;\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  /** Whether the current page is mutable via input */\n  @Prop({ reflect: true }) allowManualInput: boolean = true;\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  /** 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: StzhPaginationLocalizedText;\n\n  /** Pagination change event */\n  @Event() stzhChange: EventEmitter<StzhPaginationChangeEvent>;\n\n  @Element() element: HTMLStzhPaginationElement;\n\n  /** Set current page to previous */\n  @Method()\n  async prev() {\n    this.gotoPage(this.value - 1);\n  }\n\n  /** Set current page to next */\n  @Method()\n  async next() {\n    this.gotoPage(this.value + 1);\n  }\n\n  private input: HTMLStzhInputElement;\n\n  private gotoPage = (newPage: number) => {\n    const previous = this.value;\n\n    if (newPage >= 1 && newPage <= this.total) {\n      this.value = newPage;\n    } else if (newPage > this.total) {\n      this.value = this.total;\n    } else {\n      this.value = 1;\n    }\n\n    if (previous !== this.value) {\n      this.stzhChange.emit({\n        component: \"stzh-pagination\",\n        page: Number(this.value),\n      });\n    }\n  };\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  private onInputChange = (event: CustomEvent<StzhInputChangeEvent>) => {\n    const newPage = Number(event.detail.value) || 1;\n    this.gotoPage(newPage);\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pagination\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-pagination\": true,\n      [`stzh-pagination--size-${this.size}`]: !!this.size,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.allowManualInput ? (\n            <Fragment>\n              <stzh-input\n                class=\"stzh-pagination__input\"\n                type=\"number\"\n                min={1}\n                max={this.total}\n                label={this.label || this.localization.label}\n                labelHidden={true}\n                ref={el => (this.input = el as HTMLStzhInputElement)}\n                onStzhChange={this.onInputChange}\n                value={this.value?.toString() || \"\"}\n                required={this.required}\n                disabled={this.disabled}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                error={this.error}\n                a11yDescribedby={this.a11yDescribedby}\n                name={this.name}\n                size={this.size}\n                invalid={this.invalid}\n                hideOptional={true}\n                noAutocomplete={true}\n              ></stzh-input>\n              <div class=\"stzh-pagination__total\">\n                {this.localization.totalLabel.replace(/\\{total\\}/gi, this.total.toString())}\n              </div>\n            </Fragment>\n          ) : (\n            <div class=\"stzh-pagination__total\">\n              {this.value} {this.localization.totalLabel.replace(/\\{total\\}/gi, this.total.toString())}\n            </div>\n          )}\n          <stzh-buttongroup>\n            <stzh-button\n              variant=\"tertiary\"\n              icon=\"angle-left\"\n              icon-only\n              size={this.size}\n              a11yDisabled={this.value <= 1}\n              a11yDescribedby={this.a11yDescribedby}\n              a11yLabel={`${this.label || this.localization.label}, ${this.localization.prevLabel}, ${\n                this.localization.selectedPageLabel\n              } ${this.value}`}\n              disabled={this.disabled}\n              onClick={() => this.prev()}\n            ></stzh-button>\n            <stzh-button\n              variant=\"tertiary\"\n              icon=\"angle-right\"\n              icon-only\n              size={this.size}\n              a11yDisabled={this.value >= this.total}\n              a11yDescribedby={this.a11yDescribedby}\n              a11yLabel={`${this.label || this.localization.label}, ${this.localization.nextLabel}, ${\n                this.localization.selectedPageLabel\n              } ${this.value}`}\n              disabled={this.disabled}\n              onClick={() => this.next()}\n            ></stzh-button>\n          </stzh-buttongroup>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-3c00c24c.js","mappings":"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","names":[],"sources":["src/components/stzh-pagination/stzh-pagination.scss?tag=stzh-pagination&encapsulation=scoped","src/components/stzh-pagination/stzh-pagination.tsx"],"sourcesContent":[":host {\n  --justify-content: inherit;\n  --padding-left: calc(#{$formInputHeight} + #{space(\"medium\")});\n}\n\n.stzh-pagination {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: space(\"medium\");\n  padding-left: var(--padding-left);\n  justify-content: var(--justify-content);\n\n  &__input {\n    --text-align: center;\n    --input-width: #{$formInputHeight};\n    --padding-top: 0px;\n    --padding-bottom: 0px;\n    --padding-left: 0px;\n    --padding-right: 0px;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  &__total {\n    @include fontSize(\"nano\");\n    color: $colorGrey70;\n  }\n\n  &--size-small {\n    padding-left: calc(#{$formInputHeightSmall} + #{space(\"medium\")});\n  }\n\n  &--size-small &__input {\n    --input-width: #{$formInputHeightSmall};\n  }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhInputChangeEvent, StzhPaginationChangeEvent } from \"../../index\";\n\nimport { StzhPaginationLocalizedText } from \"./stzh-pagination.localization\";\n\n/**\n */\n@Component({\n  tag: \"stzh-pagination\",\n  styleUrl: \"stzh-pagination.scss\",\n  scoped: true,\n})\nexport class StzhPagination {\n  /** Total pages available. */\n  @Prop() total: number = 1;\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Current page. */\n  @Prop({ mutable: true }) value: number = 1;\n\n  /** Label for dropdown */\n  @Prop() label: string = \"\";\n\n  /** Whether label is hidden. */\n  @Prop() labelHidden: boolean = false;\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  /** Whether the current page is mutable via input */\n  @Prop({ reflect: true }) allowManualInput: boolean = true;\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  /** 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: StzhPaginationLocalizedText;\n\n  /** Pagination change event */\n  @Event() stzhChange: EventEmitter<StzhPaginationChangeEvent>;\n\n  @Element() element: HTMLStzhPaginationElement;\n\n  /** Set current page to previous */\n  @Method()\n  async prev() {\n    this.gotoPage(this.value - 1);\n  }\n\n  /** Set current page to next */\n  @Method()\n  async next() {\n    this.gotoPage(this.value + 1);\n  }\n\n  private input: HTMLStzhInputElement;\n\n  private gotoPage = (newPage: number) => {\n    const previous = this.value;\n\n    if (newPage >= 1 && newPage <= this.total) {\n      this.value = newPage;\n    } else if (newPage > this.total) {\n      this.value = this.total;\n    } else {\n      this.value = 1;\n    }\n\n    if (previous !== this.value) {\n      this.stzhChange.emit({\n        component: \"stzh-pagination\",\n        page: Number(this.value),\n      });\n    }\n  };\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  private onInputChange = (event: CustomEvent<StzhInputChangeEvent>) => {\n    const newPage = Number(event.detail.value) || 1;\n    this.gotoPage(newPage);\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pagination\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-pagination\": true,\n      [`stzh-pagination--size-${this.size}`]: !!this.size,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.allowManualInput ? (\n            <Fragment>\n              <stzh-input\n                class=\"stzh-pagination__input\"\n                type=\"number\"\n                min={1}\n                max={this.total}\n                label={this.label || this.localization.label}\n                labelHidden={true}\n                ref={el => (this.input = el as HTMLStzhInputElement)}\n                onStzhChange={this.onInputChange}\n                value={this.value?.toString() || \"\"}\n                required={this.required}\n                disabled={this.disabled}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                error={this.error}\n                a11yDescribedby={this.a11yDescribedby}\n                name={this.name}\n                size={this.size}\n                invalid={this.invalid}\n                hideOptional={true}\n                noAutocomplete={true}\n              ></stzh-input>\n              <div class=\"stzh-pagination__total\">\n                {this.localization.totalLabel.replace(/\\{total\\}/gi, this.total.toString())}\n              </div>\n            </Fragment>\n          ) : (\n            <div class=\"stzh-pagination__total\">\n              {this.value} {this.localization.totalLabel.replace(/\\{total\\}/gi, this.total.toString())}\n            </div>\n          )}\n          <stzh-buttongroup>\n            <stzh-button\n              variant=\"tertiary\"\n              icon=\"angle-left\"\n              icon-only\n              size={this.size}\n              a11yDisabled={this.value <= 1}\n              a11yDescribedby={this.a11yDescribedby}\n              a11yLabel={`${this.label || this.localization.label}, ${this.localization.prevLabel}, ${\n                this.localization.selectedPageLabel\n              } ${this.value}`}\n              disabled={this.disabled}\n              onClick={() => this.prev()}\n            ></stzh-button>\n            <stzh-button\n              variant=\"tertiary\"\n              icon=\"angle-right\"\n              icon-only\n              size={this.size}\n              a11yDisabled={this.value >= this.total}\n              a11yDescribedby={this.a11yDescribedby}\n              a11yLabel={`${this.label || this.localization.label}, ${this.localization.nextLabel}, ${\n                this.localization.selectedPageLabel\n              } ${this.value}`}\n              disabled={this.disabled}\n              onClick={() => this.next()}\n            ></stzh-button>\n          </stzh-buttongroup>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-8254224a.js → p-3de13c90.js}

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
 import { h as hasSlot } from './p-289f5de2.js';
 import { S as StzhInputDescription } from './p-a2148b9d.js';
-import { d as defineCustomElement$3 } from './p-5a8587ab.js';
-import { d as defineCustomElement$2 } from './p-6268e18b.js';
-import { d as defineCustomElement$1 } from './p-9a31aa56.js';
+import { d as defineCustomElement$3 } from './p-a2659715.js';
+import { d as defineCustomElement$2 } from './p-7121e1bf.js';
+import { d as defineCustomElement$1 } from './p-ace11500.js';
 
 /**
 * Tom Select v2.2.2
@@ -5423,14 +5423,14 @@ const StzhDropdown = /*@__PURE__*/ proxyCustomElement(class StzhDropdown extends
             [`stzh-dropdown--size-${this.size}`]: !!this.size,
             [`stzh-dropdown--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: '774911909ddaa4ba23f869a7b6344e165fdd9240', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'b3b366bbc41bf2448bb9db569a231f6f70450dae', class: classes, ref: el => (this.rootElement = el) }, h("div", { key: '930249d73ab79b5d935ec3ef5fae86cdacf562c6', class: "stzh-dropdown__wrapper" }, h("label", { key: '463dec947fc0e3ba3c9d0fbdb8190f7638fbca53', id: `${this.dropdownId}-label`, class: {
+        return (h(Host, { key: '879808a5f7b0903cb25ea2f4ba9bd202c0363c05', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'b98513a95cc287957ad93927f526d613c95a0eaa', class: classes, ref: el => (this.rootElement = el) }, h("div", { key: 'd0687b0202052b45458cc3ddd7028ae26b0f68c5', class: "stzh-dropdown__wrapper" }, h("label", { key: 'b59350b3f742fe97748211528207059ea8176854', id: `${this.dropdownId}-label`, class: {
                 "stzh-dropdown__label": true,
                 "no-label-truncate": this.noLabelTruncate,
-            }, htmlFor: this.dropdownId }, this.label ? this.label : h("slot", { name: "label" }), !this.hideOptional && (h("span", { key: '859e394fc6d79586fcc457e9ff3b12f055a2716e', class: "stzh-dropdown__marker" }, h("span", { key: 'fe808c3a7ffc6a0a6cfb15867eb929f4fdfcead9', class: "stzh-dropdown__marker-symbol", "aria-hidden": "true" }, this.required
+            }, htmlFor: this.dropdownId }, this.label ? this.label : h("slot", { name: "label" }), !this.hideOptional && (h("span", { key: '7aa1320ae0c3eda68e315e360a0ae160093cf8dc', class: "stzh-dropdown__marker" }, h("span", { key: 'fd18ba027192ba581718aad2efeb0d7e42dc81a4', class: "stzh-dropdown__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: '3d4972ad2a6ce719a8182af80d474c7d55e56847', class: "stzh-dropdown__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '90c278e994a27842c88866b89255ca33a4d576e3', class: "stzh-dropdown__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText)))), h("div", { key: '5002dfd32f7ab036567c92280efbb18959f14fe3', class: "stzh-dropdown__field-wrapper" }, h("select", { key: 'e10109f1ef9d888bc142f48d1ffeed9e9105b196', id: this.dropdownId, class: "stzh-dropdown__select", ref: el => (this.select = el), multiple: this.multiple, name: this.name, disabled: this.disabled, "aria-labelledby": `${this.dropdownId}-label ${this.dropdownId}-not-loading ${this.dropdownId}-no-results ${this.hideOptional && this.required && `${this.dropdownId}-required`} ${this.invalid && `${this.dropdownId}-invalid`} ${this.dropdownId}-description ${this.a11yDescribedby}` }, h("slot", { key: 'bb541e2f7fe9c11a1b54a8eb287948f3e54fe37d' })), this.inline && this.label && h("div", { key: '9240d1b01809bd4800d7e2d43c551e9f7aed7984', class: "stzh-dropdown__sizer" }, this.label), h("div", { key: '01010b1606dad392fcfe5410c065cf20042c3613', class: "stzh-dropdown__icon-angle-wrapper" }, this.iconAngle ? (h("stzh-icon", { name: this.iconAngle, class: "stzh-dropdown__icon-angle" })) : (h("slot", { name: "icon-angle" }))), h("div", { key: '4f047225993c3fa831cb6e68c7ebd2c787e0e274', class: "stzh-dropdown__icon-wrapper" }, this.icon ? (h("stzh-icon", { class: "stzh-dropdown__icon", name: this.icon })) : (h("slot", { name: "icon" }))), this.hideOptional && this.required && (h("div", { key: '5810071379a1ae085c486ab9ef8b04e6e6161542', id: `${this.dropdownId}-required`, class: "stzh-dropdown__vhidden" }, this.localization.$globals.requiredFieldText)), this.invalid && (h("div", { key: '53c446e7ae606509ce27d79c2d36244b4401b3d3', id: `${this.dropdownId}-invalid`, class: "stzh-dropdown__vhidden" }, this.localization.$globals.invalidFieldText)))), h("div", { key: '214fd009188b42a92e4794b2ebd84b19946e407c', class: "stzh-dropdown__dropdown-wrapper", ref: el => (this.dropdownWrapperElement = el) }), (errorUsed || this.description || this.descriptionLong) && (h(StzhInputDescription, { key: 'c18c86340eab081d5894d1625a1627c324399e23', classPrefix: "stzh-dropdown", id: `${this.dropdownId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
+            : this.localization.$globals.optionalFieldText)))), h("div", { key: '19a3bbf933617bc46ebb0d182fab84f9ccd6e23a', class: "stzh-dropdown__field-wrapper" }, h("select", { key: '39612fa5432e8a8fd3e2ff87a39bffdf32c9c884', id: this.dropdownId, class: "stzh-dropdown__select", ref: el => (this.select = el), multiple: this.multiple, name: this.name, disabled: this.disabled, "aria-labelledby": `${this.dropdownId}-label ${this.dropdownId}-not-loading ${this.dropdownId}-no-results ${this.hideOptional && this.required && `${this.dropdownId}-required`} ${this.invalid && `${this.dropdownId}-invalid`} ${this.dropdownId}-description ${this.a11yDescribedby}` }, h("slot", { key: 'd4db4a853c7c473112fbc428fe7296d4f9164350' })), this.inline && this.label && h("div", { key: 'dda64e280c1b9df023bf5c07a1e78f446cf78bfb', class: "stzh-dropdown__sizer" }, this.label), h("div", { key: '60d4600acd1417ca9e58cc088dd5b96d9c2e2f5f', class: "stzh-dropdown__icon-angle-wrapper" }, this.iconAngle ? (h("stzh-icon", { name: this.iconAngle, class: "stzh-dropdown__icon-angle" })) : (h("slot", { name: "icon-angle" }))), h("div", { key: 'feecac10404ae57c119203638ed98c0833b6455a', class: "stzh-dropdown__icon-wrapper" }, this.icon ? (h("stzh-icon", { class: "stzh-dropdown__icon", name: this.icon })) : (h("slot", { name: "icon" }))), this.hideOptional && this.required && (h("div", { key: '1559a3b2cd140d3916eb52c7fd2df255b25f9720', id: `${this.dropdownId}-required`, class: "stzh-dropdown__vhidden" }, this.localization.$globals.requiredFieldText)), this.invalid && (h("div", { key: '269f13b057e3deed620348ed6e406aa1bcab16f1', id: `${this.dropdownId}-invalid`, class: "stzh-dropdown__vhidden" }, this.localization.$globals.invalidFieldText)))), h("div", { key: '8fdcad8b0664cf461b3717deff0956fe73a85f72', class: "stzh-dropdown__dropdown-wrapper", ref: el => (this.dropdownWrapperElement = el) }), (errorUsed || this.description || this.descriptionLong) && (h(StzhInputDescription, { key: '61d80976a73041311a4e54c40585c24af50e129a', classPrefix: "stzh-dropdown", id: `${this.dropdownId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -5541,4 +5541,4 @@ function defineCustomElement() {
 
 export { StzhDropdown as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-8254224a.js.map
+//# sourceMappingURL=p-3de13c90.js.map