@six-group/ui-library 0.0.0-insider.a358260 → 0.0.0-insider.a8d68c7

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,18 @@ 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;
   /** 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) */
+  /** The error text */
   errorText?: string;
-  /** Whether or not a error text slot has been provided. */
-  hasErrorTextSlot?: boolean;
   /** Set to true to disable the input. */
   disabled?: boolean;
   /** Set if the value is required. */
@@ -30,5 +29,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/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/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

@@ -6,10 +6,11 @@ interface EventListener {
 }
 export declare class EventListeners {
   eventListeners: EventListener[];
-  add: <T extends DocumentAndElementEventHandlers>(el: T, name: string, listener: EventListenerOrEventListenerObject, identifier?: any) => void;
+  add: <T extends DocumentAndElementEventHandlers>(el: T, name: string, listener: EventListenerOrEventListenerObject, identifier?: string | null | undefined) => void;
   remove: <T extends DocumentAndElementEventHandlers>(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-0045a402.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as t,h as r,g as i}from"./p-ac4f4d45.js";import{h as n}from"./p-d87a6f4d.js";import{s}from"./p-4d408fb4.js";const a=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block;width:auto;cursor:pointer}.button{display:inline-flex;align-items:stretch;justify-content:center;width:100%;border-style:solid;border-width:var(--six-border-width);border-radius:0;font-family:var(--six-font-family);font-weight:var(--six-font-weight-semibold);text-decoration:none;user-select:none;white-space:nowrap;vertical-align:middle;padding:0;transition:var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:inherit}.button::-moz-focus-inner{border:0}.button:focus{outline:none}.button.button--disabled{pointer-events:none}.button ::slotted(six-icon){pointer-events:none}.button-wrapper--disabled{cursor:not-allowed}.button__prefix,.button__suffix{flex:0 0 auto;display:flex;align-items:center}.button.button--secondary{background-color:var(--six-color-white);border-color:var(--six-color-web-rock-900);color:var(--six-color-web-rock-900)}.button.button--secondary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--secondary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-100)}.button.button--secondary:focus:not(.button--disabled){background-color:var(--six-color-web-rock-100);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--secondary:active:not(.button--disabled){background-color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-900);border-width:var(--six-focus-ring-width)}.button.button--primary{background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.button.button--primary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--primary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-800);border-color:var(--six-color-web-rock-800)}.button.button--primary:focus:not(.button--disabled){background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--primary:active:not(.button--disabled){background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);opacity:70%}.button.button--link{background-color:transparent;border-color:transparent;color:var(--six-color-action-500)}.button.button--link.button--disabled{color:var(--six-color-web-rock-400)}.button.button--link:hover:not(.button--disabled){color:var(--six-color-action-600)}.button.button--link:focus:not(.button--disabled){border-color:var(--six-color-web-rock-400)}.button.button--link:active:not(.button--disabled){color:var(--six-color-action-light-to-be-defined)}.button.button--danger{background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);color:var(--six-color-white)}.button.button--danger.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--danger:hover:not(.button--disabled){background-color:var(--six-color-danger-900);border-color:var(--six-color-danger-900)}.button.button--danger:focus:not(.button--disabled){background-color:var(--six-color-danger-800);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--danger:active:not(.button--disabled){background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);opacity:70%}.button.button--warning{background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);color:var(--six-color-web-rock-900)}.button.button--warning.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--warning:hover:not(.button--disabled){background-color:var(--six-color-warning-800);border-color:var(--six-color-warning-800)}.button.button--warning:focus:not(.button--disabled){background-color:var(--six-color-warning-700);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--warning:active:not(.button--disabled){background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);opacity:70%}.button.button--success{background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);color:var(--six-color-web-rock-900)}.button.button--success.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--success:hover:not(.button--disabled){background-color:var(--six-color-success-600);border-color:var(--six-color-success-600)}.button.button--success:focus:not(.button--disabled){background-color:var(--six-color-success-500);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--success:active:not(.button--disabled){background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);opacity:70%}.button.button--action{background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);color:var(--six-color-white)}.button.button--action.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--action:hover:not(.button--disabled){background-color:var(--six-color-action-600);border-color:var(--six-color-action-600)}.button.button--action:focus:not(.button--disabled){background-color:var(--six-color-action-500);border-color:var(--six-color-web-rock-400);box-shadow:var(--six-button-focus-shadow)}.button.button--action:active:not(.button--disabled){background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);opacity:70%}.button--small{font-size:var(--six-button-font-size-small);height:var(--six-height-small);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2)}.button--medium{font-size:var(--six-button-font-size-medium);height:var(--six-height-medium);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2)}.button--large{font-size:var(--six-button-font-size-large);height:var(--six-height-large);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2)}.button--pill.button--small{border-radius:var(--six-height-small)}.button--pill.button--medium{border-radius:var(--six-height-medium)}.button--pill.button--large{border-radius:var(--six-height-large)}.button--circle{padding-left:0;padding-right:0;font-size:revert}.button--circle.button--small{width:var(--six-height-small);border-radius:50%}.button--circle.button--medium{width:var(--six-height-medium);border-radius:50%}.button--circle.button--large{width:var(--six-height-large);border-radius:50%}.button--circle .button__prefix,.button--circle .button__suffix,.button--circle .button__caret{display:none}.button--circle .button__prefix svg,.button--circle .button__suffix svg,.button--circle .button__caret svg{color:var(--six-color-web-rock-900)}.button--caret .button__suffix{display:none}.button--caret .button__caret{display:flex;align-items:center}.button--caret .button__caret svg{color:var(--six-color-web-rock-900);width:1em;height:1em}.button--primary .button__caret svg,.button--action .button__caret svg,.button--danger .button__caret svg{color:var(--six-color-white)}.button--loading{position:relative;cursor:wait}.button--loading .button__prefix,.button--loading .button__label,.button--loading .button__suffix,.button--loading .button__caret{visibility:hidden}.button--loading six-spinner{--indicator-color:currentColor;position:absolute;height:1em;width:1em;top:calc(50% - 0.5em);left:calc(50% - 0.5em)}.button ::slotted(six-badge){position:absolute;top:0;right:0;transform:translateY(-50%) translateX(50%);pointer-events:none}.button--has-label.button--small .button__label{padding:0 var(--six-spacing-small)}.button--has-label.button--medium .button__label{padding:0 var(--six-spacing-medium)}.button--has-label.button--large .button__label{padding:0 var(--six-spacing-large)}.button--has-prefix.button--small{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--small .button__label{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--medium{padding-left:var(--six-spacing-small)}.button--has-prefix.button--medium .button__label{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large .button__label{padding-left:var(--six-spacing-small)}.button--has-suffix.button--small,.button--caret.button--small{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--small .button__label,.button--caret.button--small .button__label{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--medium,.button--caret.button--medium{padding-right:var(--six-spacing-small)}.button--has-suffix.button--medium .button__label,.button--caret.button--medium .button__label{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large,.button--caret.button--large{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large .button__label,.button--caret.button--large .button__label{padding-right:var(--six-spacing-small)}";const e=class{constructor(r){o(this,r);this.sixBlur=t(this,"six-button-blur",7);this.sixFocus=t(this,"six-button-focus",7);this.handleSlotChange=()=>{this.hasLabel=n(this.host);this.hasPrefix=n(this.host,"prefix");this.hasSuffix=n(this.host,"suffix")};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleClick=o=>{if(this.disabled||this.loading){o.preventDefault();o.stopPropagation();return}if(this.submit){o.preventDefault();s(this.host)}};this.hasFocus=false;this.hasLabel=false;this.hasPrefix=false;this.hasSuffix=false;this.type="primary";this.size="medium";this.caret=false;this.disabled=false;this.loading=false;this.pill=false;this.circle=false;this.submit=false;this.reset=false;this.name="";this.value="";this.href=undefined;this.target=undefined;this.download=undefined}componentWillLoad(){this.handleSlotChange()}async setFocus(o){var t;(t=this.nativeButton)===null||t===void 0?void 0:t.focus(o)}async removeFocus(){var o;(o=this.nativeButton)===null||o===void 0?void 0:o.blur()}render(){const o=this.href!=null;const t=!o;const i=o?"a":"button";return r("div",{onClick:this.handleClick,class:{"button-wrapper--disabled":this.disabled}},r(i,{ref:o=>this.nativeButton=o,part:"base",class:{button:true,"button--secondary":this.type==="secondary","button--primary":this.type==="primary","button--link":this.type==="link","button--success":this.type==="success","button--warning":this.type==="warning","button--danger":this.type==="danger","button--action":this.type==="action","button--small":this.size==="small","button--medium":this.size==="medium","button--large":this.size==="large","button--caret":this.caret,"button--circle":this.circle,"button--disabled":this.disabled,"button--focused":this.hasFocus,"button--loading":this.loading,"button--pill":this.pill,"button--has-label":this.hasLabel,"button--has-prefix":this.hasPrefix,"button--has-suffix":this.hasSuffix},disabled:t?this.disabled:undefined,type:t?this.submit?"submit":this.reset?"reset":"button":undefined,name:t?this.name:undefined,value:t?this.value:undefined,href:o?this.href:undefined,target:o&&this.target!=null?this.target:undefined,download:o&&this.download!=null?this.download:undefined,rel:o&&this.target!=null?"noreferrer noopener":undefined,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick,"data-testid":"button"},r("span",{part:"prefix",class:"button__prefix"},r("slot",{onSlotchange:this.handleSlotChange,name:"prefix"})),r("span",{part:"label",class:"button__label"},r("slot",{onSlotchange:this.handleSlotChange})),r("span",{part:"suffix",class:"button__suffix"},r("slot",{onSlotchange:this.handleSlotChange,name:"suffix"})),this.caret&&r("span",{part:"caret",class:"button__caret"},r("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},r("polyline",{points:"6 9 12 15 18 9"}))),this.loading&&r("six-spinner",null)))}get host(){return i(this)}};e.style=a;export{e as six_button};
