@oiz/stzh-components 2.11.0 → 2.11.1

package/dist/types/components/stzh-accordion/stzh-accordion.d.ts

@@ -0,0 +1,15 @@
+import { StzhAccordionItemOpenEvent } from "../../index";
+/**
+ * @slot - Slot for `stzh-accordion-item` elements
+ */
+export declare class StzhAccordion {
+  /** Whether folds are collapsible */
+  collapsible: boolean;
+  /** Whether multiple folds can be opened at once */
+  multiselectable: boolean;
+  element: HTMLStzhAccordionElement;
+  openListener(event: CustomEvent<StzhAccordionItemOpenEvent>): void;
+  /** Set focus to accordion item */
+  setItemFocus(accordionItem: HTMLStzhAccordionItemElement, action: string): Promise<void>;
+  render(): any;
+}

package/dist/types/components/stzh-accordion-item/stzh-accordion-item.d.ts

@@ -0,0 +1,73 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhAccordionItemOpenEvent, StzhAccordionItemOpenedEvent, StzhAccordionItemCloseEvent, StzhAccordionItemClosedEvent, StzhAccordionItemFocusEvent, StzhAccordionItemBlurEvent } from "../../index";
+/**
+ * @slot - Slot for any content
+ * @slot icon - Slot for icon element
+ */
+export declare class StzhAccordionItem {
+  /** Whether fold is collapsible (overwrites collapsible from timeline parent) */
+  collapsible: boolean;
+  /** Whether fold is open */
+  open: boolean;
+  /** Whether fold disabled */
+  disabled: boolean;
+  /** Heading title */
+  heading: string;
+  /** Subtitle */
+  subtitle: string;
+  /** Description */
+  description: string;
+  /** Icon (use instead of icon slot) */
+  icon: string;
+  /** Badge */
+  badge: string;
+  /** Whether badge should be displayed empty */
+  badgeEmpty: boolean;
+  /** Badge type */
+  badgeType: "default" | "success" | "warning" | "error" | "info";
+  /** Heading level */
+  headingLevel: "1" | "2" | "3" | "4";
+  /**
+   * For Adobe Analytics.
+   * Will be rendered as value of `s-object-id` attribute to the button element.
+   * Default value will be taken from `heading` prop.
+   */
+  analyticsId: string;
+  element: HTMLStzhAccordionItemElement;
+  /** Open event */
+  stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;
+  /** Opened event (after animation) */
+  stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;
+  /** Close event */
+  stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;
+  /** Closed event (after animation) */
+  stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;
+  openWatcher(newValue: boolean): Promise<void>;
+  /** Show accordion item content */
+  show(): Promise<void>;
+  /** Hide accordion item content */
+  hide(): Promise<void>;
+  /** Toggle accordion item content */
+  toggle(): Promise<void>;
+  /** Set focus to button */
+  setFocus(): Promise<void>;
+  /** Focus event */
+  stzhFocus: EventEmitter<StzhAccordionItemFocusEvent>;
+  /** Input blur event */
+  stzhBlur: EventEmitter<StzhAccordionItemBlurEvent>;
+  private toggledByMethod;
+  private bodyElement;
+  private buttonElement;
+  private accordionItemId;
+  private accordion;
+  private handleHeaderClick;
+  private onFocus;
+  private onBlur;
+  private onButtonKeydown;
+  private onContentKeydown;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  connectedCallback(): Promise<void>;
+  disconnectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/stzh-actions/stzh-actions.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @slot primary - Slot for primary button
+ * @slot secondary - Slot for secondary button
+ */
+export declare class StzhActions {
+  /** Variant determining what position the action buttons are */
+  variant: "form" | "dialog" | "process" | "cta";
+  /** With border separator */
+  withBorder: boolean;
+  element: HTMLStzhActionsElement;
+  private observer;
+  private init;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/stzh-actionset/stzh-actionset.d.ts

@@ -0,0 +1,45 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhActionsetItem, StzhActionsetItemClickEvent } from "../../index";
+import { StzhActionsetLocalizedText } from './stzh-actionset.localization';
+import { Placement } from "@floating-ui/dom";
+/**
+ */
+export declare class StzhActionset {
+  /** Translation strings */
+  localization: StzhActionsetLocalizedText;
+  /** Variant determining what position the action buttons are */
+  variant: "stack" | "overflow";
+  /** Button variant of popover button (button thats holds collapsed actions) */
+  popoverButtonVariant: "" | "default" | "secondary" | "input" | "tertiary";
+  /** Button size of popover button (button that holds collapsed actions) */
+  popoverButtonSize: "" | "default" | "small" | "tiny";
+  /** Popover placement of button that holds collapsed actions */
+  popoverPlacement: Placement;
+  /**
+   * Card header actions.
+   * Array of objects that can include the button attributes `id`, `variant`, `icon`, `size`, `iconPosition`, `iconOnly`, `label` or `badge`:
+   * `[{"id":"action-1", "icon": "alarm-bell", "label": "Lorem"}, {"id":"action-2", "icon": "mail", "label": "Lorem"}]`
+   */
+  actions: StzhActionsetItem[] | string;
+  private _actions;
+  /** Header action click event */
+  stzhActionClick: EventEmitter<StzhActionsetItemClickEvent>;
+  element: HTMLStzhActionsetElement;
+  actionsWatcher(newValue: StzhActionsetItem[] | string): void;
+  actionsCollapsed: StzhActionsetItem[];
+  dynamicActions: boolean;
+  isSmall: boolean;
+  isMedium: boolean;
+  private actionsElement;
+  private debounceResize;
+  private resizeObserver;
+  private actionClick;
+  private update;
+  private handleResize;
+  private mediaChangeHandler;
+  componentWillLoad(): Promise<void>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components/stzh-amount/stzh-amount.d.ts

@@ -0,0 +1,73 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhAmountChangeEvent } from "../../index";
+import { StzhAmountLocalizedText } from './stzh-amount.localization';
+export declare class StzhAmount {
+  /** The lowest allowed amount (can be negative). */
+  minValue: number;
+  /** The highest allowed amount. */
+  maxValue: number;
+  /** The lowest amount as option in the dropdown. Needs to be set to initially display a dropdown. */
+  minValueDropdown: number | null;
+  /** The highest amount as option in the dropdown. Needs to be set to initially display a dropdown. */
+  maxValueDropdown: number | null;
+  private _showDropdown;
+  private _dropdownOptions;
+  /** The initial value of the amount element */
+  value: string;
+  /** The step the amount can be increased or decreased */
+  step: number;
+  /** Name of the element (hidden select element in case of dropdown) */
+  name: string;
+  /** Size variant */
+  size: "default" | "small";
+  /** Whether the amount component is disabled */
+  disabled: boolean;
+  /** Popover placement for the dropdown (if applicable) */
+  popoverPlacement: "bottom" | "bottom-end" | "bottom-center" | "top" | "top-end" | "top-center";
+  /** Label */
+  label: string;
+  /** Whether label is hidden. */
+  labelHidden: boolean;
+  /** Invalid status */
+  invalid: boolean;
+  /** Required status */
+  required: boolean;
+  /** Whether clearable button is showing for the input field (does not apply to dropdown) */
+  clearable: boolean;
+  /** Show text in label depending on whether field is optional/required */
+  showMarker: boolean;
+  /** Description placed below the amount */
+  description: string;
+  /** Long description message appearing in a popover */
+  descriptionLong: string;
+  /** One or multiple error message(s) */
+  error: string | string[];
+  /** Id of the element which describes the input */
+  a11yDescribedby: string;
+  /**  Translation strings. */
+  localization: StzhAmountLocalizedText;
+  minMaxValueDropdownWatcher(): void;
+  /** Amount change event */
+  stzhChange: EventEmitter<StzhAmountChangeEvent>;
+  element: HTMLStzhAmountElement;
+  private amountId;
+  private stepperInputId;
+  private input;
+  private onRootFocus;
+  /** Fill the dropdown with options according to maxValueDropdown & minValueDropdown. */
+  private setDropdownOptions;
+  /** Handling dropdown changes (switch to input stepper if the plus option is selected in the dropdown). */
+  private onDropdownChange;
+  /** Handling the minus button. */
+  private onInputMinusStepClick;
+  /** Handling the plus button. */
+  private onInputPlusStepClick;
+  /** Handling manual value change of the stepper input. */
+  private onStepperInputChange;
+  /** Making sure, that the value is rounded correctly according to the step  */
+  private roundToStep;
+  componentWillLoad(): Promise<void>;
+  private renderDropdown;
+  private renderInputStepper;
+  render(): any;
+}

package/dist/types/components/stzh-appnav/stzh-appnav.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @slot - Slot for `stzh-link` elements
+ */
+export declare class StzhAppnav {
+  /** App title shown on tablet/desktop */
+  appTitle: string;
+  /** Status displayed next to app title (only displayed if `app-title` is defined) */
+  appStatus: string;
+  /** Link of app title (only used if `app-title` is defined) */
+  appHref: string;
+  /**
+   * For Adobe Analytics.
+   * Will be rendered as value of `s-object-id` attribute to the app title link element.
+   * Default value will be taken from `appTitle` prop or default slot.
+   */
+  appAnalyticsId: string;
+  element: HTMLStzhAppnavElement;
+  private observer;
+  private init;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/stzh-appointments/stzh-appointments.d.ts

@@ -0,0 +1,73 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhAppointmentsChangeEvent } from "../../index";
+import { StzhLocaleAdapter } from "../../utils/date-adapter";
+import { StzhAppointmentsLocalizedText } from "./stzh-appointments.localization";
+/**
+ * @slot - Slot for any content
+ */
+export declare class StzhAppointments {
+  /** Translation strings */
+  localization: StzhAppointmentsLocalizedText;
+  /** Sort by */
+  sortBy: "start" | "place";
+  private _sortBy;
+  /** Initial selected values */
+  appointments: any[] | string;
+  private _appointments;
+  private appointmentsShown;
+  /** Current selected date (if undefined, earliest appointment date in list is taken or current selected one by value) */
+  currentDate: Date | string;
+  private _currentDate;
+  value: string;
+  name: string;
+  /** Nr of items shown */
+  showItems: number;
+  /** Nr of items shown when more link is clicked */
+  stepItems: number;
+  /** Overwrite default calendar title */
+  calendarTitle: string;
+  /** Overwrite default appointments title */
+  appointmentsTitle: string;
+  /**
+   * Date adapter, for custom parsing/formatting.
+   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,
+   * and a `format` function which accepts a `Date` and returns a `string`.
+   */
+  dateAdapter: StzhLocaleAdapter;
+  element: HTMLStzhAppointmentsElement;
+  /** Appointments change event */
+  stzhChange: EventEmitter<StzhAppointmentsChangeEvent>;
+  currentDateWatcher(newValue: Date | string): void;
+  sortByWatcher(): void;
+  valueWatcher(): void;
+  appointmentsWatcher(newValue: any[] | string): void;
+  private dateByValue;
+  private earliestDate;
+  private latestDate;
+  private nextDate;
+  private showMoreLink;
+  private moreItemsLeft;
+  private showCalendar;
+  private showSort;
+  private showSortStart;
+  private showSortPlace;
+  private showAppointmentsTitle;
+  private allAppointsmentOnSameDay;
+  private sortOptions;
+  private inputElement;
+  private datepickerElement;
+  private datepickerElementMedium;
+  private updateDateByValue;
+  private getCurrentDateAppointments;
+  private setValueToFirstAppointmentOfCurrentDate;
+  private isDateDisabled;
+  private onNextActiveDateClick;
+  private onMoreClick;
+  private onDropdownChange;
+  private onDatepickerChange;
+  private onRadioChange;
+  componentWillLoad(): Promise<void>;
+  componentWillRender(): void;
+  componentDidRender(): void;
+  render(): any;
+}

package/dist/types/components/stzh-audio/stzh-audio.d.ts

@@ -0,0 +1,58 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhAudioPlayEvent, StzhAudioPlayingEvent, StzhAudioPauseEvent, StzhAudioReplayEvent, StzhAudioEndEvent, StzhAudioEndedEvent, StzhAudioErrorEvent } from "../../index";
+import "@vidstack/player/dist/prod/define/vds-media.js";
+import "@vidstack/player/dist/prod/define/vds-audio.js";
+import "@vidstack/player/dist/prod/define/vds-play-button.js";
+import "@vidstack/player/dist/prod/define/vds-mute-button.js";
+import "@vidstack/player/dist/prod/define/vds-time-slider.js";
+import "@vidstack/player/dist/prod/define/vds-volume-slider.js";
+import "@vidstack/player/dist/prod/define/vds-slider-value-text.js";
+import "@vidstack/player/dist/prod/define/vds-time.js";
+import { StzhAudioLocalizedText } from './stzh-audio.localization';
+/**
+ * @slot transcript - Slot for transcript text
+ */
+export declare class StzhAudio {
+  /** Translation strings */
+  localization: StzhAudioLocalizedText;
+  /** Path to audio file */
+  src: string;
+  /** Preload strategy */
+  preload: "none" | "metadata" | "auto";
+  /** Transcript text (alternative for slot) */
+  transcript: string;
+  /** Whether transcript should be shown */
+  transcriptShown: boolean;
+  /**
+   * For Adobe Analytics.
+   * Will be rendered as value of `s-object-id` attribute to the download link element.
+   * Default value will be taken from translations.
+   */
+  downloadAnalyticsId: string;
+  /**
+   * For Adobe Analytics.
+   * Will be rendered as value of `s-object-id` attribute to the transcript button element.
+   * Default value will be taken from translations.
+   */
+  transcriptAnalyticsId: string;
+  /** Fired when the paused property is changed from true to false, as a result of the play() method, or the autoplay attribute. */
+  stzhPlay: EventEmitter<StzhAudioPlayEvent>;
+  /** Fired when playback is ready to start after having been paused or delayed due to lack of data. */
+  stzhPlaying: EventEmitter<StzhAudioPlayingEvent>;
+  /** Fired when a request to pause an activity is handled and the activity has entered its paused state, most commonly after the media has been paused through a call to the pause() method. */
+  stzhPause: EventEmitter<StzhAudioPauseEvent>;
+  /** Fired when media playback starts again after being in an ended state. This is fired when the loop property is true and media loops, whereas the vds-play event is not. */
+  stzhReplay: EventEmitter<StzhAudioReplayEvent>;
+  /** Fired each time media playback has reached the end. This is fired even if the loop property is true, which is generally when you'd reach for this event over the MediaEndedEvent if you want to be notified of media looping. */
+  stzhEnd: EventEmitter<StzhAudioEndEvent>;
+  /** Fired when playback or streaming has stopped because the end of the media was reached or because no further data is available. This is not fired if playback will start from the beginning again due to the loop property being true (see MediaReplayEvent and MediaEndEvent). */
+  stzhEnded: EventEmitter<StzhAudioEndedEvent>;
+  /** Fired when media loading or playback has encountered any issues (for example, a network connectivity problem). The event detail contains a potential message containing more information about the error (empty string if nothing available), and a code that identifies the general type of error that occurred. */
+  stzhError: EventEmitter<StzhAudioErrorEvent>;
+  element: HTMLStzhAudioElement;
+  play(): Promise<void>;
+  pause(): Promise<void>;
+  private vsdAudioElement;
+  componentWillLoad(): Promise<void>;
+  render(): any;
+}

