@six-group/ui-library 0.0.0-insider.9277796 → 0.0.0-insider.9eaaa42

package/dist/types/functional-components/form-control/form-control.d.ts

@@ -1,3 +1,4 @@
+import { VNode } from '../../stencil-public-runtime';
 export interface FormControlProps {
   /** The input id, used to map the input to the label */
   inputId: string;
@@ -7,20 +8,22 @@ export interface FormControlProps {
   labelId?: string;
   /** The label text (if the label slot isn't used) */
   label?: string;
-  /** Whether or not a label slot has been provided. */
+  /** Whether a label slot has been provided. */
   hasLabelSlot?: boolean;
   /** The help text id, used to map the input to the help text */
   helpTextId?: string;
   /** The help text (if the help-text slot isn't used) */
   helpText?: string;
-  /** Whether or not a help text slot has been provided. */
+  /** Whether a help text slot has been provided. */
   hasHelpTextSlot?: boolean;
+  /** Whether an error text slot has been provided. */
+  hasErrorTextSlot?: boolean;
   /** The error text id, used to map the input to the help text */
   errorTextId?: string;
   /** The error text (if the error-text slot isn't used) */
-  errorText?: string;
-  /** Whether or not a error text slot has been provided. */
-  hasErrorTextSlot?: boolean;
+  errorText?: string | string[];
+  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */
+  errorTextCount?: number;
   /** Set to true to disable the input. */
   disabled?: boolean;
   /** Set if the value is required. */
@@ -30,5 +33,5 @@ export interface FormControlProps {
   /** A function that gets called when the label is clicked. */
   onLabelClick?: (event: MouseEvent) => void;
 }
-declare const FormControl: (props: FormControlProps, children: any) => any;
+declare const FormControl: (props: FormControlProps, children: VNode[]) => any;
 export default FormControl;

package/dist/types/index.d.ts

@@ -1 +1,2 @@
 export { Components, JSX } from './components';
+export * from './utils/error-messages';

package/dist/types/stencil-public-runtime.d.ts

@@ -3,6 +3,16 @@ export interface ComponentDecorator {
     (opts?: ComponentOptions): ClassDecorator;
 }
 export interface ComponentOptions {
+    /**
+     * When set to `true` this component will be form-associated. See
+     * https://stenciljs.com/docs/next/form-associated documentation on how to
+     * build form-associated Stencil components that integrate into forms like
+     * native browser elements such as `<input>` and `<textarea>`.
+     *
+     * The {@link AttachInternals} decorator allows for access to the
+     * `ElementInternals` object to modify the associated form.
+     */
+    formAssociated?: boolean;
     /**
      * Tag name of the web component. Ideally, the tag name must be globally unique,
      * so it's recommended to choose an unique prefix for all your components within the same collection.
@@ -62,7 +72,7 @@ export interface PropOptions {
     /**
      * The name of the associated DOM attribute.
      * Stencil uses different heuristics to determine the default name of the attribute,
-     * but using this property, you can override the default behaviour.
+     * but using this property, you can override the default behavior.
      */
     attribute?: string | null;
     /**
@@ -107,6 +117,9 @@ export interface EventOptions {
      */
     composed?: boolean;
 }
+export interface AttachInternalsDecorator {
+    (): PropertyDecorator;
+}
 export interface ListenDecorator {
     (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>;
 }
@@ -128,7 +141,7 @@ export interface ListenOptions {
      * By default, Stencil uses several heuristics to determine if
      * it must attach a `passive` event listener or not.
      *
-     * Using the `passive` option can be used to change the default behaviour.
+     * Using the `passive` option can be used to change the default behavior.
      * Please see https://developers.google.com/web/updates/2016/06/passive-event-listeners for further information.
      */
     passive?: boolean;
@@ -175,6 +188,12 @@ export declare const Element: ElementDecorator;
  * https://stenciljs.com/docs/events
  */
 export declare const Event: EventDecorator;
+/**
+ * If the `formAssociated` option is set in options passed to the
+ * `@Component()` decorator then this decorator may be used to get access to the
+ * `ElementInternals` instance associated with the component.
+ */
+export declare const AttachInternals: AttachInternalsDecorator;
 /**
  * The `Listen()` decorator is for listening DOM events, including the ones
  * dispatched from `@Events()`.
@@ -432,7 +451,7 @@ export interface QueueApi {
 /**
  * Host
  */
-interface HostAttributes {
+export interface HostAttributes {
     class?: string | {
         [className: string]: boolean;
     };
@@ -471,7 +490,7 @@ export interface FunctionalUtilities {
     /**
      * Utility for reading the children of a functional component at runtime.
      * Since the Stencil runtime uses a different interface for children it is
-     * not recommendeded to read the children directly, and is preferable to use
+     * not recommended to read the children directly, and is preferable to use
      * this utility to, for instance, perform a side effect for each child.
      */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
@@ -812,6 +831,7 @@ export declare namespace JSXBase {
         datetime?: string;
     }
     interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {
+        onCancel?: (event: Event) => void;
         onClose?: (event: Event) => void;
         open?: boolean;
         returnValue?: string;
@@ -871,6 +891,8 @@ export declare namespace JSXBase {
     }
     interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
         alt?: string;
+        crossOrigin?: string;
+        crossorigin?: string;
         decoding?: 'async' | 'auto' | 'sync';
         importance?: 'low' | 'auto' | 'high';
         height?: number | string;
@@ -929,6 +951,8 @@ export declare namespace JSXBase {
         minlength?: number | string;
         multiple?: boolean;
         name?: string;
+        onSelect?: (event: Event) => void;
+        onselect?: (event: Event) => void;
         pattern?: string;
         placeholder?: string;
         readOnly?: boolean;
@@ -1110,11 +1134,13 @@ export declare namespace JSXBase {
         autocomplete?: string;
     }
     interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
+        height?: number;
         media?: string;
         sizes?: string;
         src?: string;
         srcSet?: string;
         type?: string;
+        width?: number;
     }
     interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
         media?: string;
@@ -1130,6 +1156,8 @@ export declare namespace JSXBase {
         summary?: string;
     }
     interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
+        autoComplete?: string;
+        autocomplete?: string;
         autoFocus?: boolean;
         autofocus?: boolean | string;
         cols?: number;
@@ -1140,6 +1168,8 @@ export declare namespace JSXBase {
         minLength?: number;
         minlength?: number | string;
         name?: string;
+        onSelect?: (event: Event) => void;
+        onselect?: (event: Event) => void;
         placeholder?: string;
         readOnly?: boolean;
         readonly?: boolean | string;
@@ -1286,7 +1316,7 @@ export declare namespace JSXBase {
         clipPathUnits?: number | string;
         'clip-rule'?: number | string;
         'color-interpolation'?: number | string;
-        'color-interpolation-filters'?: 'auto' | 's-rGB' | 'linear-rGB' | 'inherit';
+        'color-interpolation-filters'?: 'auto' | 'sRGB' | 'linearRGB';
         'color-profile'?: number | string;
         'color-rendering'?: number | string;
         contentScriptType?: number | string;
@@ -1616,8 +1646,14 @@ export declare namespace JSXBase {
         onAnimationEndCapture?: (event: AnimationEvent) => void;
         onAnimationIteration?: (event: AnimationEvent) => void;
         onAnimationIterationCapture?: (event: AnimationEvent) => void;
+        onTransitionCancel?: (event: TransitionEvent) => void;
+        onTransitionCancelCapture?: (event: TransitionEvent) => void;
         onTransitionEnd?: (event: TransitionEvent) => void;
         onTransitionEndCapture?: (event: TransitionEvent) => void;
+        onTransitionRun?: (event: TransitionEvent) => void;
+        onTransitionRunCapture?: (event: TransitionEvent) => void;
+        onTransitionStart?: (event: TransitionEvent) => void;
+        onTransitionStartCapture?: (event: TransitionEvent) => void;
     }
 }
 export interface JSXAttributes<T = Element> {

package/dist/types/testUtil/delay.d.ts

@@ -1 +1 @@
-export declare const delay: (time: any) => Promise<unknown>;
+export declare const delay: (time: number) => Promise<unknown>;

package/dist/types/types.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './utils/error-messages';

package/dist/types/utils/animation.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Animates a given `element` from the position and dimension of `fromElement` to
+ * its current position and dimension. Can be useful to implement the FLIP animation technique.
+ *
+ * @see {@link https://css-tricks.com/animating-layouts-with-the-flip-technique/} for details on the FLIP technique.
+ *
+ * @param {Element} element - The element to animate.
+ * @param {Element} fromElement - The element representing the initial position and dimensions.
+ * @param {KeyframeAnimationOptions} [options={ duration: 150, easing: 'ease', fill: 'both' }] - Optional animation parameters.
+ *
+ */
+export declare function flipAnimate(element: Element, fromElement: Element, options?: KeyframeAnimationOptions): void;

package/dist/types/utils/date-util.d.ts

@@ -1,5 +1,6 @@
 import { SixDateFormats } from '../components/six-datepicker/six-date-formats';
 import { CalendarCell } from '../components/six-datepicker/six-datepicker';
+export type DateLocale = typeof i18nDate.en;
 export declare const i18nDate: {
   en: {
     months: string[];
@@ -43,11 +44,12 @@ export declare const i18nDate: {
  * ```
  */
 export declare const now: () => Date;
+export declare const removeTime: (date: Date) => Date;
 export declare const pad: (value: number) => string;
 /**
  * Returns `true` if the given date is valid
  */
-export declare const isValidDate: (value: any) => boolean;
+export declare const isValidDate: (value: unknown) => boolean;
 /**
  * Returns the year number of the given date
  *
@@ -91,15 +93,15 @@ export declare const getFirstDayOfTheWeek: (date: Date) => Date;
 /**
  * Returns `true` when the year of the dates are the same
  */
-export declare const isSameYear: (a: Date, b: Date) => boolean;
+export declare const isSameYear: (a: Date | undefined, b: Date | undefined) => boolean;
 /**
  * Returns `true` when the month of the dates are the same
  */
-export declare const isSameMonth: (a: Date, b: Date) => boolean;
+export declare const isSameMonth: (a: Date | undefined, b: Date | undefined) => boolean;
 /**
  * Returns `true` when the day of the dates are the same
  */
-export declare const isSameDay: (a: Date, b: Date) => boolean;
+export declare const isSameDay: (a: Date | undefined, b: Date | undefined) => boolean;
 /**
  * Returns `true` when the week of the dates are the same
  */
@@ -125,7 +127,7 @@ export declare const newDateString: (yearOrDate: Date | number, month?: number,
 /**
  * Returns `true` if the given datestring is valid
  */
-export declare const isValidDateString: (datestring: string, format: string) => boolean;
+export declare const isValidDateString: (datestring: string | undefined, format: string) => boolean;
 /**
  * Returns `true` when the given date is not smaller than the minDate and not bigger than the maxDate.
  *
@@ -166,9 +168,9 @@ export declare const increaseYear: (date: Date, years: number) => number;
  * ```
  */
 export declare const decreaseYear: (date: Date, years: number) => number;
-export declare const formatDate: (date: Date, format: string) => string;
+export declare const formatDate: (date: Date | undefined | null, format: string) => string;
 export declare const parseDate: (value: any, format: string, locale: string) => Date;
-export declare const toDate: (dirtyDateString: string, format: string) => Date;
+export declare const toDate: (dirtyDateString: string | undefined, format: string) => Date | undefined;
 export interface PointerDate {
   year: number;
   month: number;
@@ -179,7 +181,8 @@ export interface PointerDate {
 }
 export interface CalendarGridArgs {
   firstDateOfBox: Date;
-  minDate: Date;
+  minDate?: Date;
+  maxDate?: Date;
   dateFormat: SixDateFormats;
   pointerDate: {
     month: number;
@@ -187,8 +190,13 @@ export interface CalendarGridArgs {
     day: number;
   };
   allowedDates: (date: Date) => boolean;
-  maxDate: Date;
   locale: 'en' | 'de' | 'fr' | 'it';
-  selectedDate: Date;
+  selectedDate?: Date;
 }
 export declare const createCalendarGrid: (calendarGridArguments: CalendarGridArgs) => CalendarCell[][];
+/**
+ * Returns a range of numbers around the given number grouped into buckets of 5.
+ * @param number the given number around which you want to get the other numbers
+ * @param range range of numbers to include in the result
+ */
+export declare function rangeAround(number: number, range: number): number[][];

package/dist/types/utils/error-messages.d.ts

@@ -0,0 +1,42 @@
+export type Language = 'de' | 'fr' | 'it' | 'en';
+export type ValidationError = {
+  key: 'required';
+} | {
+  key: 'requiredtrue';
+} | {
+  key: 'email';
+  requiredPattern: string;
+} | {
+  key: 'minlength';
+  requiredLength: number;
+} | {
+  key: 'maxlength';
+  requiredLength: number;
+} | {
+  key: 'pattern';
+  requiredPattern: string;
+} | {
+  key: 'min';
+  min: number;
+} | {
+  key: 'max';
+  max: number;
+} | {
+  key: 'mindate';
+  mindate: Date;
+  actual: Date;
+} | {
+  key: 'maxdate';
+  maxdate: Date;
+  actual: Date;
+} | {
+  key: 'invaliddate';
+  actual: Date;
+} | {
+  key: 'custom';
+  text: string;
+};
+/**
+ * Returns an error message for the given language and error.
+ */
+export declare function getErrorMessage(language: Language, error: ValidationError): string | undefined;

package/dist/types/utils/event-listeners.d.ts

@@ -1,15 +1,16 @@
 interface EventListener {
-  el: DocumentAndElementEventHandlers;
+  el: GlobalEventHandlers;
   name: string;
   listener: EventListenerOrEventListenerObject;
   identifier?: string | null;
 }
 export declare class EventListeners {
   eventListeners: EventListener[];
-  add: <T extends DocumentAndElementEventHandlers>(el: T, name: string, listener: EventListenerOrEventListenerObject, identifier?: any) => void;
-  remove: <T extends DocumentAndElementEventHandlers>(el: T, name: string, listener: EventListenerOrEventListenerObject) => void;
+  add: <T extends GlobalEventHandlers>(el: T, name: string, listener: EventListenerOrEventListenerObject, identifier?: string | null | undefined) => void;
+  remove: <T extends GlobalEventHandlers>(el: T, name: string, listener: EventListenerOrEventListenerObject) => void;
   removeByIdentifier: (identifier: string) => void;
   private getFilteredEventListeners;
   removeAll: () => void;
+  forward(from: string, to: 'input' | 'change' | 'blur' | 'focus', host: HTMLElement): void;
 }
 export {};

package/dist/types/utils/execution-control.d.ts

@@ -1,8 +1,6 @@
 import { EventEmitter } from '../stencil-public-runtime';
 export declare const DEFAULT_DEBOUNCE_INSANELY_FAST = 35;
-export declare const DEFAULT_DEBOUNCE_VERY_FAST = 100;
 export declare const DEFAULT_DEBOUNCE_FAST = 300;
-export declare const DEFAULT_DEBOUNCE_SLOW = 600;
 /**
  * Debounce function to implement a timeframe to wait for no new changes before executing a callback
 
@@ -16,7 +14,7 @@ export declare const DEFAULT_DEBOUNCE_SLOW = 600;
  * @param callback
  * @param timeout
  */
-export declare const debounce: (callback: Function, timeout?: number) => <T>(...args: T[]) => void;
+export declare const debounce: <T>(callback: (x: T) => void, timeout?: number) => (args: T) => void;
 /**
  * Debounce an event
  *

package/dist/types/utils/form.d.ts

@@ -0,0 +1 @@
+export declare function submitForm(element: HTMLElement): void;

package/dist/types/utils/modal.d.ts

@@ -1,9 +1,9 @@
 interface ModalOptions {
-  onFocusOut?: (event: Event) => any;
+  onFocusOut?: (event: Event) => void;
 }
 export default class Modal {
   element: HTMLElement;
-  options: ModalOptions;
+  options?: ModalOptions;
   constructor(element: HTMLElement, options?: ModalOptions);
   activate(): void;
   deactivate(): void;

package/dist/types/utils/popover.d.ts

@@ -1,9 +1,9 @@
-import { PopperInstance } from './popper';
+import { Instance } from '@popperjs/core';
 export default class Popover {
   anchor: HTMLElement;
   isVisible: boolean;
   popover: HTMLElement;
-  popper: PopperInstance;
+  popper?: Instance;
   options: PopoverOptions;
   constructor(anchor: HTMLElement, popover: HTMLElement, options?: PopoverOptions);
   private handleTransitionEnd;
@@ -20,8 +20,8 @@ interface PopoverOptions {
   strategy?: 'absolute' | 'fixed';
   transitionElement?: HTMLElement;
   visibleClass?: string;
-  onAfterShow?: () => any;
-  onAfterHide?: () => any;
-  onTransitionEnd?: (event: TransitionEvent) => any;
+  onAfterShow?: () => void;
+  onAfterHide?: () => void;
+  onTransitionEnd?: (event: TransitionEvent) => void;
 }
 export {};

package/dist/types/utils/popup.d.ts

@@ -0,0 +1,9 @@
+/**
+ * If the popup is hoisted we popup is hoisted its position will change to fix to not be clipped of by a containing container.
+ * To render the popup correctly we render it normally, and then assign this screenposition to the fixed popup
+ */
+export declare function adjustPopupForHoisting(hoist: boolean, popup: HTMLElement | undefined, inputElement: HTMLElement | undefined, wrapper: HTMLElement | undefined, minPopupHeight: number, dropdownDirectionChanged: (isUp: boolean) => void): void;
+export declare function adjustPopupForSmallScreens(popup?: HTMLElement): void;
+export declare function calcIsDropDownContentUp(inputElement: HTMLElement, wrapper: HTMLElement, minPopupHeight: number): boolean;
+export declare function setPopupAsFixPosition(popup: HTMLElement): DOMRect;
+export declare function movePopup(hoist: boolean, open: boolean, popup: HTMLElement | undefined, inputElement: HTMLElement | undefined, wrapper: HTMLElement | undefined, minPopupHeight: number): void;

package/dist/types/utils/slot.d.ts

@@ -1,9 +1,4 @@
-export declare function getInnerHTML(slot: HTMLSlotElement): string;
-export declare function getTextContent(slot: HTMLSlotElement): string;
+export declare function getTextContent(slot?: HTMLSlotElement): string;
 export declare function hasSlot(el: HTMLElement, name?: string): boolean;
-type AvailableSlots<T> = {
-  readonly [K in keyof T]: boolean;
-};
-export declare const getAvailableSlots: <T extends object>(slots: T) => <E extends HTMLElement>(host: E) => AvailableSlots<T>;
 export declare const getSlotChildren: <T extends HTMLElement>(el: HTMLElement) => T[];
-export {};
+export declare function getSlot(element: ParentNode | null | undefined, slotName: string): HTMLElement | null;

package/dist/types/utils/tabbable.d.ts

@@ -1,2 +1,2 @@
 export declare function isTabbable(el: HTMLElement): boolean;
-export declare function getNearestTabbableElement(el: HTMLElement): HTMLElement;
+export declare function getNearestTabbableElement(el: HTMLElement): HTMLElement | undefined;

package/dist/types/utils/time.util.d.ts

@@ -1,10 +1,19 @@
-import { SixTime } from '../components/six-timepicker/six-timepicker.types';
-import { SixTimeFormat } from '../components/six-timepicker/six-time-format';
-export declare const getCurrentTimeIn24Hours: () => SixTime;
+export type TimePeriod = 'AM' | 'PM';
+export interface Time {
+  hours?: number;
+  minutes?: number;
+  seconds?: number;
+  milliseconds?: number;
+  has24Hours?: boolean;
+  period?: TimePeriod;
+}
+export type TimeProperties = keyof Time;
+export type TimeFormatChar = 'HH' | 'hh' | 'mm' | 'ss' | 'ms' | 'aa';
+export type TimeFormat = 'HH:mm:ss' | 'hh:mm:ss:aa' | 'HH:mm:ss:ms' | 'hh:mm:ss:ms:aa' | 'HH:mm' | 'hh:mm:aa' | 'HH' | 'hh:aa' | 'mm' | 'ss' | 'ms';
+export declare const getCurrentTimeIn24Hours: () => Time;
 export declare const getHoursIn12HourFormat: (hours: number) => number;
-export declare const getCurrentTimeIn12Hours: () => SixTime;
-export declare const getCurrentTime: (has24Hours?: boolean) => SixTime;
-export declare const TIME_FORMAT_SEPARATOR = ":";
-export declare const isValidTimeString: (timeStr: string, format: SixTimeFormat) => boolean;
-export declare const parseTimeString: (timeStr: string, format: SixTimeFormat) => SixTime;
-export declare const createTimeString: (time: SixTime, format: SixTimeFormat) => string;
+export declare const getCurrentTimeIn12Hours: () => Time;
+export declare const getCurrentTime: (has24Hours?: boolean) => Time;
+export declare const isValidTimeString: (timeStr: string, format: TimeFormat) => boolean;
+export declare const parseTimeString: (timeStr: string, format: TimeFormat) => Time;
+export declare const createTimeString: (time: Time | undefined, format: TimeFormat) => string;

package/dist/types/utils/type-check.d.ts

@@ -1,4 +1,3 @@
-export declare const isString: (value: any) => value is string;
-export declare const isNil: (value: any) => boolean;
-export declare const isDate: (value: any) => value is Date;
-export declare const isNumber: (value: any) => value is number;
+export declare const isString: (value: unknown) => value is string;
+export declare const isNil: (value: unknown) => value is null | undefined;
+export declare const isDate: (value: unknown) => value is Date;

package/dist/types/wrappers/set-attributes/set-attributes.d.ts

@@ -4,6 +4,6 @@ export declare class SetAttributes {
   value: {};
   componentWillLoad(): void;
   attrsUpdated(): void;
-  injectAttrs(): void;
+  private injectAttrs;
   render(): any;
 }

package/dist/ui-library/index.esm.js

@@ -1,2 +1,2 @@
-
+const e=new Intl.DateTimeFormat("de-CH");function a(a,i){try{const t=r[a][i.key];switch(i.key){case"required":case"requiredtrue":case"email":return t;case"minlength":case"maxlength":return t.replace("{requiredLength}",String(i.requiredLength));case"pattern":return t.replace("{pattern}",String(i.requiredPattern));case"min":return t.replace("{min}",String(i.min));case"max":return t.replace("{max}",String(i.max));case"mindate":return t.replace("{mindate}",e.format(i.mindate));case"maxdate":return t.replace("{maxdate}",e.format(i.maxdate));case"invaliddate":return t;case"custom":return i.text}}catch(e){console.warn(`no error message in '${a}' for error:`,i);return undefined}}const r={en:{required:"Please fill out this field.",minlength:"Please enter at least {requiredLength} characters.",maxlength:"Please enter no more than {requiredLength} characters.",pattern:"Please enter a value that matches the pattern: {pattern}.",email:"Please enter a valid email address.",min:"Please enter a value greater than or equal to {min}.",max:"Please enter a value less than or equal to {max}.",requiredtrue:"Please check this field.",mindate:"Please enter a date on or after {mindate}.",maxdate:"Please enter a date on or before {maxdate}.",invaliddate:"Please enter a valid date."},fr:{required:"Veuillez remplir ce champ s'il vous plaît.",minlength:"Veuillez entrer au moins {requiredLength} caractères.",maxlength:"Veuillez entrer au maximum {requiredLength} caractères.",pattern:"Veuillez entrer une valeur qui correspond au format : {pattern}.",email:"Veuillez entrer une adresse email valide.",min:"Veuillez entrer une valeur supérieure ou égale à {min}.",max:"Veuillez entrer une valeur inférieure ou égale à {max}.",requiredtrue:"Veuillez cocher cette case s'il vous plaît.",mindate:"Veuillez entrer une date le {mindate} ou après.",maxdate:"Veuillez entrer une date le {maxdate} ou avant.",invaliddate:"Veuillez entrer une date valide."},de:{required:"Bitte füllen Sie dieses Feld aus.",minlength:"Bitte geben Sie mindestens {requiredLength} Zeichen ein.",maxlength:"Bitte geben Sie höchstens {requiredLength} Zeichen ein.",pattern:"Bitte geben Sie einen Wert ein, der dem Muster entspricht: {pattern}.",email:"Bitte geben Sie eine gültige E-Mail-Adresse ein.",min:"Bitte geben Sie einen Wert größer oder gleich {min} ein.",max:"Bitte geben Sie einen Wert kleiner oder gleich {max} ein.",requiredtrue:"Bitte aktivieren Sie dieses Feld.",mindate:"Bitte geben Sie ein Datum am oder nach dem {mindate} ein.",maxdate:"Bitte geben Sie ein Datum am oder vor dem {maxdate} ein.",invaliddate:"Bitte geben Sie ein gültiges Datum ein."},it:{required:"Si prega di compilare questo campo.",minlength:"Si prega di inserire almeno {requiredLength} caratteri.",maxlength:"Si prega di inserire al massimo {requiredLength} caratteri.",pattern:"Si prega di inserire un valore che corrisponde al formato: {pattern}.",email:"Si prega di inserire un indirizzo email valido.",min:"Si prega di inserire un valore maggiore o uguale a {min}.",max:"Si prega di inserire un valore minore o uguale a {max}.",requiredtrue:"Si prega di spuntare questo campo.",mindate:"Si prega di inserire una data il {mindate} o successiva.",maxdate:"Si prega di inserire una data il {maxdate} o precedente.",invaliddate:"Inserisci una data valida."}};export{a as getErrorMessage};
 //# sourceMappingURL=index.esm.js.map

package/dist/ui-library/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":[],"mappings":""}
+{"version":3,"names":["dateFormat","Intl","DateTimeFormat","getErrorMessage","language","error","message","translation","key","replace","String","requiredLength","requiredPattern","min","max","format","mindate","maxdate","text","e","console","warn","undefined","en","required","minlength","maxlength","pattern","email","requiredtrue","invaliddate","fr","de","it"],"sources":["src/utils/error-messages.ts"],"sourcesContent":["export type Language = 'de' | 'fr' | 'it' | 'en';\n\nconst dateFormat = new Intl.DateTimeFormat('de-CH');\n\nexport type ValidationError =\n  | { key: 'required' }\n  | { key: 'requiredtrue' }\n  | { key: 'email'; requiredPattern: string }\n  | { key: 'minlength'; requiredLength: number }\n  | { key: 'maxlength'; requiredLength: number }\n  | { key: 'pattern'; requiredPattern: string }\n  | { key: 'min'; min: number }\n  | { key: 'max'; max: number }\n  | { key: 'mindate'; mindate: Date; actual: Date }\n  | { key: 'maxdate'; maxdate: Date; actual: Date }\n  | { key: 'invaliddate'; actual: Date }\n  | { key: 'custom'; text: string };\n\n/**\n * Returns an error message for the given language and error.\n */\nexport function getErrorMessage(language: Language, error: ValidationError): string | undefined {\n  try {\n    const message = translation[language][error.key];\n    switch (error.key) {\n      case 'required':\n      case 'requiredtrue':\n      case 'email':\n        return message;\n      case 'minlength':\n      case 'maxlength':\n        return message.replace('{requiredLength}', String(error.requiredLength));\n      case 'pattern':\n        return message.replace('{pattern}', String(error.requiredPattern));\n      case 'min':\n        return message.replace('{min}', String(error.min));\n      case 'max':\n        return message.replace('{max}', String(error.max));\n      case 'mindate':\n        return message.replace('{mindate}', dateFormat.format(error.mindate));\n      case 'maxdate':\n        return message.replace('{maxdate}', dateFormat.format(error.maxdate));\n      case 'invaliddate':\n        return message;\n      case 'custom':\n        return error.text;\n    }\n  } catch (e) {\n    console.warn(`no error message in '${language}' for error:`, error);\n    return undefined;\n  }\n}\n\nconst translation: Record<Language, Record<string, string>> = {\n  en: {\n    required: 'Please fill out this field.',\n    minlength: 'Please enter at least {requiredLength} characters.',\n    maxlength: 'Please enter no more than {requiredLength} characters.',\n    pattern: 'Please enter a value that matches the pattern: {pattern}.',\n    email: 'Please enter a valid email address.',\n    min: 'Please enter a value greater than or equal to {min}.',\n    max: 'Please enter a value less than or equal to {max}.',\n    requiredtrue: 'Please check this field.',\n    mindate: 'Please enter a date on or after {mindate}.',\n    maxdate: 'Please enter a date on or before {maxdate}.',\n    invaliddate: 'Please enter a valid date.',\n  },\n  fr: {\n    required: \"Veuillez remplir ce champ s'il vous plaît.\",\n    minlength: 'Veuillez entrer au moins {requiredLength} caractères.',\n    maxlength: 'Veuillez entrer au maximum {requiredLength} caractères.',\n    pattern: 'Veuillez entrer une valeur qui correspond au format : {pattern}.',\n    email: 'Veuillez entrer une adresse email valide.',\n    min: 'Veuillez entrer une valeur supérieure ou égale à {min}.',\n    max: 'Veuillez entrer une valeur inférieure ou égale à {max}.',\n    requiredtrue: \"Veuillez cocher cette case s'il vous plaît.\",\n    mindate: 'Veuillez entrer une date le {mindate} ou après.',\n    maxdate: 'Veuillez entrer une date le {maxdate} ou avant.',\n    invaliddate: 'Veuillez entrer une date valide.',\n  },\n  de: {\n    required: 'Bitte füllen Sie dieses Feld aus.',\n    minlength: 'Bitte geben Sie mindestens {requiredLength} Zeichen ein.',\n    maxlength: 'Bitte geben Sie höchstens {requiredLength} Zeichen ein.',\n    pattern: 'Bitte geben Sie einen Wert ein, der dem Muster entspricht: {pattern}.',\n    email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.',\n    min: 'Bitte geben Sie einen Wert größer oder gleich {min} ein.',\n    max: 'Bitte geben Sie einen Wert kleiner oder gleich {max} ein.',\n    requiredtrue: 'Bitte aktivieren Sie dieses Feld.',\n    mindate: 'Bitte geben Sie ein Datum am oder nach dem {mindate} ein.',\n    maxdate: 'Bitte geben Sie ein Datum am oder vor dem {maxdate} ein.',\n    invaliddate: 'Bitte geben Sie ein gültiges Datum ein.',\n  },\n  it: {\n    required: 'Si prega di compilare questo campo.',\n    minlength: 'Si prega di inserire almeno {requiredLength} caratteri.',\n    maxlength: 'Si prega di inserire al massimo {requiredLength} caratteri.',\n    pattern: 'Si prega di inserire un valore che corrisponde al formato: {pattern}.',\n    email: 'Si prega di inserire un indirizzo email valido.',\n    min: 'Si prega di inserire un valore maggiore o uguale a {min}.',\n    max: 'Si prega di inserire un valore minore o uguale a {max}.',\n    requiredtrue: 'Si prega di spuntare questo campo.',\n    mindate: 'Si prega di inserire una data il {mindate} o successiva.',\n    maxdate: 'Si prega di inserire una data il {maxdate} o precedente.',\n    invaliddate: 'Inserisci una data valida.',\n  },\n};\n"],"mappings":"AAEA,MAAMA,EAAa,IAAIC,KAAKC,eAAe,S,SAmB3BC,EAAgBC,EAAoBC,GAClD,IACE,MAAMC,EAAUC,EAAYH,GAAUC,EAAMG,KAC5C,OAAQH,EAAMG,KACZ,IAAK,WACL,IAAK,eACL,IAAK,QACH,OAAOF,EACT,IAAK,YACL,IAAK,YACH,OAAOA,EAAQG,QAAQ,mBAAoBC,OAAOL,EAAMM,iBAC1D,IAAK,UACH,OAAOL,EAAQG,QAAQ,YAAaC,OAAOL,EAAMO,kBACnD,IAAK,MACH,OAAON,EAAQG,QAAQ,QAASC,OAAOL,EAAMQ,MAC/C,IAAK,MACH,OAAOP,EAAQG,QAAQ,QAASC,OAAOL,EAAMS,MAC/C,IAAK,UACH,OAAOR,EAAQG,QAAQ,YAAaT,EAAWe,OAAOV,EAAMW,UAC9D,IAAK,UACH,OAAOV,EAAQG,QAAQ,YAAaT,EAAWe,OAAOV,EAAMY,UAC9D,IAAK,cACH,OAAOX,EACT,IAAK,SACH,OAAOD,EAAMa,K,CAEjB,MAAOC,GACPC,QAAQC,KAAK,wBAAwBjB,gBAAwBC,GAC7D,OAAOiB,S,CAEX,CAEA,MAAMf,EAAwD,CAC5DgB,GAAI,CACFC,SAAU,8BACVC,UAAW,qDACXC,UAAW,yDACXC,QAAS,4DACTC,MAAO,sCACPf,IAAK,uDACLC,IAAK,oDACLe,aAAc,2BACdb,QAAS,6CACTC,QAAS,8CACTa,YAAa,8BAEfC,GAAI,CACFP,SAAU,6CACVC,UAAW,wDACXC,UAAW,0DACXC,QAAS,mEACTC,MAAO,4CACPf,IAAK,0DACLC,IAAK,0DACLe,aAAc,8CACdb,QAAS,kDACTC,QAAS,kDACTa,YAAa,oCAEfE,GAAI,CACFR,SAAU,oCACVC,UAAW,2DACXC,UAAW,0DACXC,QAAS,wEACTC,MAAO,mDACPf,IAAK,2DACLC,IAAK,4DACLe,aAAc,oCACdb,QAAS,4DACTC,QAAS,2DACTa,YAAa,2CAEfG,GAAI,CACFT,SAAU,sCACVC,UAAW,0DACXC,UAAW,8DACXC,QAAS,wEACTC,MAAO,kDACPf,IAAK,4DACLC,IAAK,0DACLe,aAAc,qCACdb,QAAS,2DACTC,QAAS,2DACTa,YAAa,sC"}

package/dist/ui-library/p-0416ec85.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as s,h as t}from"./p-b5fdfa6a.js";import{s as e}from"./p-052aa8d3.js";const o=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;height:100%}.sidebar__container{height:100%;overflow:auto}.sidebar__container.sidebar--open{box-shadow:var(--six-elevation-1dp)}.sidebar__container:not(.sidebar--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.sidebar--left{color:var(--six-sidebar-color);background-color:var(--six-sidebar-background-color);transition:var(--six-transition-medium) margin-left;background-size:300vw 70%;background-position:bottom;background-repeat:no-repeat}.sidebar--right{transition:var(--six-transition-medium) margin-right}.sidebar--open.sidebar--left{margin-right:2px}.sidebar--open.sidebar--right{margin-left:2px}";const n=i=>{var s;return((s=i===null||i===void 0?void 0:i.tagName)===null||s===void 0?void 0:s.toLowerCase())==="six-sidebar-item-group"};const r=class{constructor(t){i(this,t);this.sixShow=s(this,"six-sidebar-show",7);this.sixAfterShow=s(this,"six-sidebar-after-show",7);this.sixHide=s(this,"six-sidebar-hide",7);this.sixAfterHide=s(this,"six-sidebar-after-hide",7);this.sixInitialFocus=s(this,"six-sidebar-initial-focus",7);this.willShow=false;this.willHide=false;this.handleTransitionEnd=i=>{const s=i.target;if(i.type==="transitionend"&&s.classList.contains("sidebar__container")){this.resetTransitionVariables()}};this.closeSiblingDetailsOnShow=i=>{const s=i.target;if(this.sidebar!=null){e(s,this.sidebar)}const t=i=>{var t;let e=s;while(i(e)!=null){e=i(e);if(n(e)){const i=(t=e===null||e===void 0?void 0:e.shadowRoot)===null||t===void 0?void 0:t.querySelector("six-details");if(i!=null){i.open=false}}}};t((i=>i===null||i===void 0?void 0:i.previousElementSibling));t((i=>i===null||i===void 0?void 0:i.nextElementSibling))};this.isVisible=false;this.position="left";this.open=false;this.width="16rem";this.toggled=false}handleOpenChange(){this.open?this.show():this.hide()}componentWillLoad(){if(this.open){void this.show();this.resetTransitionVariables()}}componentDidRender(){this.setupTogglableMenuItems()}disconnectedCallback(){var i;(i=this.sidebar)===null||i===void 0?void 0:i.removeEventListener("six-details-show",this.closeSiblingDetailsOnShow)}setupTogglableMenuItems(){if(!this.toggled||this.sidebar==null)return;this.markAllMenuItemsAsSelectableEmpty();this.sidebar.addEventListener("six-details-show",this.closeSiblingDetailsOnShow)}markAllMenuItemsAsSelectableEmpty(){var i;const s=(i=this.sidebar)===null||i===void 0?void 0:i.querySelector("slot");const t=(s===null||s===void 0?void 0:s.assignedElements())||[];const e=[];while(t.length>0){const i=t.pop();if((i===null||i===void 0?void 0:i.shadowRoot)==null){continue}const s=i.shadowRoot.querySelectorAll("six-details");e.push(...s);const o=Array.from(i.children).filter(n);t.push(...o)}e.forEach((i=>i.selectableEmpty=true))}async toggle(){if(this.willShow||this.willHide){return}if(this.open){await this.hide()}else{await this.show()}}async show(){if(this.willShow){return}const i=this.sixShow.emit();if(i.defaultPrevented){this.open=false;return}this.willShow=true;this.isVisible=true;this.open=true}async hide(){if(this.willHide){return}const i=this.sixHide.emit();if(i.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false}async selectItemByIndex(i){if(this.sidebar==null)return;const s=this.sidebar.querySelector("slot");const t=((s===null||s===void 0?void 0:s.assignedElements())||[]).flatMap((i=>{var s;const t=(s=i.shadowRoot)===null||s===void 0?void 0:s.querySelector("six-details");if(t==null){return[]}return[t]}));if(i<0||i>t.length-1){console.error(`Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${i}`);return}await t[i].show()}async selectItemByName(i){var s,t,e;const o=(s=this.sidebar)===null||s===void 0?void 0:s.querySelector("slot");const n=o===null||o===void 0?void 0:o.assignedElements();if(n==null){return}const r=n.findIndex((s=>(s===null||s===void 0?void 0:s.name)===i));const a=(e=(t=n.at(r))===null||t===void 0?void 0:t.shadowRoot)===null||e===void 0?void 0:e.querySelector("six-details");await(a===null||a===void 0?void 0:a.show())}resetTransitionVariables(){this.isVisible=this.open;this.willShow=false;this.willHide=false;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}render(){return t("host",{class:"six-sidebar"},t("div",{class:{sidebar__container:true,"sidebar--visible":this.isVisible,"sidebar--open":this.open,"sidebar--left":this.position==="left","sidebar--right":this.position==="right"},style:{width:this.width,[`margin-${this.position}`]:this.open?"0":`calc(1rem - ${this.width})`},ref:i=>this.sidebar=i,"aria-hidden":this.open?"false":"true",onTransitionEnd:this.handleTransitionEnd},t("slot",null)))}static get watchers(){return{open:["handleOpenChange"]}}};r.style=o;export{r as six_sidebar};
+//# sourceMappingURL=p-0416ec85.entry.js.map

package/dist/ui-library/p-0416ec85.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixSidebarCss","isSidebarItemGroup","node","_a","tagName","toLowerCase","SixSidebar","this","willShow","willHide","handleTransitionEnd","event","target","type","classList","contains","resetTransitionVariables","closeSiblingDetailsOnShow","clickedMenuItem","sidebar","scrollIntoView","closeAllSiblingsBySiblingProperty","getSibling","detailsElement","shadowRoot","querySelector","open","previousElementSibling","nextElementSibling","handleOpenChange","show","hide","componentWillLoad","componentDidRender","setupTogglableMenuItems","disconnectedCallback","removeEventListener","toggled","markAllMenuItemsAsSelectableEmpty","addEventListener","slot","nodes","assignedElements","menuItems","length","pop","menuItemsForCurrentNode","querySelectorAll","push","newItemGroups","Array","from","children","filter","forEach","details","selectableEmpty","toggle","sixShow","emit","defaultPrevented","isVisible","sixHide","selectItemByIndex","index","menuItemsOnRootLevel","flatMap","el","console","error","selectItemByName","value","sidebarItemGroups","indexOfSelectedElement","findIndex","name","selectedItem","_c","_b","at","sixAfterShow","sixAfterHide","render","h","class","sidebar__container","position","style","width","ref","onTransitionEnd"],"sources":["src/components/six-sidebar/six-sidebar.scss?tag=six-sidebar&encapsulation=shadow","src/components/six-sidebar/six-sidebar.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n@import 'src/global/mixins/scrollbar';\n\n:host {\n  display: block;\n  height: 100%;\n}\n\n.sidebar {\n  &__container {\n    // scroll\n    height: 100%;\n    overflow: auto;\n\n    &.sidebar--open {\n      box-shadow: var(--six-elevation-1dp);\n    }\n\n    &:not(.sidebar--visible) {\n      @include hidden;\n    }\n  }\n\n  &--left {\n    color: var(--six-sidebar-color);\n    background-color: var(--six-sidebar-background-color);\n    // collapse\n    transition: var(--six-transition-medium) margin-left;\n    // six background\n    background-size: 300vw 70%;\n    background-position: bottom;\n    background-repeat: no-repeat;\n  }\n\n  &--right {\n    // collapse\n    transition: var(--six-transition-medium) margin-right;\n  }\n\n  // if the sidebar is embedded within six-root it cuts-off the border styling, for thus we need to guarante a margin\n  &--open {\n    &.sidebar--left {\n      margin-right: 2px;\n    }\n\n    &.sidebar--right {\n      margin-left: 2px;\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { scrollIntoView } from '../../utils/scroll';\n\nconst isSidebarItemGroup = (node?: Element | null): boolean =>\n  node?.tagName?.toLowerCase() === 'six-sidebar-item-group';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested side bar [group] items.\n */\n\n@Component({\n  tag: 'six-sidebar',\n  styleUrl: 'six-sidebar.scss',\n  shadow: true,\n})\nexport class SixSidebar {\n  private willShow = false;\n  private willHide = false;\n\n  private sidebar?: HTMLElement;\n\n  @State() isVisible = false;\n\n  /** Sidebar position */\n  @Prop() position: 'left' | 'right' = 'left';\n\n  /** Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Sidebar width */\n  @Prop() width = '16rem';\n\n  /** Define whether sidebar is toggled meaning only one menu can be open at the same time*/\n  @Prop() toggled = false;\n\n  /** Emitted when the sidebar opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-sidebar-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the sidebar opens and all transitions are complete. */\n  @Event({ eventName: 'six-sidebar-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the sidebar closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-sidebar-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the sidebar closes and all transitions are complete. */\n  @Event({ eventName: 'six-sidebar-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the sidebar opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the sidebar, such as an input or button.\n   */\n  @Event({ eventName: 'six-sidebar-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.type === 'transitionend' && target.classList.contains('sidebar__container')) {\n      this.resetTransitionVariables();\n    }\n  };\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      void this.show();\n      // if the sidebar is open by default we need to manually reset the\n      // transition variables since there will be no transition event\n      this.resetTransitionVariables();\n    }\n  }\n\n  componentDidRender() {\n    this.setupTogglableMenuItems();\n  }\n\n  disconnectedCallback() {\n    this.sidebar?.removeEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n  }\n\n  private closeSiblingDetailsOnShow = (event: Event) => {\n    const clickedMenuItem = event.target as HTMLElement;\n    if (this.sidebar != null) {\n      scrollIntoView(clickedMenuItem, this.sidebar);\n    }\n\n    const closeAllSiblingsBySiblingProperty = (\n      getSibling: (node: Element | null | undefined) => Element | null | undefined\n    ) => {\n      let node: Element | null | undefined = clickedMenuItem;\n      while (getSibling(node) != null) {\n        node = getSibling(node);\n        if (isSidebarItemGroup(node)) {\n          const detailsElement = node?.shadowRoot?.querySelector('six-details');\n          if (detailsElement != null) {\n            detailsElement.open = false;\n          }\n        }\n      }\n    };\n\n    // close all previous siblings\n    closeAllSiblingsBySiblingProperty((node) => node?.previousElementSibling);\n    // close all further siblings\n    closeAllSiblingsBySiblingProperty((node) => node?.nextElementSibling);\n  };\n\n  private setupTogglableMenuItems() {\n    if (!this.toggled || this.sidebar == null) return;\n    this.markAllMenuItemsAsSelectableEmpty();\n    this.sidebar.addEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n  }\n\n  private markAllMenuItemsAsSelectableEmpty() {\n    // when you have a toggled menu you also want to close other menu items when you click on an item without children\n    // nice benefit this item will then also be highlighted\n    const slot = this.sidebar?.querySelector('slot');\n    const nodes = slot?.assignedElements() || [];\n\n    // since we don't just want to make the top level empty menuItems selectable in toggled mode,\n    // but also nested items we need to traverse the whole menu item tree\n    const menuItems = [];\n    while (nodes.length > 0) {\n      const node = nodes.pop();\n      if (node?.shadowRoot == null) {\n        continue;\n      }\n\n      // collect six-details in the current shadowDOM\n      const menuItemsForCurrentNode = node.shadowRoot.querySelectorAll('six-details');\n      menuItems.push(...menuItemsForCurrentNode);\n\n      // collect all six-sidebar-item-group children of the current node to afterwards check their shadowDOM too\n      const newItemGroups = Array.from(node.children).filter(isSidebarItemGroup);\n      nodes.push(...newItemGroups);\n    }\n\n    menuItems.forEach((details) => (details.selectableEmpty = true));\n  }\n\n  /** Toggles whether the sidebar should be shown or hidden */\n  @Method()\n  async toggle() {\n    if (this.willShow || this.willHide) {\n      return;\n    }\n\n    if (this.open) {\n      await this.hide();\n    } else {\n      await this.show();\n    }\n  }\n\n  /** Shows the sidebar */\n  @Method()\n  async show() {\n    if (this.willShow) {\n      return;\n    }\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n  }\n\n  /** Hides the sidebar */\n  @Method()\n  async hide() {\n    if (this.willHide) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n  }\n\n  /** Allows to select a menu item programmatically by index */\n  @Method()\n  async selectItemByIndex(index: number) {\n    if (this.sidebar == null) return;\n\n    const slot = this.sidebar.querySelector('slot');\n    const menuItemsOnRootLevel: HTMLSixDetailsElement[] = (slot?.assignedElements() || []).flatMap((el) => {\n      const detailsElement = el.shadowRoot?.querySelector('six-details');\n      if (detailsElement == null) {\n        return [];\n      }\n      return [detailsElement];\n    });\n    if (index < 0 || index > menuItemsOnRootLevel.length - 1) {\n      console.error(\n        `Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${index}`\n      );\n      return;\n    }\n    await menuItemsOnRootLevel[index].show();\n  }\n\n  /** Allows to select a menu item programmatically by name */\n  @Method()\n  async selectItemByName(value: string) {\n    const slot = this.sidebar?.querySelector('slot');\n    const sidebarItemGroups = slot?.assignedElements() as HTMLSixSidebarItemGroupElement[];\n    if (sidebarItemGroups == null) {\n      return;\n    }\n\n    const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => el?.name === value);\n    const selectedItem = sidebarItemGroups.at(indexOfSelectedElement)?.shadowRoot?.querySelector('six-details');\n    await selectedItem?.show();\n  }\n\n  private resetTransitionVariables() {\n    this.isVisible = this.open;\n    this.willShow = false;\n    this.willHide = false;\n    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n  }\n\n  render() {\n    return (\n      <host class=\"six-sidebar\">\n        <div\n          class={{\n            sidebar__container: true,\n            'sidebar--visible': this.isVisible,\n            'sidebar--open': this.open,\n            'sidebar--left': this.position === 'left',\n            'sidebar--right': this.position === 'right',\n          }}\n          style={{\n            width: this.width,\n            [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,\n          }}\n          ref={(el) => (this.sidebar = el)}\n          aria-hidden={this.open ? 'false' : 'true'}\n          onTransitionEnd={this.handleTransitionEnd}\n        >\n          <slot />\n        </div>\n      </host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/{p-eb8f05a9.js → p-052aa8d3.js}

@@ -1,2 +1,2 @@
-function o(o,t){return{top:Math.round(o.getBoundingClientRect().top-t.getBoundingClientRect().top),left:Math.round(o.getBoundingClientRect().left-t.getBoundingClientRect().left)}}const t=new Set;function n(o){t.add(o);document.body.classList.add("six-scroll-lock")}function c(o){t.delete(o);if(t.size===0){document.body.classList.remove("six-scroll-lock")}}function i(t,n,c="vertical",i="smooth"){const s=o(t,n);const e=s.top+n.scrollTop;const l=s.left+n.scrollLeft;const f=n.scrollLeft;const a=n.scrollLeft+n.offsetWidth;const r=n.scrollTop;const h=n.scrollTop+n.offsetHeight;if(c==="horizontal"||c==="both"){if(l<f){n.scrollTo({left:l,behavior:i})}else if(l+t.clientWidth>a){n.scrollTo({left:l-n.offsetWidth+t.clientWidth,behavior:i})}}if(c==="vertical"||c==="both"){if(e<r){n.scrollTo({top:e,behavior:i})}else if(e+t.clientHeight>h){n.scrollTo({top:e-n.offsetHeight+t.clientHeight,behavior:i})}}}export{o as g,n as l,i as s,c as u};
-//# sourceMappingURL=p-eb8f05a9.js.map
+function o(o,t){return{top:Math.round(o.getBoundingClientRect().top-t.getBoundingClientRect().top),left:Math.round(o.getBoundingClientRect().left-t.getBoundingClientRect().left)}}const t=new Set;function n(o){t.add(o);document.body.classList.add("six-scroll-lock")}function c(o){t.delete(o);if(t.size===0){document.body.classList.remove("six-scroll-lock")}}function i(t,n,c="vertical",i="smooth"){const e=o(t,n);const s=e.top+n.scrollTop;const l=e.left+n.scrollLeft;const f=n.scrollLeft;const a=n.scrollLeft+n.offsetWidth;const r=n.scrollTop;const h=n.scrollTop+n.offsetHeight;if(c==="horizontal"||c==="both"){if(l<f){n.scrollTo({left:l,behavior:i})}else if(l+t.clientWidth>a){n.scrollTo({left:l-n.offsetWidth+t.clientWidth,behavior:i})}}if(c==="vertical"||c==="both"){if(s<r){n.scrollTo({top:s,behavior:i})}else if(s+t.clientHeight>h){n.scrollTo({top:s-n.offsetHeight+t.clientHeight,behavior:i})}}}export{n as l,i as s,c as u};
+//# sourceMappingURL=p-052aa8d3.js.map

package/dist/ui-library/p-052aa8d3.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getOffset","element","parent","top","Math","round","getBoundingClientRect","left","locks","Set","lockBodyScrolling","lockingEl","add","document","body","classList","unlockBodyScrolling","delete","size","remove","scrollIntoView","container","direction","behavior","offset","offsetTop","scrollTop","offsetLeft","scrollLeft","minX","maxX","offsetWidth","minY","maxY","offsetHeight","scrollTo","clientWidth","clientHeight"],"sources":["src/utils/offset.ts","src/utils/scroll.ts"],"sourcesContent":["//\n// Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the\n// parent doesn't have to be positioned relative or absolute.\n//\n// NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent\n// seems to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069\n//\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  return {\n    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),\n    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left),\n  };\n}\n","import { getOffset } from './offset';\n\nconst locks = new Set();\n\n//\n// Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n// without premature unlocking.\n//\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n  document.body.classList.add('six-scroll-lock');\n}\n\n//\n// Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n//\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.body.classList.remove('six-scroll-lock');\n  }\n}\n\n//\n// Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n//\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n  behavior: 'smooth' | 'auto' = 'smooth'\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === 'horizontal' || direction === 'both') {\n    if (offsetLeft < minX) {\n      container.scrollTo({ left: offsetLeft, behavior });\n    } else if (offsetLeft + element.clientWidth > maxX) {\n      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });\n    }\n  }\n\n  if (direction === 'vertical' || direction === 'both') {\n    if (offsetTop < minY) {\n      container.scrollTo({ top: offsetTop, behavior });\n    } else if (offsetTop + element.clientHeight > maxY) {\n      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });\n    }\n  }\n}\n"],"mappings":"SAOgBA,EAAUC,EAAsBC,GAC9C,MAAO,CACLC,IAAKC,KAAKC,MAAMJ,EAAQK,wBAAwBH,IAAMD,EAAOI,wBAAwBH,KACrFI,KAAMH,KAAKC,MAAMJ,EAAQK,wBAAwBC,KAAOL,EAAOI,wBAAwBC,MAE3F,CCVA,MAAMC,EAAQ,IAAIC,I,SAMFC,EAAkBC,GAChCH,EAAMI,IAAID,GACVE,SAASC,KAAKC,UAAUH,IAAI,kBAC9B,C,SAKgBI,EAAoBL,GAClCH,EAAMS,OAAON,GAEb,GAAIH,EAAMU,OAAS,EAAG,CACpBL,SAASC,KAAKC,UAAUI,OAAO,kB,CAEnC,C,SAKgBC,EACdnB,EACAoB,EACAC,EAAgD,WAChDC,EAA8B,UAE9B,MAAMC,EAASxB,EAAUC,EAASoB,GAClC,MAAMI,EAAYD,EAAOrB,IAAMkB,EAAUK,UACzC,MAAMC,EAAaH,EAAOjB,KAAOc,EAAUO,WAC3C,MAAMC,EAAOR,EAAUO,WACvB,MAAME,EAAOT,EAAUO,WAAaP,EAAUU,YAC9C,MAAMC,EAAOX,EAAUK,UACvB,MAAMO,EAAOZ,EAAUK,UAAYL,EAAUa,aAE7C,GAAIZ,IAAc,cAAgBA,IAAc,OAAQ,CACtD,GAAIK,EAAaE,EAAM,CACrBR,EAAUc,SAAS,CAAE5B,KAAMoB,EAAYJ,Y,MAClC,GAAII,EAAa1B,EAAQmC,YAAcN,EAAM,CAClDT,EAAUc,SAAS,CAAE5B,KAAMoB,EAAaN,EAAUU,YAAc9B,EAAQmC,YAAab,Y,EAIzF,GAAID,IAAc,YAAcA,IAAc,OAAQ,CACpD,GAAIG,EAAYO,EAAM,CACpBX,EAAUc,SAAS,CAAEhC,IAAKsB,EAAWF,Y,MAChC,GAAIE,EAAYxB,EAAQoC,aAAeJ,EAAM,CAClDZ,EAAUc,SAAS,CAAEhC,IAAKsB,EAAYJ,EAAUa,aAAejC,EAAQoC,aAAcd,Y,EAG3F,Q"}