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

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixItemPickerCss","A_CHARCODE","NUMBER_OF_LETTERS","CAPITAL_ALPHABET","alphabetCodes","Array","from","map","_","i","letterIndexes","alphabet","charCode","index","character","String","fromCharCode","LOWERCASE_ALPHABET","length","lowercaseCharacter","toLowerCase","push","ALPHABET","capitalCharacter","lowerCharacter","createItemIndexes","arr","itemIndexes","TAG","subtract","a","b","add","DEBOUNCE_ITEM_PICKER_LISTENER","SixItemPicker","this","eventListeners","EventListeners","handleSixItemPickerChangeDebounced","sixChangeDebounced","emit","value","ItemPickerType","NUMBER","ItemPickerPaddingDirection","BEFORE","DEFAULT_DEBOUNCE_FAST","DEFAULT_DEBOUNCE_INSANELY_FAST","handleValueChange","setup","debounceChanged","removeByIdentifier","host","debounce","handleSetChange","min","_items","max","getLastStringItem","componentWillLoad","componentDidLoad","disconnectedCallback","removeAll","isNumber","setupNumberItems","setUpStringItems","isInvalidNumber","console","warn","info","_a","getItems","_itemIndexes","getItemIndexes","itemsMissValue","find","undefined","roundtrip","maxItem","LETTER","CAPITAL_LETTER","LOWER_LETTER","CUSTOM","items","type","previousItem","previousNumber","previousStringItem","sixChange","changeValue","isNextItemAllowed","isPreviousNumberDisabled","getNextItem","Number","step","getRoundtripItem","isRoundtripPossible","minLetter","getStringItemIndex","getNextItemByOperation","nextItem","nextNumber","nextStringItem","isNextNumberDisabled","char","maxLetter","operation","nextIndexCandidate","numberOfItems","nextIndex","params","error","isNaN","isNextDisabled","Infinity","isPrevDisabled","onMouseDownNext","_timeoutNext","setTimeout","_intervalNext","setInterval","interval","timeout","onMouseUpNext","clearTimeout","clearInterval","onMouseDownPrev","_timeoutPrev","_intervalPrev","onMouseUpPrev","getFormattedValue","padded","paddingDirection","padStart","paddingLength","paddingChar","AFTER","padEnd","render","h","part","class","item_picker__btn","onMouseDown","onMouseUp","size"],"sources":["./src/components/six-item-picker/six-item-picker.scss?tag=six-item-picker&encapsulation=shadow","./src/components/six-item-picker/six-item-picker.tsx"],"sourcesContent":[".item_picker {\n  &__container {\n    width: 2.5em;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n\n  &__content {\n    font-size: 1.5rem;\n  }\n\n  &__btn {\n    cursor: pointer;\n    width: 2.5em;\n    height: 2.5em;\n    display: flex;\n    vertical-align: middle;\n    align-items: center;\n    justify-content: center;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    color: var(--six-color-web-rock-500);\n\n    &:hover {\n      background-color: var(--six-color-web-rock-100);\n      border-radius: 100%;\n    }\n\n    &:active {\n      color: var(--six-color-web-rock-400);\n    }\n\n    &--disabled {\n      color: var(--six-color-web-rock-300);\n      cursor: not-allowed;\n\n      &:hover {\n        background-color: initial;\n      }\n\n      &:active {\n        color: var(--six-color-web-rock-300);\n      }\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { ItemPickerPaddingDirection, ItemPickerType } from './types';\nimport { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\ntype StringItemIndex = { [key: string]: number };\n\ninterface Alphabet {\n  alphabet: string[];\n  letterIndexes: StringItemIndex;\n}\n\nconst A_CHARCODE = 65;\nconst NUMBER_OF_LETTERS = 26;\n\nconst CAPITAL_ALPHABET: Alphabet = (() => {\n  const alphabetCodes = Array.from(Array(NUMBER_OF_LETTERS)).map((_, i) => i + A_CHARCODE);\n  const letterIndexes = {};\n  const alphabet = alphabetCodes.map((charCode, index) => {\n    const character = String.fromCharCode(charCode);\n    letterIndexes[character] = index;\n    return character;\n  });\n  return { alphabet, letterIndexes };\n})();\n\nconst LOWERCASE_ALPHABET: Alphabet = (() => {\n  const alphabet = [];\n  const letterIndexes = {};\n\n  for (let i = 0; i < CAPITAL_ALPHABET.alphabet.length; i++) {\n    const lowercaseCharacter = CAPITAL_ALPHABET.alphabet[i].toLowerCase();\n    letterIndexes[lowercaseCharacter] = alphabet.length;\n    alphabet.push(lowercaseCharacter);\n  }\n\n  return { alphabet, letterIndexes };\n})();\n\nconst ALPHABET: Alphabet = (() => {\n  const alphabet = [];\n  const letterIndexes = {};\n\n  for (let i = 0; i < CAPITAL_ALPHABET.alphabet.length; i++) {\n    const capitalCharacter = CAPITAL_ALPHABET.alphabet[i];\n    letterIndexes[capitalCharacter] = alphabet.length;\n    alphabet.push(capitalCharacter);\n\n    const lowerCharacter = LOWERCASE_ALPHABET.alphabet[i];\n    letterIndexes[lowerCharacter] = alphabet.length;\n    alphabet.push(lowerCharacter);\n  }\n\n  return { alphabet, letterIndexes };\n})();\n\nconst createItemIndexes = (arr: string[]): StringItemIndex => {\n  const itemIndexes = {};\n\n  for (let i = 0; i < arr?.length; i++) {\n    itemIndexes[arr[i]] = i;\n  }\n\n  return itemIndexes;\n};\n\nconst TAG = `[SIX-ITEM-PICKER]`;\n\nconst subtract = (a: number, b: number) => a - b;\nconst add = (a: number, b: number) => a + b;\n\nexport type SixItemPickerChangePayload = number | string;\n\nconst DEBOUNCE_ITEM_PICKER_LISTENER = 'debounced-item-picker';\n\n/**\n * @since 2.0.0\n * @status experimental\n * @part container - The whole component container\n * @part up - The up button\n * @part content - The content area\n * @part down - The down button\n *\n */\n@Component({\n  tag: 'six-item-picker',\n  styleUrl: 'six-item-picker.scss',\n  shadow: true,\n})\nexport class SixItemPicker {\n  private readonly eventListeners = new EventListeners();\n\n  @Element() host: HTMLSixItemPickerElement;\n\n  /** The item picker's value attribute. */\n  @Prop({ mutable: true, reflect: true }) value: number | string = '';\n\n  /** The type of items you want to rotate through. */\n  @Prop() type: ItemPickerType = ItemPickerType.NUMBER;\n\n  /** The minimum value allowed to pick. */\n  @Prop({ reflect: true, mutable: true }) min: number | string;\n\n  /** The maximum value allowed to pick. */\n  @Prop({ reflect: true, mutable: true }) max: number | string;\n\n  /** Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa. */\n  @Prop({ reflect: true }) roundtrip = true;\n\n  /** Defines how many steps should be taken when navigating */\n  @Prop({ reflect: true }) step: number = 1;\n\n  /** Defines a custom list of items you can iterate through */\n  @Prop() items: string[];\n\n  /** Defines whether the items should be padded */\n  @Prop() padded = false;\n\n  /** Defines the length of the padded area */\n  @Prop() paddingLength = 2;\n\n  /** Defines the character used for padding */\n  @Prop() paddingChar = '0';\n\n  /** Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default\n   * before is selected */\n  @Prop() paddingDirection: ItemPickerPaddingDirection = ItemPickerPaddingDirection.BEFORE;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger faster switching between items.\n   */\n  @Prop() timeout = DEFAULT_DEBOUNCE_FAST;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed.\n   */\n  @Prop() interval = DEFAULT_DEBOUNCE_INSANELY_FAST;\n\n  /**\n   * Emitted when the item picker's value changes\n   */\n  @Event({ eventName: 'six-item-picker-change' }) sixChange: EventEmitter<SixItemPickerChangePayload>;\n\n  /**\n   * Emitted when the item picker's value changes, but debounced\n   */\n  @Event({ eventName: 'six-item-picker-change-debounced' })\n  sixChangeDebounced: EventEmitter<SixItemPickerChangePayload>;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event.\n   * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\n   * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n   * (and keep pressed) and once you release\n   */\n  @Prop() debounce = DEFAULT_DEBOUNCE_FAST;\n\n  @Watch('value')\n  handleValueChange() {\n    this.setup();\n  }\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.eventListeners.removeByIdentifier(DEBOUNCE_ITEM_PICKER_LISTENER);\n    this.eventListeners.add(\n      this.host,\n      'six-item-picker-change',\n      debounce(this.handleSixItemPickerChangeDebounced, this.debounce),\n      DEBOUNCE_ITEM_PICKER_LISTENER\n    );\n  }\n\n  @Watch('items')\n  handleSetChange() {\n    this.setup();\n    this.min = this._items[0];\n    this.max = this.getLastStringItem();\n  }\n\n  @State() _items: string[] = [];\n  @State() _itemIndexes: StringItemIndex;\n\n  // used for fast increasing when keeping the mouse button held down\n  _timeoutNext: ReturnType<typeof setTimeout>;\n  _intervalNext: ReturnType<typeof setInterval>;\n\n  _timeoutPrev: ReturnType<typeof setTimeout>;\n  _intervalPrev: ReturnType<typeof setInterval>;\n\n  componentWillLoad() {\n    this.setup();\n  }\n\n  componentDidLoad() {\n    this.eventListeners.add(\n      this.host,\n      'six-item-picker-change',\n      debounce(this.handleSixItemPickerChangeDebounced, this.debounce),\n      DEBOUNCE_ITEM_PICKER_LISTENER\n    );\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  handleSixItemPickerChangeDebounced = () => {\n    this.sixChangeDebounced.emit(this.value);\n  };\n\n  private setup() {\n    if (this.isNumber()) {\n      this.setupNumberItems();\n    } else {\n      this.setUpStringItems();\n    }\n  }\n\n  private setupNumberItems() {\n    if (this.isInvalidNumber()) {\n      console.warn(`${TAG} Expected number but value is not a number: \"${this.value}\"`);\n      console.info(`${TAG} Will set value to either minimum or if not provided to zero.`);\n      this.value = this.min ?? 0;\n    }\n  }\n\n  private setUpStringItems() {\n    this._items = this.getItems();\n\n    if (!this._items) {\n      console.warn(`${TAG}: abort setup because no items were found.`);\n      return;\n    }\n\n    this._itemIndexes = this.getItemIndexes();\n    const itemsMissValue = this._items.find((i) => String(i) === String(this.value)) === undefined;\n    if (itemsMissValue) {\n      console.warn(`${TAG} Expected item from item set but value was not found in set: \"${this.value}\"`);\n      console.info(`${TAG} Will set value to either minimum or if not provided to \"${this._items[0]}\".`);\n      this.value = this._items[0];\n    }\n\n    if (this.min === undefined) {\n      if (!this.roundtrip) {\n        console.warn(`${TAG} Expected a min value`);\n        console.info(`${TAG} Will set min value to ${this._items[0]}`);\n      }\n      this.min = this._items[0];\n    }\n\n    if (this.max === undefined) {\n      const maxItem = this.getLastStringItem();\n      if (!this.roundtrip) {\n        console.warn(`${TAG} Expected a min value if roundtrip is enabled`);\n        console.info(`${TAG} Will set min value to ${maxItem}`);\n      }\n      this.max = maxItem;\n    }\n  }\n\n  private getLastStringItem() {\n    return this._items[this._items.length - 1];\n  }\n\n  private getItems() {\n    return {\n      [ItemPickerType.LETTER]: ALPHABET.alphabet,\n      [ItemPickerType.CAPITAL_LETTER]: CAPITAL_ALPHABET.alphabet,\n      [ItemPickerType.LOWER_LETTER]: LOWERCASE_ALPHABET.alphabet,\n      [ItemPickerType.CUSTOM]: this.items,\n    }[this.type];\n  }\n\n  private getItemIndexes() {\n    if (this.type === ItemPickerType.CUSTOM) {\n      return createItemIndexes(this.items);\n    }\n\n    return {\n      [ItemPickerType.LETTER]: ALPHABET.letterIndexes,\n      [ItemPickerType.CAPITAL_LETTER]: CAPITAL_ALPHABET.letterIndexes,\n      [ItemPickerType.LOWER_LETTER]: LOWERCASE_ALPHABET.letterIndexes,\n    }[this.type];\n  }\n\n  private previousItem() {\n    if (this.isNumber()) {\n      this.previousNumber();\n    } else {\n      this.previousStringItem();\n    }\n\n    this.sixChange.emit(this.value);\n  }\n\n  private previousNumber() {\n    this.changeValue({\n      isNextItemAllowed: () => !this.isPreviousNumberDisabled(),\n      getNextItem: () => Number(this.value) - this.step,\n      getRoundtripItem: () => Number(this.max),\n      isRoundtripPossible: () => this.max === undefined && this.roundtrip,\n    });\n  }\n\n  private previousStringItem() {\n    const value = this.value as string;\n    const minLetter = this.min as string;\n\n    this.changeValue({\n      isNextItemAllowed: () =>\n        minLetter === undefined || this.getStringItemIndex(value) > this.getStringItemIndex(minLetter),\n      getNextItem: () => this.getNextItemByOperation(subtract),\n      getRoundtripItem: () => this.max,\n      isRoundtripPossible: () => this.max === undefined && this.roundtrip,\n    });\n  }\n\n  private nextItem() {\n    if (this.isNumber()) {\n      this.nextNumber();\n    } else {\n      this.nextStringItem();\n    }\n\n    this.sixChange.emit(this.value);\n  }\n\n  private nextNumber() {\n    this.changeValue({\n      isNextItemAllowed: () => !this.isNextNumberDisabled(),\n      getNextItem: () => Number(this.value) + this.step,\n      getRoundtripItem: () => Number(this.min),\n      isRoundtripPossible: () => this.min === undefined && this.roundtrip,\n    });\n  }\n\n  private getStringItemIndex(char: string): number {\n    return this._itemIndexes[char];\n  }\n\n  private nextStringItem() {\n    const value = this.value as string;\n    const maxLetter = this.max as string;\n\n    this.changeValue({\n      isNextItemAllowed: () =>\n        maxLetter === undefined || this.getStringItemIndex(value) < this.getStringItemIndex(maxLetter),\n      getNextItem: () => this.getNextItemByOperation(add),\n      getRoundtripItem: () => this.min,\n      isRoundtripPossible: () => this.min === undefined && this.roundtrip,\n    });\n  }\n\n  private getNextItemByOperation(operation: (a: number, b: number) => number) {\n    const value = this.value as string;\n    const nextIndexCandidate = operation(this.getStringItemIndex(value), this.step);\n    const numberOfItems = this._items.length;\n    const nextIndex = ((nextIndexCandidate % numberOfItems) + numberOfItems) % numberOfItems;\n    return this._items[nextIndex];\n  }\n\n  private changeValue(params: {\n    getNextItem: () => any;\n    isNextItemAllowed: () => boolean;\n    getRoundtripItem: () => number | string;\n    isRoundtripPossible: () => boolean;\n  }) {\n    if (params.isNextItemAllowed()) {\n      this.value = params.getNextItem();\n      return;\n    }\n\n    if (params.isRoundtripPossible()) {\n      console.error(\n        `${TAG} Item picker is expected to perform a roundtrip, but either max or min value is missing so a roundtrip is not possible`\n      );\n      return;\n    }\n\n    if (this.roundtrip) {\n      this.value = params.getRoundtripItem();\n      return;\n    }\n\n    console.warn(\n      `${TAG} Roundtrip is not allowed, but was still triggered, please report this issue to the developer of six-item-picker`\n    );\n  }\n\n  private isNumber() {\n    return this.type === ItemPickerType.NUMBER;\n  }\n\n  private isInvalidNumber() {\n    return this.value === '' || !!isNaN(this.value as number);\n  }\n\n  private isNextDisabled() {\n    if (this.roundtrip) {\n      return false;\n    }\n\n    if (this.isNumber()) {\n      return this.isNextNumberDisabled();\n    } else {\n      if (!this._itemIndexes) {\n        return true;\n      }\n\n      return this._itemIndexes[String(this.value)] + this.step > this._itemIndexes[String(this.max)];\n    }\n  }\n\n  private isNextNumberDisabled() {\n    return Number(this.value) + this.step > (this.max ?? Infinity);\n  }\n\n  private isPrevDisabled() {\n    if (this.roundtrip) {\n      return false;\n    }\n\n    if (this.isNumber()) {\n      return this.isPreviousNumberDisabled();\n    } else {\n      if (!this._itemIndexes) {\n        return true;\n      }\n\n      return this._itemIndexes[String(this.value)] - this.step < this._itemIndexes[String(this.min)];\n    }\n  }\n\n  private isPreviousNumberDisabled() {\n    return Number(this.value) - this.step < (this.min ?? -Infinity);\n  }\n\n  private onMouseDownNext() {\n    if (this.isNextDisabled()) {\n      return;\n    }\n\n    this.nextItem();\n\n    this._timeoutNext = setTimeout(() => {\n      this._intervalNext = setInterval(() => {\n        this.nextItem();\n      }, this.interval);\n    }, this.timeout);\n  }\n\n  private onMouseUpNext() {\n    clearTimeout(this._timeoutNext);\n    clearInterval(this._intervalNext);\n  }\n\n  private onMouseDownPrev() {\n    if (this.isPrevDisabled()) {\n      return;\n    }\n\n    this.previousItem();\n\n    this._timeoutPrev = setTimeout(() => {\n      this._intervalPrev = setInterval(() => {\n        this.previousItem();\n      }, this.interval);\n    }, this.timeout);\n  }\n\n  private onMouseUpPrev() {\n    clearTimeout(this._timeoutPrev);\n    clearInterval(this._intervalPrev);\n  }\n\n  private getFormattedValue() {\n    if (this.value === undefined || this.value === null) {\n      return this.value;\n    }\n\n    if (!this.padded) {\n      return this.value;\n    }\n\n    if (this.paddingDirection === ItemPickerPaddingDirection.BEFORE) {\n      return String(this.value).padStart(this.paddingLength, this.paddingChar);\n    } else if (this.paddingDirection === ItemPickerPaddingDirection.AFTER) {\n      return String(this.value).padEnd(this.paddingLength, this.paddingChar);\n    }\n\n    return this.value;\n  }\n\n  render() {\n    return (\n      <div part=\"container\" class=\"item_picker__container\">\n        <div\n          part=\"up\"\n          class={{\n            item_picker__btn: true,\n            'item_picker__btn--disabled': this.isNextDisabled(),\n          }}\n          onMouseDown={() => this.onMouseDownNext()}\n          onMouseUp={() => this.onMouseUpNext()}\n        >\n          <six-icon size=\"large\">expand_less</six-icon>\n        </div>\n        <div part=\"content\" class=\"item_picker__content\">\n          {this.getFormattedValue()}\n        </div>\n        <div\n          part=\"down\"\n          class={{\n            item_picker__btn: true,\n            'item_picker__btn--disabled': this.isPrevDisabled(),\n          }}\n          onMouseDown={() => this.onMouseDownPrev()}\n          onMouseUp={() => this.onMouseUpPrev()}\n        >\n          <six-icon size=\"large\">expand_more</six-icon>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

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

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

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

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

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

@@ -1,2 +0,0 @@
-import{r as e,h as i}from"./p-ac4f4d45.js";const t=".six-error-page__title{display:flex;justify-content:center;font-size:var(--six-font-size-xx-large);font-weight:bold;margin-bottom:var(--six-spacing-large)}.six-error-page__description>*{text-align:center}.six-error-page__icon-container{display:flex;justify-content:center}.six-error-page__icon::part(icon){background-color:var(--six-color-web-rock-300)}";var n;(function(e){e[e["FORBIDDEN"]=403]="FORBIDDEN";e[e["NOT_FOUND"]=404]="NOT_FOUND";e[e["INTERNAL_SERVER_ERROR"]=500]="INTERNAL_SERVER_ERROR"})(n||(n={}));const r={[n.FORBIDDEN]:{en:"Access Denied",de:"Kein Zugriff"},[n.NOT_FOUND]:{en:"Not Found",de:"Seite nicht gefunden"},[n.INTERNAL_SERVER_ERROR]:{en:"Ooops!",de:"Ups!"}};const s={[n.FORBIDDEN]:{en:["You don’t have permission to access this page. ","Please contact an administrator or click the SIX logo on top left."],de:["Sie haben keine Zugriffsberechtigung auf diese Seite.","Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links."]},[n.NOT_FOUND]:{en:["We have not found the page you requested.","Please click the SIX logo on top left."],de:["Wir haben die angeforderte Seite nicht gefunden.","Bitte klicken Sie auf das SIX-Logo oben links."]},[n.INTERNAL_SERVER_ERROR]:{en:["Sorry, we messed up! We try to fix this.","Please click the SIX logo on top left."],de:["Sorry, das war unser Fehler! Wir versuchen das zu beheben.","Bitte klicken Sie auf das SIX-Logo oben links."]}};const o=class{constructor(i){e(this,i);this.errorCode=undefined;this.language="en";this.customTitle=undefined;this.customDescription=undefined;this.customIcon=undefined}getIconName(){if(this.customIcon!==undefined){return this.customIcon}if(this.errorCode===undefined){return}if(this.errorCode===n.FORBIDDEN){return"lock"}if(this.errorCode===n.NOT_FOUND){return"find-in-page"}if(this.errorCode===n.INTERNAL_SERVER_ERROR){return"sentiment-dissatisfied"}}getErrorTitle(){if(this.customTitle!==undefined){return this.customTitle}if(this.errorCode===undefined){return}return r[this.errorCode][this.language]}getErrorDescription(){if(this.errorCode===undefined&&this.customDescription===undefined){return}const e=this.getDescriptions();return e.map((e=>i("div",null,e)))}getDescriptions(){if(this.customDescription!==undefined){return this.customDescription}return s[this.errorCode][this.language]}render(){return i("div",{part:"container"},i("div",{class:"six-error-page__icon-container",part:"icon-container"},i("six-picto",{size:"4xl",class:"six-error-page__icon",part:"icon"},this.getIconName())),i("div",{class:"six-error-page__title",part:"title"},this.getErrorTitle()),i("div",{class:"six-error-page__description",part:"description"},this.getErrorDescription()))}};o.style=t;export{o as six_error_page};
-//# sourceMappingURL=p-fed07a1f.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sixErrorPageCss","ERROR_CODE","TITLE_PER_ERROR_CODE","FORBIDDEN","en","de","NOT_FOUND","INTERNAL_SERVER_ERROR","DESCRIPTION_PER_ERROR_CODE","SixErrorPage","getIconName","this","customIcon","undefined","errorCode","getErrorTitle","customTitle","language","getErrorDescription","customDescription","descriptions","getDescriptions","map","errorMessage","h","render","part","class","size"],"sources":["./src/components/six-error-page/six-error-page.scss?tag=six-error-page&encapsulation=shadow","./src/components/six-error-page/six-error-page.tsx"],"sourcesContent":[".six-error-page {\n  &__title {\n    display: flex;\n    justify-content: center;\n    font-size: var(--six-font-size-xx-large);\n    font-weight: bold;\n    margin-bottom: var(--six-spacing-large);\n  }\n\n  &__description {\n    & > * {\n      text-align: center;\n    }\n  }\n\n  &__icon-container {\n    display: flex;\n    justify-content: center;\n  }\n\n  &__icon::part(icon) {\n    background-color: var(--six-color-web-rock-300);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nenum ERROR_CODE {\n  FORBIDDEN = 403,\n  NOT_FOUND = 404,\n  INTERNAL_SERVER_ERROR = 500,\n}\nconst TITLE_PER_ERROR_CODE = {\n  [ERROR_CODE.FORBIDDEN]: {\n    en: 'Access Denied',\n    de: 'Kein Zugriff',\n  },\n  [ERROR_CODE.NOT_FOUND]: {\n    en: 'Not Found',\n    de: 'Seite nicht gefunden',\n  },\n  [ERROR_CODE.INTERNAL_SERVER_ERROR]: {\n    en: 'Ooops!',\n    de: 'Ups!',\n  },\n};\n\nconst DESCRIPTION_PER_ERROR_CODE = {\n  [ERROR_CODE.FORBIDDEN]: {\n    en: [\n      'You don’t have permission to access this page. ',\n      'Please contact an administrator or click the SIX logo on top left.',\n    ],\n    de: [\n      'Sie haben keine Zugriffsberechtigung auf diese Seite.',\n      'Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links.',\n    ],\n  },\n  [ERROR_CODE.NOT_FOUND]: {\n    en: ['We have not found the page you requested.', 'Please click the SIX logo on top left.'],\n    de: ['Wir haben die angeforderte Seite nicht gefunden.', 'Bitte klicken Sie auf das SIX-Logo oben links.'],\n  },\n  [ERROR_CODE.INTERNAL_SERVER_ERROR]: {\n    en: ['Sorry, we messed up! We try to fix this.', 'Please click the SIX logo on top left.'],\n    de: [\n      'Sorry, das war unser Fehler! Wir versuchen das zu beheben.',\n      'Bitte klicken Sie auf das SIX-Logo oben links.',\n    ],\n  },\n};\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n\n@Component({\n  tag: 'six-error-page',\n  styleUrl: 'six-error-page.scss',\n  shadow: true,\n})\nexport class SixErrorPage {\n  /**\n   * Defines error Code and thus displays the proper error page.\n   */\n  @Prop() errorCode: number;\n\n  /**\n   * Defines language and thus displays the proper error page in the selected language.\n   */\n  @Prop() language: 'en' | 'de' = 'en';\n\n  /**\n   * Defines a custom title.\n   */\n  @Prop() customTitle?: string;\n\n  /**\n   * Defines a custom description.\n   */\n  @Prop() customDescription?: string[];\n\n  /**\n   * Defines a custom icon.\n   */\n  @Prop() customIcon?: string;\n\n  private getIconName() {\n    if (this.customIcon !== undefined) {\n      return this.customIcon;\n    }\n\n    if (this.errorCode === undefined) {\n      return;\n    }\n\n    if (this.errorCode === ERROR_CODE.FORBIDDEN) {\n      return 'lock';\n    }\n\n    if (this.errorCode === ERROR_CODE.NOT_FOUND) {\n      return 'find-in-page';\n    }\n\n    if (this.errorCode === ERROR_CODE.INTERNAL_SERVER_ERROR) {\n      return 'sentiment-dissatisfied';\n    }\n  }\n\n  private getErrorTitle() {\n    if (this.customTitle !== undefined) {\n      return this.customTitle;\n    }\n\n    if (this.errorCode === undefined) {\n      return;\n    }\n\n    return TITLE_PER_ERROR_CODE[this.errorCode][this.language];\n  }\n\n  private getErrorDescription() {\n    if (this.errorCode === undefined && this.customDescription === undefined) {\n      return;\n    }\n\n    const descriptions = this.getDescriptions();\n    return descriptions.map((errorMessage) => <div>{errorMessage}</div>);\n  }\n\n  private getDescriptions() {\n    if (this.customDescription !== undefined) {\n      return this.customDescription;\n    }\n\n    return DESCRIPTION_PER_ERROR_CODE[this.errorCode][this.language];\n  }\n\n  render() {\n    return (\n      <div part=\"container\">\n        <div class=\"six-error-page__icon-container\" part=\"icon-container\">\n          <six-picto size=\"4xl\" class=\"six-error-page__icon\" part=\"icon\">\n            {this.getIconName()}\n          </six-picto>\n        </div>\n        <div class=\"six-error-page__title\" part=\"title\">\n          {this.getErrorTitle()}\n        </div>\n        <div class=\"six-error-page__description\" part=\"description\">\n          {this.getErrorDescription()}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAkB,oWCExB,IAAKC,GAAL,SAAKA,GACHA,IAAA,8BACAA,IAAA,8BACAA,IAAA,qDACD,EAJD,CAAKA,MAAU,KAKf,MAAMC,EAAuB,CAC3B,CAACD,EAAWE,WAAY,CACtBC,GAAI,gBACJC,GAAI,gBAEN,CAACJ,EAAWK,WAAY,CACtBF,GAAI,YACJC,GAAI,wBAEN,CAACJ,EAAWM,uBAAwB,CAClCH,GAAI,SACJC,GAAI,SAIR,MAAMG,EAA6B,CACjC,CAACP,EAAWE,WAAY,CACtBC,GAAI,CACF,kDACA,sEAEFC,GAAI,CACF,wDACA,+FAGJ,CAACJ,EAAWK,WAAY,CACtBF,GAAI,CAAC,4CAA6C,0CAClDC,GAAI,CAAC,mDAAoD,mDAE3D,CAACJ,EAAWM,uBAAwB,CAClCH,GAAI,CAAC,2CAA4C,0CACjDC,GAAI,CACF,6DACA,oD,MAiBOI,EAAY,M,gEASS,K,sFAiBxBC,cACN,GAAIC,KAAKC,aAAeC,UAAW,CACjC,OAAOF,KAAKC,U,CAGd,GAAID,KAAKG,YAAcD,UAAW,CAChC,M,CAGF,GAAIF,KAAKG,YAAcb,EAAWE,UAAW,CAC3C,MAAO,M,CAGT,GAAIQ,KAAKG,YAAcb,EAAWK,UAAW,CAC3C,MAAO,c,CAGT,GAAIK,KAAKG,YAAcb,EAAWM,sBAAuB,CACvD,MAAO,wB,EAIHQ,gBACN,GAAIJ,KAAKK,cAAgBH,UAAW,CAClC,OAAOF,KAAKK,W,CAGd,GAAIL,KAAKG,YAAcD,UAAW,CAChC,M,CAGF,OAAOX,EAAqBS,KAAKG,WAAWH,KAAKM,S,CAG3CC,sBACN,GAAIP,KAAKG,YAAcD,WAAaF,KAAKQ,oBAAsBN,UAAW,CACxE,M,CAGF,MAAMO,EAAeT,KAAKU,kBAC1B,OAAOD,EAAaE,KAAKC,GAAiBC,EAAA,WAAMD,I,CAG1CF,kBACN,GAAIV,KAAKQ,oBAAsBN,UAAW,CACxC,OAAOF,KAAKQ,iB,CAGd,OAAOX,EAA2BG,KAAKG,WAAWH,KAAKM,S,CAGzDQ,SACE,OACED,EAAA,OAAKE,KAAK,aACRF,EAAA,OAAKG,MAAM,iCAAiCD,KAAK,kBAC/CF,EAAA,aAAWI,KAAK,MAAMD,MAAM,uBAAuBD,KAAK,QACrDf,KAAKD,gBAGVc,EAAA,OAAKG,MAAM,wBAAwBD,KAAK,SACrCf,KAAKI,iBAERS,EAAA,OAAKG,MAAM,8BAA8BD,KAAK,eAC3Cf,KAAKO,uB"}

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

@@ -1,2 +0,0 @@
-import{r as i,c as s,h as e,g as l}from"./p-ac4f4d45.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-ff0257bf.entry.js.map

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

@@ -1 +0,0 @@
-{"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/readme.md

@@ -1,156 +0,0 @@
-![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
-
-# Six UI Components
-
-This is the actual UI components library.
-
-The Webcomponents in this library are built with Stencil.
-
-## Stencil
-
-Stencil is a compiler for building fast web apps using Web Components.
-
-Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
-
-Stencil components are just Web Components, so they work in any major framework or with no framework at all.
-
-## Getting Started
-
-To start building a new webcomponent using Stencil:
-
-```bash
-npm run generate six-name-of-new-component
-```
-
-This will create a new folder containing everything necessary for you to develop a new component
-
-To run the unit tests for the components, run:
-
-```bash
-npm test
-```
-
-Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
-
-## Testing
-
-To run all unit and e2e tests simply execute
-
-```bash
-npm run teste2e
-```
-
-If you want to run a specific file, simply add the filename ad the end to the command above:
-
-```bash
-npm run test:2e components/six-button/test/six-button.e2e.ts
-```
-
-For debugging stencil provides the `--devtools` flag. This will slow down chrome and open the devtools automatically.
-
-Simply add a `debugger;` statement in the code where you want the test to stop and run:
-
-```bash
-npm run test:debug components/six-button/test/six-button.e2e.ts
-```
-
-If you need evaluation at a certain breakpoint the easiest is to open the `ui-library` folder in vscode. The provided
-`launch.json` automatically adds the correct runconfigurations to debug tests in vscode
-
-If you want to do some more advanced debugging you can also use `page.evaluate`. Add the following in your code:
-
-```javascript
-await page.evaluate(() => {
-  console.log('this is some evaluation');
-  debugger;
-});
-```
-
-and run the same command as above:
-
-```bash
-npm run test:debug components/six-button/test/six-button.e2e.ts
-```
-
-FYI: There seems to be some weird bug when using `page.evaluate` where the browser first stops in a ghost breakpoint and
-you have to reload the browser (Ctrl + R) to get to your evaluation endpoint.
-
-### Visual Diff Testing
-
-The flag `--screenshot` allows to run visual diff e2e tests. When we run these tests we will make a screenshot of the
-component and compare it with previous screenshots. You can find the screenshots in [this image folder](./screenshot/images).
-
-When a screenshot test fails you can open the [compare.html](./screenshot/compare.html) which will present you what changed.
-
-When you actually redesigned the component and expect the changes simply delete the old images.
-
-The screenshot tests are not run in the build because the tests seem to always fail in the build and it's very hard to
-figure out what exactly differs there. So if you want to validate the components are still working properly run it locally:
-
-`npm run test:inclScrnsht`
-
-## Adding documentation
-
-To see the documentation for your component you need to do the following:
-
-- add an `index.html` to your component folder
-- the `index.html` should have the following structure, where a div with the `container` class surrounds all your examples.
-  And the code examples are wrapped in `<div class="container"></div>`:
-  `html
-    <!DOCTYPE html>
-    <html dir="ltr" lang="en">
-    <head>
-      <meta charset="utf-8"/>
-      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"/>
-      <script type="module" src="/build/ui-library.esm.js"></script>
-      <script nomodule src="/build/ui-library.js"></script>
-      <link rel="stylesheet" href="/build/ui-library.css">
-      <title>MyComponent</title>
-    </head>
-    <body>
-    <div class="container">
-      <h1>MyComponent</h1>
-      <p>MyComponent is used for blablabla</p>
-      <section class="demo">
-        <my-component></my-component>
-      </section>
-    </div>
-    </body>
-    </html>
-    `
-- additionally you need to have an `EXAMPLES` comment in your readme.md:
-
-  ```
-  <!-- EXAMPLES -->
-
-  <!-- Auto Generated Below -->
-  ```
-
-### Prepare
-
-Before creating a new version make sure that:
-
-- you built the projects to be publish (dist folder should be updated)
-- you updated [CHANGELOG.md](CHANGELOG.md)
-- you know which version to update to
-  - our library follows [Semantic Versioning](https://semver.org/) so follow this guide to decide what kind of version update you will bring:
-    - <b>MAJOR</b> version when you make incompatible API changes
-      - <b>=></b> Users of the SIX Web Components Library must adapt their code to use the new version.
-    - <b>MINOR</b> version when you add functionality in a backwards compatible manner, and
-      - <b>=></b> Users of the SIX Web Component Library can use new features but must not adapt their existing code.
-    - <b>PATCH</b> version when you make backwards compatible bug fixes.
-      - <b>=></b> Users of the SIX Web Component Library get a bug fixed but must not adapt their existing code.
-
-There are different ways how to create a new version:
-
-- manually increase the version in the `package.json` and `package-lock.json`
-- use `npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]`
-  - [see here for more details](https://docs.npmjs.com/updating-your-published-package-version-number)
-- [use lerna publish](https://lerna.js.org/)
-
-No matter what kind of method you use to bump the version make sure that the different packages are in sync - always publish these together:
-
-- ui-library
-
-* ui-library-react
-* ui-library-vue