@six-group/ui-library 3.0.0-beta.1.7

package/dist/esm/six-item-picker.entry.js

@@ -0,0 +1,368 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2605a62.js';
+import { I as ItemPickerType, a as ItemPickerPaddingDirection } from './types-a37c1695.js';
+import { D as DEFAULT_DEBOUNCE_FAST, b as DEFAULT_DEBOUNCE_INSANELY_FAST, a as debounce } from './execution-control-235f5126.js';
+import { E as EventListeners } from './event-listeners-1bef934e.js';
+
+const sixItemPickerCss = ".item_picker__container{width:2.5em;display:flex;flex-wrap:wrap;justify-content:center}.item_picker__content{font-size:1.5rem}.item_picker__btn{cursor:pointer;width:2.5em;height:2.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--six-color-web-rock-500)}.item_picker__btn:hover{background-color:var(--six-color-web-rock-100);border-radius:100%}.item_picker__btn:active{color:var(--six-color-web-rock-400)}.item_picker__btn--disabled{color:var(--six-color-web-rock-300);cursor:not-allowed}.item_picker__btn--disabled:hover{background-color:initial}.item_picker__btn--disabled:active{color:var(--six-color-web-rock-300)}";
+
+const A_CHARCODE = 65;
+const NUMBER_OF_LETTERS = 26;
+const CAPITAL_ALPHABET = (() => {
+  const alphabetCodes = Array.from(Array(NUMBER_OF_LETTERS)).map((_, i) => i + A_CHARCODE);
+  const letterIndexes = {};
+  const alphabet = alphabetCodes.map((charCode, index) => {
+    const character = String.fromCharCode(charCode);
+    letterIndexes[character] = index;
+    return character;
+  });
+  return { alphabet, letterIndexes };
+})();
+const LOWERCASE_ALPHABET = (() => {
+  const alphabet = [];
+  const letterIndexes = {};
+  for (let i = 0; i < CAPITAL_ALPHABET.alphabet.length; i++) {
+    const lowercaseCharacter = CAPITAL_ALPHABET.alphabet[i].toLowerCase();
+    letterIndexes[lowercaseCharacter] = alphabet.length;
+    alphabet.push(lowercaseCharacter);
+  }
+  return { alphabet, letterIndexes };
+})();
+const ALPHABET = (() => {
+  const alphabet = [];
+  const letterIndexes = {};
+  for (let i = 0; i < CAPITAL_ALPHABET.alphabet.length; i++) {
+    const capitalCharacter = CAPITAL_ALPHABET.alphabet[i];
+    letterIndexes[capitalCharacter] = alphabet.length;
+    alphabet.push(capitalCharacter);
+    const lowerCharacter = LOWERCASE_ALPHABET.alphabet[i];
+    letterIndexes[lowerCharacter] = alphabet.length;
+    alphabet.push(lowerCharacter);
+  }
+  return { alphabet, letterIndexes };
+})();
+const createItemIndexes = (arr) => {
+  const itemIndexes = {};
+  for (let i = 0; i < (arr === null || arr === void 0 ? void 0 : arr.length); i++) {
+    itemIndexes[arr[i]] = i;
+  }
+  return itemIndexes;
+};
+const TAG = `[SIX-ITEM-PICKER]`;
+const subtract = (a, b) => a - b;
+const add = (a, b) => a + b;
+const DEBOUNCE_ITEM_PICKER_LISTENER = 'debounced-item-picker';
+let SixItemPicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sixChange = createEvent(this, "six-item-picker-change", 7);
+    this.sixChangeDebounced = createEvent(this, "six-item-picker-change-debounced", 7);
+    this.eventListeners = new EventListeners();
+    /** The item picker's value attribute. */
+    this.value = '';
+    /** The type of items you want to rotate through. */
+    this.type = ItemPickerType.NUMBER;
+    /** Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa. */
+    this.roundtrip = true;
+    /** Defines how many steps should be taken when navigating */
+    this.step = 1;
+    /** Defines whether the items should be padded */
+    this.padded = false;
+    /** Defines the length of the padded area */
+    this.paddingLength = 2;
+    /** Defines the character used for padding */
+    this.paddingChar = '0';
+    /** Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default
+     * before is selected */
+    this.paddingDirection = ItemPickerPaddingDirection.BEFORE;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger faster switching between items.
+     */
+    this.timeout = DEFAULT_DEBOUNCE_FAST;
+    /**
+     * Set the amount of time, in milliseconds, to wait between switching to next item when mouse button is held pressed.
+     */
+    this.interval = DEFAULT_DEBOUNCE_INSANELY_FAST;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the `six-item-picker-change-debounced` event.
+     * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce
+     * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click
+     * (and keep pressed) and once you release
+     */
+    this.debounce = DEFAULT_DEBOUNCE_FAST;
+    this._items = [];
+    this.handleSixItemPickerChangeDebounced = () => {
+      this.sixChangeDebounced.emit(this.value);
+    };
+  }
+  handleValueChange() {
+    this.setup();
+  }
+  debounceChanged() {
+    this.eventListeners.removeByIdentifier(DEBOUNCE_ITEM_PICKER_LISTENER);
+    this.eventListeners.add(this.host, 'six-item-picker-change', debounce(this.handleSixItemPickerChangeDebounced, this.debounce), DEBOUNCE_ITEM_PICKER_LISTENER);
+  }
+  handleSetChange() {
+    this.setup();
+    this.min = this._items[0];
+    this.max = this.getLastStringItem();
+  }
+  componentWillLoad() {
+    this.setup();
+  }
+  componentDidLoad() {
+    this.eventListeners.add(this.host, 'six-item-picker-change', debounce(this.handleSixItemPickerChangeDebounced, this.debounce), DEBOUNCE_ITEM_PICKER_LISTENER);
+  }
+  disconnectedCallback() {
+    this.eventListeners.removeAll();
+  }
+  setup() {
+    if (this.isNumber()) {
+      this.setupNumberItems();
+    }
+    else {
+      this.setUpStringItems();
+    }
+  }
+  setupNumberItems() {
+    var _a;
+    if (this.isInvalidNumber()) {
+      console.warn(`${TAG} Expected number but value is not a number: "${this.value}"`);
+      console.info(`${TAG} Will set value to either minimum or if not provided to zero.`);
+      this.value = (_a = this.min) !== null && _a !== void 0 ? _a : 0;
+    }
+  }
+  setUpStringItems() {
+    this._items = this.getItems();
+    if (!this._items) {
+      console.warn(`${TAG}: abort setup because no items were found.`);
+      return;
+    }
+    this._itemIndexes = this.getItemIndexes();
+    const itemsMissValue = this._items.find((i) => String(i) === String(this.value)) === undefined;
+    if (itemsMissValue) {
+      console.warn(`${TAG} Expected item from item set but value was not found in set: "${this.value}"`);
+      console.info(`${TAG} Will set value to either minimum or if not provided to "${this._items[0]}".`);
+      this.value = this._items[0];
+    }
+    if (this.min === undefined) {
+      if (!this.roundtrip) {
+        console.warn(`${TAG} Expected a min value`);
+        console.info(`${TAG} Will set min value to ${this._items[0]}`);
+      }
+      this.min = this._items[0];
+    }
+    if (this.max === undefined) {
+      const maxItem = this.getLastStringItem();
+      if (!this.roundtrip) {
+        console.warn(`${TAG} Expected a min value if roundtrip is enabled`);
+        console.info(`${TAG} Will set min value to ${maxItem}`);
+      }
+      this.max = maxItem;
+    }
+  }
+  getLastStringItem() {
+    return this._items[this._items.length - 1];
+  }
+  getItems() {
+    return {
+      [ItemPickerType.LETTER]: ALPHABET.alphabet,
+      [ItemPickerType.CAPITAL_LETTER]: CAPITAL_ALPHABET.alphabet,
+      [ItemPickerType.LOWER_LETTER]: LOWERCASE_ALPHABET.alphabet,
+      [ItemPickerType.CUSTOM]: this.items,
+    }[this.type];
+  }
+  getItemIndexes() {
+    if (this.type === ItemPickerType.CUSTOM) {
+      return createItemIndexes(this.items);
+    }
+    return {
+      [ItemPickerType.LETTER]: ALPHABET.letterIndexes,
+      [ItemPickerType.CAPITAL_LETTER]: CAPITAL_ALPHABET.letterIndexes,
+      [ItemPickerType.LOWER_LETTER]: LOWERCASE_ALPHABET.letterIndexes,
+    }[this.type];
+  }
+  previousItem() {
+    if (this.isNumber()) {
+      this.previousNumber();
+    }
+    else {
+      this.previousStringItem();
+    }
+    this.sixChange.emit(this.value);
+  }
+  previousNumber() {
+    this.changeValue({
+      isNextItemAllowed: () => !this.isPreviousNumberDisabled(),
+      getNextItem: () => Number(this.value) - this.step,
+      getRoundtripItem: () => Number(this.max),
+      isRoundtripPossible: () => this.max === undefined && this.roundtrip,
+    });
+  }
+  previousStringItem() {
+    const value = this.value;
+    const minLetter = this.min;
+    this.changeValue({
+      isNextItemAllowed: () => minLetter === undefined || this.getStringItemIndex(value) > this.getStringItemIndex(minLetter),
+      getNextItem: () => this.getNextItemByOperation(subtract),
+      getRoundtripItem: () => this.max,
+      isRoundtripPossible: () => this.max === undefined && this.roundtrip,
+    });
+  }
+  nextItem() {
+    if (this.isNumber()) {
+      this.nextNumber();
+    }
+    else {
+      this.nextStringItem();
+    }
+    this.sixChange.emit(this.value);
+  }
+  nextNumber() {
+    this.changeValue({
+      isNextItemAllowed: () => !this.isNextNumberDisabled(),
+      getNextItem: () => Number(this.value) + this.step,
+      getRoundtripItem: () => Number(this.min),
+      isRoundtripPossible: () => this.min === undefined && this.roundtrip,
+    });
+  }
+  getStringItemIndex(char) {
+    return this._itemIndexes[char];
+  }
+  nextStringItem() {
+    const value = this.value;
+    const maxLetter = this.max;
+    this.changeValue({
+      isNextItemAllowed: () => maxLetter === undefined || this.getStringItemIndex(value) < this.getStringItemIndex(maxLetter),
+      getNextItem: () => this.getNextItemByOperation(add),
+      getRoundtripItem: () => this.min,
+      isRoundtripPossible: () => this.min === undefined && this.roundtrip,
+    });
+  }
+  getNextItemByOperation(operation) {
+    const value = this.value;
+    const nextIndexCandidate = operation(this.getStringItemIndex(value), this.step);
+    const numberOfItems = this._items.length;
+    const nextIndex = ((nextIndexCandidate % numberOfItems) + numberOfItems) % numberOfItems;
+    return this._items[nextIndex];
+  }
+  changeValue(params) {
+    if (params.isNextItemAllowed()) {
+      this.value = params.getNextItem();
+      return;
+    }
+    if (params.isRoundtripPossible()) {
+      console.error(`${TAG} Item picker is expected to perform a roundtrip, but either max or min value is missing so a roundtrip is not possible`);
+      return;
+    }
+    if (this.roundtrip) {
+      this.value = params.getRoundtripItem();
+      return;
+    }
+    console.warn(`${TAG} Roundtrip is not allowed, but was still triggered, please report this issue to the developer of six-item-picker`);
+  }
+  isNumber() {
+    return this.type === ItemPickerType.NUMBER;
+  }
+  isInvalidNumber() {
+    return this.value === '' || !!isNaN(this.value);
+  }
+  isNextDisabled() {
+    if (this.roundtrip) {
+      return false;
+    }
+    if (this.isNumber()) {
+      return this.isNextNumberDisabled();
+    }
+    else {
+      if (!this._itemIndexes) {
+        return true;
+      }
+      return this._itemIndexes[String(this.value)] + this.step > this._itemIndexes[String(this.max)];
+    }
+  }
+  isNextNumberDisabled() {
+    var _a;
+    return Number(this.value) + this.step > ((_a = this.max) !== null && _a !== void 0 ? _a : Infinity);
+  }
+  isPrevDisabled() {
+    if (this.roundtrip) {
+      return false;
+    }
+    if (this.isNumber()) {
+      return this.isPreviousNumberDisabled();
+    }
+    else {
+      if (!this._itemIndexes) {
+        return true;
+      }
+      return this._itemIndexes[String(this.value)] - this.step < this._itemIndexes[String(this.min)];
+    }
+  }
+  isPreviousNumberDisabled() {
+    var _a;
+    return Number(this.value) - this.step < ((_a = this.min) !== null && _a !== void 0 ? _a : -Infinity);
+  }
+  onMouseDownNext() {
+    if (this.isNextDisabled()) {
+      return;
+    }
+    this.nextItem();
+    this._timeoutNext = setTimeout(() => {
+      this._intervalNext = setInterval(() => {
+        this.nextItem();
+      }, this.interval);
+    }, this.timeout);
+  }
+  onMouseUpNext() {
+    clearTimeout(this._timeoutNext);
+    clearInterval(this._intervalNext);
+  }
+  onMouseDownPrev() {
+    if (this.isPrevDisabled()) {
+      return;
+    }
+    this.previousItem();
+    this._timeoutPrev = setTimeout(() => {
+      this._intervalPrev = setInterval(() => {
+        this.previousItem();
+      }, this.interval);
+    }, this.timeout);
+  }
+  onMouseUpPrev() {
+    clearTimeout(this._timeoutPrev);
+    clearInterval(this._intervalPrev);
+  }
+  getFormattedValue() {
+    if (this.value === undefined || this.value === null) {
+      return this.value;
+    }
+    if (!this.padded) {
+      return this.value;
+    }
+    if (this.paddingDirection === ItemPickerPaddingDirection.BEFORE) {
+      return String(this.value).padStart(this.paddingLength, this.paddingChar);
+    }
+    else if (this.paddingDirection === ItemPickerPaddingDirection.AFTER) {
+      return String(this.value).padEnd(this.paddingLength, this.paddingChar);
+    }
+    return this.value;
+  }
+  render() {
+    return (h("div", { part: "container", class: "item_picker__container" }, h("div", { part: "up", class: {
+        item_picker__btn: true,
+        'item_picker__btn--disabled': this.isNextDisabled(),
+      }, onMouseDown: () => this.onMouseDownNext(), onMouseUp: () => this.onMouseUpNext() }, h("six-icon", { size: "large" }, "expand_less")), h("div", { part: "content", class: "item_picker__content" }, this.getFormattedValue()), h("div", { part: "down", class: {
+        item_picker__btn: true,
+        'item_picker__btn--disabled': this.isPrevDisabled(),
+      }, onMouseDown: () => this.onMouseDownPrev(), onMouseUp: () => this.onMouseUpPrev() }, h("six-icon", { size: "large" }, "expand_more"))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["handleValueChange"],
+    "debounce": ["debounceChanged"],
+    "items": ["handleSetChange"]
+  }; }
+};
+SixItemPicker.style = sixItemPickerCss;
+
+export { SixItemPicker as six_item_picker };

