@six-group/ui-library 3.0.0-beta.1.8 → 4.0.0-beta.0

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

@@ -133,7 +133,7 @@ export interface ListenOptions {
      */
     passive?: boolean;
 }
-export declare type ListenTargetOptions = 'body' | 'document' | 'window';
+export type ListenTargetOptions = 'body' | 'document' | 'window';
 export interface StateDecorator {
     (): PropertyDecorator;
 }
@@ -214,14 +214,16 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
-export declare type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
-export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
+export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
+export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
  * `setMode()` is used for libraries which provide multiple "modes" for styles.
  */
 export declare const setMode: (handler: ResolutionHandler) => void;
 /**
- * getMode
+ * `getMode()` is used for libraries which provide multiple "modes" for styles.
+ * @param ref a reference to the node to get styles for
+ * @returns the current mode or undefined, if not found
  */
 export declare function getMode<T = string | undefined>(ref: any): T;
 export declare function setPlatformHelpers(helpers: {
@@ -234,6 +236,9 @@ export declare function setPlatformHelpers(helpers: {
 /**
  * Get the base path to where the assets can be found. Use `setAssetPath(path)`
  * if the path needs to be customized.
+ * @param path the path to use in calculating the asset path. this value will be
+ * used in conjunction with the base asset path
+ * @returns the base path
  */
 export declare function getAssetPath(path: string): string;
 /**
@@ -246,22 +251,38 @@ export declare function getAssetPath(path: string): string;
  * `setAssetPath(document.currentScript.src)`, or using a bundler's replace plugin to
  * dynamically set the path at build time, such as `setAssetPath(process.env.ASSET_PATH)`.
  * But do note that this configuration depends on how your script is bundled, or lack of
- * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
  * will have to ensure the static assets are copied to its build directory.
+ * @param path the asset path to set
+ * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
 /**
- * getElement
+ * Used to specify a nonce value that corresponds with an application's
+ * [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a `meta` tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) and will result in the same behavior.
+ * @param nonce The value to be used for the nonce attribute.
+ */
+export declare function setNonce(nonce: string): void;
+/**
+ * Retrieve a Stencil element for a given reference
+ * @param ref the ref to get the Stencil element for
+ * @returns a reference to the element
  */
 export declare function getElement(ref: any): HTMLStencilElement;
 /**
  * Schedules a new render of the given instance or element even if no state changed.
  *
- * Notice `forceUpdate()` is not syncronous and might perform the DOM render in the next frame.
+ * Notice `forceUpdate()` is not synchronous and might perform the DOM render in the next frame.
+ *
+ * @param ref the node/element to force the re-render of
  */
 export declare function forceUpdate(ref: any): void;
 /**
  * getRenderingRef
+ * @returns the rendering ref
  */
 export declare function getRenderingRef(): any;
 export interface HTMLStencilElement extends HTMLElement {
@@ -272,6 +293,8 @@ export interface HTMLStencilElement extends HTMLElement {
  * in the best moment to perform DOM mutation without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-write to schedule
  */
 export declare function writeTask(task: RafCallback): void;
 /**
@@ -279,6 +302,8 @@ export declare function writeTask(task: RafCallback): void;
  * in the best moment to perform DOM reads without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-read to schedule
  */
 export declare function readTask(task: RafCallback): void;
 /**
@@ -417,13 +442,57 @@ interface HostAttributes {
     ref?: (el: HTMLElement | null) => void;
     [prop: string]: any;
 }
+/**
+ * Utilities for working with functional Stencil components. An object
+ * conforming to this interface is passed by the Stencil runtime as the third
+ * argument to a functional component, allowing component authors to work with
+ * features like children.
+ *
+ * The children of a functional component will be passed as the second
+ * argument, so a functional component which uses these utils to transform its
+ * children might look like the following:
+ *
+ * ```ts
+ * export const AddClass: FunctionalComponent = (_, children, utils) => (
+ *  utils.map(children, child => ({
+ *    ...child,
+ *    vattrs: {
+ *      ...child.vattrs,
+ *      class: `${child.vattrs.class} add-class`
+ *    }
+ *  }))
+ * );
+ * ```
+ *
+ * For more see the Stencil documentation, here:
+ * https://stenciljs.com/docs/functional-components
+ */
 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
+     * this utility to, for instance, perform a side effect for each child.
+     */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
+    /**
+     * Utility for transforming the children of a functional component. Given an
+     * array of children and a callback this will return a list of the results of
+     * passing each child to the supplied callback.
+     */
     map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 export interface FunctionalComponent<T = {}> {
     (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];
 }
+/**
+ * A Child VDOM node
+ *
+ * This has most of the same properties as {@link VNode} but friendlier names
+ * (i.e. `vtag` instead of `$tag$`, `vchildren` instead of `$children$`) in
+ * order to provide a friendlier public interface for users of the
+ * {@link FunctionalUtilities}).
+ */
 export interface ChildNode {
     vtag?: string | number | Function;
     vkey?: string | number;
@@ -470,6 +539,9 @@ export declare function h(sel: any, children: Array<VNode | undefined | null>):
 export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
+/**
+ * A virtual DOM node
+ */
 export interface VNode {
     $flags$: number;
     $tag$: string | number | Function;
@@ -820,8 +892,8 @@ export declare namespace JSXBase {
         accept?: string;
         allowdirs?: boolean;
         alt?: string;
-        autoCapitalize?: any;
-        autocapitalize?: any;
+        autoCapitalize?: string;
+        autocapitalize?: string;
         autoComplete?: string;
         autocomplete?: string;
         autoFocus?: boolean;
@@ -1145,8 +1217,8 @@ export declare namespace JSXBase {
         resource?: string;
         typeof?: string;
         vocab?: string;
-        autoCapitalize?: any;
-        autocapitalize?: any;
+        autoCapitalize?: string;
+        autocapitalize?: string;
         autoCorrect?: string;
         autocorrect?: string;
         autoSave?: string;
@@ -1437,12 +1509,12 @@ export declare namespace JSXBase {
         onCutCapture?: (event: ClipboardEvent) => void;
         onPaste?: (event: ClipboardEvent) => void;
         onPasteCapture?: (event: ClipboardEvent) => void;
-        onCompositionEnd?: (event: CompositionEvent) => void;
-        onCompositionEndCapture?: (event: CompositionEvent) => void;
-        onCompositionStart?: (event: CompositionEvent) => void;
-        onCompositionStartCapture?: (event: CompositionEvent) => void;
-        onCompositionUpdate?: (event: CompositionEvent) => void;
-        onCompositionUpdateCapture?: (event: CompositionEvent) => void;
+        onCompositionend?: (event: CompositionEvent) => void;
+        onCompositionendCapture?: (event: CompositionEvent) => void;
+        onCompositionstart?: (event: CompositionEvent) => void;
+        onCompositionstartCapture?: (event: CompositionEvent) => void;
+        onCompositionupdate?: (event: CompositionEvent) => void;
+        onCompositionupdateCapture?: (event: CompositionEvent) => void;
         onFocus?: (event: FocusEvent) => void;
         onFocusCapture?: (event: FocusEvent) => void;
         onFocusin?: (event: FocusEvent) => void;
@@ -1453,8 +1525,8 @@ export declare namespace JSXBase {
         onBlurCapture?: (event: FocusEvent) => void;
         onChange?: (event: Event) => void;
         onChangeCapture?: (event: Event) => void;
-        onInput?: (event: Event) => void;
-        onInputCapture?: (event: Event) => void;
+        onInput?: (event: InputEvent) => void;
+        onInputCapture?: (event: InputEvent) => void;
         onReset?: (event: Event) => void;
         onResetCapture?: (event: Event) => void;
         onSubmit?: (event: Event) => void;

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

@@ -1,7 +1,7 @@
 export declare function getInnerHTML(slot: HTMLSlotElement): string;
 export declare function getTextContent(slot: HTMLSlotElement): string;
 export declare function hasSlot(el: HTMLElement, name?: string): boolean;
-declare type AvailableSlots<T> = {
+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>;

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

@@ -1,4 +1,4 @@
-export declare type EmptyPayload = undefined;
+export type EmptyPayload = undefined;
 export interface StyleDeclaration {
   [key: string]: string | undefined;
 }

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

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":""}

package/dist/ui-library/p-00507165.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as s,h as e,g as l}from"./p-16b99232.js";const o=".sc-six-file-upload-h{position:relative;box-sizing:border-box}.sc-six-file-upload-h *.sc-six-file-upload,.sc-six-file-upload-h *.sc-six-file-upload:before,.sc-six-file-upload-h *.sc-six-file-upload:after{box-sizing:inherit}.sc-six-file-upload-h{position:static;display:block}.six-file-upload.sc-six-file-upload six-card.sc-six-file-upload{box-shadow:none;padding:0;width:100%}.six-file-upload.sc-six-file-upload six-card.kyc-file-upload__container--compact.sc-six-file-upload{width:inherit}.six-file-upload__label--highlighted.sc-six-file-upload{color:var(--six-color-action-600)}.six-file-upload__container--full.sc-six-file-upload{border:dashed 1px var(--six-color-web-rock-500)}.six-file-upload__label-icon.sc-six-file-upload{margin-right:0.5rem}.six-file-upload__drop-zone.sc-six-file-upload{padding:2rem 0;display:flex;justify-content:center;width:100%;transition:background-color 0.3s}.six-file-upload__drop-zone--compact.sc-six-file-upload{padding:0}.six-file-upload__input.sc-six-file-upload{cursor:pointer;position:absolute;top:0;left:0;width:100%;user-select:none;height:100%;opacity:0;outline:none}.six-file-upload--disabled.sc-six-file-upload .six-file-upload__drop-zone.sc-six-file-upload{background-color:var(--six-color-inactive)}.six-file-upload.sc-six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone.sc-six-file-upload:hover,.six-file-upload__drop-zone--hover.sc-six-file-upload{background-color:var(--six-color-action-light-to-be-defined)}.six-file-upload.sc-six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone.sc-six-file-upload:hover.six-file-upload__drop-zone--compact,.six-file-upload__drop-zone--hover.six-file-upload__drop-zone--compact.sc-six-file-upload{background-color:inherit}.six-file-upload--disabled.sc-six-file-upload .six-file-upload__input.sc-six-file-upload{cursor:not-allowed}";const a=class{constructor(e){i(this,e);this.fileUploadSuccessEvent=s(this,"six-file-upload-success",7);this.fileUploadFailureEvent=s(this,"six-file-upload-failure",7);this.handleFiles=i=>{if(this.disabled){return}if(i.length===0){return}if(!this.multiple&&i.length>1){return this.fileUploadFailureEvent.emit({reason:"Only one file is allowed."})}for(const s of i){if(!s){return}const e=this.accept&&this.accept.replace(/\s/g,"").split(",");if(this.accept&&e.indexOf(s.type)===-1){const s=i.length>1?"One or more files have invalid MIME type.":"File has invalid MIME type.";return this.fileUploadFailureEvent.emit({reason:s})}if(this.maxFileSize&&s.size>this.maxFileSize){const s=i.length>1?"One or more files are too big":"File is too big.";return this.fileUploadFailureEvent.emit({reason:s})}}const s=this.multiple?{files:i}:{file:i.item(0)};this.fileUploadSuccessEvent.emit(s)};this.onChange=()=>{var i;if((i=this.fileInput)===null||i===void 0?void 0:i.files){const i=this.fileInput.files;this.handleFiles(i);this.fileInput.value=""}};this.isOver=false;this.compact=false;this.label=undefined;this.disabled=false;this.accept=undefined;this.multiple=undefined;this.maxFileSize=undefined}dragenterHandler(){if(!this.disabled){this.isOver=true}}dragoverHandler(){if(!this.disabled){this.isOver=true}}dragleaveHandler(){if(!this.disabled){this.isOver=false}}dropHandler({dataTransfer:i}){if(!this.disabled){this.isOver=false;if(i){this.handleFiles(i.files)}}}componentDidLoad(){["dragenter","dragover","dragleave","drop"].forEach((i=>{this.host.addEventListener(i,this.preventDefaults,false);document.body.addEventListener(i,this.preventDefaults,false)}))}disconnectedCallback(){["dragenter","dragover","dragleave","drop"].forEach((i=>{this.host.removeEventListener(i,this.preventDefaults,false);document.body.removeEventListener(i,this.preventDefaults,false)}))}preventDefaults(i){i.preventDefault();i.stopPropagation()}renderLabel(){return this.label||(this.compact?"Upload":e("span",null,"Drop files to upload, or ",e("span",{class:"six-file-upload__label--highlighted"},"browse")))}render(){const i=this.compact?"six-button":"six-card";return e("div",{class:{"six-file-upload":true,"six-file-upload--disabled":this.disabled}},e(i,{class:{"six-file-upload__container--compact":this.compact,"six-file-upload__container--full":!this.compact}},this.compact&&e("span",{slot:"prefix"},e("six-icon",{class:"six-file-upload__label-icon"},"arrow_circle_up")),e("div",{class:{"six-file-upload__drop-zone":true,"six-file-upload__drop-zone--hover":this.isOver,"six-file-upload__drop-zone--compact":this.compact}},e("span",null,this.renderLabel()),e("input",{class:"six-file-upload__input",type:"file",name:"resume",disabled:this.disabled,accept:this.accept,multiple:this.multiple,onChange:this.onChange,ref:i=>this.fileInput=i}))))}get host(){return l(this)}};a.style=o;export{a as six_file_upload};
+//# sourceMappingURL=p-00507165.entry.js.map

package/dist/ui-library/p-00507165.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixFileUploadCss","SixFileUpload","this","handleFiles","files","disabled","length","multiple","fileUploadFailureEvent","emit","reason","file","acceptedTypesList","accept","replace","split","indexOf","type","maxFileSize","size","objectToEmit","item","fileUploadSuccessEvent","onChange","_a","fileInput","value","undefined","dragenterHandler","isOver","dragoverHandler","dragleaveHandler","dropHandler","dataTransfer","componentDidLoad","forEach","eventName","host","addEventListener","preventDefaults","document","body","disconnectedCallback","removeEventListener","e","preventDefault","stopPropagation","renderLabel","label","compact","h","class","render","Container","slot","name","ref","el"],"sources":["./src/components/six-file-upload/six-file-upload.scss?tag=six-file-upload&encapsulation=scoped","./src/components/six-file-upload/six-file-upload.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$over-color: var(--six-color-action-light-to-be-defined);\n$disabled-color: var(--six-color-inactive);\n$transition: 0.3s;\n$margin: 1rem;\n\n:host {\n  position: static;\n  display: block;\n}\n\n.six-file-upload {\n  six-card {\n    box-shadow: none;\n    padding: 0;\n    width: 100%;\n\n    &.kyc-file-upload__container--compact {\n      width: inherit;\n    }\n  }\n\n  &__label {\n    &--highlighted {\n      color: var(--six-color-action-600);\n    }\n  }\n\n  &__container {\n    &--full {\n      border: dashed 1px var(--six-color-web-rock-500);\n    }\n  }\n\n  &__label-icon {\n    margin-right: 0.5rem;\n  }\n\n  &__drop-zone {\n    padding: 2rem 0;\n    display: flex;\n    justify-content: center;\n    width: 100%;\n    transition: background-color $transition;\n\n    &--compact {\n      padding: 0;\n    }\n  }\n\n  &__input {\n    cursor: pointer;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    user-select: none;\n    height: 100%;\n    opacity: 0;\n    outline: none;\n  }\n\n  &--disabled &__drop-zone {\n    background-color: $disabled-color;\n  }\n\n  &:not(.six-file-upload--disabled) &__drop-zone:hover,\n  &__drop-zone--hover {\n    background-color: $over-color;\n\n    &.six-file-upload__drop-zone--compact {\n      background-color: inherit;\n    }\n  }\n\n  &--disabled &__input {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\n\ninterface ISingleFile {\n  file: File;\n}\n\ninterface IMultipleFiles {\n  files: FileList;\n}\n\nexport type SixFileUploadSuccessPayload = ISingleFile | IMultipleFiles;\n\nexport interface SixFileUploadFailurePayload {\n  reason: string;\n}\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n */\n@Component({\n  tag: 'six-file-upload',\n  styleUrl: 'six-file-upload.scss',\n  scoped: true,\n  shadow: false,\n})\nexport class SixFileUpload {\n  @Element() readonly host: HTMLSixFileUploadElement;\n\n  fileInput: HTMLInputElement;\n\n  @State() isOver = false;\n\n  /** Set to true if file control should be small. */\n  @Prop() readonly compact: boolean = false;\n\n  /** Label of the drop area. */\n  @Prop() readonly label: string;\n\n  /** Set when button is disabled. */\n  @Prop() readonly disabled: boolean = false;\n\n  /** Accepted MIME-Types. */\n  @Prop() readonly accept: string;\n\n  /** More than one file allowed. */\n  @Prop() readonly multiple: boolean;\n\n  /** Allowed max file size in bytes. */\n  @Prop() readonly maxFileSize: number | undefined = undefined;\n\n  /** Triggers when a file is added. */\n  @Event({ eventName: 'six-file-upload-success' })\n  readonly fileUploadSuccessEvent: EventEmitter<SixFileUploadSuccessPayload>;\n\n  /** Triggers when an uploaded file doesn't match MIME type or max file size. */\n  @Event({ eventName: 'six-file-upload-failure' })\n  readonly fileUploadFailureEvent: EventEmitter<SixFileUploadFailurePayload>;\n\n  @Listen('dragenter', { capture: false })\n  dragenterHandler() {\n    if (!this.disabled) {\n      this.isOver = true;\n    }\n  }\n\n  @Listen('dragover', { capture: false })\n  dragoverHandler() {\n    if (!this.disabled) {\n      this.isOver = true;\n    }\n  }\n\n  @Listen('dragleave', { capture: false })\n  dragleaveHandler() {\n    if (!this.disabled) {\n      this.isOver = false;\n    }\n  }\n\n  @Listen('drop', { capture: false })\n  dropHandler({ dataTransfer }: DragEvent) {\n    if (!this.disabled) {\n      this.isOver = false;\n      if (dataTransfer) {\n        this.handleFiles(dataTransfer.files);\n      }\n    }\n  }\n\n  handleFiles = (files: FileList) => {\n    if (this.disabled) {\n      return;\n    }\n\n    if (files.length === 0) {\n      return;\n    }\n\n    if (!this.multiple && files.length > 1) {\n      return this.fileUploadFailureEvent.emit({ reason: 'Only one file is allowed.' });\n    }\n\n    for (const file of files) {\n      if (!file) {\n        return;\n      }\n\n      const acceptedTypesList = this.accept && this.accept.replace(/\\s/g, '').split(',');\n\n      if (this.accept && acceptedTypesList.indexOf(file.type) === -1) {\n        const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';\n        return this.fileUploadFailureEvent.emit({ reason });\n      }\n\n      if (this.maxFileSize && file.size > this.maxFileSize) {\n        const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';\n        return this.fileUploadFailureEvent.emit({ reason });\n      }\n    }\n\n    const objectToEmit: SixFileUploadSuccessPayload = this.multiple ? { files } : { file: files.item(0) };\n\n    this.fileUploadSuccessEvent.emit(objectToEmit);\n  };\n\n  componentDidLoad() {\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.host.addEventListener(eventName, this.preventDefaults, false);\n      document.body.addEventListener(eventName, this.preventDefaults, false);\n    });\n  }\n\n  disconnectedCallback() {\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.host.removeEventListener(eventName, this.preventDefaults, false);\n      document.body.removeEventListener(eventName, this.preventDefaults, false);\n    });\n  }\n\n  preventDefaults(e: Event) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  onChange = () => {\n    if (this.fileInput?.files) {\n      const files = this.fileInput.files;\n      this.handleFiles(files);\n      this.fileInput.value = '';\n    }\n  };\n\n  private renderLabel() {\n    return (\n      this.label ||\n      (this.compact ? (\n        'Upload'\n      ) : (\n        <span>\n          Drop files to upload, or <span class=\"six-file-upload__label--highlighted\">browse</span>\n        </span>\n      ))\n    );\n  }\n\n  render() {\n    const Container = this.compact ? 'six-button' : 'six-card';\n\n    return (\n      <div\n        class={{\n          'six-file-upload': true,\n          'six-file-upload--disabled': this.disabled,\n        }}\n      >\n        <Container\n          class={{\n            'six-file-upload__container--compact': this.compact,\n            'six-file-upload__container--full': !this.compact,\n          }}\n        >\n          {this.compact && (\n            <span slot=\"prefix\">\n              <six-icon class=\"six-file-upload__label-icon\">arrow_circle_up</six-icon>\n            </span>\n          )}\n          <div\n            class={{\n              'six-file-upload__drop-zone': true,\n              'six-file-upload__drop-zone--hover': this.isOver,\n              'six-file-upload__drop-zone--compact': this.compact,\n            }}\n          >\n            <span>{this.renderLabel()}</span>\n            <input\n              class=\"six-file-upload__input\"\n              type=\"file\"\n              name=\"resume\"\n              disabled={this.disabled}\n              accept={this.accept}\n              multiple={this.multiple}\n              onChange={this.onChange}\n              ref={(el) => (this.fileInput = el)}\n            />\n          </div>\n        </Container>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-028a2c54.entry.js

@@ -0,0 +1,2 @@
+import{r as i,h as t}from"./p-16b99232.js";const o=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline}.material-icons{vertical-align:middle;font-weight:normal;font-style:normal;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga"}.material-icons-filled{font-family:"Material Icons"}.material-icons-outlined{font-family:"Material Icons Outlined"}.icon--xsmall{font-size:12px}.icon--small{font-size:18px}.icon--medium{font-size:24px}.icon--large{font-size:36px}.icon--xlarge{font-size:48px}.icon--xxlarge{font-size:72px}.icon--xxxlarge{font-size:96px}.icon--inherit{font-size:1.5em}';const e=class{constructor(t){i(this,t);this.size="inherit";this.filled=false}render(){return t("i",{class:{"material-icons":true,"material-icons-outlined":!this.filled,"material-icons-filled":this.filled,"icon--xsmall":this.size==="xSmall","icon--small":this.size==="small","icon--medium":this.size==="medium","icon--large":this.size==="large","icon--xlarge":this.size==="xLarge","icon--xxlarge":this.size==="xxLarge","icon--xxxlarge":this.size==="xxxLarge","icon--inherit":this.size==="inherit"}},t("slot",null))}};e.style=o;export{e as six_icon};
+//# sourceMappingURL=p-028a2c54.entry.js.map

package/dist/ui-library/p-028a2c54.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixIconCss","SixIcon","render","h","class","this","filled","size"],"sources":["./src/components/six-icon/six-icon.scss?tag=six-icon&encapsulation=shadow","./src/components/six-icon/six-icon.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline;\n}\n\n.material-icons {\n  vertical-align: middle;\n  font-weight: normal;\n  font-style: normal;\n  text-transform: none;\n  letter-spacing: normal;\n  word-wrap: normal;\n  white-space: nowrap;\n  direction: ltr;\n\n  /* Support for all WebKit browsers. */\n  -webkit-font-smoothing: antialiased;\n  /* Support for Safari and Chrome. */\n  text-rendering: optimizeLegibility;\n\n  /* Support for Firefox. */\n  -moz-osx-font-smoothing: grayscale;\n\n  /* Support for IE. */\n  font-feature-settings: 'liga';\n}\n\n.material-icons-filled {\n  font-family: 'Material Icons';\n}\n\n.material-icons-outlined {\n  font-family: 'Material Icons Outlined';\n}\n\n.icon {\n  &--xsmall {\n    font-size: 12px;\n  }\n\n  &--small {\n    font-size: 18px;\n  }\n\n  &--medium {\n    font-size: 24px;\n  }\n\n  &--large {\n    font-size: 36px;\n  }\n\n  &--xlarge {\n    font-size: 48px;\n  }\n\n  &--xxlarge {\n    font-size: 72px;\n  }\n\n  &--xxxlarge {\n    font-size: 96px;\n  }\n\n  &--inherit {\n    font-size: 1.5em;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the material icon name.\n */\n\n@Component({\n  tag: 'six-icon',\n  styleUrls: ['six-icon.scss'],\n  shadow: true,\n})\nexport class SixIcon {\n  /** The icon's size. */\n  @Prop({ reflect: true }) size:\n    | 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge' = 'inherit';\n\n  /** If set to true the default material outlined icons are not used. */\n  @Prop() filled = false;\n\n  render() {\n    return (\n      <i\n        class={{\n          'material-icons': true,\n          'material-icons-outlined': !this.filled,\n          'material-icons-filled': this.filled,\n          'icon--xsmall': this.size === 'xSmall',\n          'icon--small': this.size === 'small',\n          'icon--medium': this.size === 'medium',\n          'icon--large': this.size === 'large',\n          'icon--xlarge': this.size === 'xLarge',\n          'icon--xxlarge': this.size === 'xxLarge',\n          'icon--xxxlarge': this.size === 'xxxLarge',\n          'icon--inherit': this.size === 'inherit',\n        }}\n      >\n        <slot></slot>\n      </i>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAa,uwB,MCcNC,EAAO,M,mCAUD,U,YAGA,K,CAEjBC,SACE,OACEC,EAAA,KACEC,MAAO,CACL,iBAAkB,KAClB,2BAA4BC,KAAKC,OACjC,wBAAyBD,KAAKC,OAC9B,eAAgBD,KAAKE,OAAS,SAC9B,cAAeF,KAAKE,OAAS,QAC7B,eAAgBF,KAAKE,OAAS,SAC9B,cAAeF,KAAKE,OAAS,QAC7B,eAAgBF,KAAKE,OAAS,SAC9B,gBAAiBF,KAAKE,OAAS,UAC/B,iBAAkBF,KAAKE,OAAS,WAChC,gBAAiBF,KAAKE,OAAS,YAGjCJ,EAAA,a"}

package/dist/ui-library/p-028a2f77.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s,g as e}from"./p-16b99232.js";const r=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:contents;margin:0}.alert{position:relative;display:flex;align-items:stretch;background-color:var(--six-color-white);border:solid 1px var(--six-color-web-rock-200);border-top-width:3px;border-radius:var(--six-border-radius-medium);box-shadow:var(--box-shadow);font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:1.6;color:var(--six-color-web-rock-700);opacity:0;transform:scale(0.9);transition:var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;margin:inherit}.alert:not(.alert--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--open{opacity:1;transform:none}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large)}.alert__icon ::slotted(*){margin-left:var(--six-spacing-large)}.alert--primary{border-top-color:var(--six-color-web-rock-900)}.alert--primary .alert__icon{color:var(--six-color-web-rock-900)}.alert--success{border-top-color:var(--six-color-success-600)}.alert--success .alert__icon{color:var(--six-color-success-600)}.alert--info{border-top-color:var(--six-color-action-500)}.alert--info .alert__icon{color:var(--six-color-action-500)}.alert--warning{border-top-color:var(--six-color-warning-800)}.alert--warning .alert__icon{color:var(--six-color-warning-800)}.alert--danger{border-top-color:var(--six-color-danger-900)}.alert--danger .alert__icon{color:var(--six-color-danger-900)}.alert__message{flex:1 1 auto;padding:var(--six-spacing-large);overflow:hidden}.alert__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large);padding-right:var(--six-spacing-medium)}";const a=Object.assign(document.createElement("div"),{className:"six-toast-stack"});const o=class{constructor(s){t(this,s);this.sixShow=i(this,"six-alert-show",7);this.sixAfterShow=i(this,"six-alert-after-show",7);this.sixHide=i(this,"six-alert-hide",7);this.sixAfterHide=i(this,"six-alert-after-hide",7);this.isVisible=false;this.open=false;this.closable=false;this.type="primary";this.duration=Infinity}handleOpenChange(){this.open?this.show():this.hide()}handleDurationChange(){this.restartAutoHide()}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this);this.handleMouseMove=this.handleMouseMove.bind(this);this.handleTransitionEnd=this.handleTransitionEnd.bind(this)}componentWillLoad(){if(this.open){this.show()}}async show(){if(this.isVisible){return}const t=this.sixShow.emit();if(t.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;if(this.duration<Infinity){this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}}async hide(){if(!this.isVisible){return}const t=this.sixHide.emit();if(t.defaultPrevented){this.open=true;return}clearTimeout(this.autoHideTimeout);this.isVisible=false;this.open=false}async toast(){return new Promise((t=>{if(!a.parentElement){document.body.append(a)}a.append(this.host);requestAnimationFrame((()=>this.show()));this.host.addEventListener("six-alert-after-hide",(()=>{this.host.remove();t();if(a.querySelector("six-alert")===null){a.remove()}}),{once:true})}))}handleCloseClick(){this.hide()}handleMouseMove(){this.restartAutoHide()}handleTransitionEnd(t){const i=t.target;if(t.propertyName==="opacity"&&i.classList.contains("alert")){this.isVisible=this.open;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}}restartAutoHide(){clearTimeout(this.autoHideTimeout);if(this.open&&this.duration<Infinity){this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration)}}render(){return s("div",{ref:t=>this.alert=t,part:"base",class:{alert:true,"alert--open":this.open,"alert--visible":this.isVisible,"alert--closable":this.closable,"alert--primary":this.type==="primary","alert--success":this.type==="success","alert--info":this.type==="info","alert--warning":this.type==="warning","alert--danger":this.type==="danger"},role:"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":this.open?"false":"true",onMouseMove:this.handleMouseMove,onTransitionEnd:this.handleTransitionEnd},s("span",{part:"icon",class:"alert__icon"},s("slot",{name:"icon"})),s("span",{part:"message",class:"alert__message"},s("slot",null)),this.closable&&s("span",{class:"alert__close"},s("six-icon-button",{name:"clear",exportparts:"base:close-button",onClick:this.handleCloseClick})))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"],duration:["handleDurationChange"]}}};o.style=r;export{o as six_alert};
+//# sourceMappingURL=p-028a2f77.entry.js.map

package/dist/ui-library/p-028a2f77.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixAlertCss","toastStack","Object","assign","document","createElement","className","SixAlert","Infinity","handleOpenChange","this","open","show","hide","handleDurationChange","restartAutoHide","connectedCallback","handleCloseClick","bind","handleMouseMove","handleTransitionEnd","componentWillLoad","async","isVisible","sixShow","emit","defaultPrevented","duration","autoHideTimeout","setTimeout","sixHide","clearTimeout","Promise","resolve","parentElement","body","append","host","requestAnimationFrame","addEventListener","remove","querySelector","once","event","target","propertyName","classList","contains","sixAfterShow","sixAfterHide","render","h","ref","el","alert","part","class","closable","type","role","onMouseMove","onTransitionEnd","name","exportparts","onClick"],"sources":["./src/components/six-alert/six-alert.scss?tag=six-alert&encapsulation=shadow","./src/components/six-alert/six-alert.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --box-shadow: The alert's box shadow.\n */\n:host {\n  display: contents;\n\n  // For better DX, we'll reset the margin here so the base part can inherit it\n  margin: 0;\n}\n\n.alert {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  background-color: var(--six-color-white);\n  border: solid 1px var(--six-color-web-rock-200);\n  border-top-width: 3px;\n  border-radius: var(--six-border-radius-medium);\n  box-shadow: var(--box-shadow);\n  font-family: var(--six-font-sans);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-normal);\n  line-height: 1.6;\n  color: var(--six-color-web-rock-700);\n  opacity: 0;\n  transform: scale(0.9);\n  transition: var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;\n  margin: inherit;\n\n  &:not(.alert--visible) {\n    @include hidden;\n  }\n}\n\n.alert--open {\n  opacity: 1;\n  transform: none;\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-large);\n\n  ::slotted(*) {\n    margin-left: var(--six-spacing-large);\n  }\n}\n\n.alert--primary {\n  border-top-color: var(--six-color-web-rock-900);\n\n  .alert__icon {\n    color: var(--six-color-web-rock-900);\n  }\n}\n\n.alert--success {\n  border-top-color: var(--six-color-success-600);\n\n  .alert__icon {\n    color: var(--six-color-success-600);\n  }\n}\n\n.alert--info {\n  border-top-color: var(--six-color-action-500);\n\n  .alert__icon {\n    color: var(--six-color-action-500);\n  }\n}\n\n.alert--warning {\n  border-top-color: var(--six-color-warning-800);\n\n  .alert__icon {\n    color: var(--six-color-warning-800);\n  }\n}\n\n.alert--danger {\n  border-top-color: var(--six-color-danger-900);\n\n  .alert__icon {\n    color: var(--six-color-danger-900);\n  }\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-large);\n  overflow: hidden;\n}\n\n.alert__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-large);\n  padding-right: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nconst toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });\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 alert's content.\n * @slot icon - An icon to show in the alert.\n *\n * @part base - The component's base wrapper.\n * @part icon - The container that wraps the alert icon.\n * @part message - The alert message.\n * @part close-button - The close button.\n */\n\n@Component({\n  tag: 'six-alert',\n  styleUrl: 'six-alert.scss',\n  shadow: true,\n})\nexport class SixAlert {\n  alert: HTMLElement;\n  autoHideTimeout: any;\n\n  @Element() host: HTMLSixAlertElement;\n\n  @State() isVisible = false;\n\n  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Set to true to make the alert closable. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** The type of alert. */\n  @Prop({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' = 'primary';\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n   * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n   */\n  @Prop() duration = Infinity;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  @Watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-alert-show' }) sixShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the alert opens and all transitions are complete. */\n  @Event({ eventName: 'six-alert-after-show' }) sixAfterShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-alert-hide' }) sixHide: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the alert closes and all transitions are complete. */\n  @Event({ eventName: 'six-alert-after-hide' }) sixAfterHide: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n    this.handleMouseMove = this.handleMouseMove.bind(this);\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n  }\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  /** Shows the alert. */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n\n    if (this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  /** Hides the alert */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    clearTimeout(this.autoHideTimeout);\n    this.isVisible = false;\n    this.open = false;\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  @Method()\n  async toast() {\n    return new Promise<void>((resolve) => {\n      if (!toastStack.parentElement) {\n        document.body.append(toastStack);\n      }\n\n      toastStack.append(this.host);\n      requestAnimationFrame(() => this.show());\n\n      this.host.addEventListener(\n        'six-alert-after-hide',\n        () => {\n          this.host.remove();\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('six-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  handleCloseClick() {\n    this.hide();\n  }\n\n  handleMouseMove() {\n    this.restartAutoHide();\n  }\n\n  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.propertyName === 'opacity' && target.classList.contains('alert')) {\n      this.isVisible = this.open;\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n    }\n  }\n\n  restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.alert = el)}\n        part=\"base\"\n        class={{\n          alert: true,\n          'alert--open': this.open,\n          'alert--visible': this.isVisible,\n          'alert--closable': this.closable,\n          'alert--primary': this.type === 'primary',\n          'alert--success': this.type === 'success',\n          'alert--info': this.type === 'info',\n          'alert--warning': this.type === 'warning',\n          'alert--danger': this.type === 'danger',\n        }}\n        role=\"alert\"\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        aria-hidden={this.open ? 'false' : 'true'}\n        onMouseMove={this.handleMouseMove}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <span part=\"icon\" class=\"alert__icon\">\n          <slot name=\"icon\" />\n        </span>\n\n        <span part=\"message\" class=\"alert__message\">\n          <slot />\n        </span>\n\n        {this.closable && (\n          <span class=\"alert__close\">\n            <six-icon-button\n              name=\"clear\"\n              exportparts=\"base:close-button\"\n              onClick={this.handleCloseClick}\n            ></six-icon-button>\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAc,w1DCGpB,MAAMC,EAAaC,OAAOC,OAAOC,SAASC,cAAc,OAAQ,CAAEC,UAAW,oB,MAsBhEC,EAAQ,M,8NAME,M,UAG0B,M,cAGX,M,UAGmD,U,cAMpEC,Q,CAGnBC,mBACEC,KAAKC,KAAOD,KAAKE,OAASF,KAAKG,M,CAIjCC,uBACEJ,KAAKK,iB,CAePC,oBACEN,KAAKO,iBAAmBP,KAAKO,iBAAiBC,KAAKR,MACnDA,KAAKS,gBAAkBT,KAAKS,gBAAgBD,KAAKR,MACjDA,KAAKU,oBAAsBV,KAAKU,oBAAoBF,KAAKR,K,CAG3DW,oBAEE,GAAIX,KAAKC,KAAM,CACbD,KAAKE,M,EAMTU,aAEE,GAAIZ,KAAKa,UAAW,CAClB,M,CAGF,MAAMC,EAAUd,KAAKc,QAAQC,OAC7B,GAAID,EAAQE,iBAAkB,CAC5BhB,KAAKC,KAAO,MACZ,M,CAGFD,KAAKa,UAAY,KACjBb,KAAKC,KAAO,KAEZ,GAAID,KAAKiB,SAAWnB,SAAU,CAC5BE,KAAKkB,gBAAkBC,YAAW,IAAMnB,KAAKG,QAAQH,KAAKiB,S,EAM9DL,aAEE,IAAKZ,KAAKa,UAAW,CACnB,M,CAGF,MAAMO,EAAUpB,KAAKoB,QAAQL,OAC7B,GAAIK,EAAQJ,iBAAkB,CAC5BhB,KAAKC,KAAO,KACZ,M,CAGFoB,aAAarB,KAAKkB,iBAClBlB,KAAKa,UAAY,MACjBb,KAAKC,KAAO,K,CASdW,cACE,OAAO,IAAIU,SAAeC,IACxB,IAAKhC,EAAWiC,cAAe,CAC7B9B,SAAS+B,KAAKC,OAAOnC,E,CAGvBA,EAAWmC,OAAO1B,KAAK2B,MACvBC,uBAAsB,IAAM5B,KAAKE,SAEjCF,KAAK2B,KAAKE,iBACR,wBACA,KACE7B,KAAK2B,KAAKG,SACVP,IAGA,GAAIhC,EAAWwC,cAAc,eAAiB,KAAM,CAClDxC,EAAWuC,Q,IAGf,CAAEE,KAAM,MACT,G,CAILzB,mBACEP,KAAKG,M,CAGPM,kBACET,KAAKK,iB,CAGPK,oBAAoBuB,GAClB,MAAMC,EAASD,EAAMC,OAGrB,GAAID,EAAME,eAAiB,WAAaD,EAAOE,UAAUC,SAAS,SAAU,CAC1ErC,KAAKa,UAAYb,KAAKC,KACtBD,KAAKC,KAAOD,KAAKsC,aAAavB,OAASf,KAAKuC,aAAaxB,M,EAI7DV,kBACEgB,aAAarB,KAAKkB,iBAClB,GAAIlB,KAAKC,MAAQD,KAAKiB,SAAWnB,SAAU,CACzCE,KAAKkB,gBAAkBC,YAAW,IAAMnB,KAAKG,QAAQH,KAAKiB,S,EAI9DuB,SACE,OACEC,EAAA,OACEC,IAAMC,GAAQ3C,KAAK4C,MAAQD,EAC3BE,KAAK,OACLC,MAAO,CACLF,MAAO,KACP,cAAe5C,KAAKC,KACpB,iBAAkBD,KAAKa,UACvB,kBAAmBb,KAAK+C,SACxB,iBAAkB/C,KAAKgD,OAAS,UAChC,iBAAkBhD,KAAKgD,OAAS,UAChC,cAAehD,KAAKgD,OAAS,OAC7B,iBAAkBhD,KAAKgD,OAAS,UAChC,gBAAiBhD,KAAKgD,OAAS,UAEjCC,KAAK,QAAO,YACF,YAAW,cACT,OAAM,cACLjD,KAAKC,KAAO,QAAU,OACnCiD,YAAalD,KAAKS,gBAClB0C,gBAAiBnD,KAAKU,qBAEtB+B,EAAA,QAAMI,KAAK,OAAOC,MAAM,eACtBL,EAAA,QAAMW,KAAK,UAGbX,EAAA,QAAMI,KAAK,UAAUC,MAAM,kBACzBL,EAAA,cAGDzC,KAAK+C,UACJN,EAAA,QAAMK,MAAM,gBACVL,EAAA,mBACEW,KAAK,QACLC,YAAY,oBACZC,QAAStD,KAAKO,oB"}

