@oiz/stzh-components 2.11.0-beta1 → 2.11.1

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;
+}

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

@@ -0,0 +1,127 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhCardHeaderAction, StzhActionsetItem, StzhCardCollapseEvent, StzhCardSubtitleClickEvent, StzhCardStarClickEvent, StzhCardClickEvent, StzhCardHeaderActionClickEvent } from "../../index";
+import { StzhCardLocalizedText } from './stzh-card.localization';
+/**
+ * @slot heading - Slot for heading
+ * @slot image - Slot for optional image element
+ * @slot content - Slot for content for any elements
+ * @slot meta - Slot for meta elements (status or chip)
+ * @slot footer - Slot to replace footer content (`footerActions`, 'withArrow`, and `selectable` button are not shown anymore)
+ */
+export declare class StzhCard {
+  /** Translation strings */
+  localization: StzhCardLocalizedText;
+  /** Whether card is collapsed or not */
+  collapsed: boolean;
+  /** Whether card was starred */
+  starred: boolean;
+  /**
+   * Whether card star is displayed (with tooltip and menu-item in mobile popover).
+   * The tooltip / menu-item text can be adjusted in the translations file (`actionAdd` & `actionRemove`).
+   */
+  starrable: boolean;
+  /** Whether card is selectable */
+  selectable: boolean;
+  /** Whether card is checked (if card is selectable) */
+  checked: boolean;
+  /** The name of the input element (if card is selectable) */
+  name: string;
+  /** Href of card */
+  href: string;
+  /** target if the button is used as link (if href used)  */
+  target: string;
+  /** The value of the input element (if card is selectable) */
+  value: string;
+  /** Whether the element is disabled or not (if card is selectable) */
+  disabled: boolean;
+  /** Whether card arrow is shown in footer area */
+  withArrow: boolean;
+  /** Heading (or use heading slot instead) */
+  heading: string;
+  /** Subtitle */
+  subtitle: string | string[];
+  private _subtitles;
+  /** Card header actions */
+  headerActions: string | StzhCardHeaderAction[];
+  private _headerActions;
+  /**
+   * Card footer actions.
+   * The [`stzh-actionset`](?path=/story/components-actionset) component is used internally.
+   * You can listen to clicks with the `stzhActionClick` event.
+   */
+  footerActions: string | StzhActionsetItem[];
+  private _footerActions;
+  /** Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click */
+  subtitleInteractive: boolean;
+  /**
+   * Whether sorting should be disabled.
+   * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.
+   */
+  sortableDisabled: boolean;
+  /** Whether card is collapsible */
+  collapsible: boolean;
+  /** Whether to hide header separation border */
+  hideHeaderBorder: boolean;
+  /** Whether to hide footer separation border */
+  hideFooterBorder: boolean;
+  /** Whether card elevation should be hidden */
+  hideElevation: boolean;
+  /**
+   * Whether movement menu items should be shown.
+   * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.
+   */
+  hideMovementActions: boolean;
+  /**
+   * For Adobe Analytics.
+   * Will be rendered as value of `s-object-id` attribute to the link elements.
+   * Default value will be taken from `heading` prop/slot.
+   */
+  analyticsId: string;
+  element: HTMLStzhCardElement;
+  /** Click event (if href is used) */
+  stzhClick: EventEmitter<StzhCardClickEvent>;
+  /** Collapse event */
+  stzhCollapse: EventEmitter<StzhCardCollapseEvent>;
+  /** Subtitle click event */
+  stzhSubtitleClick: EventEmitter<StzhCardSubtitleClickEvent>;
+  /** Star click event */
+  stzhStarClick: EventEmitter<StzhCardStarClickEvent>;
+  /** Header action click event */
+  stzhHeaderActionClick: EventEmitter<StzhCardHeaderActionClickEvent>;
+  subtitleWatcher(newValue: string[] | string): void;
+  headerActionsWatcher(newValue: StzhCardHeaderAction[] | string): void;
+  footerActionsWatcher(newValue: StzhActionsetItem[] | string): void;
+  collapsedWatcher(): void;
+  private observer;
+  private nodeChange;
+  private mainElement;
+  private headerElement;
+  private headerLeftElement;
+  private headerRightElement;
+  private imageLinkElement;
+  private titleLinkElement;
+  private headingTextElement;
+  private sortable;
+  private debounceResize;
+  private resizeObserver;
+  private update;
+  private headerClick;
+  private subtitleClick;
+  private starToggleClick;
+  private actionClick;
+  private arrowUpClick;
+  private arrowDownClick;
+  private updateElementInsideSortable;
+  private init;
+  private handleResize;
+  private handleMutation;
+  private handleSelectionChange;
+  private cardClick;
+  private findSortableChildElement;
+  componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/stzh-card-list/stzh-card-list.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhCardListCollapseAllEvent } from "../../index";
+import { StzhCardListLocalizedText } from './stzh-card-list.localization';
+/**
+ * @slot - Slot for `stzh-card` elements
+ * @slot description - Slot for description
+ */
+export declare class StzhCardList {
+  /** Translation strings */
+  localization: StzhCardListLocalizedText;
+  layout: "fullwidth" | "subpages";
+  /** Description message (use description slot as alternative) */
+  description: string;
+  /** Whether collapse/expand toggle link */
+  showToggleLink: boolean;
+  /** Whether sorting should be enabled */
+  sortableEnabled: boolean;
+  /** HTML attribute that is used by the `toArray()` of sortable method */
+  sortableDataIdAttribute: string;
+  element: HTMLStzhCardListElement;
+  /** Collapse all event */
+  stzhCollapseAll: EventEmitter<StzhCardListCollapseAllEvent>;
+  collapseListener(): void;
+  allCollapsed: boolean;
+  private collapseClick;
+  private updateCollapsedState;
+  private sortableGhostClone;
+  componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
+  render(): any;
+}