package/dist/esm/six-language-switcher.entry.js

@@ -0,0 +1,59 @@
+import { r as registerInstance, c as createEvent, h } from './index-a2605a62.js';
+
+const sixLanguageSwitcherCss = ".language-switcher__container{display:flex}.language-switcher__separator{padding:0 0.25rem}.language-switcher__label{cursor:pointer}.language-switcher__label:hover{color:var(--six-color-red)}.language-switcher__label--selected{color:var(--six-color-red)}";
+
+const DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];
+let SixLanguageSwitcher = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sixChange = createEvent(this, "six-language-switcher-change", 7);
+    /** The languages which should be selectable options. */
+    this.languages = DEFAULT_LANGUAGES;
+    this.handleLanguageSwitching = (newLanguage, languageValue) => () => {
+      if (languageValue !== undefined) {
+        this.sixChange.emit(languageValue);
+      }
+      else {
+        this.sixChange.emit(newLanguage);
+      }
+      this.selected = newLanguage;
+    };
+  }
+  handleChangesLanguages(newValue) {
+    if (!Array.isArray(newValue)) {
+      throw new Error('languages is expected to be an array');
+    }
+    this.updateSelectedLanguage();
+  }
+  componentWillLoad() {
+    if (this.selected === undefined) {
+      this.updateSelectedLanguage();
+    }
+  }
+  updateSelectedLanguage() {
+    const selectedLanguage = this.languages[0];
+    if (typeof selectedLanguage === 'string') {
+      this.selected = selectedLanguage;
+      this.sixChange.emit(this.selected);
+    }
+    else {
+      this.selected = selectedLanguage.key;
+      this.sixChange.emit(selectedLanguage.value);
+    }
+  }
+  render() {
+    return (h("div", { part: "container", class: "language-switcher__container" }, this.languages.map((lang, index) => {
+      const language = typeof lang === 'string' ? lang : lang.key;
+      return (h("div", { onClick: this.handleLanguageSwitching(language, lang.value) }, h("span", { part: "label", class: {
+          'language-switcher__label': true,
+          'language-switcher__label--selected': this.selected === language,
+        } }, language), index < this.languages.length - 1 && (h("span", { part: "separator", class: "language-switcher__separator" }, "/"))));
+    })));
+  }
+  static get watchers() { return {
+    "languages": ["handleChangesLanguages"]
+  }; }
+};
+SixLanguageSwitcher.style = sixLanguageSwitcherCss;
+
+export { SixLanguageSwitcher as six_language_switcher };