package/dist/ui-library/p-0786fa7c.js

@@ -1 +1,2 @@
-const t=35,e=300,a=(t,e=300)=>{let a;return(...o)=>{clearTimeout(a),a=setTimeout((()=>t.apply(void 0,o)),e)}},o=(t,e)=>{const o=t._original||t;return{_original:t,emit:a(o.emit.bind(o),e)}};export{e as D,a,t as b,o as d}
+const t=35;const e=300;const n=(t,n=e)=>{let s;return(...e)=>{clearTimeout(s);s=setTimeout((()=>t.apply(undefined,e)),n)}};const s=(t,e)=>{const s=t._original||t;const o=n(s.emit.bind(s),e);return{_original:t,emit:o}};export{e as D,n as a,t as b,s as d};
+//# sourceMappingURL=p-0786fa7c.js.map

package/dist/ui-library/p-0786fa7c.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DEFAULT_DEBOUNCE_INSANELY_FAST","DEFAULT_DEBOUNCE_FAST","debounce","callback","timeout","timer","args","clearTimeout","setTimeout","apply","this","debounceEvent","event","original","_original","emit","bind"],"sources":["./src/utils/execution-control.ts"],"sourcesContent":["import { EventEmitter } from '@stencil/core';\n\nexport const DEFAULT_DEBOUNCE_INSANELY_FAST = 35;\nexport const DEFAULT_DEBOUNCE_VERY_FAST = 100;\nexport const DEFAULT_DEBOUNCE_FAST = 300;\nexport const DEFAULT_DEBOUNCE_SLOW = 600;\n\n/**\n * Debounce function to implement a timeframe to wait for no new changes before executing a callback\n\n *  example usages:\n *    debounce(() => saveInput());\n *    debounce(() => saveInput(), 750);\n *    this.searchInput.addEventListener('six-input-input', debounce((event) => this.searchInputChange(event)));\n *\n *  regarding default timeout check https://lawsofux.com/doherty-threshold/\n *\n * @param callback\n * @param timeout\n */\nexport const debounce = (callback: Function, timeout = DEFAULT_DEBOUNCE_FAST) => {\n  let timer: NodeJS.Timeout;\n  return <T>(...args: T[]) => {\n    clearTimeout(timer);\n    timer = setTimeout(() => callback.apply(this, args), timeout);\n  };\n};\n\n/**\n * Debounce an event\n *\n * @param event\n * @param timeout\n */\nexport const debounceEvent = (event: EventEmitter, timeout: number): EventEmitter => {\n  const original = (event as any)._original || event;\n  const emit = debounce(original.emit.bind(original), timeout) as (any) => CustomEvent;\n  return {\n    _original: event,\n    emit: emit,\n  } as EventEmitter;\n};\n"],"mappings":"MAEaA,EAAiC,G,MAEjCC,EAAwB,I,MAgBxBC,EAAW,CAACC,EAAoBC,EAAUH,KACrD,IAAII,EACJ,MAAO,IAAOC,KACZC,aAAaF,GACbA,EAAQG,YAAW,IAAML,EAASM,MAAMC,UAAMJ,IAAOF,EAAQ,CAC9D,E,MASUO,EAAgB,CAACC,EAAqBR,KACjD,MAAMS,EAAYD,EAAcE,WAAaF,EAC7C,MAAMG,EAAOb,EAASW,EAASE,KAAKC,KAAKH,GAAWT,GACpD,MAAO,CACLU,UAAWF,EACXG,KAAMA,EACS,S"}

