sas-ui 0.8.281 → 0.8.283

package/dist/cjs/sas-select.cjs.entry.js

@@ -0,0 +1,606 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cd75521b.js');
+const global = require('./global-fcd219ac.js');
+
+const sasSelectCss = ":host{display:block}:host sas-form-input-template{flex-shrink:var(--select-flex-shrink);margin-right:var(--select-margin-right, 0);--input-height:var(--select-height, 40px);--sublist-title-padding:0 10px;--list-item-padding:12px 10px;--list-item-default-color:var(--s-500);--form-input-template-container-max-width:var(--select-option-max-width, 300px)}:host sas-list{max-height:200px;overflow-y:auto}:host #no-match-tip{pointer-events:none}:host .hide{display:none}";
+
+let SasSelect = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selectUpdate = index.createEvent(this, "selectUpdate", 7);
+    this.selectupdate = index.createEvent(this, "selectupdate", 7);
+    this.selectUpdateEventUsedInternal = index.createEvent(this, "selectUpdateEventUsedInternal", 7);
+    this.inputText = '';
+    this.error = false;
+    this.decodeOptions = [];
+    this.defaultPlaceholder = '';
+    /**
+     * Label
+     */
+    this.label = '';
+    /**
+     * Shows an icon next to the label - mainly for help icons
+     */
+    this.iconLabel = '';
+    /**
+     * Label position
+     */
+    this.outside = false;
+    /**
+     * Shows a star symbol behind label
+     */
+    this.required = false;
+    /**
+     * Search
+     */
+    this.type = 'default';
+    /**
+     * No match tip
+     */
+    this.noMatchTip = 'No data available';
+    /**
+     * Placeholder
+     */
+    this.placeholder = 'Please select';
+    /**
+     * disabled
+     */
+    this.disabled = false;
+    /**
+     * Clear
+     */
+    this.clear = false;
+    /**
+     * Options
+     */
+    this.options = [];
+    /**
+     * alwaysShownOptions (flags that the option should be always shown on the dropdown after a search instead of the default noMatchTip)
+     */
+    this.alwaysShownOptions = [];
+    /**
+     * default value, used for the case options might be updated
+     */
+    this.defaultValue = null;
+    /**
+     * name
+     */
+    this.name = '';
+    /**
+     * Selected value
+     */
+    this.value = null;
+    /**
+     * Complete selected data
+     */
+    this.rawData = null;
+    /**
+     * Selected text
+     */
+    this.text = null;
+    /**
+     * If options have subtext, set options subtext position
+     */
+    this.subtextPosition = 'bottom';
+    /**
+     * Default container position
+     */
+    this.position = null;
+    /**
+     * Validity
+     */
+    this.validity = {
+      valid: true,
+      valueMissing: false,
+    };
+    /**
+     * Only shows when input is invalid, auto generated
+     */
+    this.message = '';
+    this.createElement = () => {
+      const hasShadowDom = this.checkShadowDom();
+      if (hasShadowDom) {
+        const obj = {
+          value: this.inputText,
+          text: this.inputText,
+        };
+        this.options = [...this.options, obj];
+      }
+      else {
+        const element = document.createElement('SAS-LIST-ITEM');
+        element.value = this.inputText;
+        element.text = this.inputText;
+        const list = this.el.querySelector('sas-list');
+        list.append(element);
+      }
+      this.value = this.inputText;
+      this.update();
+    };
+  }
+  watchValueHandler() {
+    const listItems = this.getListItemElements();
+    // not validate when no options and list items, as in this case, options are not loaded
+    if (this.decodeOptions.length !== 0 || listItems.length !== 0) {
+      const isValid = this.validateValue();
+      if (!isValid) {
+        this.value = this.defaultValue;
+      }
+    }
+    const hasShadowDom = this.checkShadowDom();
+    if (!hasShadowDom) {
+      // update select status in light dom
+      this.updateSelectStatus();
+    }
+    this.text = this.getText();
+    this.rawData = this.updateRawData();
+    // in type search, placeholder will be updated
+    // so need to reset when no value
+    if (this.value === null) {
+      this.placeholder = this.defaultPlaceholder;
+    }
+    // this.validity = this.getValidity();
+    this.resetErrorStatus();
+    const obj = {
+      value: this.value,
+      text: this.text,
+    };
+    this.selectUpdateEventUsedInternal.emit(obj);
+  }
+  watchOptionsHandler() {
+    this.decodeOptions = this.getDecodeOptions();
+    if (this.decodeOptions.length > 0) {
+      const isValid = this.validateValue();
+      if (!isValid) {
+        this.value = this.defaultValue;
+      }
+    }
+    else {
+      this.value = null;
+    }
+    // in type search, placeholder will be updated
+    // so need to reset when no value
+    if (this.value === null) {
+      this.placeholder = this.defaultPlaceholder;
+    }
+    this.text = this.getText();
+  }
+  componentWillLoad() {
+    const hasShadowDom = this.checkShadowDom();
+    if (!hasShadowDom) {
+      const listElement = this.el.querySelector('sas-list');
+      if (listElement !== null) {
+        listElement.style.maxHeight = '200px';
+        listElement.style.overflowY = 'auto';
+        listElement.subtextPosition = this.subtextPosition;
+        // prevents dropdown container from closing when user clicks/holds 
+        // scroll bar with cursor 
+        listElement.addEventListener("mousedown", function (event) {
+          if (event.target.tagName === "SAS-LIST") {
+            event.preventDefault();
+          }
+        });
+      }
+      // has pre select element
+      const selectedElement = this.getSelectedElement();
+      if (selectedElement) {
+        this.value = selectedElement.value;
+        this.text = selectedElement.text;
+        this.rawData = this.updateRawData();
+      }
+    }
+    else {
+      this.decodeOptions = this.getDecodeOptions();
+      // has pre select value
+      if (this.value !== null) {
+        const isValid = this.validateValue();
+        if (!isValid) {
+          this.value = this.defaultValue;
+        }
+        this.text = this.getText();
+        this.rawData = this.updateRawData();
+      }
+    }
+    this.defaultPlaceholder = this.placeholder;
+    // this.validity = this.getValidity();
+    // this.resetErrorStatus();
+  }
+  listItemClickedHandler(event) {
+    if (this.value !== event.detail.value
+      && event.detail.value !== 'createElementListItemOnlyUsedInternal') {
+      // update value
+      this.value = event.detail.value;
+      // update text
+      this.text = event.detail.text;
+      // update raw data
+      this.rawData = this.updateRawData();
+      // emit event
+      this.selectUpdate.emit(event.detail);
+      this.selectupdate.emit(event.detail);
+    }
+    // hide list
+    const inputTemplate = this.el.shadowRoot.querySelector('sas-form-input-template');
+    inputTemplate.show = false;
+  }
+  listItemClickEventUsedInternalHandler(event) {
+    event.stopPropagation();
+  }
+  inputUpdateHandler(event) {
+    this.inputText = event.detail;
+    this.filter(this.inputText);
+    const formInputTemplate = this.el.shadowRoot.querySelector('sas-form-input-template');
+    formInputTemplate.show = true;
+  }
+  inputClearHandler() {
+    this.value = null;
+    this.update();
+  }
+  inputFocusHandler() {
+    if (this.type !== 'default') {
+      this.inputText = '';
+      this.filter(this.inputText);
+      if (this.text) {
+        this.placeholder = this.text;
+        this.text = '';
+      }
+    }
+  }
+  inputBlurHandler() {
+    if (this.type !== 'default') {
+      // triggered by click outside or click list item
+      // if click outside, only need reset text
+      // if click list item, as inputBlur event is faster than listUpdate event
+      // so text will be reset to placeholder, and then set to clicked list item text
+      if (this.value === null) {
+        this.text = '';
+      }
+      else {
+        this.text = this.placeholder;
+      }
+    }
+  }
+  inputContainerClickHandler() {
+    const selectedElement = this.getSelectedElement();
+    if (selectedElement) {
+      selectedElement.parentElement.scrollTop = selectedElement.offsetTop;
+    }
+  }
+  /**
+   * Trigger selectupdate event programmatically
+   */
+  async update() {
+    const value = this.value;
+    const text = this.text;
+    const eventObj = {
+      value: value,
+      text: text,
+    };
+    this.selectUpdate.emit(eventObj);
+    this.selectupdate.emit(eventObj);
+  }
+  /**
+   * Validate
+   */
+  async validate() {
+    let valueMissing = false;
+    if (this.required && this.value === null) {
+      valueMissing = true;
+    }
+    this.validity = {
+      valid: !valueMissing,
+      valueMissing: valueMissing,
+    };
+  }
+  /**
+   * Show error status if value is not valid (only for components internal use)
+   */
+  async updateErrorStatus() {
+    await this.validate();
+    const formInputTemplate = this.el.shadowRoot.querySelector('sas-form-input-template');
+    if (formInputTemplate !== null) {
+      formInputTemplate.error = !this.validity.valid;
+    }
+    if (!this.validity.valid) {
+      this.message = this.getErrorMessage();
+    }
+  }
+  /**
+   * Clear error status (only for components internal use)
+   */
+  async resetErrorStatus() {
+    const formInputTemplate = this.el.shadowRoot.querySelector('sas-form-input-template');
+    if (formInputTemplate !== null) {
+      formInputTemplate.error = false;
+    }
+    this.message = '';
+  }
+  getDecodeOptions() {
+    const decodeOptions = this.options.concat(this.alwaysShownOptions).map(option => {
+      if ('sub' in option) {
+        const decodeSubOptions = option.sub.map((subOption) => {
+          return Object.assign(Object.assign({}, subOption), { text: global.HTMLDecodeString(subOption.text), subtext: global.HTMLDecodeString(subOption.subtext) });
+        });
+        return Object.assign(Object.assign({}, option), { text: global.HTMLDecodeString(option.text), subtext: global.HTMLDecodeString(option.subtext), sub: decodeSubOptions });
+      }
+      else {
+        return Object.assign(Object.assign({}, option), { text: global.HTMLDecodeString(option.text), subtext: global.HTMLDecodeString(option.subtext) });
+      }
+    });
+    return decodeOptions;
+  }
+  validateValue() {
+    const hasShadowDom = this.checkShadowDom();
+    let isFound = false;
+    if (hasShadowDom) {
+      this.decodeOptions.forEach((option) => {
+        if ('sub' in option) {
+          option.sub.forEach((sub) => {
+            if (sub.value === this.value) {
+              isFound = true;
+            }
+          });
+        }
+        else {
+          if (option.value === this.value) {
+            isFound = true;
+          }
+        }
+      });
+    }
+    else {
+      const listItems = this.getListItemElements();
+      listItems.forEach((listItem) => {
+        if (listItem.value === this.value) {
+          isFound = true;
+        }
+      });
+    }
+    return isFound;
+  }
+  getErrorMessage() {
+    const validity = this.validity;
+    if (validity.valueMissing) {
+      const prefix = Boolean(this.label) ? this.label : 'Field';
+      return `${prefix} is required`;
+    }
+  }
+  checkShadowDom() {
+    if (this.options.length > 0) {
+      return true;
+    }
+    else {
+      return false;
+    }
+  }
+  getListElement() {
+    const hasShadowDom = this.checkShadowDom();
+    if (hasShadowDom) {
+      return this.el.shadowRoot.querySelector('sas-list');
+    }
+    else {
+      return this.el.querySelector('sas-list');
+    }
+  }
+  updateSelectStatus() {
+    const listItems = this.getListItemElements();
+    listItems.forEach((listItem) => {
+      if (listItem.value === this.value) {
+        listItem.selected = true;
+      }
+      else {
+        listItem.selected = false;
+      }
+    });
+  }
+  updateRawData() {
+    const value = this.value;
+    const text = this.getText();
+    let rawData = null;
+    const hasShadowDom = this.checkShadowDom();
+    if (hasShadowDom) {
+      this.decodeOptions.forEach((option) => {
+        if ('sub' in option) {
+          option.sub.forEach((sub) => {
+            if (this.value === sub.value) {
+              rawData = {
+                value: option.value,
+                text: option.text,
+                sub: {
+                  value: value,
+                  text: text,
+                },
+              };
+            }
+          });
+        }
+        else {
+          if (this.value === option.value) {
+            rawData = {
+              value: value,
+              text: text,
+            };
+          }
+        }
+      });
+    }
+    else {
+      const selectedElement = this.getSelectedElement();
+      if (selectedElement) {
+        const parentNode = selectedElement.parentNode;
+        if (parentNode.nodeName === 'SAS-SUBLIST') {
+          rawData = {
+            value: parentNode.value,
+            text: parentNode.text,
+            sub: {
+              value: value,
+              text: text,
+            },
+          };
+        }
+        else {
+          rawData = {
+            value: value,
+            text: text,
+          };
+        }
+      }
+    }
+    return rawData;
+  }
+  getText() {
+    const hasShadowDom = this.checkShadowDom();
+    if (this.value === null) {
+      return null;
+    }
+    else {
+      if (hasShadowDom) {
+        let result;
+        this.decodeOptions.forEach((option) => {
+          if ('sub' in option) {
+            option.sub.forEach((sub) => {
+              if (this.value === sub.value) {
+                result = sub;
+              }
+            });
+          }
+          else {
+            if (this.value === option.value) {
+              result = option;
+            }
+          }
+        });
+        return result.text;
+      }
+      else {
+        const selectedElement = this.getSelectedElement();
+        return selectedElement.text;
+      }
+    }
+  }
+  getSelectedElement() {
+    const listItems = this.getListItemElements();
+    let selectedElement = null;
+    listItems.forEach((listItem) => {
+      if (listItem.value === this.value || listItem.selected) {
+        selectedElement = listItem;
+      }
+    });
+    return selectedElement;
+  }
+  getListItemElements() {
+    const hasShadowDom = this.checkShadowDom();
+    if (hasShadowDom) {
+      const list = this.el.shadowRoot.querySelector('sas-form-input-template').querySelector('sas-list');
+      if (list !== null) {
+        return list.shadowRoot.querySelectorAll('sas-list-item');
+      }
+      else {
+        return [];
+      }
+    }
+    else {
+      return this.el.querySelectorAll('sas-list-item');
+    }
+  }
+  filter(text) {
+    let listItems;
+    let sublists;
+    let count = 0;
+    const hasShadowDom = this.checkShadowDom();
+    if (hasShadowDom) {
+      const listElement = this.getListElement();
+      if (listElement !== null) {
+        listItems = listElement.shadowRoot.querySelectorAll('sas-list-item');
+        sublists = listElement.shadowRoot.querySelectorAll('sas-sublist');
+      }
+      else {
+        listItems = [];
+        sublists = [];
+      }
+    }
+    else {
+      listItems = this.el.querySelectorAll('sas-list-item');
+      sublists = this.el.querySelectorAll('sas-sublist');
+    }
+    listItems.forEach((listItem) => {
+      let textLowerCase;
+      if (text) {
+        textLowerCase = text.toLowerCase();
+      }
+      else {
+        textLowerCase = '';
+      }
+      const listItemTextLowserCase = listItem.text.toLowerCase();
+      let isMatch = false;
+      if (listItemTextLowserCase) {
+        isMatch = listItemTextLowserCase.includes(textLowerCase);
+      }
+      if (isMatch || listItem.alwaysShown) {
+        console.log('listItem.alwaysShown: ' + listItem.alwaysShown);
+        count += 1;
+        if (hasShadowDom) {
+          listItem.classList.remove('hide');
+        }
+        else {
+          listItem.classList.remove('d-none');
+        }
+      }
+      else {
+        if (hasShadowDom) {
+          listItem.classList.add('hide');
+        }
+        else {
+          listItem.classList.add('d-none');
+        }
+      }
+      if (this.type === 'search' || this.type === 'create') {
+        const tip = this.el.shadowRoot.querySelector('.tip');
+        if (count !== 0) {
+          tip.classList.add('hide');
+        }
+        else {
+          if (this.type === 'create') {
+            tip.text = `Create "${text}"`;
+          }
+          tip.classList.remove('hide');
+        }
+      }
+    });
+    // hide sub list if need
+    sublists.forEach(sublist => {
+      const children = sublist.querySelectorAll('sas-list-item');
+      let isAllHide = true;
+      for (let i = 0; i < children.length; i++) {
+        if (!children[i].classList.contains('hide') && !children[i].classList.contains('d-none')) {
+          isAllHide = false;
+          break;
+        }
+      }
+      if (isAllHide) {
+        sublist.classList.add('d-none');
+      }
+      else {
+        sublist.classList.remove('d-none');
+      }
+    });
+  }
+  render() {
+    return (index.h(index.Host, { tabindex: "0" }, index.h("sas-form-input-template", { label: this.label, outside: this.outside, required: this.required, placeholder: this.placeholder, "icon-right": "far fa-chevron-down", value: this.text, readonly: this.type === 'default', disabled: this.disabled, clear: this.clear, error: this.error, "data-message": this.message, position: this.position, iconLabel: this.iconLabel, minimumPixelsAboveComponentRequired: 230 }, this.decodeOptions.length > 0
+      ? index.h("sas-list", { slot: "container", options: this.decodeOptions, value: this.value, defaultValue: this.defaultValue, subtextPosition: this.subtextPosition })
+      : index.h("slot", { slot: "container" }), this.type === 'search'
+      ? index.h("sas-list-item", { slot: "container", class: "tip hide", id: "no-match-tip", text: this.noMatchTip })
+      : null, this.type === 'create'
+      ? index.h("sas-list-item", { slot: "container", class: "tip hide", value: "createElementListItemOnlyUsedInternal", onClick: this.createElement })
+      : null)));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["watchValueHandler"],
+    "options": ["watchOptionsHandler"]
+  }; }
+};
+SasSelect.style = sasSelectCss;
+
+exports.sas_select = SasSelect;