+//# sourceMappingURL=p-0045a402.entry.js.map

package/dist/ui-library/p-0045a402.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixButtonCss","SixButton","this","handleSlotChange","hasLabel","hasSlot","host","hasPrefix","hasSuffix","handleBlur","hasFocus","sixBlur","emit","handleFocus","sixFocus","handleClick","event","disabled","loading","preventDefault","stopPropagation","submit","submitForm","componentWillLoad","async","options","_a","nativeButton","focus","blur","render","isLink","href","isButton","Button","h","onClick","class","ref","el","part","button","type","size","caret","circle","pill","undefined","reset","name","value","target","download","rel","onBlur","onFocus","onSlotchange","viewBox","fill","stroke","points"],"sources":["./src/components/six-button/six-button.scss?tag=six-button&encapsulation=shadow","./src/components/six-button/six-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n  width: auto;\n  cursor: pointer;\n}\n\n.button {\n  display: inline-flex;\n  align-items: stretch;\n  justify-content: center;\n  width: 100%;\n  border-style: solid;\n  border-width: var(--six-border-width);\n  border-radius: 0;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-font-weight-semibold);\n  text-decoration: none;\n  user-select: none;\n  white-space: nowrap;\n  vertical-align: middle;\n  padding: 0;\n  transition: var(--six-transition-fast) background-color, var(--six-transition-fast) color,\n    var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n  cursor: inherit;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &.button--disabled {\n    pointer-events: none;\n  }\n\n  // Clicks on icons shouldn't prevent the button from gaining focus\n  ::slotted(six-icon) {\n    pointer-events: none;\n  }\n}\n\n.button-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.button__prefix,\n.button__suffix {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Standard buttons\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button {\n  &.button--secondary {\n    background-color: var(--six-color-white);\n    border-color: var(--six-color-web-rock-900);\n    color: var(--six-color-web-rock-900);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-100);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-100);\n      border-color: var(--six-color-web-rock-400);\n      box-shadow: var(--six-button-focus-shadow);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-300);\n      border-color: var(--six-color-web-rock-900);\n      border-width: var(--six-focus-ring-width);\n    }\n  }\n\n  &.button--primary {\n    background-color: var(--six-color-web-rock-900);\n    border-color: var(--six-color-web-rock-900);\n    color: var(--six-color-white);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-800);\n      border-color: var(--six-color-web-rock-800);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-900);\n      border-color: var(--six-color-web-rock-400);\n      box-shadow: var(--six-button-focus-shadow);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-900);\n      border-color: var(--six-color-web-rock-900);\n      opacity: 70%;\n    }\n  }\n\n  &.button--link {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--six-color-action-500);\n\n    &.button--disabled {\n      color: var(--six-color-web-rock-400);\n    }\n\n    &:hover:not(.button--disabled) {\n      color: var(--six-color-action-600);\n    }\n\n    &:focus:not(.button--disabled) {\n      border-color: var(--six-color-web-rock-400);\n    }\n\n    &:active:not(.button--disabled) {\n      color: var(--six-color-action-light-to-be-defined);\n    }\n  }\n\n  &.button--danger {\n    background-color: var(--six-color-danger-800);\n    border-color: var(--six-color-danger-800);\n    color: var(--six-color-white);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-danger-900);\n      border-color: var(--six-color-danger-900);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--six-color-danger-800);\n      border-color: var(--six-color-web-rock-400);\n      box-shadow: var(--six-button-focus-shadow);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-danger-800);\n      border-color: var(--six-color-danger-800);\n      opacity: 70%;\n    }\n  }\n\n  &.button--warning {\n    background-color: var(--six-color-warning-700);\n    border-color: var(--six-color-warning-700);\n    color: var(--six-color-web-rock-900);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-warning-800);\n      border-color: var(--six-color-warning-800);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--six-color-warning-700);\n      border-color: var(--six-color-web-rock-400);\n      box-shadow: var(--six-button-focus-shadow);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-warning-700);\n      border-color: var(--six-color-warning-700);\n      opacity: 70%;\n    }\n  }\n\n  &.button--success {\n    background-color: var(--six-color-success-500);\n    border-color: var(--six-color-success-500);\n    color: var(--six-color-web-rock-900);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-success-600);\n      border-color: var(--six-color-success-600);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--six-color-success-500);\n      border-color: var(--six-color-web-rock-400);\n      box-shadow: var(--six-button-focus-shadow);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-success-500);\n      border-color: var(--six-color-success-500);\n      opacity: 70%;\n    }\n  }\n\n  &.button--action {\n    background-color: var(--six-color-action-500);\n    border-color: var(--six-color-action-500);\n    color: var(--six-color-white);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-action-600);\n      border-color: var(--six-color-action-600);\n    }\n\n    &:focus:not(.button--disabled) {\n      background-color: var(--six-color-action-500);\n      border-color: var(--six-color-web-rock-400);\n      box-shadow: var(--six-button-focus-shadow);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-action-500);\n      border-color: var(--six-color-action-500);\n      opacity: 70%;\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--small {\n  font-size: var(--six-button-font-size-small);\n  height: var(--six-height-small);\n  line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n}\n\n.button--medium {\n  font-size: var(--six-button-font-size-medium);\n  height: var(--six-height-medium);\n  line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n}\n\n.button--large {\n  font-size: var(--six-button-font-size-large);\n  height: var(--six-height-large);\n  line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--pill {\n  &.button--small {\n    border-radius: var(--six-height-small);\n  }\n\n  &.button--medium {\n    border-radius: var(--six-height-medium);\n  }\n\n  &.button--large {\n    border-radius: var(--six-height-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Circle modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--circle {\n  padding-left: 0;\n  padding-right: 0;\n  font-size: revert;\n\n  &.button--small {\n    width: var(--six-height-small);\n    border-radius: 50%;\n  }\n\n  &.button--medium {\n    width: var(--six-height-medium);\n    border-radius: 50%;\n  }\n\n  &.button--large {\n    width: var(--six-height-large);\n    border-radius: 50%;\n  }\n\n  .button__prefix,\n  .button__suffix,\n  .button__caret {\n    display: none;\n\n    svg {\n      color: var(--six-color-web-rock-900);\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Caret modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--caret {\n  .button__suffix {\n    display: none;\n  }\n\n  .button__caret {\n    display: flex;\n    align-items: center;\n\n    svg {\n      color: var(--six-color-web-rock-900);\n      width: 1em;\n      height: 1em;\n    }\n  }\n}\n\n.button--primary,\n.button--action,\n.button--danger {\n  .button__caret {\n    svg {\n      color: var(--six-color-white);\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Loading modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--loading {\n  position: relative;\n  cursor: wait;\n\n  .button__prefix,\n  .button__label,\n  .button__suffix,\n  .button__caret {\n    visibility: hidden;\n  }\n\n  six-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Badges\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button ::slotted(six-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translateY(-50%) translateX(50%);\n  pointer-events: none;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Button spacing\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--has-label {\n  &.button--small .button__label {\n    padding: 0 var(--six-spacing-small);\n  }\n\n  &.button--medium .button__label {\n    padding: 0 var(--six-spacing-medium);\n  }\n\n  &.button--large .button__label {\n    padding: 0 var(--six-spacing-large);\n  }\n}\n\n.button--has-prefix {\n  &.button--small {\n    padding-left: var(--six-spacing-x-small);\n\n    .button__label {\n      padding-left: var(--six-spacing-x-small);\n    }\n  }\n\n  &.button--medium {\n    padding-left: var(--six-spacing-small);\n\n    .button__label {\n      padding-left: var(--six-spacing-small);\n    }\n  }\n\n  &.button--large {\n    padding-left: var(--six-spacing-small);\n\n    .button__label {\n      padding-left: var(--six-spacing-small);\n    }\n  }\n}\n\n.button--has-suffix,\n.button--caret {\n  &.button--small {\n    padding-right: var(--six-spacing-x-small);\n\n    .button__label {\n      padding-right: var(--six-spacing-x-small);\n    }\n  }\n\n  &.button--medium {\n    padding-right: var(--six-spacing-small);\n\n    .button__label {\n      padding-right: var(--six-spacing-small);\n    }\n  }\n\n  &.button--large {\n    padding-right: var(--six-spacing-small);\n\n    .button__label {\n      padding-right: var(--six-spacing-small);\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { submitForm } from '../../utils/form';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The button's label.\n * @slot prefix - Used to prepend an icon or similar element to the button.\n * @slot suffix - Used to append an icon or similar element to the button.\n *\n * @part base - The component's base wrapper.\n * @part prefix - The prefix container.\n * @part label - The button's label.\n * @part suffix - The suffix container.\n * @part caret - The button's caret.\n */\n\n@Component({\n  tag: 'six-button',\n  styleUrl: 'six-button.scss',\n  shadow: true,\n})\nexport class SixButton {\n  private nativeButton?: HTMLButtonElement | HTMLAnchorElement;\n\n  @Element() host!: HTMLSixButtonElement;\n\n  @State() hasFocus = false;\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasSuffix = false;\n\n  /** The button's type. */\n  @Prop({ reflect: true }) type: 'secondary' | 'primary' | 'link' | 'success' | 'warning' | 'danger' | 'action' =\n    'primary';\n\n  /** The button's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */\n  @Prop() caret = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to draw the button in a loading state. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Set to true to draw a pill-style button with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Set to true to draw a circle button. */\n  @Prop({ reflect: true }) circle = false;\n\n  /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n  @Prop({ reflect: true }) submit = false;\n\n  /** Indicates if activating the button should reset the form. */\n  @Prop({ reflect: true }) reset = false;\n\n  /** An optional name for the button. Ignored when `href` is set. */\n  @Prop() name = '';\n\n  /** An optional value for the button. Ignored when `href` is set. */\n  @Prop() value = '';\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @Prop() download?: string;\n\n  /** Emitted when the button loses focus. */\n  @Event({ eventName: 'six-button-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the button gains focus. */\n  @Event({ eventName: 'six-button-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeButton?.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.nativeButton?.blur();\n  }\n\n  private handleSlotChange = () => {\n    this.hasLabel = hasSlot(this.host);\n    this.hasPrefix = hasSlot(this.host, 'prefix');\n    this.hasSuffix = hasSlot(this.host, 'suffix');\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    if (this.submit) {\n      event.preventDefault();\n      submitForm(this.host);\n    }\n  };\n\n  render() {\n    const isLink = this.href != null;\n    const isButton = !isLink;\n    const Button = isLink ? 'a' : 'button';\n\n    return (\n      <div onClick={this.handleClick} class={{ 'button-wrapper--disabled': this.disabled }}>\n        <Button\n          ref={(el) => (this.nativeButton = el)}\n          part=\"base\"\n          class={{\n            button: true,\n\n            // Types\n            'button--secondary': this.type === 'secondary',\n            'button--primary': this.type === 'primary',\n            'button--link': this.type === 'link',\n            'button--success': this.type === 'success',\n            'button--warning': this.type === 'warning',\n            'button--danger': this.type === 'danger',\n            'button--action': this.type === 'action',\n\n            // Sizes\n            'button--small': this.size === 'small',\n            'button--medium': this.size === 'medium',\n            'button--large': this.size === 'large',\n\n            // Modifiers\n            'button--caret': this.caret,\n            'button--circle': this.circle,\n            'button--disabled': this.disabled,\n            'button--focused': this.hasFocus,\n            'button--loading': this.loading,\n            'button--pill': this.pill,\n            'button--has-label': this.hasLabel,\n            'button--has-prefix': this.hasPrefix,\n            'button--has-suffix': this.hasSuffix,\n          }}\n          disabled={isButton ? this.disabled : undefined}\n          type={isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined}\n          name={isButton ? this.name : undefined}\n          value={isButton ? this.value : undefined}\n          href={isLink ? this.href : undefined}\n          target={isLink && this.target != null ? this.target : undefined}\n          download={isLink && this.download != null ? this.download : undefined}\n          rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          onClick={this.handleClick}\n          data-testid=\"button\"\n        >\n          <span part=\"prefix\" class=\"button__prefix\">\n            <slot onSlotchange={this.handleSlotChange} name=\"prefix\" />\n          </span>\n          <span part=\"label\" class=\"button__label\">\n            <slot onSlotchange={this.handleSlotChange} />\n          </span>\n          <span part=\"suffix\" class=\"button__suffix\">\n            <slot onSlotchange={this.handleSlotChange} name=\"suffix\" />\n          </span>\n          {this.caret && (\n            <span part=\"caret\" class=\"button__caret\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <polyline points=\"6 9 12 15 18 9\" />\n              </svg>\n            </span>\n          )}\n\n          {this.loading && <six-spinner />}\n        </Button>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-0108fe92.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as o,h as r,g as t}from"./p-ac4f4d45.js";import{E as s}from"./p-60621dc6.js";const e=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.radio{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.radio__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.radio__icon svg{width:100%;height:100%}.radio__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size);border:solid var(--six-border-width) var(--six-input-border-color);border-radius:50%;background-color:var(--six-input-background-color);color:transparent;transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow}.radio__control input[type=radio]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none}.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover{border-color:var(--six-input-border-color-hover)}.radio--checked .radio__control{color:var(--six-selection-control-color);border-color:var(--six-selection-control-color)}.radio.radio--checked:not(.radio--disabled) .radio__control:hover{color:var(--six-input-border-color-focus);border-color:var(--six-input-border-color-focus)}.radio--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.radio--disabled .radio__control{border-color:var(--six-input-border-color-disabled)}.radio--disabled.radio--checked .radio__control{color:var(--six-selection-control-color-disabled)}.radio__label{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}";let a=0;const l=class{constructor(r){i(this,r);this.sixBlur=o(this,"six-radio-blur",7);this.sixChange=o(this,"six-radio-change",7);this.sixFocus=o(this,"six-radio-focus",7);this.inputId=`radio-${++a}`;this.labelId=`radio-label-${a}`;this.eventListeners=new s;this.defaultState=false;this.handleClick=()=>{if(this.nativeInput!=null){this.checked=this.nativeInput.checked}};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleKeyDown=i=>{if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(i.key)){const o=this.getAllRadios().filter((i=>!i.disabled));const r=["ArrowUp","ArrowLeft"].includes(i.key)?-1:1;let t=o.indexOf(this.host)+r;if(t<0)t=o.length-1;if(t>o.length-1)t=0;this.getAllRadios().map((i=>i.checked=false));o[t].setFocus();o[t].checked=true;i.preventDefault()}};this.handleMouseDown=i=>{var o;i.preventDefault();(o=this.nativeInput)===null||o===void 0?void 0:o.focus()};this.hasFocus=false;this.name="";this.value="on";this.disabled=false;this.checked=false;this.invalid=false}handleCheckedChange(){if(this.checked){this.getSiblingRadios().map((i=>i.checked=false))}if(this.nativeInput!=null){this.nativeInput.checked=this.checked;this.sixChange.emit()}}handleNameChange(i){if(this.nativeInput!=null){this.nativeInput.name=i}}connectedCallback(){this.eventListeners.forward("six-radio-change","change",this.host);this.eventListeners.forward("six-radio-blur","blur",this.host);this.eventListeners.forward("six-radio-focus","focus",this.host)}componentWillLoad(){this.defaultState=this.checked}disconnectedCallback(){this.eventListeners.removeAll()}async setFocus(i){var o;(o=this.nativeInput)===null||o===void 0?void 0:o.focus(i)}async removeFocus(){var i;(i=this.nativeInput)===null||i===void 0?void 0:i.blur()}async reset(){this.checked=this.defaultState}getAllRadios(){const i=this.host.closest("six-form, form")||document.body;if(this.name==="")return[];return[...i.querySelectorAll("six-radio")].filter((i=>i.name===this.name))}getSiblingRadios(){return this.getAllRadios().filter((i=>i!==this.host))}render(){return r("label",{part:"base",class:{radio:true,"radio--checked":this.checked,"radio--disabled":this.disabled,"radio--focused":this.hasFocus},htmlFor:this.inputId,onKeyDown:this.handleKeyDown,onMouseDown:this.handleMouseDown},r("span",{part:"control",class:"radio__control"},r("span",{part:"checked-icon",class:"radio__icon"},r("svg",{viewBox:"0 0 16 16"},r("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},r("g",{fill:"currentColor"},r("circle",{cx:"8",cy:"8",r:"5"}))))),r("input",{ref:i=>this.nativeInput=i,id:this.inputId,type:"radio",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,role:"radio","aria-checked":this.checked?"true":"false","aria-labelledby":this.labelId,onClick:this.handleClick,onBlur:this.handleBlur,onFocus:this.handleFocus})),r("span",{part:"label",id:this.labelId,class:"radio__label"},r("slot",null)))}get host(){return t(this)}static get watchers(){return{checked:["handleCheckedChange"],name:["handleNameChange"]}}};l.style=e;export{l as six_radio};
+//# sourceMappingURL=p-0108fe92.entry.js.map