package/dist/ui-library/p-0c89817e.entry.js

@@ -0,0 +1,2 @@
+import{r as s,h as r}from"./p-16b99232.js";const t=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);display:inline-flex}.progress-ring{display:inline-flex;align-items:center;justify-content:center;position:relative}.progress-ring__image{transform:rotate(-90deg);transform-origin:50% 50%}.progress-ring__track{stroke:var(--track-color)}.progress-ring__indicator{stroke:var(--indicator-color);transition:0.35s stroke-dashoffset, 0.35s stroke}.progress-ring__label{display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;user-select:none;font-family:var(--six-font-family)}";const i=class{constructor(r){s(this,r);this.size=128;this.strokeWidth=4;this.percentage=undefined}handlePercentageChange(){this.updateProgress()}componentDidLoad(){this.updateProgress()}updateProgress(){if(!this.indicator.r){return}const s=this.indicator.r.baseVal.value;const r=s*2*Math.PI;const t=r-this.percentage/100*r;this.indicator.style.strokeDasharray=`${r} ${r}`;this.indicator.style.strokeDashoffset=`${t}`}render(){return r("div",{part:"base",class:"progress-ring"},r("svg",{class:"progress-ring__image",width:this.size,height:this.size},r("circle",{class:"progress-ring__track","stroke-width":this.strokeWidth,"stroke-linecap":"round",fill:"transparent",r:this.size/2-this.strokeWidth*2,cx:this.size/2,cy:this.size/2}),r("circle",{ref:s=>this.indicator=s,class:"progress-ring__indicator","stroke-width":this.strokeWidth,"stroke-linecap":"round",fill:"transparent",r:this.size/2-this.strokeWidth*2,cx:this.size/2,cy:this.size/2})),r("span",{part:"label",class:"progress-ring__label"},r("slot",null)))}static get watchers(){return{percentage:["handlePercentageChange"]}}};i.style=t;export{i as six_progress_ring};
+//# sourceMappingURL=p-0c89817e.entry.js.map

