@oiz/stzh-components 0.0.0-pretest

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

@@ -0,0 +1,167 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ac9bdc7f.js');
+const utils = require('./utils-e84f4a8d.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)));
+  }
+};
+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); }
+};
+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}` }))));
+  }
+};
+StzhIcon.style = stzhIconCss;
+
+exports.stzh_badge = StzhBadge;
+exports.stzh_button = StzhButton;
+exports.stzh_icon = StzhIcon;

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

@@ -0,0 +1,306 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ac9bdc7f.js');
+const dateUtils = require('./date-utils-898a50be.js');
+const translationUtils = require('./translation-utils-2dbbce94.js');
+
+const StzhCalendarDay = ({ focusedDay, today, day, onDaySelect, onKeyboardNavigation, focusedDayRef, disabled, inRange, isSelected, dateFormatter, }) => {
+  const isToday = dateUtils.isEqual(day, today);
+  const isMonth = dateUtils.isEqualMonth(day, focusedDay);
+  const isFocused = dateUtils.isEqual(day, focusedDay);
+  const isOutsideRange = !inRange;
+  function handleClick(e) {
+    onDaySelect(e, day);
+  }
+  return (index.h("button", { class: {
+      "stzh-calendar__day": true,
+      "is-outside": isOutsideRange,
+      "is-today": isToday,
+      "is-month": isMonth,
+      "is-disabled": disabled,
+    }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": disabled ? "true" : undefined, disabled: isOutsideRange, type: "button", "aria-pressed": isSelected ? "true" : "false", "aria-current": isToday ? "date" : undefined, ref: el => {
+      if (isFocused && el && focusedDayRef) {
+        focusedDayRef(el);
+      }
+    } },
+    index.h("span", { "aria-hidden": "true" }, day.getDate()),
+    index.h("span", { class: "stzh-calendar__vhidden" }, dateFormatter.format(day))));
+};
+
+function chunk(array, chunkSize) {
+  const result = [];
+  for (let i = 0; i < array.length; i += chunkSize) {
+    result.push(array.slice(i, i + chunkSize));
+  }
+  return result;
+}
+function mapWithOffset(array, startingOffset, mapFn) {
+  return array.map((_, i) => {
+    const adjustedIndex = (i + startingOffset) % array.length;
+    return mapFn(array[adjustedIndex]);
+  });
+}
+const StzhCalendarMonth = ({ selectedDate, focusedDate, labelledById, localization, firstDayOfWeek, min, max, dateFormatter, isDateDisabled, onDateSelect, onKeyboardNavigation, focusedDayRef, }) => {
+  const today = new Date();
+  const days = dateUtils.getViewOfMonth(focusedDate, firstDayOfWeek);
+  return (index.h("table", { class: "stzh-calendar__table", "aria-labelledby": labelledById },
+    index.h("thead", null,
+      index.h("tr", null, mapWithOffset(localization.$globals.dayNames, firstDayOfWeek, dayName => (index.h("th", { class: "stzh-calendar__table-header", scope: "col" },
+        index.h("span", { "aria-hidden": "true" }, dayName.substring(0, 2)),
+        index.h("span", { class: "stzh-calendar__vhidden" }, dayName)))))),
+    index.h("tbody", null, chunk(days, 7).map(week => (index.h("tr", { class: "stzh-calendar__row" }, week.map(day => (index.h("td", { class: "stzh-calendar__cell" },
+      index.h(StzhCalendarDay, { day: day, today: today, focusedDay: focusedDate, isSelected: dateUtils.isEqual(day, selectedDate), disabled: isDateDisabled(day), inRange: dateUtils.inRange(day, min, max), onDaySelect: onDateSelect, dateFormatter: dateFormatter, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef }))))))))));
+};
+
+const stzhCalendarCss = ".sc-stzh-calendar-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-calendar-h{display:none}.sc-stzh-calendar-h *.sc-stzh-calendar,.sc-stzh-calendar-h *.sc-stzh-calendar::before,.sc-stzh-calendar-h *.sc-stzh-calendar::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-calendar-h{display:block}.stzh-calendar.sc-stzh-calendar{display:-ms-flexbox;display:flex;position:relative;text-align:left;color:var(--stzh-base-color);-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.stzh-calendar__wrapper.sc-stzh-calendar{width:100%}@media screen and (min-width: 600px){.stzh-calendar__wrapper.sc-stzh-calendar{min-width:18.125rem}}.stzh-calendar__table.sc-stzh-calendar{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;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);border-collapse:collapse;border-spacing:0;color:var(--stzh-base-color);text-align:center;width:100%}.stzh-calendar__table-header.sc-stzh-calendar,.stzh-calendar__cell.sc-stzh-calendar{padding:var(--stzh-space-xxxsmall)}.stzh-calendar__table-header.sc-stzh-calendar:first-child,.stzh-calendar__cell.sc-stzh-calendar:first-child{padding-left:0}.stzh-calendar__table-header.sc-stzh-calendar:last-child,.stzh-calendar__cell.sc-stzh-calendar:last-child{padding-right:0}.stzh-calendar__row.sc-stzh-calendar:last-child .stzh-calendar__cell.sc-stzh-calendar{padding-bottom:0}.stzh-calendar__table-header.sc-stzh-calendar{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);text-decoration:none;padding-top:0}.stzh-calendar__cell.sc-stzh-calendar{text-align:center}.stzh-calendar__day.sc-stzh-calendar{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;color:var(--stzh-base-color);cursor:pointer;display:inline-block;font-variant-numeric:tabular-nums;height:2.5rem;padding:0 0 0.0625rem;position:relative;text-align:center;vertical-align:middle;width:2.5rem;z-index:1}.stzh-calendar__day.sc-stzh-calendar::before{border-radius:50%;bottom:0;content:\"\";left:0;position:absolute;right:0;top:0}.stzh-calendar__day.is-today.sc-stzh-calendar{-webkit-box-shadow:0 0 0 0.0625rem var(--stzh-color-primary, var(--stzh-color-zueriblue));box-shadow:0 0 0 0.0625rem var(--stzh-color-primary, var(--stzh-color-zueriblue));position:relative;z-index:200}.stzh-calendar__day.sc-stzh-calendar:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-calendar__day.sc-stzh-calendar:hover::before{background:var(--stzh-color-primary, var(--stzh-color-zueriblue));opacity:0.08}.stzh-calendar__day[aria-pressed=true].sc-stzh-calendar,.stzh-calendar__day.sc-stzh-calendar:focus{background:var(--stzh-color-primary, var(--stzh-color-zueriblue));-webkit-box-shadow:none;box-shadow:none;color:var(--stzh-color-white)}.stzh-calendar__day.sc-stzh-calendar:active{background:var(--stzh-color-primary, var(--stzh-color-zueriblue));-webkit-box-shadow:0 0 0.3125rem var(--stzh-color-primary, var(--stzh-color-zueriblue));box-shadow:0 0 0.3125rem var(--stzh-color-primary, var(--stzh-color-zueriblue));color:var(--stzh-color-white);z-index:200}.stzh-calendar__day.sc-stzh-calendar:focus{z-index:200}.stzh-calendar__day.sc-stzh-calendar:not(.is-month){-webkit-box-shadow:none;box-shadow:none}.stzh-calendar__day.sc-stzh-calendar:not(.is-month),.stzh-calendar__day[aria-disabled=true].sc-stzh-calendar{background:transparent;color:var(--stzh-color-grey25);cursor:default}.stzh-calendar__day[aria-disabled=true].is-today.sc-stzh-calendar{-webkit-box-shadow:0 0 0 0.0625rem var(--stzh-color-grey13);box-shadow:0 0 0 0.0625rem var(--stzh-color-grey13)}.stzh-calendar__day[aria-disabled=true].is-today.sc-stzh-calendar:focus{-webkit-box-shadow:0 0 0.3125rem var(--stzh-color-primary, var(--stzh-color-zueriblue));box-shadow:0 0 0.3125rem var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-calendar__day[aria-disabled=true].sc-stzh-calendar::before{display:none}.stzh-calendar__day.is-disabled.sc-stzh-calendar{text-decoration:line-through}.stzh-calendar__day.is-outside.sc-stzh-calendar{background:var(--stzh-color-grey5);-webkit-box-shadow:none;box-shadow:none;color:var(--stzh-base-color);cursor:default;opacity:0.6;pointer-events:none;text-decoration:none}.stzh-calendar__day.is-outside.sc-stzh-calendar::before{display:none}.stzh-calendar__header.sc-stzh-calendar{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:var(--stzh-space-medium);width:100%}.stzh-calendar__nav.sc-stzh-calendar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.stzh-calendar__prev.sc-stzh-calendar,.stzh-calendar__next.sc-stzh-calendar{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0.0625rem solid var(--stzh-color-grey13);border-radius:50%;color:var(--stzh-color-grey70);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:center;justify-content:center;margin-left:var(--stzh-space-xsmall);padding:0;-webkit-transition:background-color 300ms ease;transition:background-color 300ms ease;height:2rem;width:2rem}.stzh-calendar__prev.sc-stzh-calendar:disabled,.stzh-calendar__next.sc-stzh-calendar:disabled{cursor:default;opacity:0.5}.stzh-calendar__select-wrapper.sc-stzh-calendar{display:-ms-inline-flexbox;display:inline-flex;position:relative}.stzh-calendar__select-wrapper.sc-stzh-calendar span.sc-stzh-calendar{margin-right:0}.stzh-calendar__select.sc-stzh-calendar{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);cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2;border-radius:var(--stzh-form-input-border-radius)}.stzh-calendar__select-label.sc-stzh-calendar{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-heading-line-height);letter-spacing:var(--stzh-font-curve---heading-letter-spacing);-ms-flex-align:center;align-items:center;border-radius:var(--stzh-form-input-border-radius);color:var(--stzh-color-grey70);display:-ms-flexbox;display:flex;padding:0 var(--stzh-space-xxsmall) 0 var(--stzh-space-xsmall);pointer-events:none;position:relative;width:100%;z-index:1}.stzh-calendar__icon.sc-stzh-calendar{--size:var(--stzh-icon-size-medium)}.stzh-calendar__vhidden.sc-stzh-calendar{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}";
+
+function range(from, to) {
+  var result = [];
+  for (var i = from; i <= to; i++) {
+    result.push(i);
+  }
+  return result;
+}
+const keyCode = {
+  TAB: 9,
+  ESC: 27,
+  SPACE: 32,
+  PAGE_UP: 33,
+  PAGE_DOWN: 34,
+  END: 35,
+  HOME: 36,
+  LEFT: 37,
+  UP: 38,
+  RIGHT: 39,
+  DOWN: 40,
+};
+let calendarCounter = 0;
+const StzhCalendar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.stzhChange = index.createEvent(this, "stzhChange", 7);
+    /** Date value. Must be in IS0-8601 format: YYYY-MM-DD. */
+    this.value = "";
+    /**
+     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+     * This setting can be used alone or together with the max property.
+     */
+    this.min = "";
+    /**
+     * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+     * This setting can be used alone or together with the min property.
+     */
+    this.max = "";
+    /**
+     * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.
+     * Default is Monday.
+     */
+    this.firstDayOfWeek = dateUtils.DaysOfWeek.Monday;
+    /**
+     * Controls which days are disabled and therefore disallowed.
+     * For example, this can be used to disallow selection of weekends.
+     */
+    this.isDateDisabled = () => false;
+    this.activeFocus = false;
+    this.focusedDay = new Date();
+    // private focusedDayNode: HTMLButtonElement
+    this.initialTouchX = null;
+    this.initialTouchY = null;
+    this.enableActiveFocus = () => {
+      this.activeFocus = true;
+    };
+    this.disableActiveFocus = () => {
+      this.activeFocus = false;
+    };
+    this.handleTouchStart = (event) => {
+      const touch = event.changedTouches[0];
+      this.initialTouchX = touch.pageX;
+      this.initialTouchY = touch.pageY;
+    };
+    // private handleTouchMove = (event: TouchEvent) => {
+    //   event.preventDefault()
+    // }
+    this.handleTouchEnd = (event) => {
+      const touch = event.changedTouches[0];
+      const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled
+      const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled
+      const threshold = 70;
+      const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;
+      if (isHorizontalSwipe) {
+        this.addMonths(distX < 0 ? 1 : -1);
+      }
+      this.initialTouchY = null;
+      this.initialTouchX = null;
+    };
+    this.handleNextMonthClick = (event) => {
+      event.preventDefault();
+      this.addMonths(1);
+    };
+    this.handlePreviousMonthClick = (event) => {
+      event.preventDefault();
+      this.addMonths(-1);
+    };
+    this.handleKeyboardNavigation = (event) => {
+      var handled = true;
+      switch (event.keyCode) {
+        case keyCode.RIGHT:
+          this.addDays(1);
+          break;
+        case keyCode.LEFT:
+          this.addDays(-1);
+          break;
+        case keyCode.DOWN:
+          this.addDays(7);
+          break;
+        case keyCode.UP:
+          this.addDays(-7);
+          break;
+        case keyCode.PAGE_UP:
+          if (event.shiftKey) {
+            this.addYears(-1);
+          }
+          else {
+            this.addMonths(-1);
+          }
+          break;
+        case keyCode.PAGE_DOWN:
+          if (event.shiftKey) {
+            this.addYears(1);
+          }
+          else {
+            this.addMonths(1);
+          }
+          break;
+        case keyCode.HOME:
+          this.startOfWeek();
+          break;
+        case keyCode.END:
+          this.endOfWeek();
+          break;
+        default:
+          handled = false;
+      }
+      if (handled) {
+        event.preventDefault();
+        this.enableActiveFocus();
+      }
+    };
+    this.handleDaySelect = (_event, day) => {
+      const isInRange = dateUtils.inRange(day, dateUtils.parseISODate(this.min), dateUtils.parseISODate(this.max));
+      const isAllowed = !this.isDateDisabled(day);
+      if (isInRange && isAllowed) {
+        this.setDate(day);
+        this.stzhChange.emit({
+          component: "stzh-calendar",
+          value: this.value,
+          valueAsDate: day,
+        });
+      }
+      else {
+        // for consistency we should set the focused day in cases where
+        // user has selected a day that has been specifically disallowed
+        this.setFocusedDay(day);
+      }
+    };
+    this.handleMonthSelect = e => {
+      this.setMonth(parseInt(e.target.value, 10));
+    };
+    this.handleYearSelect = e => {
+      this.setYear(parseInt(e.target.value, 10));
+    };
+    this.processFocusedDayNode = (element) => {
+      // this.focusedDayNode = element
+      if (this.activeFocus) {
+        setTimeout(() => element.focus(), 0);
+      }
+    };
+  }
+  createDateFormatters() {
+    if (this.localization) {
+      this.dateFormatShort = new Intl.DateTimeFormat(this.localization.$locale, { day: "numeric", month: "long" });
+    }
+  }
+  valueWatcher(newValue) {
+    if (newValue) {
+      this.setFocusedDay(dateUtils.parseISODate(this.value));
+    }
+    else {
+      this.setFocusedDay(new Date());
+    }
+  }
+  /** Set focused day element by a JS Date object */
+  async setFocusedDay(day) {
+    this.focusedDay = dateUtils.clamp(day, dateUtils.parseISODate(this.min), dateUtils.parseISODate(this.max));
+  }
+  /** Set value by a JS Date object */
+  async setDate(date) {
+    this.value = dateUtils.printISODate(date);
+  }
+  addDays(days) {
+    this.setFocusedDay(dateUtils.addDays(this.focusedDay, days));
+  }
+  addMonths(months) {
+    this.setMonth(this.focusedDay.getMonth() + months);
+  }
+  addYears(years) {
+    this.setYear(this.focusedDay.getFullYear() + years);
+  }
+  startOfWeek() {
+    this.setFocusedDay(dateUtils.startOfWeek(this.focusedDay, this.firstDayOfWeek));
+  }
+  endOfWeek() {
+    this.setFocusedDay(dateUtils.endOfWeek(this.focusedDay, this.firstDayOfWeek));
+  }
+  setMonth(month) {
+    const min = dateUtils.setMonth(dateUtils.startOfMonth(this.focusedDay), month);
+    const max = dateUtils.endOfMonth(min);
+    const date = dateUtils.setMonth(this.focusedDay, month);
+    this.setFocusedDay(dateUtils.clamp(date, min, max));
+  }
+  setYear(year) {
+    const min = dateUtils.setYear(dateUtils.startOfMonth(this.focusedDay), year);
+    const max = dateUtils.endOfMonth(min);
+    const date = dateUtils.setYear(this.focusedDay, year);
+    this.setFocusedDay(dateUtils.clamp(date, min, max));
+  }
+  async componentWillLoad() {
+    this.monthSelectId = `stzh-calendar-month-${calendarCounter}`;
+    this.yearSelectId = `stzh-calendar-year-${calendarCounter}`;
+    this.dialogLabelId = `stzh-calendar-dialog-${calendarCounter}`;
+    calendarCounter++;
+    this.valueWatcher(this.value);
+    if (!this.localization) {
+      this.localization = await translationUtils.fetchTranslations(this.element, 'calendar');
+    }
+  }
+  connectedCallback() {
+    this.createDateFormatters();
+  }
+  render() {
+    const valueAsDate = dateUtils.parseISODate(this.value);
+    const selectedYear = (valueAsDate || this.focusedDay).getFullYear();
+    const focusedMonth = this.focusedDay.getMonth();
+    const focusedYear = this.focusedDay.getFullYear();
+    const minDate = dateUtils.parseISODate(this.min);
+    const maxDate = dateUtils.parseISODate(this.max);
+    const prevMonthDisabled = minDate != null && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear;
+    const nextMonthDisabled = maxDate != null && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear;
+    const minYear = minDate ? minDate.getFullYear() : selectedYear - 10;
+    const maxYear = maxDate ? maxDate.getFullYear() : selectedYear + 10;
+    return (index.h(index.Host, null, index.h("div", { class: {
+        "stzh-calendar": true
+      },
+      /* onTouchMove={this.handleTouchMove} */
+      onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, index.h("div", { class: "stzh-calendar__wrapper" }, index.h("div", { class: "stzh-calendar__header", onFocusin: this.disableActiveFocus }, index.h("div", null, index.h("h2", { id: this.dialogLabelId, class: "stzh-calendar__vhidden", "aria-live": "polite", "aria-atomic": "true" }, this.localization.$globals.monthNames[focusedMonth], this.focusedDay.getFullYear()), index.h("label", { htmlFor: this.monthSelectId, class: "stzh-calendar__vhidden" }, this.localization.monthSelectLabel), index.h("div", { class: "stzh-calendar__select-wrapper" }, index.h("select", { id: this.monthSelectId, class: "stzh-calendar__select stzh-calendar__select--month", onChange: this.handleMonthSelect }, this.localization.$globals.monthNames.map((month, i) => (index.h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !dateUtils.inRange(new Date(focusedYear, i, 1), minDate ? dateUtils.startOfMonth(minDate) : null, maxDate ? dateUtils.endOfMonth(maxDate) : null) }, month)))), index.h("div", { class: "stzh-calendar__select-label", "aria-hidden": "true" }, index.h("span", null, this.localization.$globals.monthNamesShort[focusedMonth]), index.h("stzh-icon", { class: "stzh-calendar__icon", name: "angle-down" }))), index.h("label", { htmlFor: this.yearSelectId, class: "stzh-calendar__vhidden" }, this.localization.yearSelectLabel), index.h("div", { class: "stzh-calendar__select-wrapper" }, index.h("select", { id: this.yearSelectId, class: "stzh-calendar__select stzh-calendar__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (index.h("option", { key: year, selected: year === focusedYear }, year)))), index.h("div", { class: "stzh-calendar__select-label", "aria-hidden": "true" }, index.h("span", null, this.focusedDay.getFullYear()), index.h("stzh-icon", { class: "stzh-calendar__icon", name: "angle-down" })))), index.h("div", { class: "stzh-calendar__nav" }, index.h("button", { class: "stzh-calendar__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, index.h("stzh-icon", { class: "stzh-calendar__icon", name: "angle-left" }), index.h("span", { class: "stzh-calendar__vhidden" }, this.localization.prevMonthLabel)), index.h("button", { class: "stzh-calendar__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, index.h("stzh-icon", { class: "stzh-calendar__icon", name: "angle-right" }), index.h("span", { class: "stzh-calendar__vhidden" }, this.localization.nextMonthLabel)))), index.h(StzhCalendarMonth, { dateFormatter: this.dateFormatShort, selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate, isDateDisabled: this.isDateDisabled })))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "localization": ["createDateFormatters"],
+    "value": ["valueWatcher"]
+  }; }
+};
+StzhCalendar.style = stzhCalendarCss;
+
+exports.stzh_calendar = StzhCalendar;

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

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ac9bdc7f.js');
+
+const stzhCellCss = ":host{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}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--cell-width:100%;max-width:100%;width:var(--cell-width);-ms-flex-preferred-size:var(--cell-width);flex-basis:var(--cell-width);-ms-flex-negative:0;flex-shrink:0}:host([justify-self=start]){justify-self:flex-start}:host([justify-self=end]){justify-self:flex-end}:host([justify-self=center]){justify-self:center}:host([justify-self=between]){justify-self:space-between}:host([justify-self=around]){justify-self:space-around}:host([justify-self=evenly]){justify-self:space-evenly}:host([align-self=start]){-ms-flex-item-align:start;align-self:flex-start}:host([align-self=end]){-ms-flex-item-align:end;align-self:flex-end}:host([align-self=center]){-ms-flex-item-align:center;align-self:center}:host([align-self=baseline]){-ms-flex-item-align:baseline;align-self:baseline}:host([align-self=stretch]){-ms-flex-item-align:stretch;align-self:stretch}:host([span=\"1\"]){--cell-width:8.3333333333%}:host([span=\"2\"]){--cell-width:16.6666666667%}:host([span=\"3\"]){--cell-width:25%}:host([span=\"4\"]){--cell-width:33.3333333333%}:host([span=\"5\"]){--cell-width:41.6666666667%}:host([span=\"6\"]){--cell-width:50%}:host([span=\"7\"]){--cell-width:58.3333333333%}:host([span=\"8\"]){--cell-width:66.6666666667%}:host([span=\"9\"]){--cell-width:75%}:host([span=\"10\"]){--cell-width:83.3333333333%}:host([span=\"11\"]){--cell-width:91.6666666667%}:host([span=\"12\"]){--cell-width:100%}@media screen and (min-width: 600px){:host([span-small=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"3\"]){--cell-width:25%}}@media screen and (min-width: 600px){:host([span-small=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"6\"]){--cell-width:50%}}@media screen and (min-width: 600px){:host([span-small=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"9\"]){--cell-width:75%}}@media screen and (min-width: 600px){:host([span-small=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"12\"]){--cell-width:100%}}@media screen and (min-width: 800px){:host([span-smallheader=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"3\"]){--cell-width:25%}}@media screen and (min-width: 800px){:host([span-smallheader=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"6\"]){--cell-width:50%}}@media screen and (min-width: 800px){:host([span-smallheader=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"9\"]){--cell-width:75%}}@media screen and (min-width: 800px){:host([span-smallheader=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader=\"12\"]){--cell-width:100%}}@media screen and (min-width: 1024px){:host([span-medium=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"3\"]){--cell-width:25%}}@media screen and (min-width: 1024px){:host([span-medium=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"6\"]){--cell-width:50%}}@media screen and (min-width: 1024px){:host([span-medium=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"9\"]){--cell-width:75%}}@media screen and (min-width: 1024px){:host([span-medium=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium=\"12\"]){--cell-width:100%}}@media screen and (min-width: 1260px){:host([span-large=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"3\"]){--cell-width:25%}}@media screen and (min-width: 1260px){:host([span-large=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"6\"]){--cell-width:50%}}@media screen and (min-width: 1260px){:host([span-large=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"9\"]){--cell-width:75%}}@media screen and (min-width: 1260px){:host([span-large=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"12\"]){--cell-width:100%}}@media screen and (min-width: 1440px){:host([span-ultra=\"1\"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"2\"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"3\"]){--cell-width:25%}}@media screen and (min-width: 1440px){:host([span-ultra=\"4\"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"5\"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"6\"]){--cell-width:50%}}@media screen and (min-width: 1440px){:host([span-ultra=\"7\"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"8\"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"9\"]){--cell-width:75%}}@media screen and (min-width: 1440px){:host([span-ultra=\"10\"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra=\"11\"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra=\"12\"]){--cell-width:100%}}.stzh-cell{height:100%;padding-left:calc(var(--stzh-grid-gutter) / 2);padding-right:calc(var(--stzh-grid-gutter) / 2)}@media screen and (min-width: 600px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-small) / 2);padding-right:calc(var(--stzh-grid-gutter-small) / 2)}}@media screen and (min-width: 1024px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-medium) / 2);padding-right:calc(var(--stzh-grid-gutter-medium) / 2)}}";
+
+const StzhCell = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Default span of each cell */
+    this.span = 12;
+    /** Default span of each cell above small breakpoint */
+    this.spanSmall = 0;
+    /** Default span of each cell above medium breakpoint */
+    this.spanMedium = 0;
+    /** Default span of each cell above large breakpoint */
+    this.spanLarge = 0;
+    /** Default span of each cell above ultra breakpoint */
+    this.spanUltra = 0;
+    /** Controlling how cells are positioned along a container's main axis */
+    this.justifySelf = "auto";
+    /** Control how cells items are positioned along a container's cross axis */
+    this.alignSelf = "auto";
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: {
+        "stzh-cell": true
+      } }, index.h("slot", null))));
+  }
+};
+StzhCell.style = stzhCellCss;
+
+exports.stzh_cell = StzhCell;