@oiz/stzh-components 0.0.0-pretest → 1.4.0-npmjstest

package/dist/cjs/stzh-badge_3.cjs.entry.js

@@ -3,163 +3,163 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac9bdc7f.js');
-const utils = require('./utils-e84f4a8d.js');
+const utils = require('./utils-d327c19d.js');
 
 const stzhBadgeCss = ".sc-stzh-badge-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-badge-h{display:none}.sc-stzh-badge-h *.sc-stzh-badge,.sc-stzh-badge-h *.sc-stzh-badge::before,.sc-stzh-badge-h *.sc-stzh-badge::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-badge-h{display:-ms-inline-flexbox;display:inline-flex}.stzh-badge.sc-stzh-badge{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;min-width:0.625rem;font-size:0.625rem;line-height:1.4;-webkit-box-shadow:0 0 0 0.0625rem #fff;box-shadow:0 0 0 0.0625rem #fff;border-radius:0.875rem;padding:0.0625rem 0.375rem;background-color:var(--stzh-color-shiraz);color:var(--stzh-color-white);text-transform:uppercase}";
 
-const StzhBadge = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** Text content of the badge */
-    this.label = "";
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "stzh-badge" }, this.label)));
-  }
-};
+const StzhBadge = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Text content of the badge */
+    this.label = "";
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "stzh-badge" }, this.label)));
+  }
+};
 StzhBadge.style = stzhBadgeCss;
 
 const stzhButtonCss = "@charset \"UTF-8\";.sc-stzh-button-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-button-h{display:none}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-button-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--height:var(--stzh-form-input-height);--icon-size:var(--stzh-icon-size-small);--icon-text-margin:var(--stzh-space-small);--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--padding:var(--stzh-space-xsmall) var(--stzh-space-xlarge);--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));display:inline-block;border-radius:var(--stzh-button-border-radius)}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:block}[size=small].sc-stzh-button-h{--height:var(--stzh-form-input-small-height)}[size=tiny].sc-stzh-button-h{--height:var(--stzh-form-input-tiny-height);--icon-text-margin:var(--stzh-space-xsmall);--padding:var(--stzh-space-xxsmall) var(--stzh-space-medium)}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:var(--stzh-color-white)}[variant=input].sc-stzh-button-h{--color:var(--stzh-color-grey61);--background-color:transparent;--border-color:var(--stzh-color-grey61);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:transparent;--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:transparent;--border-color:transparent;--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:var(--stzh-button-text-hover-background);--hover-border-color:transparent}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[disabled].sc-stzh-button-h:not([disabled=false]){--border-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-grey13);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:var(--stzh-color-grey13)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary]{--color:var(--stzh-color-grey25);--border-color:var(--stzh-color-grey13);--background-color:transparent;--hover-color:var(--stzh-color-grey25);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:transparent}@-webkit-keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}.sc-stzh-button-h .sc-stzh-button-s>stzh-icon,.stzh-button__icon.sc-stzh-button{--size:var(--icon-size)}.stzh-button.sc-stzh-button{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;overflow:visible;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding:var(--padding);background-color:var(--background-color);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);border:0.0625rem solid var(--border-color);cursor:pointer;text-decoration:none;width:100%;min-width:var(--height);height:var(--height);border-radius:var(--stzh-button-border-radius)}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__inner.sc-stzh-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:auto;height:1em}.stzh-button__text.sc-stzh-button{white-space:nowrap}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button--size-small.sc-stzh-button,.stzh-button--size-tiny.sc-stzh-button{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button{width:var(--height);height:var(--height);padding:0}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{-webkit-animation:stzh-button-effect-cta 1s;animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:start;justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:end;justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:center;justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:justify;justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}";
 