package/dist/types/components/stzh-button/stzh-button.d.ts

@@ -0,0 +1,105 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhButtonFocusEvent, StzhButtonBlurEvent, StzhButtonChangeEvent } from "../../index";
+import { StzhLocaleComponent } from "../../utils/translation-utils";
+/**
+ * @slot - Slot for label/text content
+ * @slot icon - Slot for icon element
+ */
+export declare class StzhButton {
+  /** Translation strings */
+  localization: StzhLocaleComponent;
+  /** Display a badge aligned to button or icons */
+  badge: string;
+  /** Badge type */
+  badgeType: "default" | "success" | "warning" | "error" | "info";
+  /** Badge position */
+  badgePosition: "icon" | "button";
+  /** Whether badge should be displayed empty */
+  badgeEmpty: boolean;
+  /** Whether the button is full width */
+  fullwidth: boolean;
+  /** Whether the button is rounded */
+  rounded: boolean;
+  /** Whether the button is floating */
+  floating: boolean;
+  /** Size variant */
+  size: "default" | "small" | "tiny";
+  /** Text alignment */
+  textAlign: "left" | "center" | "right" | "space-between" | "default";
+  /** Variant style */
+  variant: "default" | "secondary" | "input" | "tertiary";
+  /** Icon (use instead of icon slot) */
+  icon: string;
+  /** Icon Position */
+  iconPosition: "left" | "right";
+  /** Checked status (if type is radio) */
+  checked: boolean;
+  /** The name of the input element (if type is button or radio) */
+  name: string;
+  /** The value of the input element (if type is button or radio) */
+  value: string;
+  /** `href` if the button should be used as link  */
+  href: string;
+  /** Rel (if href is used) */
+  rel: string;
+  /** Target if the button is used as link (if `href` used)  */
+  target: string;
+  /** Download attribute of link (if `href` used) */
+  download: string;
+  /** Type of the button */
+  type: "button" | "submit" | "reset" | "radio";
+  /** Whether the button is disabled */
+  disabled: boolean;
+  /** Whether the button is active */
+  active: boolean;
+  /** Label */
+  label: string;
+  /** Effect/Animation used */
+  effect: "default" | "cta";
+  /** Whether only an icon is used inside the button */
+  iconOnly: boolean;
+  /** Access key of link (usually a number e.g. 1) */
+  linkAccesskey: string;
+  /** Accessible label for screen readers to replace visible text */
+  a11yLabel: string;
+  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
+  a11yDescribedby: string;
+  /** Aria expanded of link/button */
+  a11yExpanded: boolean;
+  /** Aria disabled of link/button */
+  a11yDisabled: boolean;
+  /** Aria controls of link/button */
+  a11yControls: string;
+  /** Tabindex of link/button */
+  a11yTabindex: string;
+  /**
+   * For Adobe Analytics.
+   * Will be rendered as value of `s-object-id` attribute to the link/button element.
+   * Default value will be taken from `label` prop or default slot.
+   */
+  analyticsId: string;
+  element: HTMLStzhButtonElement;
+  /** Focus button */
+  setFocus(): Promise<void>;
+  /** Input focus event */
+  stzhFocus: EventEmitter<StzhButtonFocusEvent>;
+  /** Input blur event */
+  stzhBlur: EventEmitter<StzhButtonBlurEvent>;
+  /** Change event (only called if type is radio) */
+  stzhChange: EventEmitter<StzhButtonChangeEvent>;
+  private button;
+  private input;
+  private text;
+  private focusedByInput;
+  private onInput;
+  private onRootFocus;
+  private onFocus;
+  private onBlur;
+  private onClick;
+  private renderIcon;
+  private renderContent;
+  private renderInner;
+  componentWillLoad(): Promise<void>;
+  componentDidRender(): void;
+  render(): any;
+}