package/dist/esm/six-layout-grid.entry.js

@@ -0,0 +1,26 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-a2605a62.js';
+
+const sixLayoutGridCss = ":host{display:grid;grid-template-columns:repeat(var(--no-of-columns), 1fr);grid-column-gap:1rem}";
+
+let SixLayoutGrid = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  handleColumnsChange() {
+    const columns = this.columns ? this.columns : 12;
+    this.host.style.setProperty('--no-of-columns', String(columns));
+  }
+  componentWillLoad() {
+    this.handleColumnsChange();
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "columns": ["handleColumnsChange"]
+  }; }
+};
+SixLayoutGrid.style = sixLayoutGridCss;
+
+export { SixLayoutGrid as six_layout_grid };

package/dist/esm/six-main-container.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-a2605a62.js';
+
+const sixMainContainerCss = ":host{display:flex;flex-wrap:nowrap;min-width:fit-content}.left-margin,.right-margin{flex:1 6 10rem;min-width:var(--six-spacing-xxx-large)}.content{flex:6 1 60rem;min-width:48rem;max-width:100rem}.content--padded{padding:var(--six-spacing-xxx-large) 0}";
+
+let SixMainContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** Set to false to remove top and bottom padding.  */
+    this.padded = true;
+  }
+  render() {
+    return (h(Host, null, h("div", { part: "left-margin", class: "left-margin" }), h("div", { part: "content", class: { content: true, 'content--padded': this.padded } }, h("slot", null)), h("div", { part: "right-margin", class: "right-margin" })));
+  }
+  get host() { return getElement(this); }
+};
+SixMainContainer.style = sixMainContainerCss;
+
+export { SixMainContainer as six_main_container };

package/dist/esm/six-menu-divider.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h } from './index-a2605a62.js';
+
+const sixMenuDividerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.menu-divider{border-top:solid var(--six-border-width) var(--six-menu-divider-color);margin:0}";
+
+let SixMenuDivider = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h("div", { part: "base", class: "menu-divider", role: "separator", "aria-hidden": "true" });
+  }
+};
+SixMenuDivider.style = sixMenuDividerCss;
+
+export { SixMenuDivider as six_menu_divider };

package/dist/esm/six-menu-label.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h } from './index-a2605a62.js';
+
+const sixMenuLabelCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.menu-label{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);color:var(--six-input-label-color);padding:var(--six-spacing-xx-small) var(--six-spacing-small);user-select:none}";
+
+let SixMenuLabel = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("div", { part: "base", class: "menu-label" }, h("slot", null)));
+  }
+};
+SixMenuLabel.style = sixMenuLabelCss;
+
+export { SixMenuLabel as six_menu_label };