-const StzhButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.stzhFocus = index.createEvent(this, "stzhFocus", 7);
-    this.stzhBlur = index.createEvent(this, "stzhBlur", 7);
-    /** Display a badge aligned to button or icons */
-    this.badge = "";
-    /** Badge position */
-    this.badgePosition = "button";
-    /** Whether the button is full width */
-    this.fullwidth = false;
-    /** Size variant */
-    this.size = "default";
-    /** Text alignment */
-    this.textAlign = "default";
-    /** Variant style */
-    this.variant = "default";
-    /** Icon (use instead of icon slot) */
-    this.icon = "";
-    /** Icon Position */
-    this.iconPosition = "left";
-    /** `href` if the button should be used as link  */
-    this.href = "";
-    /** Target if the button is used as link (if `href` used)  */
-    this.target = "";
-    /** Type of the button */
-    this.type = "button";
-    /** Whether the button is disabled */
-    this.disabled = false;
-    /** Whether the button is active */
-    this.active = false;
-    /** Label */
-    this.label = "";
-    /** Effect/Animation used */
-    this.effect = "default";
-    /** Whether only an icon is used inside the button */
-    this.iconOnly = false;
-    /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
-    this.a11yDescribedby = "";
-    this.onFocus = (event) => {
-      const focusEvent = new FocusEvent("focus", {
-        view: window,
-        bubbles: false,
-        cancelable: false
-      });
-      this.element.dispatchEvent(focusEvent);
-      this.stzhFocus.emit({
-        component: "stzh-button",
-        originalEvent: event
-      });
-    };
-    this.onBlur = (event) => {
-      const blurEvent = new FocusEvent("blur", {
-        view: window,
-        bubbles: false,
-        cancelable: false
-      });
-      this.element.dispatchEvent(blurEvent);
-      this.stzhBlur.emit({
-        component: "stzh-button",
-        originalEvent: event
-      });
-    };
-    this.onClick = (event) => {
-      if (this.disabled) {
-        event.stopPropagation();
-        event.preventDefault();
-      }
-    };
-  }
-  /** Focus button */
-  async setFocus() {
-    this.button.focus();
-  }
-  renderIcon(iconUsed) {
-    return (index.h("div", { class: "stzh-button__icon-wrapper" }, this.icon ?
-      index.h("stzh-icon", { class: "stzh-button__icon", name: this.icon })
-      :
-        index.h("slot", { name: "icon" }), this.badge && this.badgePosition === "icon" && iconUsed &&
-      index.h("stzh-badge", { class: "stzh-button__badge", label: this.badge })));
-  }
-  renderContent() {
-    return (index.h("div", { class: "stzh-button__text" }, this.label ? this.label : index.h("slot", null)));
-  }
-  renderInner(iconUsed) {
-    return (index.h(index.Fragment, null, index.h("div", { class: "stzh-button__inner", onClick: this.onClick }, this.iconPosition === "left" && this.renderIcon(iconUsed), this.renderContent(), this.iconPosition === "right" && this.renderIcon(iconUsed)), this.badge && (this.badgePosition === "button" || !iconUsed) &&
-      index.h("stzh-badge", { class: "stzh-button__badge", label: this.badge, onClick: this.onClick })));
-  }
-  render() {
-    const iconUsed = utils.hasSlot(this.element, "icon") || !!this.icon;
-    const classes = {
-      "stzh-button": true,
-      "stzh-button--fullwidth": this.fullwidth,
-      "stzh-button--has-icon": iconUsed,
-      "stzh-button--has-icon-only": this.iconOnly,
-      "stzh-button--has-badge": !!this.badge,
-      "stzh-button--is-disabled": this.disabled,
-      "stzh-button--is-active": this.active,
-      [`stzh-button--effect-${this.effect}`]: !!this.effect,
-      [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,
-      [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,
-      [`stzh-button--size-${this.size}`]: !!this.size,
-      [`stzh-button--${this.variant}`]: !!this.variant
-    };
-    return (index.h(index.Host, null, this.href ?
-      index.h("a", { ref: (el) => (this.button = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))
-      :
-        index.h("button", { ref: (el) => (this.button = el), class: classes, type: this.type, disabled: this.disabled, "aria-label": this.a11yLabel, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
-  }
-  get element() { return index.getElement(this); }
-};
+const StzhButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.stzhFocus = index.createEvent(this, "stzhFocus", 7);
+    this.stzhBlur = index.createEvent(this, "stzhBlur", 7);
+    /** Display a badge aligned to button or icons */
+    this.badge = "";
+    /** Badge position */
+    this.badgePosition = "button";
+    /** Whether the button is full width */
+    this.fullwidth = false;
+    /** Size variant */
+    this.size = "default";
+    /** Text alignment */
+    this.textAlign = "default";
+    /** Variant style */
+    this.variant = "default";
+    /** Icon (use instead of icon slot) */
+    this.icon = "";
+    /** Icon Position */
+    this.iconPosition = "left";
+    /** `href` if the button should be used as link  */
+    this.href = "";
+    /** Target if the button is used as link (if `href` used)  */
+    this.target = "";
+    /** Type of the button */
+    this.type = "button";
+    /** Whether the button is disabled */
+    this.disabled = false;
+    /** Whether the button is active */
+    this.active = false;
+    /** Label */
+    this.label = "";
+    /** Effect/Animation used */
+    this.effect = "default";
+    /** Whether only an icon is used inside the button */
+    this.iconOnly = false;
+    /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
+    this.a11yDescribedby = "";
+    this.onFocus = (event) => {
+      const focusEvent = new FocusEvent("focus", {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(focusEvent);
+      this.stzhFocus.emit({
+        component: "stzh-button",
+        originalEvent: event
+      });
+    };
+    this.onBlur = (event) => {
+      const blurEvent = new FocusEvent("blur", {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(blurEvent);
+      this.stzhBlur.emit({
+        component: "stzh-button",
+        originalEvent: event
+      });
+    };
+    this.onClick = (event) => {
+      if (this.disabled) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    };
+  }
+  /** Focus button */
+  async setFocus() {
+    this.button.focus();
+  }
+  renderIcon(iconUsed) {
+    return (index.h("div", { class: "stzh-button__icon-wrapper" }, this.icon ?
+      index.h("stzh-icon", { class: "stzh-button__icon", name: this.icon })
+      :
+        index.h("slot", { name: "icon" }), this.badge && this.badgePosition === "icon" && iconUsed &&
+      index.h("stzh-badge", { class: "stzh-button__badge", label: this.badge })));
+  }
+  renderContent() {
+    return (index.h("div", { class: "stzh-button__text" }, this.label ? this.label : index.h("slot", null)));
+  }
+  renderInner(iconUsed) {
+    return (index.h(index.Fragment, null, index.h("div", { class: "stzh-button__inner", onClick: this.onClick }, this.iconPosition === "left" && this.renderIcon(iconUsed), this.renderContent(), this.iconPosition === "right" && this.renderIcon(iconUsed)), this.badge && (this.badgePosition === "button" || !iconUsed) &&
+      index.h("stzh-badge", { class: "stzh-button__badge", label: this.badge, onClick: this.onClick })));
+  }
+  render() {
+    const iconUsed = utils.hasSlot(this.element, "icon") || !!this.icon;
+    const classes = {
+      "stzh-button": true,
+      "stzh-button--fullwidth": this.fullwidth,
+      "stzh-button--has-icon": iconUsed,
+      "stzh-button--has-icon-only": this.iconOnly,
+      "stzh-button--has-badge": !!this.badge,
+      "stzh-button--is-disabled": this.disabled,
+      "stzh-button--is-active": this.active,
+      [`stzh-button--effect-${this.effect}`]: !!this.effect,
+      [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,
+      [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,
+      [`stzh-button--size-${this.size}`]: !!this.size,
+      [`stzh-button--${this.variant}`]: !!this.variant
+    };
+    return (index.h(index.Host, null, this.href ?
+      index.h("a", { ref: (el) => (this.button = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))
+      :
+        index.h("button", { ref: (el) => (this.button = el), class: classes, type: this.type, disabled: this.disabled, "aria-label": this.a11yLabel, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
+  }
+  get element() { return index.getElement(this); }
+};
 StzhButton.style = stzhButtonCss;
 
 const stzhIconCss = ".sc-stzh-icon-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-icon-h{display:none}.sc-stzh-icon-h *.sc-stzh-icon,.sc-stzh-icon-h *.sc-stzh-icon::before,.sc-stzh-icon-h *.sc-stzh-icon::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-icon-h{--size:var(--stzh-icon-size-default);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:currentColor;vertical-align:text-top}.stzh-icon.sc-stzh-icon{width:var(--size);height:var(--size)}";
 
-let iconCounter = 0;
-const StzhIcon = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Icon which should be displayed
-     * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.
-     */
-    this.name = "";
-    /**
-     * Hidden icon title for screenreader
-     * (usually not needed when e.g. inside links or buttons that have text)
-    */
-    this.a11yTitle = "";
-  }
-  componentWillLoad() {
-    this.iconId = `stzh-icon-${iconCounter++}`;
-  }
-  render() {
-    return (index.h(index.Host, null, this.name &&
-      index.h("svg", { class: "stzh-icon", role: this.a11yTitle ? 'img' : 'presentation', focusable: this.a11yTitle ? 'true' : 'false', "aria-labelledby": this.a11yTitle ? `${this.iconId}-title` : null }, this.a11yTitle &&
-        index.h("title", { id: `${this.iconId}-title` }, this.a11yTitle), index.h("use", { href: `#stzh-icon-${this.name}` }))));
-  }
-};
+let iconCounter = 0;
+const StzhIcon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Icon which should be displayed
+     * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.
+     */
+    this.name = "";
+    /**
+     * Hidden icon title for screenreader
+     * (usually not needed when e.g. inside links or buttons that have text)
+    */
+    this.a11yTitle = "";
+  }
+  componentWillLoad() {
+    this.iconId = `stzh-icon-${iconCounter++}`;
+  }
+  render() {
+    return (index.h(index.Host, null, this.name &&
+      index.h("svg", { class: "stzh-icon", role: this.a11yTitle ? 'img' : 'presentation', focusable: this.a11yTitle ? 'true' : 'false', "aria-labelledby": this.a11yTitle ? `${this.iconId}-title` : null }, this.a11yTitle &&
+        index.h("title", { id: `${this.iconId}-title` }, this.a11yTitle), index.h("use", { href: `#stzh-icon-${this.name}` }))));
+  }
+};
 StzhIcon.style = stzhIconCss;
 
 exports.stzh_badge = StzhBadge;