package/dist/types/components/stzh-buttongroup/stzh-buttongroup.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @slot - Slot for buttons
+ */
+export declare class StzhButtongroup {
+  element: HTMLStzhButtongroupElement;
+  render(): any;
+}

package/dist/types/components/stzh-calendar/stzh-calendar.d.ts

@@ -0,0 +1,88 @@
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { DaysOfWeek } from "../../utils/date-utils";
+import { StzhCalendarChangeEvent } from "../../index";
+import { StzhCalendarDateDisabledPredicate } from "../../index";
+import { StzhCalendarLocalizedText } from "./stzh-calendar.localization";
+export declare class StzhCalendar implements ComponentInterface {
+  /** Date value. Must be in IS0-8601 format: YYYY-MM-DD. */
+  value: string;
+  /**
+   * 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.
+   */
+  min: string;
+  /**
+   * 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.
+   */
+  max: string;
+  /**
+   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.
+   * Default is Monday.
+   */
+  firstDayOfWeek: DaysOfWeek;
+  /**  Day names, month names, etc, used for localization. */
+  localization: StzhCalendarLocalizedText;
+  /**
+   * Controls which days are disabled and therefore disallowed.
+   * For example, this can be used to disallow selection of weekends.
+   */
+  isDateDisabled: StzhCalendarDateDisabledPredicate;
+  /**
+   * For Adobe Analytics.
+   * Will be rendered as value of `s-object-id` attribute to the previous month button element.
+   * Default value will be taken from translations.
+   */
+  prevMonthAnalyticsId: string;
+  /**
+   * For Adobe Analytics.
+   * Will be rendered as value of `s-object-id` attribute to the next month button element.
+   * Default value will be taken from translations.
+   */
+  nextMonthAnalyticsId: string;
+  activeFocus: boolean;
+  focusedDay: Date;
+  /** Event emitted when a date is selected. */
+  stzhChange: EventEmitter<StzhCalendarChangeEvent>;
+  createDateFormatters(): void;
+  valueWatcher(newValue: string): void;
+  /** Set focused day element by a JS Date object */
+  setFocusedDay(day: Date): Promise<void>;
+  /** Set value by a JS Date object */
+  setDate(date: Date): Promise<void>;
+  element: HTMLStzhCalendarElement;
+  private monthSelectId;
+  private yearSelectId;
+  private dialogLabelId;
+  private initialTouchX;
+  private initialTouchY;
+  /**
+   * To format dates exclusively for the benefit of screen readers.
+   *
+   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has
+   * better performance when formatting large number of dates. See:
+   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance
+   */
+  private dateFormatShort;
+  private enableActiveFocus;
+  private disableActiveFocus;
+  private addDays;
+  private addMonths;
+  private addYears;
+  private startOfWeek;
+  private endOfWeek;
+  private setMonth;
+  private setYear;
+  private handleTouchStart;
+  private handleTouchEnd;
+  private handleNextMonthClick;
+  private handlePreviousMonthClick;
+  private handleKeyboardNavigation;
+  private handleDaySelect;
+  private handleMonthSelect;
+  private handleYearSelect;
+  private processFocusedDayNode;
+  componentWillLoad(): Promise<void>;
+  connectedCallback(): void;
+  render(): any;
+}