package/dist/ui-library/p-0108fe92.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixRadioCss","id","SixRadio","this","inputId","labelId","eventListeners","EventListeners","defaultState","handleClick","nativeInput","checked","handleBlur","hasFocus","sixBlur","emit","handleFocus","sixFocus","handleKeyDown","event","includes","key","radios","getAllRadios","filter","radio","disabled","incr","index","indexOf","host","length","map","setFocus","preventDefault","handleMouseDown","_a","focus","handleCheckedChange","getSiblingRadios","sixChange","handleNameChange","name","connectedCallback","forward","componentWillLoad","disconnectedCallback","removeAll","async","options","blur","form","closest","document","body","querySelectorAll","render","h","part","class","htmlFor","onKeyDown","onMouseDown","viewBox","stroke","fill","cx","cy","r","ref","el","type","value","role","onClick","onBlur","onFocus"],"sources":["./src/components/six-radio/six-radio.scss?tag=six-radio&encapsulation=shadow","./src/components/six-radio/six-radio.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.radio {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-input-font-size-medium);\n  font-weight: var(--six-input-font-weight);\n  color: var(--six-input-color);\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.radio__icon {\n  display: inline-flex;\n  width: var(--six-selection-control-toggle-size);\n  height: var(--six-selection-control-toggle-size);\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n}\n\n.radio__control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--six-selection-control-toggle-size);\n  height: var(--six-selection-control-toggle-size);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: 50%;\n  background-color: var(--six-input-background-color);\n  color: transparent;\n  transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n    var(--six-transition-fast) color, var(--six-transition-fast) box-shadow;\n\n  input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n}\n\n// Hover\n.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n  border-color: var(--six-input-border-color-hover);\n}\n\n// Checked\n.radio--checked .radio__control {\n  color: var(--six-selection-control-color);\n  border-color: var(--six-selection-control-color);\n}\n\n// Checked + hover\n.radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n  color: var(--six-input-border-color-focus);\n  border-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.radio--disabled {\n  cursor: not-allowed;\n  color: var(--six-input-color-disabled);\n\n  .radio__control {\n    border-color: var(--six-input-border-color-disabled);\n  }\n\n  &.radio--checked .radio__control {\n    color: var(--six-selection-control-color-disabled);\n  }\n}\n\n.radio__label {\n  line-height: var(--six-selection-control-toggle-size);\n  margin-left: 0.5em;\n  user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The radio's label.\n *\n * @part base - The component's base wrapper.\n * @part control - The radio control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part label - The radio label.\n */\n\n@Component({\n  tag: 'six-radio',\n  styleUrl: 'six-radio.scss',\n  shadow: true,\n})\nexport class SixRadio {\n  private inputId = `radio-${++id}`;\n  private labelId = `radio-label-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixRadioElement;\n\n  @State() hasFocus = false;\n\n  /** The radio's name attribute. */\n  @Prop() name = '';\n\n  /** The radio's value attribute. */\n  @Prop({ reflect: true }) value = 'on';\n\n  /** Set to true to disable the radio. */\n  @Prop() disabled = false;\n\n  /** Set to true to draw the radio in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  @Watch('checked')\n  handleCheckedChange() {\n    if (this.checked) {\n      this.getSiblingRadios().map((radio) => (radio.checked = false));\n    }\n    if (this.nativeInput != null) {\n      this.nativeInput.checked = this.checked;\n      this.sixChange.emit();\n    }\n  }\n\n  @Watch('name')\n  handleNameChange(name: string) {\n    if (this.nativeInput != null) {\n      this.nativeInput.name = name;\n    }\n  }\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-radio-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-radio-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-radio-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  /** default state whether the radio button should be checked or not when resetting */\n  private defaultState = false;\n\n  connectedCallback() {\n    this.eventListeners.forward('six-radio-change', 'change', this.host);\n    this.eventListeners.forward('six-radio-blur', 'blur', this.host);\n    this.eventListeners.forward('six-radio-focus', 'focus', this.host);\n  }\n\n  componentWillLoad() {\n    this.defaultState = this.checked;\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the radio. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the radio. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.checked = this.defaultState;\n  }\n\n  private getAllRadios() {\n    const form = this.host.closest('six-form, form') || document.body;\n\n    if (this.name === '') return [];\n\n    return [...form.querySelectorAll('six-radio')].filter(\n      (radio: HTMLSixRadioElement) => radio.name === this.name\n    ) as HTMLSixRadioElement[];\n  }\n\n  private getSiblingRadios() {\n    return this.getAllRadios().filter((radio) => radio !== this.host) as HTMLSixRadioElement[];\n  }\n\n  private handleClick = () => {\n    if (this.nativeInput != null) {\n      this.checked = this.nativeInput.checked;\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n      const radios = this.getAllRadios().filter((radio) => !radio.disabled);\n      const incr = ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;\n      let index = radios.indexOf(this.host) + incr;\n      if (index < 0) index = radios.length - 1;\n      if (index > radios.length - 1) index = 0;\n\n      this.getAllRadios().map((radio) => (radio.checked = false));\n      radios[index].setFocus();\n      radios[index].checked = true;\n\n      event.preventDefault();\n    }\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.nativeInput?.focus();\n  };\n\n  render() {\n    return (\n      <label\n        part=\"base\"\n        class={{\n          radio: true,\n          'radio--checked': this.checked,\n          'radio--disabled': this.disabled,\n          'radio--focused': this.hasFocus,\n        }}\n        htmlFor={this.inputId}\n        onKeyDown={this.handleKeyDown}\n        onMouseDown={this.handleMouseDown}\n      >\n        <span part=\"control\" class=\"radio__control\">\n          <span part=\"checked-icon\" class=\"radio__icon\">\n            <svg viewBox=\"0 0 16 16\">\n              <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                <g fill=\"currentColor\">\n                  <circle cx=\"8\" cy=\"8\" r=\"5\"></circle>\n                </g>\n              </g>\n            </svg>\n          </span>\n\n          <input\n            ref={(el) => (this.nativeInput = el)}\n            id={this.inputId}\n            type=\"radio\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            disabled={this.disabled}\n            role=\"radio\"\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-labelledby={this.labelId}\n            onClick={this.handleClick}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n          />\n        </span>\n\n        <span part=\"label\" id={this.labelId} class=\"radio__label\">\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-03a145f5.entry.js