package/dist/ui-library/p-0c89817e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixProgressRingCss","SixProgressRing","handlePercentageChange","this","updateProgress","componentDidLoad","indicator","r","radius","baseVal","value","circumference","Math","PI","offset","percentage","style","strokeDasharray","strokeDashoffset","render","h","part","class","width","size","height","strokeWidth","fill","cx","cy","ref","el"],"sources":["./src/components/six-progress-ring/six-progress-ring.scss?tag=six-progress-ring&encapsulation=shadow","./src/components/six-progress-ring/six-progress-ring.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --track-color: The track color.\n * @prop --indicator-color: The indicator color.\n */\n:host {\n  --track-color: var(--six-progress-track-color);\n  --indicator-color: var(--six-progress-indicator-color);\n\n  display: inline-flex;\n}\n\n.progress-ring {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n\n.progress-ring__image {\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n}\n\n.progress-ring__track {\n  stroke: var(--track-color);\n}\n\n.progress-ring__indicator {\n  stroke: var(--indicator-color);\n  transition: 0.35s stroke-dashoffset, 0.35s stroke;\n}\n\n.progress-ring__label {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  user-select: none;\n  font-family: var(--six-font-family);\n}\n","import { Component, h, Prop, Watch } from '@stencil/core';\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 - A label to show inside the ring.\n *\n * @part base - The component's base wrapper.\n * @part label - The progress ring label.\n */\n\n@Component({\n  tag: 'six-progress-ring',\n  styleUrl: 'six-progress-ring.scss',\n  shadow: true,\n})\nexport class SixProgressRing {\n  indicator: SVGCircleElement;\n\n  /** The size of the progress ring in pixels. */\n  @Prop() size = 128;\n\n  /** The stroke width of the progress ring in pixels. */\n  @Prop() strokeWidth = 4;\n\n  /** The current progress percentage, 0 - 100. */\n  @Prop() percentage: number;\n\n  @Watch('percentage')\n  handlePercentageChange() {\n    this.updateProgress();\n  }\n\n  componentDidLoad() {\n    this.updateProgress();\n  }\n\n  updateProgress() {\n    if (!this.indicator.r) {\n      return;\n    }\n    const radius = this.indicator.r.baseVal.value;\n    const circumference = radius * 2 * Math.PI;\n    const offset = circumference - (this.percentage / 100) * circumference;\n\n    this.indicator.style.strokeDasharray = `${circumference} ${circumference}`;\n    this.indicator.style.strokeDashoffset = `${offset}`;\n  }\n\n  render() {\n    return (\n      <div part=\"base\" class=\"progress-ring\">\n        <svg class=\"progress-ring__image\" width={this.size} height={this.size}>\n          <circle\n            class=\"progress-ring__track\"\n            stroke-width={this.strokeWidth}\n            stroke-linecap=\"round\"\n            fill=\"transparent\"\n            r={this.size / 2 - this.strokeWidth * 2}\n            cx={this.size / 2}\n            cy={this.size / 2}\n          />\n\n          <circle\n            ref={(el: SVGCircleElement) => (this.indicator = el)}\n            class=\"progress-ring__indicator\"\n            stroke-width={this.strokeWidth}\n            stroke-linecap=\"round\"\n            fill=\"transparent\"\n            r={this.size / 2 - this.strokeWidth * 2}\n            cx={this.size / 2}\n            cy={this.size / 2}\n          />\n        </svg>\n\n        <span part=\"label\" class=\"progress-ring__label\">\n          <slot />\n        </span>\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAqB,gvB,MCmBdC,EAAe,M,mCAIX,I,iBAGO,E,0BAMtBC,yBACEC,KAAKC,gB,CAGPC,mBACEF,KAAKC,gB,CAGPA,iBACE,IAAKD,KAAKG,UAAUC,EAAG,CACrB,M,CAEF,MAAMC,EAASL,KAAKG,UAAUC,EAAEE,QAAQC,MACxC,MAAMC,EAAgBH,EAAS,EAAII,KAAKC,GACxC,MAAMC,EAASH,EAAiBR,KAAKY,WAAa,IAAOJ,EAEzDR,KAAKG,UAAUU,MAAMC,gBAAkB,GAAGN,KAAiBA,IAC3DR,KAAKG,UAAUU,MAAME,iBAAmB,GAAGJ,G,CAG7CK,SACE,OACEC,EAAA,OAAKC,KAAK,OAAOC,MAAM,iBACrBF,EAAA,OAAKE,MAAM,uBAAuBC,MAAOpB,KAAKqB,KAAMC,OAAQtB,KAAKqB,MAC/DJ,EAAA,UACEE,MAAM,uBAAsB,eACdnB,KAAKuB,YAAW,iBACf,QACfC,KAAK,cACLpB,EAAGJ,KAAKqB,KAAO,EAAIrB,KAAKuB,YAAc,EACtCE,GAAIzB,KAAKqB,KAAO,EAChBK,GAAI1B,KAAKqB,KAAO,IAGlBJ,EAAA,UACEU,IAAMC,GAA0B5B,KAAKG,UAAYyB,EACjDT,MAAM,2BAA0B,eAClBnB,KAAKuB,YAAW,iBACf,QACfC,KAAK,cACLpB,EAAGJ,KAAKqB,KAAO,EAAIrB,KAAKuB,YAAc,EACtCE,GAAIzB,KAAKqB,KAAO,EAChBK,GAAI1B,KAAKqB,KAAO,KAIpBJ,EAAA,QAAMC,KAAK,QAAQC,MAAM,wBACvBF,EAAA,c"}

package/dist/ui-library/p-0d1fdc4e.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as r,g as i}from"./p-16b99232.js";import{F as o}from"./p-3c100309.js";import{h as a}from"./p-b4dfb7cf.js";import{E as s}from"./p-9a860acc.js";const l=':host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:"*"}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;color:var(--six-color-danger-800);margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}.textarea{display:flex;align-items:center;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);line-height:var(--six-line-height-normal);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.textarea:hover:not(.textarea--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.textarea:hover:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-hover)}.textarea.textarea--focused:not(.textarea--disabled){background-color:var(--six-input-background-color-focus);box-shadow:var(--six-input-focus-shadow);border-color:var(--six-input-border-color-focus);color:var(--six-input-color-focus)}.textarea.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-focus)}.textarea.textarea--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.textarea.textarea--disabled .textarea__control{color:var(--six-input-color-disabled)}.textarea.textarea--disabled .textarea__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.textarea__control{flex:1 1 auto;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.4;color:var(--sl-input-color);border:none;background:none;box-shadow:none;cursor:inherit;-webkit-appearance:none}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.textarea__control:focus{outline:none}.textarea--invalid:not(.textarea--disabled):not(.textarea--focused){border-color:var(--six-input-border-color-danger)}.textarea--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small)}.textarea--small .textarea__control{padding:0.5em var(--six-input-spacing-small)}.textarea--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium)}.textarea--medium .textarea__control{padding:0.5em var(--six-input-spacing-medium)}.textarea--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large)}.textarea--large .textarea__control{padding:0.5em var(--six-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{height:auto;resize:none}';let n=0;const h=class{constructor(r){t(this,r);this.sixChange=e(this,"six-textarea-change",7);this.sixInput=e(this,"six-textarea-input",7);this.sixFocus=e(this,"six-textarea-focus",7);this.sixBlur=e(this,"six-textarea-blur",7);this.sixValueChange=e(this,"six-textarea-value-change",7);this.inputId=`textarea-${++n}`;this.labelId=`textarea-label-${n}`;this.helpTextId=`textarea-help-text-${n}`;this.errorTextId=`input-error-text-${n}`;this.customErrorText="";this.customValidation=false;this.eventListeners=new s;this.defaultValue="";this.hasFocus=false;this.hasHelpTextSlot=false;this.hasErrorTextSlot=false;this.hasLabelSlot=false;this.size="medium";this.name="";this.value="";this.label="";this.helpText="";this.errorText="";this.placeholder=undefined;this.rows=4;this.resize="vertical";this.disabled=false;this.readonly=false;this.minlength=undefined;this.maxlength=undefined;this.required=undefined;this.invalid=false;this.autocapitalize=undefined;this.autocorrect=undefined;this.autocomplete=undefined;this.autofocus=undefined;this.spellcheck=undefined;this.inputmode=undefined;this.errorOnBlur=false}handleLabelChange(){this.handleSlotChange()}handleRowsChange(){if(this.textarea){this.setTextareaHeight()}}handleValueChange(){if(!this.textarea){return}this.textarea.value=this.value;this.invalid=!this.textarea.checkValidity();this.sixValueChange.emit()}connectedCallback(){this.handleChange=this.handleChange.bind(this);this.handleInput=this.handleInput.bind(this);this.handleInvalid=this.handleInvalid.bind(this);this.handleBlur=this.handleBlur.bind(this);this.handleFocus=this.handleFocus.bind(this);this.handleSlotChange=this.handleSlotChange.bind(this);this.host.shadowRoot.addEventListener("slotchange",this.handleSlotChange)}componentWillLoad(){this.defaultValue=this.value||"";this.handleSlotChange()}componentDidLoad(){this.setTextareaHeight();this.resizeObserver=new ResizeObserver((()=>this.setTextareaHeight()));this.resizeObserver.observe(this.textarea);this.eventListeners.add(this.textarea,"invalid",(t=>{if(this.customValidation||!this.hasErrorTextSlot&&!this.errorText&&!this.customErrorText){this.customErrorText=this.textarea.validationMessage}t.preventDefault()}))}disconnectedCallback(){this.resizeObserver.unobserve(this.textarea);this.host.shadowRoot.removeEventListener("slotchange",this.handleSlotChange);this.eventListeners.removeAll()}async setFocus(t){this.textarea.focus(t)}async removeFocus(){this.textarea.blur()}async select(){return this.textarea.select()}async setSelectionRange(t,e,r="none"){return this.textarea.setSelectionRange(t,e,r)}async setRangeText(t,e,r,i="preserve"){this.textarea.setRangeText(t,e,r,i);if(this.value!==this.textarea.value){this.value=this.textarea.value;this.setTextareaHeight();this.sixChange.emit();this.sixInput.emit()}}async reportValidity(){return this.textarea.reportValidity()}async checkValidity(){return this.textarea.validity.valid}async setCustomValidity(t){this.customErrorText="";this.customValidation=t!=="";this.textarea.setCustomValidity(t);this.invalid=!this.textarea.checkValidity()}async reset(){this.value=this.defaultValue;this.customErrorText="";this.customValidation=false;this.textarea.setCustomValidity("");this.invalid=false}handleChange(){this.sixChange.emit()}handleInput(){this.value=this.textarea.value;this.setTextareaHeight();this.sixInput.emit()}handleInvalid(){this.invalid=true}handleBlur(){this.hasFocus=false;this.sixBlur.emit()}handleFocus(){this.hasFocus=true;this.sixFocus.emit()}handleSlotChange(){this.hasLabelSlot=a(this.host,"label");this.hasHelpTextSlot=a(this.host,"help-text");this.hasErrorTextSlot=a(this.host,"error-text")}setTextareaHeight(){if(this.resize==="auto"){this.textarea.style.height="auto";this.textarea.style.height=this.textarea.scrollHeight+"px"}else{this.textarea.style.height=undefined}}displayError(){return this.invalid&&(!this.errorOnBlur||!this.hasFocus)}render(){var t;return r(o,{inputId:this.inputId,label:this.label,labelId:this.labelId,hasLabelSlot:this.hasLabelSlot,helpTextId:this.helpTextId,helpText:this.helpText,hasHelpTextSlot:this.hasHelpTextSlot,errorTextId:this.errorTextId,errorText:this.customErrorText?this.customErrorText:this.errorText,hasErrorTextSlot:this.hasErrorTextSlot,size:this.size,disabled:this.disabled,required:this.required,displayError:this.displayError()},r("div",{part:"base",class:{textarea:true,"textarea--small":this.size==="small","textarea--medium":this.size==="medium","textarea--large":this.size==="large","textarea--disabled":this.disabled,"textarea--focused":this.hasFocus,"textarea--empty":((t=this.value)===null||t===void 0?void 0:t.length)===0,"textarea--invalid":this.invalid,"textarea--resize-none":this.resize==="none","textarea--resize-vertical":this.resize==="vertical","textarea--resize-auto":this.resize==="auto"}},r("textarea",{part:"textarea",ref:t=>this.textarea=t,id:this.inputId,class:"textarea__control",name:this.name,placeholder:this.placeholder,disabled:this.disabled,readOnly:this.readonly,rows:this.rows,minLength:this.minlength,maxLength:this.maxlength,value:this.value,autoCapitalize:this.autocapitalize,autoCorrect:this.autocorrect,autoFocus:this.autofocus,spellcheck:this.spellcheck,required:this.required,inputMode:this.inputmode,"aria-labelledby":this.labelId,onChange:this.handleChange,onInput:this.handleInput,onInvalid:this.handleInvalid,onFocus:this.handleFocus,onBlur:this.handleBlur})))}get host(){return i(this)}static get watchers(){return{helpText:["handleLabelChange"],errorText:["handleLabelChange"],label:["handleLabelChange"],rows:["handleRowsChange"],value:["handleValueChange"]}}};h.style=l;export{h as six_textarea};
+//# sourceMappingURL=p-0d1fdc4e.entry.js.map

package/dist/ui-library/p-0d1fdc4e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sixTextareaCss","id","SixTextarea","this","inputId","labelId","helpTextId","errorTextId","customErrorText","customValidation","eventListeners","EventListeners","defaultValue","handleLabelChange","handleSlotChange","handleRowsChange","textarea","setTextareaHeight","handleValueChange","value","invalid","checkValidity","sixValueChange","emit","connectedCallback","handleChange","bind","handleInput","handleInvalid","handleBlur","handleFocus","host","shadowRoot","addEventListener","componentWillLoad","componentDidLoad","resizeObserver","ResizeObserver","observe","add","event","hasErrorTextSlot","errorText","validationMessage","preventDefault","disconnectedCallback","unobserve","removeEventListener","removeAll","async","options","focus","blur","select","selectionStart","selectionEnd","selectionDirection","setSelectionRange","replacement","start","end","selectMode","setRangeText","sixChange","sixInput","reportValidity","validity","valid","message","setCustomValidity","hasFocus","sixBlur","sixFocus","hasLabelSlot","hasSlot","hasHelpTextSlot","resize","style","height","scrollHeight","undefined","displayError","errorOnBlur","render","h","FormControl","label","helpText","size","disabled","required","part","class","_a","length","ref","el","name","placeholder","readOnly","readonly","rows","minLength","minlength","maxLength","maxlength","autoCapitalize","autocapitalize","autoCorrect","autocorrect","autoFocus","autofocus","spellcheck","inputMode","inputmode","onChange","onInput","onInvalid","onFocus","onBlur"],"sources":["./src/components/six-textarea/six-textarea.scss?tag=six-textarea&encapsulation=shadow","./src/components/six-textarea/six-textarea.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: block;\n}\n\n.textarea {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-input-font-weight);\n  line-height: var(--six-line-height-normal);\n  letter-spacing: var(--six-input-letter-spacing);\n  background-color: var(--six-input-background-color);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  vertical-align: middle;\n  transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n  cursor: text;\n\n  &:hover:not(.textarea--disabled) {\n    background-color: var(--six-input-background-color-hover);\n    border-color: var(--six-input-border-color-hover);\n\n    .textarea__control {\n      color: var(--six-input-color-hover);\n    }\n  }\n\n  &.textarea--focused:not(.textarea--disabled) {\n    background-color: var(--six-input-background-color-focus);\n    box-shadow: var(--six-input-focus-shadow);\n    border-color: var(--six-input-border-color-focus);\n    color: var(--six-input-color-focus);\n\n    .textarea__control {\n      color: var(--six-input-color-focus);\n    }\n  }\n\n  &.textarea--disabled {\n    background-color: var(--six-input-background-color-disabled);\n    border-color: var(--six-input-border-color-disabled);\n    cursor: not-allowed;\n\n    .textarea__control {\n      color: var(--six-input-color-disabled);\n\n      &::placeholder {\n        color: var(--six-input-placeholder-color-disabled);\n      }\n    }\n  }\n}\n\n.textarea__control {\n  flex: 1 1 auto;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: 1.4;\n  color: var(--sl-input-color);\n  border: none;\n  background: none;\n  box-shadow: none;\n  cursor: inherit;\n  -webkit-appearance: none;\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  &::placeholder {\n    color: var(--six-input-placeholder-color);\n    user-select: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.textarea--invalid:not(.textarea--disabled):not(.textarea--focused) {\n  border-color: var(--six-input-border-color-danger);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--small {\n  border-radius: var(--six-input-border-radius-small);\n  font-size: var(--six-input-font-size-small);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-small);\n  }\n}\n\n.textarea--medium {\n  border-radius: var(--six-input-border-radius-medium);\n  font-size: var(--six-input-font-size-medium);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-medium);\n  }\n}\n\n.textarea--large {\n  border-radius: var(--six-input-border-radius-large);\n  font-size: var(--six-input-font-size-large);\n\n  .textarea__control {\n    padding: 0.5em var(--six-input-spacing-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Resize types\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--resize-none .textarea__control {\n  resize: none;\n}\n\n.textarea--resize-vertical .textarea__control {\n  resize: vertical;\n}\n\n.textarea--resize-auto .textarea__control {\n  height: auto;\n  resize: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { EmptyPayload } from '../../utils/types';\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 label - The textarea's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The textarea label.\n * @part textarea - The textarea control.\n * @part help-text - The textarea help text.\n */\n@Component({\n  tag: 'six-textarea',\n  styleUrl: 'six-textarea.scss',\n  shadow: true,\n})\nexport class SixTextarea {\n  inputId = `textarea-${++id}`;\n  labelId = `textarea-label-${id}`;\n  helpTextId = `textarea-help-text-${id}`;\n  errorTextId = `input-error-text-${id}`;\n  resizeObserver: ResizeObserver;\n  textarea: HTMLTextAreaElement;\n  customErrorText = '';\n  customValidation = false;\n\n  readonly eventListeners = new EventListeners();\n\n  @Element() host: HTMLSixTextareaElement;\n\n  @State() hasFocus = false;\n  @State() hasHelpTextSlot = false;\n  @State() hasErrorTextSlot = false;\n  @State() hasLabelSlot = false;\n\n  /** The textarea's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The textarea's name attribute. */\n  @Prop({ reflect: true }) name = '';\n\n  /** The textarea's value attribute. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** The textarea's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The textarea's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** The textarea's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\n\n  /** The textarea's placeholder text. */\n  @Prop() placeholder: string;\n\n  /** The number of rows to display by default. */\n  @Prop() rows = 4;\n\n  /** Controls how the textarea can be resized. */\n  @Prop() resize: 'none' | 'vertical' | 'auto' = 'vertical';\n\n  /** Set to true to disable the textarea. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true for a readonly textarea. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** The minimum length of input that will be considered valid. */\n  @Prop({ reflect: true }) minlength: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @Prop({ reflect: true }) maxlength: number;\n\n  /** The textarea's required attribute. */\n  @Prop({ reflect: true }) required: boolean;\n\n  /**\n   * This will be true when the control is in an invalid state. Validity is determined by props such as `required`,\n   * `minlength`, and `maxlength` using the browser's constraint validation API.\n   */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  /** The textarea's autocaptialize attribute. */\n  @Prop() autocapitalize: string;\n\n  /** The textarea's autocorrect attribute. */\n  @Prop() autocorrect: string;\n\n  /** The textarea's autocomplete attribute. */\n  @Prop() autocomplete: string;\n\n  /** The textarea's autofocus attribute. */\n  @Prop() autofocus: boolean;\n\n  /** The textarea's spellcheck attribute. */\n  @Prop() spellcheck: boolean;\n\n  /** The textarea's inputmode attribute. */\n  @Prop() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = false;\n\n  /** Emitted when the control's value changes. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-change' }) sixChange: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control receives input. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-input' }) sixInput: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-textarea-focus' }) sixFocus: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control loses focus. Access the new value via event.target.value. */\n  @Event({ eventName: 'six-textarea-blur' }) sixBlur: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted whenever the value changes. Access the new value via event.target.value.\n   * six-textarea-value-change will emit whenever the value changes.\n   * So be it on textarea or when dynamically set. six-textarea-input will only be emitted when the user enters data,\n   * but not when a value is dynamically set. six-textarea-change will only be emitted when the user either presses enter\n   * or leaves the textarea field after entering some data.\n   * */\n\n  @Event({ eventName: 'six-textarea-value-change' }) sixValueChange: EventEmitter<EmptyPayload>;\n\n  @Watch('helpText')\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  @Watch('rows')\n  handleRowsChange() {\n    if (this.textarea) {\n      this.setTextareaHeight();\n    }\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    if (!this.textarea) {\n      return;\n    }\n    this.textarea.value = this.value;\n    this.invalid = !this.textarea.checkValidity();\n    this.sixValueChange.emit();\n  }\n\n  /** default value the textarea will be reverted to when reset is executed */\n  private defaultValue = '';\n\n  connectedCallback() {\n    this.handleChange = this.handleChange.bind(this);\n    this.handleInput = this.handleInput.bind(this);\n    this.handleInvalid = this.handleInvalid.bind(this);\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.defaultValue = this.value || '';\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    this.setTextareaHeight();\n    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n    this.resizeObserver.observe(this.textarea);\n    this.eventListeners.add(this.textarea, 'invalid', (event) => {\n      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {\n        this.customErrorText = this.textarea.validationMessage;\n      }\n      event.preventDefault();\n    });\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver.unobserve(this.textarea);\n    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  /** Sets focus on the textarea. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.textarea.focus(options);\n  }\n\n  /** Removes focus fromt the textarea. */\n  @Method()\n  async removeFocus() {\n    this.textarea.blur();\n  }\n\n  /** Selects all the text in the input. */\n  @Method()\n  async select() {\n    return this.textarea.select();\n  }\n\n  /** Sets the start and end positions of the text selection (0-based). */\n  @Method()\n  async setSelectionRange(\n    selectionStart: number,\n    selectionEnd: number,\n    selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n  ) {\n    return this.textarea.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n  }\n\n  /** Replaces a range of text with a new string. */\n  @Method()\n  async setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n  ) {\n    this.textarea.setRangeText(replacement, start, end, selectMode);\n\n    if (this.value !== this.textarea.value) {\n      this.value = this.textarea.value;\n      this.setTextareaHeight();\n      this.sixChange.emit();\n      this.sixInput.emit();\n    }\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  @Method()\n  async reportValidity() {\n    return this.textarea.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    return this.textarea.validity.valid;\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    this.textarea.setCustomValidity(message);\n    this.invalid = !this.textarea.checkValidity();\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.value = this.defaultValue;\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.textarea.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  handleChange() {\n    this.sixChange.emit();\n  }\n\n  handleInput() {\n    this.value = this.textarea.value;\n    this.setTextareaHeight();\n    this.sixInput.emit();\n  }\n\n  handleInvalid() {\n    this.invalid = true;\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  }\n\n  handleSlotChange() {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n  }\n\n  setTextareaHeight() {\n    if (this.resize === 'auto') {\n      this.textarea.style.height = 'auto';\n      this.textarea.style.height = this.textarea.scrollHeight + 'px';\n    } else {\n      this.textarea.style.height = undefined;\n    }\n  }\n\n  displayError() {\n    return this.invalid && (!this.errorOnBlur || !this.hasFocus);\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        errorTextId={this.errorTextId}\n        errorText={this.customErrorText ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\n      >\n        <div\n          part=\"base\"\n          class={{\n            textarea: true,\n\n            // Sizes\n            'textarea--small': this.size === 'small',\n            'textarea--medium': this.size === 'medium',\n            'textarea--large': this.size === 'large',\n\n            // States\n            'textarea--disabled': this.disabled,\n            'textarea--focused': this.hasFocus,\n            'textarea--empty': this.value?.length === 0,\n            'textarea--invalid': this.invalid,\n\n            // Modifiers\n            'textarea--resize-none': this.resize === 'none',\n            'textarea--resize-vertical': this.resize === 'vertical',\n            'textarea--resize-auto': this.resize === 'auto',\n          }}\n        >\n          <textarea\n            part=\"textarea\"\n            ref={(el) => (this.textarea = el)}\n            id={this.inputId}\n            class=\"textarea__control\"\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            rows={this.rows}\n            minLength={this.minlength}\n            maxLength={this.maxlength}\n            value={this.value}\n            autoCapitalize={this.autocapitalize}\n            autoCorrect={this.autocorrect}\n            autoFocus={this.autofocus}\n            spellcheck={this.spellcheck}\n            required={this.required}\n            inputMode={this.inputmode}\n            aria-labelledby={this.labelId}\n            onChange={this.handleChange}\n            onInput={this.handleInput}\n            onInvalid={this.handleInvalid}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n        </div>\n      </FormControl>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-0d9cbb51.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as s,g as e}from"./p-16b99232.js";import{s as n}from"./p-eb8f05a9.js";import{P as o}from"./p-18ea0c56.js";import{E as r}from"./p-9a860acc.js";import{b as h,a as l}from"./p-b4dfb7cf.js";import{D as a,a as d}from"./p-0786fa7c.js";function u(i){const t=i.tabIndex;return t>-1}function c(i){if(u(i)){return i}if(i.shadowRoot){const t=[...i.shadowRoot.children].find(u);if(t){return t}}if(i.children){return[...i.children].map(c)[0]}return null}const f=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--six-z-index-dropdown)}.dropdown__positioner__filtered{width:100%}.dropdown__panel{max-height:50vh;font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);color:var(--color);background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);box-shadow:var(--six-elevation-2dp);opacity:0;overflow:auto;overscroll-behavior:none;pointer-events:none;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;scrollbar-width:thin}.filter-hidden{display:none}.dropdown__positioner[data-popper-placement^=top] .dropdown__panel{transform-origin:bottom}.dropdown__positioner[data-popper-placement^=bottom] .dropdown__panel{transform-origin:top}.dropdown__positioner[data-popper-placement^=left] .dropdown__panel{transform-origin:right}.dropdown__positioner[data-popper-placement^=right] .dropdown__panel{transform-origin:left}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:none;pointer-events:all}";const m=i=>t=>(t===null||t===void 0?void 0:t.tagName.toLowerCase())===i.toLowerCase();const p=m("six-menu");const v=m("six-menu-item");let g=0;const x=class{constructor(e){i(this,e);this.sixShow=t(this,"six-dropdown-show",7);this.sixAfterShow=t(this,"six-dropdown-after-show",7);this.sixHide=t(this,"six-dropdown-hide",7);this.sixAfterHide=t(this,"six-dropdown-after-hide",7);this.sixAutoFilterFired=t(this,"six-dropdown-auto-filter-fired",7);this.sixAsyncFilterFired=t(this,"six-async-filter-fired",7);this.sixScroll=t(this,"six-dropdown-scroll",7);this.componentId=`dropdown-${++g}`;this.isVisible=false;this.hasBeenInitialized=false;this.eventListeners=new r;this.getMenuItems=()=>{if(this._options!==null){return this._options.map((i=>s("six-menu-item",{value:i.value},i.label)))}const[i]=h(this.panel);return h(i)||Array.from(i.querySelectorAll("six-menu-item"))};this.handleFilterInputChange=()=>{var i,t;const s=((t=(i=this.filterInputElement.value)===null||i===void 0?void 0:i.toLowerCase())===null||t===void 0?void 0:t.trim())||"";if(this._options){this.handleFilteringForAttributeItems(s)}else{this.handleFilteringForSlotItems(s)}this.sixAutoFilterFired.emit({filterValue:s})};this.open=false;this.placement="bottom-start";this.closeOnSelect=true;this.distance=0;this.skidding=0;this.hoist=false;this.containingElement=undefined;this.filter=false;this.asyncFilter=false;this.filterPlaceholder="Filter...";this.autofocusFilter=true;this.filterDebounce=a;this.disableHideOnEnterAndSpace=false;this.options=null;this.virtualScroll=false;this._options=null}get hasFilterEnabled(){return this.filter||this.asyncFilter}get container(){return this.containingElement||this.host}handleOpenChange(){this.open?this.show():this.hide();this.updateAccessibleTrigger()}handlePopoverOptionsChange(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding})}handleOptionsChange(){this._options=[...this.options]}connectedCallback(){if(this.virtualScroll&&this.options===null){console.error("Options must be defined when using virtual scrolling")}if(this.options!==null){this._options=[...this.options]}this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this);this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this);this.handleMenuItemActivate=this.handleMenuItemActivate.bind(this);this.handlePanelSelect=this.handlePanelSelect.bind(this);this.handleTriggerClick=this.handleTriggerClick.bind(this);this.handleTriggerKeyDown=this.handleTriggerKeyDown.bind(this);this.handleTriggerKeyUp=this.handleTriggerKeyUp.bind(this);this.handleTriggerSlotChange=this.handleTriggerSlotChange.bind(this);this.handleDropdownScroll=this.handleDropdownScroll.bind(this);if(this.hasBeenInitialized&&!this.popover){this.initializePopover()}}componentDidLoad(){this.hasBeenInitialized=true;this.initializePopover();if(this.open){void this.show()}if(this.filter){this.setupFiltering(this.handleFilterInputChange)}else if(this.asyncFilter){this.setupFiltering((()=>this.sixAsyncFilterFired.emit({filterValue:this.filterInputElement.value})))}}initializePopover(){const i=()=>{if(this.filter){this.filterInputElement.value="";if(this._options!==null){this._options=[...this.options]}else{const i=this.getMenuItems();i.forEach((i=>i.style.display="unset"))}}this.sixAfterHide.emit()};const t=async()=>{if(this.hasFilterEnabled&&this.autofocusFilter){await this.filterInputElement.setFocus()}this.sixAfterShow.emit()};const s=()=>{if(!this.open){this.panel.scrollTop=0}};this.popover=new o(this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:i,onAfterShow:t,onTransitionEnd:s})}setupFiltering(i){this.eventListeners.add(this.filterInputElement,"six-input-input",d(i,this.filterDebounce))}handleFilteringForAttributeItems(i){if(i===""){this._options=[...this.options];return}this._options=this.options.filter((t=>{var s,e,n,o;return t.label&&((e=(s=String(t.label))===null||s===void 0?void 0:s.toLowerCase())===null||e===void 0?void 0:e.includes(i))||t.value&&((o=(n=String(t.value))===null||n===void 0?void 0:n.toLowerCase())===null||o===void 0?void 0:o.includes(i))}))}handleFilteringForSlotItems(i){const t=this.getMenuItems();t.forEach((async t=>{var s,e,n,o;const r=((e=(s=t===null||t===void 0?void 0:t.value)===null||s===void 0?void 0:s.toLowerCase())===null||e===void 0?void 0:e.includes(i))||((o=(n=await(t===null||t===void 0?void 0:t.getTextLabel()))===null||n===void 0?void 0:n.toLowerCase())===null||o===void 0?void 0:o.includes(i));t.style.display=r?"unset":"none"}))}disconnectedCallback(){this.eventListeners.removeAll();void this.hide();this.popover.destroy();this.popover=null}async show(){if(this.isVisible){return}const i=this.sixShow.emit();if(i.defaultPrevented){this.open=false;return}this.eventListeners.add(this.panel,"six-menu-item-selected",this.handlePanelSelect);this.eventListeners.add(document,"keydown",this.handleDocumentKeyDown);this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown);this.isVisible=true;this.open=true;this.popover.show()}async hide(){if(!this.isVisible){return}const i=this.sixHide.emit();if(i.defaultPrevented){this.open=true;return}this.eventListeners.remove(this.panel,"six-menu-item-selected",this.handlePanelSelect);this.eventListeners.remove(document,"keydown",this.handleDocumentKeyDown);this.eventListeners.remove(document,"mousedown",this.handleDocumentMouseDown);this.isVisible=false;this.open=false;this.popover.hide()}focusOnTrigger(){const[i]=h(this.trigger);if(i){if(typeof i.setFocus==="function"){i.setFocus()}else if(typeof i.focus==="function"){i.focus()}}}getMenu(){const[i]=h(this.panel).filter(p);return i}async reposition(){if(!this.open){return}this.popover.reposition()}handleDocumentKeyDown(i){if(i.key==="Escape"){void this.hide();this.focusOnTrigger();return}if(this.filterInputElement===this.host.shadowRoot.activeElement){if(i.key==="ArrowDown"){const i=this.getMenuItems().find((i=>i.style.display!=="none"));if(i){i.setFocus()}}}if(i.key==="Tab"){if(this.open&&v(document.activeElement)){i.preventDefault();void this.hide();this.focusOnTrigger();return}setTimeout((()=>{var i;const t=this.container.getRootNode()instanceof ShadowRoot?(i=document.activeElement.shadowRoot)===null||i===void 0?void 0:i.activeElement:document.activeElement;if((t===null||t===void 0?void 0:t.closest(this.container.tagName.toLowerCase()))!==this.container){void this.hide();return}}))}}handleDocumentMouseDown(i){const t=i.composedPath();if(!t.includes(this.container)){void this.hide();return}}handleMenuItemActivate(i){const t=i.target;n(t,this.panel)}handlePanelSelect(i){const t=i.target;if(this.closeOnSelect&&p(t)){void this.hide();this.focusOnTrigger()}}handleTriggerClick(){this.open?this.hide():this.show()}handleTriggerKeyDown(i){const t=this.getMenu();const s=t?[...t.querySelectorAll("six-menu-item")]:null;const e=s[0];const n=s[s.length-1];if(i.key==="Escape"){this.focusOnTrigger();void this.hide();return}if(!this.disableHideOnEnterAndSpace&&[" ","Enter"].includes(i.key)){i.preventDefault();this.open?void this.hide():void this.show();return}if(["ArrowDown","ArrowUp"].includes(i.key)){i.preventDefault();if(!this.open){void this.show()}if(i.key==="ArrowDown"&&e){e.setFocus();return}if(i.key==="ArrowUp"&&n){n.setFocus();return}}const o=["Tab","Shift","Meta","Ctrl","Alt"];if(this.open&&t&&!o.includes(i.key)){void t.typeToSelect(i.key);return}}handleTriggerKeyUp(i){if(i.key===" "){i.preventDefault()}}handleTriggerSlotChange(){this.updateAccessibleTrigger()}handleDropdownScroll(){this.sixScroll.emit({scrollHeight:this.panel.scrollHeight,scrollTop:this.panel.scrollTop,scrollbarHeight:this.panel.offsetHeight*(this.panel.offsetHeight/this.panel.scrollHeight),scrollRatio:this.panel.scrollTop/(this.panel.scrollHeight-this.panel.clientHeight)})}updateAccessibleTrigger(){const[i]=h(this.trigger).map(c);if(i){i.setAttribute("aria-haspopup","true");i.setAttribute("aria-expanded",this.open?"true":"false")}}render(){return s("div",{part:"base",id:this.componentId,class:{dropdown:true,"dropdown--open":this.open}},s("span",{part:"trigger",class:"dropdown__trigger",ref:i=>this.trigger=i,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeyDown,onKeyUp:this.handleTriggerKeyUp},s("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),s("div",{ref:i=>this.positioner=i,class:{dropdown__positioner:true,dropdown__positioner__filtered:(this.filter||this.asyncFilter)&&!this.hoist}},this.hasFilterEnabled&&s("six-input",{class:{"filter-hidden":!this.open},"aria-hidden":this.open?"false":"true",ref:i=>this.filterInputElement=i,placeholder:this.filterPlaceholder}),s("div",{ref:i=>this.panel=i,part:"panel",class:"dropdown__panel",role:"menu","aria-hidden":this.open?"false":"true","aria-labelledby":this.componentId,onScroll:this.handleDropdownScroll},s("slot",null),this._options&&s("six-menu",{part:"menu",items:this._options,virtualScroll:this.virtualScroll}))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"],distance:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"],placement:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],options:["handleOptionsChange"]}}};x.style=f;const w=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.menu{padding:0 0;border:none;box-shadow:var(--six-elevation-2dp)}.menu:focus{outline:none}.menu--noshadow{box-shadow:none}.menu__wrapper--scrollable{overflow-y:auto}";const b=i=>{var t,s,e;return(e=(s=(t=i===null||i===void 0?void 0:i.shadowRoot)===null||t===void 0?void 0:t.querySelector(".menu-item"))===null||s===void 0?void 0:s.classList)===null||e===void 0?void 0:e.contains("menu-item--focused")};const _=i=>(i===null||i===void 0?void 0:i.tagName.toLowerCase())==="six-menu-item";const y=({value:i,label:t})=>s("six-menu-item",{value:i},t);const k=5;const A=64;const C=undefined;const S=class{constructor(s){i(this,s);this.sixMenuItemSelected=t(this,"six-menu-item-selected",7);this.eventListeners=new r;this.typeToSelectString="";this.handleScrolling=()=>{this.scrollingIndex=Math.floor(this.menuWrapper.scrollTop/this.sixMenuItemHeight)};this.removeBoxShadow=false;this.items=null;this.itemsShown=C;this.virtualScroll=false;this.itemSize=10;this.scrollingDebounce=15;this.scrollingIndex=0;this.sixMenuItemHeight=A}connectedCallback(){this.handleClick=this.handleClick.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this)}componentWillLoad(){if(this.items===null){return}}componentDidLoad(){this.setupForVirtualScrollingAfterRendering()}disconnectedCallback(){this.eventListeners.removeAll()}async typeToSelect(i){var t;clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=setTimeout((()=>this.typeToSelectString=""),750);this.typeToSelectString+=i.toLowerCase();const s=this.getItems();for(const i of s){const s=(t=i.shadowRoot)===null||t===void 0?void 0:t.querySelector("slot:not([name])");const e=l(s).toLowerCase().trim();if(e.substring(0,this.typeToSelectString.length)===this.typeToSelectString){i.setFocus();break}}}getItemsShown(){var i;const t=this.virtualScroll?k:C;return(i=this.itemsShown)!==null&&i!==void 0?i:t}setupForVirtualScrollingAfterRendering(){var i,t;if(!this.virtualScroll){return}this.eventListeners.add(this.menuWrapper,"scroll",d(this.handleScrolling,this.scrollingDebounce));const s=(t=(i=this.menu)===null||i===void 0?void 0:i.querySelector("six-menu-item"))===null||t===void 0?void 0:t.clientHeight;if(s&&s>0){this.sixMenuItemHeight=s}}getItems(){if(this.items!==null&&this.items!==undefined){return this.items.map(y)}const i=this.menu.querySelector("slot");return[...i.assignedElements({flatten:true})].filter((i=>_(i)&&!i.disabled))}getActiveItemIndex(){const i=this.getItems();const t=this.getActiveItem();const s=i.indexOf(t);if(s>-1){return s}const e=this.extractItemsFromDOM();return e.findIndex(b)}getActiveItem(){var i;const t=this.getItems().find((i=>i===document.activeElement));if(t){return t}return(i=this.extractItemsFromDOM())===null||i===void 0?void 0:i.find(b)}extractItemsFromDOM(){var i,t;return Array.from((t=(i=this.host)===null||i===void 0?void 0:i.shadowRoot)===null||t===void 0?void 0:t.querySelectorAll("six-menu-item"))}setActiveItem(i){i.setFocus()}handleClick(i){const t=i.target;const s=t.closest("six-menu-item");if(s&&!s.disabled){this.sixMenuItemSelected.emit({name:s.value,item:s})}}handleKeyDown(i){if(i.key==="Enter"){const t=this.getActiveItem();i.preventDefault();if(t){this.sixMenuItemSelected.emit({name:t.value,item:t})}}if(i.key===" "){i.preventDefault()}if(["ArrowDown","ArrowUp","Home","End"].includes(i.key)){const t=this.items===null?this.getItems():this.extractItemsFromDOM();let s=this.getActiveItemIndex();if(t.length){i.preventDefault();if(i.key==="ArrowDown"){s++}else if(i.key==="ArrowUp"){s--}else if(i.key==="Home"){s=0}else if(i.key==="End"){s=t.length-1}if(s<0)s=0;if(s>t.length-1)s=t.length-1;this.setActiveItem(t[s]);return}}void this.typeToSelect(i.key)}getMenuWrapperStyle(){const i={};if(this.getItemsShown()>0){i.height=`${this.getItemsShown()*this.sixMenuItemHeight}px`}return Object.assign({},i)}getMenuContainerStyle(){const i={};if(this.virtualScroll){i.transform=`translateY(${this.sixMenuItemHeight*this.scrollingIndex}px)`}return Object.assign({},i)}getScrollbarGhostStyle(){const i={};if(this.virtualScroll&&this.items!==null){i.height=`${this.items.length*this.sixMenuItemHeight-this.itemSize*this.sixMenuItemHeight}px`}return Object.assign({},i)}renderItems(){if(this.items===undefined||this.items===null){return}if(!this.virtualScroll){return this.items.map(y)}return this.items.slice(this.scrollingIndex,Math.min(this.items.length,this.itemSize+this.scrollingIndex)).map(y)}render(){return s("div",{ref:i=>this.menuWrapper=i,style:this.getMenuWrapperStyle(),part:"wrapper",class:{menu:true,"menu--noshadow":this.removeBoxShadow,"menu__wrapper--scrollable":this.getItemsShown()>0}},s("div",{ref:i=>this.menu=i,part:"base",role:"menu",onClick:this.handleClick,onKeyDown:this.handleKeyDown,tabIndex:0,style:this.getMenuContainerStyle()},s("slot",null),this.renderItems()),this.virtualScroll&&s("div",{style:this.getScrollbarGhostStyle()}))}get host(){return e(this)}};S.style=w;const D=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.menu-item{position:relative;display:flex;align-items:stretch;font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:var(--six-line-height-normal);letter-spacing:var(--six-letter-spacing-normal);text-align:left;color:var(--six-input-color);border-radius:var(--six-border-radius-medium);padding:var(--six-spacing-medium) var(--six-spacing-medium);transition:var(--six-transition-fast) fill;user-select:none;white-space:nowrap;cursor:pointer}.menu-item.menu-item--focused:not(.menu-item--disabled){outline:none;background-color:var(--six-menu-item-background-color)}.menu-item.menu-item--disabled{outline:none;color:var(--six-input-color-disabled);cursor:not-allowed}.menu-item .menu-item__label{flex:1 1 auto;align-self:center}.menu-item .menu-item__prefix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__prefix ::slotted(:last-child){margin-right:0.5em}.menu-item .menu-item__suffix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__suffix ::slotted(:first-child){margin-left:0.5em}.menu-item .menu-item__check{flex:0 0 auto;display:flex;align-items:center;margin-left:var(--six-spacing-small);visibility:hidden;font-size:inherit}.menu-item--checked .menu-item__check{visibility:visible}";const z=class{constructor(t){i(this,t);this.hasFocus=false;this.checked=false;this.value="";this.disabled=false}connectedCallback(){this.handleBlur=this.handleBlur.bind(this);this.handleFocus=this.handleFocus.bind(this);this.handleMouseEnter=this.handleMouseEnter.bind(this);this.handleMouseLeave=this.handleMouseLeave.bind(this)}async setFocus(i){this.menuItem.focus(i)}async removeFocus(){this.menuItem.blur()}getTextLabel(){return Promise.resolve(l(this.defaultSlot))}handleBlur(){this.hasFocus=false}handleFocus(){this.hasFocus=true}handleMouseEnter(){this.setFocus()}handleMouseLeave(){this.removeFocus()}render(){return s("div",{ref:i=>this.menuItem=i,part:"base",class:{"menu-item":true,"menu-item--checked":this.checked,"menu-item--disabled":this.disabled,"menu-item--focused":this.hasFocus},role:"menuitem","aria-disabled":this.disabled?"true":"false","aria-checked":this.checked?"true":"false",tabIndex:!this.disabled?0:null,onFocus:this.handleFocus,onBlur:this.handleBlur,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},s("span",{part:"prefix",class:"menu-item__prefix"},s("slot",{name:"prefix"})),s("span",{part:"label",class:"menu-item__label"},s("slot",{ref:i=>this.defaultSlot=i})),s("span",{part:"suffix",class:"menu-item__suffix"},s("slot",{name:"suffix"})),s("span",{part:"checked-icon",class:"menu-item__check"},s("six-icon",{size:"small","aria-hidden":"true"},"check")))}};z.style=D;export{x as six_dropdown,S as six_menu,z as six_menu_item};
+//# sourceMappingURL=p-0d9cbb51.entry.js.map