@@ -0,0 +1,2 @@
+import{r as s,c as i,h as t}from"./p-ac4f4d45.js";import{D as e,a as h}from"./p-8cf72af6.js";import{E as a}from"./p-60621dc6.js";const o=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.search-box{z-index:var(--six-z-index-search-field)}.search-box__icon{cursor:pointer}";const r=class{constructor(t){s(this,t);this.searchFieldChange=i(this,"six-search-field-change",7);this.eventListeners=new a;this.handleInputChange=()=>{if(this.inputElement!=null){this.searchFieldChange.emit({value:this.inputElement.value})}};this.placeholder=undefined;this.debounce=e;this.disabled=false;this.value="";this.clearable=false}handleValueChange(){if(this.inputElement!=null){this.inputElement.value=this.value}}componentDidLoad(){if(this.inputElement==null)return;this.eventListeners.add(this.inputElement,"six-input-input",h(this.handleInputChange,this.debounce));this.eventListeners.add(this.inputElement,"keydown",(s=>{const i=s;if(i.key==="Enter"){this.handleInputChange()}}))}disconnectedCallback(){this.eventListeners.removeAll()}render(){return t("div",{class:"search-box"},t("six-input",{ref:s=>this.inputElement=s,placeholder:this.placeholder,value:this.value,disabled:this.disabled,clearable:this.clearable},t("six-icon",{class:"search-box__icon",slot:"prefix",size:"small",onClick:this.handleInputChange},"search")),t("slot",null))}static get watchers(){return{value:["handleValueChange"]}}};r.style=o;export{r as six_search_field};
+//# sourceMappingURL=p-03a145f5.entry.js.map

package/dist/ui-library/p-03a145f5.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixSearchFieldCss","SixSearchField","this","eventListeners","EventListeners","handleInputChange","inputElement","searchFieldChange","emit","value","DEFAULT_DEBOUNCE_FAST","handleValueChange","componentDidLoad","add","debounce","event","keyboardEvent","key","disconnectedCallback","removeAll","render","h","class","ref","el","placeholder","disabled","clearable","slot","size","onClick"],"sources":["./src/components/six-search-field/six-search-field.scss?tag=six-search-field&encapsulation=shadow","./src/components/six-search-field/six-search-field.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.search-box {\n  z-index: var(--six-z-index-search-field);\n\n  &__icon {\n    cursor: pointer;\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\nexport interface SixSearchFieldChangePayload {\n  value: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the results below the search component.\n */\n\n@Component({\n  tag: 'six-search-field',\n  styleUrl: 'six-search-field.scss',\n  shadow: true,\n})\nexport class SixSearchField {\n  /** The input's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Debounce time in milliseconds, default is 300 ms */\n  @Prop({ reflect: true }) debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The input's value attribute. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Emitted when a search is triggered */\n  @Event({ eventName: 'six-search-field-change' }) searchFieldChange!: EventEmitter<SixSearchFieldChangePayload>;\n\n  private inputElement?: HTMLSixInputElement;\n\n  private eventListeners = new EventListeners();\n\n  private handleInputChange = () => {\n    if (this.inputElement != null) {\n      this.searchFieldChange.emit({ value: this.inputElement.value });\n    }\n  };\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.inputElement != null) {\n      this.inputElement.value = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.inputElement == null) return;\n\n    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n    this.eventListeners.add(this.inputElement, 'keydown', (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      if (keyboardEvent.key === 'Enter') {\n        // emit immediately\n        this.handleInputChange();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <div class=\"search-box\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          placeholder={this.placeholder}\n          value={this.value}\n          disabled={this.disabled}\n          clearable={this.clearable}\n        >\n          <six-icon class=\"search-box__icon\" slot=\"prefix\" size=\"small\" onClick={this.handleInputChange}>\n            search\n          </six-icon>\n        </six-input>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"mappings":"iIAAA,MAAMA,EAAoB,kN,MCoBbC,EAAc,M,oFAqBjBC,KAAAC,eAAiB,IAAIC,EAErBF,KAAAG,kBAAoB,KAC1B,GAAIH,KAAKI,cAAgB,KAAM,CAC7BJ,KAAKK,kBAAkBC,KAAK,CAAEC,MAAOP,KAAKI,aAAaG,O,4CApBvBC,E,cAGA,M,WAGH,G,eAGb,K,CAgBpBC,oBACE,GAAIT,KAAKI,cAAgB,KAAM,CAC7BJ,KAAKI,aAAaG,MAAQP,KAAKO,K,EAInCG,mBACE,GAAIV,KAAKI,cAAgB,KAAM,OAE/BJ,KAAKC,eAAeU,IAAIX,KAAKI,aAAc,kBAAmBQ,EAASZ,KAAKG,kBAAmBH,KAAKY,WACpGZ,KAAKC,eAAeU,IAAIX,KAAKI,aAAc,WAAYS,IACrD,MAAMC,EAAgBD,EACtB,GAAIC,EAAcC,MAAQ,QAAS,CAEjCf,KAAKG,mB,KAKXa,uBACEhB,KAAKC,eAAegB,W,CAGtBC,SACE,OACEC,EAAA,OAAKC,MAAM,cACTD,EAAA,aACEE,IAAMC,GAAQtB,KAAKI,aAAekB,EAClCC,YAAavB,KAAKuB,YAClBhB,MAAOP,KAAKO,MACZiB,SAAUxB,KAAKwB,SACfC,UAAWzB,KAAKyB,WAEhBN,EAAA,YAAUC,MAAM,mBAAmBM,KAAK,SAASC,KAAK,QAAQC,QAAS5B,KAAKG,mBAAiB,WAI/FgB,EAAA,a"}