Static Site

Static/package/dist/collection/components/select/multi-select/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

Static/package/dist/collection/components/select/multi-select/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/components/select/multi-select/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["export interface Option {\n  value: string;\n  label: string;\n  selected?: boolean;  // Making this optional\n  indeterminate?: boolean;\n  children?: Option[];  // Sub-options\n}\n"]}

Static/package/dist/collection/components/select/multi-select/multiselect.css

@@ -0,0 +1,198 @@
+:root {
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
+}
+
+.ifx-multiselect-container {
+  background-color: #FFFFFF;
+  position: relative;
+  box-sizing: border-box;
+  font-family: var(--ifx-font-family);
+}
+.ifx-multiselect-container.small-select {
+  height: 36px;
+}
+.ifx-multiselect-container.medium-select {
+  height: 40px;
+}
+.ifx-multiselect-container:hover {
+  cursor: pointer;
+}
+.ifx-multiselect-container .ifx-label-wrapper {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+  max-width: 100%;
+}
+.ifx-multiselect-container .ifx-error-message-wrapper {
+  color: #CD002F;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+  max-width: 100%;
+}
+.ifx-multiselect-container .ifx-multiselect-wrapper {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 1px solid #8D8786;
+  border-radius: 1px;
+  width: 100%;
+  font-weight: 400;
+  font-style: normal;
+}
+.ifx-multiselect-container .ifx-multiselect-wrapper.small-select {
+  height: 36px;
+  padding: 8px 12px;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.ifx-multiselect-container .ifx-multiselect-wrapper.medium-select {
+  height: 40px;
+  padding: 8px 16px;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible {
+  outline: none;
+}
+.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active) {
+  outline: none;
+}
+.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active)::before {
+  content: "";
+  position: absolute;
+  width: calc(100% + 4px);
+  height: calc(100% + 4px);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border: 2px solid #0A8276;
+  border-radius: 2px;
+}
+.ifx-multiselect-container .ifx-multiselect-wrapper.disabled {
+  background: #EEEDED;
+  color: #575352;
+  border-color: #575352;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ifx-multiselect-container .ifx-multiselect-wrapper.error {
+  border-color: #CD002F;
+}
+.ifx-multiselect-container .ifx-multiselect-wrapper:hover:not(.focus, :focus) {
+  border-color: #575352;
+}
+.ifx-multiselect-container .ifx-multiselect-wrapper.active {
+  border-color: #0A8276 !important;
+}
+.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-up {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 8px;
+}
+.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-down {
+  display: none;
+}
+.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-up {
+  display: none;
+}
+.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-down {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 8px;
+}
+.ifx-multiselect-container .ifx-multiselect-wrapper.is-flipped .ifx-multiselect-dropdown-menu {
+  top: auto;
+  bottom: 100%;
+}
+.ifx-multiselect-container .ifx-multiselect-input {
+  flex-grow: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ifx-multiselect-container .ifx-multiselect-input.placeholder {
+  opacity: 0.5;
+}
+.ifx-multiselect-container .ifx-multiselect-icon-container {
+  margin-left: auto;
+  align-items: center;
+  display: flex;
+}
+.ifx-multiselect-container .ifx-clear-button {
+  margin-right: 8px;
+  display: flex;
+}
+.ifx-multiselect-container .ifx-multiselect-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  margin-top: 2px;
+  background-color: #fff;
+  box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1);
+  max-height: 300px;
+  /* Adjust based on your design */
+  overflow-y: auto;
+  z-index: var(--dynamic-z-index, 1);
+}
+.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input {
+  width: 100%;
+  padding: 8px 16px;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-style: normal;
+  font-weight: 400;
+  box-sizing: border-box;
+  background-color: #FFFFFF;
+  border: none;
+  border-bottom: 1px solid #8D8786;
+}
+.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input:focus {
+  outline: none;
+  border: 1px solid #0A8276;
+}
+.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input::placeholder {
+  color: #999;
+}
+.ifx-multiselect-container .option {
+  position: relative;
+  padding: 8px 16px;
+  gap: 8px;
+  align-items: center;
+  display: flex;
+  font-style: normal;
+  font-weight: 400;
+}
+.ifx-multiselect-container .option.small-select {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.ifx-multiselect-container .option.medium-select {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.ifx-multiselect-container .option:hover {
+  background-color: #EEEDED;
+}
+.ifx-multiselect-container .option:focus {
+  background-color: #BFBBBB;
+  outline: none;
+}
+.ifx-multiselect-container .option.is-highlighted {
+  background-color: #EEEDED;
+}
+.ifx-multiselect-container .option.sub-option {
+  padding-left: 30px;
+  /* or however much indentation you want */
+}

Static/package/dist/collection/components/select/multi-select/multiselect.e2e.js

@@ -0,0 +1,53 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('ifx-multiselect', () => {
+  it('should render without errors', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-multiselect></ifx-multiselect>');
+    const element = await page.find('ifx-multiselect');
+    expect(element).toHaveClass('hydrated');
+  });
+  it('should accept properties and reflect them', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-multiselect label="Test label"></ifx-multiselect>');
+    const component = await page.find('ifx-multiselect');
+    const label = await component.getProperty('label');
+    expect(label).toBe('Test label');
+  });
+  it('should emit ifxMultiselectIsOpen when dropdown is toggled', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-multiselect></ifx-multiselect>');
+    const select = await page.find('ifx-multiselect');
+    const openEvent = await select.spyOnEvent('ifxMultiselectIsOpen');
+    const multiselectWrapper = await page.find('ifx-multiselect >>> .ifx-multiselect-wrapper ');
+    await multiselectWrapper.click();
+    expect(openEvent).toHaveReceivedEvent();
+  });
+  it('should toggle dropdown when clicked', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-multiselect></ifx-multiselect>');
+    const component = await page.find('ifx-multiselect');
+    await component.click();
+    let dropdown = await page.find('ifx-multiselect >>> .ifx-multiselect-dropdown-menu');
+    expect(dropdown).not.toBeNull();
+    await component.click();
+    dropdown = await page.find('ifx-multiselect >>> .ifx-multiselect-dropdown-menu');
+    expect(dropdown).toBeNull();
+  });
+  it('should close dropdown when clicked outside', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <div style="height: 1000px; width: 1000px;"></div>
+      <ifx-multiselect></ifx-multiselect>
+    `);
+    const component = await page.find('ifx-multiselect');
+    await component.click();
+    let dropdown = await page.find('ifx-multiselect >>> .ifx-multiselect-dropdown-menu');
+    expect(dropdown).not.toBeNull();
+    const outsideArea = await page.find('div');
+    await outsideArea.click();
+    dropdown = await page.find('ifx-multiselect >>> .ifx-multiselect-dropdown-menu');
+    expect(dropdown).toBeNull();
+  });
+  // Add more tests for keyboard navigation, clearing selections, error message rendering, dropdown positioning, etc.
+});
+//# sourceMappingURL=multiselect.e2e.js.map

Static/package/dist/collection/components/select/multi-select/multiselect.js

@@ -0,0 +1,610 @@
+import { h } from "@stencil/core";
+// Debounce function
+function debounce(func, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+;
+export class Multiselect {
+  constructor() {
+    this.currentIndex = 0; //needed for option selection using keyboard
+    this.handleSearch = debounce((targetElement) => {
+      const searchTerm = targetElement.value.toLowerCase();
+      if (searchTerm === '') {
+        this.filteredOptions = this.loadedOptions;
+      }
+      else {
+        this.filteredOptions = this.loadedOptions.filter(option => option.label.toLowerCase().includes(searchTerm));
+      }
+    }, 300);
+    this.handleDocumentClick = (event) => {
+      const path = event.composedPath();
+      if (!path.includes(this.dropdownElement)) {
+        this.dropdownOpen = false;
+        document.removeEventListener('click', this.handleDocumentClick);
+        // Dispatch the ifxMultiselectIsOpen event
+        this.ifxMultiselectIsOpen.emit(this.dropdownOpen);
+      }
+    };
+    this.options = undefined;
+    this.batchSize = 50;
+    this.size = 'medium (40px)';
+    this.disabled = false;
+    this.error = false;
+    this.internalError = false;
+    this.errorMessage = "Error";
+    this.label = "";
+    this.persistentSelectedOptions = [];
+    this.placeholder = "";
+    this.listOfOptions = [];
+    this.dropdownOpen = false;
+    this.dropdownFlipped = undefined;
+    this.maxItemCount = undefined;
+    this.zIndex = 1;
+    this.isLoading = false;
+    this.loadedOptions = [];
+    this.filteredOptions = [];
+    this.searchEnabled = true;
+  }
+  async loadInitialOptions() {
+    this.isLoading = true;
+    this.internalError = this.error;
+    // Load the first batch of options (e.g., first 20)
+    this.loadedOptions = await this.fetchOptions(0, this.batchSize);
+    this.isLoading = false;
+  }
+  async fetchMoreOptions() {
+    this.isLoading = true;
+    const moreOptions = await this.fetchOptions(this.loadedOptions.length, this.batchSize);
+    this.loadedOptions = [...this.loadedOptions, ...moreOptions];
+    this.isLoading = false;
+  }
+  handleScroll(event) {
+    const element = event.target;
+    const halfwayPoint = Math.floor((element.scrollHeight - element.clientHeight) / 2); //loading more options when the user has scrolled halfway through the current list
+    if (element.scrollTop >= halfwayPoint) {
+      this.fetchMoreOptions();
+    }
+  }
+  async fetchOptions(startIndex, count) {
+    let allOptions = [];
+    // Parse options if it's a string, or use directly if it's an array
+    if (typeof this.options === 'string') {
+      try {
+        allOptions = JSON.parse(this.options);
+      }
+      catch (err) {
+        console.error('Failed to parse options:', err);
+      }
+    }
+    else if (Array.isArray(this.options)) {
+      allOptions = this.options;
+    }
+    else {
+      console.error('Unexpected value for options:', this.options);
+    }
+    // Slice the options array based on startIndex and count
+    const slicedOptions = allOptions.slice(startIndex, startIndex + count);
+    // Update the state for initially selected options, if needed
+    if (startIndex === 0) { // Assuming you want to do this only for the first batch
+      const initiallySelected = slicedOptions.filter(option => option.selected);
+      this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initiallySelected];
+    }
+    return slicedOptions;
+  }
+  componentDidLoad() {
+    setTimeout(() => {
+      this.positionDropdown();
+    }, 500);
+    // setInterval(this.handleScroll, 5000); // Runs every 5 seconds (5000 milliseconds)
+  }
+  componentWillLoad() {
+    this.loadInitialOptions();
+    this.filteredOptions = [...this.loadedOptions];
+  }
+  updateInternalError() {
+    this.internalError = this.error;
+  }
+  loadedOptionsChanged() {
+    this.filteredOptions = [...this.loadedOptions];
+  }
+  handleOptionClick(option) {
+    this.internalError = false;
+    if (this.isSelectionLimitReached(option)) {
+      console.error('Max item count reached');
+      this.internalError = true;
+      this.errorMessage = "Please consider the maximum number of items to choose from";
+      return;
+    }
+    this.updateSelection(option);
+    this.ifxSelect.emit(this.persistentSelectedOptions);
+  }
+  isSelectionLimitReached(option) {
+    let newOptionsLength = option.children ? option.children.length : 1;
+    return this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount &&
+      !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);
+  }
+  updateSelection(option) {
+    const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);
+    if (option.children && option.children.length > 0) {
+      this.handleParentOptionClick(option);
+    }
+    else {
+      this.handleChildOptionClick(option, wasSelected);
+    }
+  }
+  handleParentOptionClick(option) {
+    const allChildrenSelected = option.children.every(child => this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value));
+    if (allChildrenSelected) {
+      this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => !option.children.some(child => child.value === selectedOption.value))];
+    }
+    else {
+      const newChildren = [...option.children.filter(childOption => !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === childOption.value))];
+      this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...newChildren];
+    }
+  }
+  handleChildOptionClick(option, wasSelected) {
+    if (wasSelected) {
+      this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value)];
+    }
+    else {
+      this.persistentSelectedOptions = [...this.persistentSelectedOptions, option];
+    }
+  }
+  getSizeClass() {
+    return `${this.size}` === "s"
+      ? "small-select"
+      : "medium-select";
+  }
+  toggleDropdown() {
+    this.dropdownOpen = !this.dropdownOpen;
+    setTimeout(() => {
+      if (this.dropdownOpen) {
+        document.addEventListener('click', this.handleDocumentClick);
+      }
+      // Dispatch the ifxMultiselectIsOpen event
+      this.ifxMultiselectIsOpen.emit(this.dropdownOpen);
+    }, 0);
+    this.zIndex = Multiselect.globalZIndex++;
+  }
+  waitForElement(querySelectorFunc, callback, maxTries = 50) {
+    let tries = 0;
+    function request() {
+      requestAnimationFrame(() => {
+        const elements = querySelectorFunc();
+        if (elements.length > 0 || tries > maxTries) {
+          callback(elements);
+        }
+        else {
+          tries++;
+          request();
+        }
+      });
+    }
+    request();
+  }
+  handleKeyDown(event) {
+    if (this.disabled)
+      return; // If it's disabled, don't do anything.
+    const options = this.dropdownElement.querySelectorAll('.option');
+    switch (event.code) {
+      case 'Enter' || 'Space':
+        if (this.dropdownOpen) {
+          this.selectItem(options);
+        }
+        else {
+          this.toggleDropdown();
+          // Wait a bit for the dropdown to finish rendering
+          this.waitForElement(() => {
+            return this.dropdownElement.querySelectorAll('.option');
+          }, (options) => {
+            this.updateHighlightedOption(options);
+          });
+        }
+        break;
+      case 'ArrowDown':
+        this.handleArrowDown(options);
+        if (this.dropdownOpen) {
+          this.updateHighlightedOption(options);
+        }
+        break;
+      case 'ArrowUp':
+        this.handleArrowUp(options);
+        if (this.dropdownOpen) {
+          this.updateHighlightedOption(options);
+        }
+        break;
+    }
+  }
+  handleWrapperClick(event) {
+    // This is your existing logic for positioning the dropdown
+    this.positionDropdown();
+    // Check if the event target is the wrapper itself and not a child element.
+    if (event.currentTarget === event.target) {
+      this.toggleDropdown();
+    }
+  }
+  clearSelection() {
+    this.persistentSelectedOptions = [];
+    this.ifxSelect.emit(this.persistentSelectedOptions); // if you want to emit empty selection after clearing
+  }
+  positionDropdown() {
+    var _a;
+    const wrapperRect = (_a = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - wrapperRect.bottom;
+    const spaceAbove = wrapperRect.top;
+    // If there's more space above than below the trigger and the dropdown doesn't fit below
+    if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) || (wrapperRect.bottom > window.innerHeight)) {
+      this.dropdownFlipped = true;
+    }
+    else {
+      this.dropdownFlipped = false;
+    }
+  }
+  // Helper function to update highlighted option based on currentIndex
+  updateHighlightedOption(options) {
+    // Clear all highlights
+    options.forEach((option) => option.classList.remove('is-highlighted'));
+    // Apply highlight to the current option
+    if (this.currentIndex >= 0 && this.currentIndex < options.length) {
+      options[this.currentIndex].classList.add('is-highlighted');
+    }
+  }
+  // Helper function to handle arrow down navigation
+  handleArrowDown(options) {
+    if (this.currentIndex < options.length - 1) {
+      this.currentIndex++;
+    }
+    else {
+      this.currentIndex = 0; // Wrap to the beginning.
+    }
+  }
+  // Helper function to handle arrow up navigation
+  handleArrowUp(options) {
+    if (this.currentIndex > 0) {
+      this.currentIndex--;
+    }
+    else {
+      this.currentIndex = options.length - 1; // Wrap to the end.
+    }
+  }
+  selectItem(options) {
+    // If there's a previous selection, remove its "selected" class
+    const previouslySelected = this.dropdownElement.querySelector('.option.selected');
+    if (previouslySelected) {
+      previouslySelected.classList.remove('selected');
+    }
+    // Mark the current item as selected
+    const currentOptionElement = options[this.currentIndex];
+    currentOptionElement.classList.add('selected');
+    const currentOptionValue = currentOptionElement.getAttribute('data-value');
+    const currentListOfOptions = typeof this.options === 'string' //passed in string form via storybook
+      ? JSON.parse(this.options).map((option) => ({ value: option.value, label: option.label, children: option.children, selected: option.selected })) // added selected
+      : this.options.map(option => (Object.assign({}, option)));
+    const currentOption = this.findInOptions(currentListOfOptions, currentOptionValue); // get the option object based on the currently selected value and the options array
+    this.handleOptionClick(currentOption);
+  }
+  renderOption(option, index) {
+    var _a;
+    const isIndeterminate = this.isOptionIndeterminate(option);
+    const isSelected = option.children ? isIndeterminate || this.isOptionSelected(option) : this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);
+    const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;
+    const uniqueId = `checkbox-${option.value}-${index}`; // Generate a unique ID using the index
+    return (h("div", null, h("div", { class: `option ${isSelected ? 'selected' : ''} 
+        ${this.getSizeClass()}`, "data-value": option.value, onClick: () => !disableCheckbox && this.handleOptionClick(option), tabindex: "0", role: `${((_a = option.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "treeitem" : "option"}` }, h("ifx-checkbox", { id: uniqueId, size: "s", value: isIndeterminate ? false : isSelected, indeterminate: isIndeterminate, disabled: disableCheckbox }), h("label", { htmlFor: uniqueId }, option.label)), option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index}-${childIndex}`))));
+  }
+  isOptionSelected(option) {
+    if (!option.children)
+      return false;
+    return option.children.every(child => this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value));
+  }
+  isOptionIndeterminate(option) {
+    if (!option.children)
+      return false;
+    const selectedChildren = option.children.filter(child => this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)).length;
+    return selectedChildren > 0 && selectedChildren < option.children.length;
+  }
+  findInOptions(options, searchTerm) {
+    for (const option of options) {
+      if (option.value === searchTerm) {
+        return option;
+      }
+      if (option.children) {
+        const foundInChildren = this.findInOptions(option.children, searchTerm);
+        if (foundInChildren) {
+          return foundInChildren;
+        }
+      }
+    }
+    return null;
+  }
+  renderSubOption(option, index) {
+    var _a;
+    const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);
+    const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;
+    const uniqueId = `checkbox-${option.value}-${index}`;
+    return (h("div", { class: `option sub-option ${isSelected ? 'selected' : ''} ${this.getSizeClass()}`, "data-value": option.value, role: `${((_a = option.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "option" : "treeitem"}`, onClick: () => !disableCheckbox && this.handleOptionClick(option), tabindex: "0" }, h("ifx-checkbox", { id: uniqueId, size: "s", value: isSelected, disabled: disableCheckbox }), h("label", { htmlFor: uniqueId }, option.label)));
+  }
+  render() {
+    // Create a label for the selected options
+    const selectedOptionsLabels = this.persistentSelectedOptions
+      .filter(option => {
+      // check if option is a child and its parent is selected
+      const isChildSelectedWithParent = this.persistentSelectedOptions.some(parentOption => parentOption.children &&
+        parentOption.children.some(child => child.value === option.value) &&
+        parentOption.selected);
+      return !isChildSelectedWithParent;
+    })
+      .map(option => option.label)
+      .join(', ');
+    return (h("div", { class: `ifx-multiselect-container`, ref: el => this.dropdownElement = el }, this.label ?
+      h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label)) : null, h("div", { class: `ifx-multiselect-wrapper 
+        ${this.getSizeClass()} 
+        ${this.dropdownOpen ? 'active' : ''} 
+        ${this.dropdownFlipped ? 'is-flipped' : ''}
+        ${this.internalError ? 'error' : ""}
+        ${this.disabled ? 'disabled' : ""}`, tabindex: "0", onClick: (event) => this.handleWrapperClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { class: `ifx-multiselect-input 
+          ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : ""}
+          `, onClick: this.disabled ? undefined : () => this.toggleDropdown() }, this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder), this.dropdownOpen && (h("div", { class: "ifx-multiselect-dropdown-menu", onScroll: (event) => this.handleScroll(event), style: { '--dynamic-z-index': this.zIndex.toString() } }, this.searchEnabled && h("input", { type: "text", role: "textbox", class: "search-input", onInput: (event) => this.handleSearch(event.target), placeholder: "Search..." }), this.filteredOptions.map((option, index) => this.renderOption(option, index)), this.isLoading && h("div", null, "Loading more options..."))), h("div", { class: "ifx-multiselect-icon-container" }, this.persistentSelectedOptions.length > 0 && (h("div", { class: "ifx-clear-button", onClick: () => this.clearSelection() }, h("ifx-icon", { icon: "cremove24" }))), h("div", { class: "icon-wrapper-up", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, h("ifx-icon", { key: 'icon-up', icon: 'chevronup-16' })), h("div", { class: "icon-wrapper-down", onClick: this.disabled ? undefined : () => this.toggleDropdown() }, h("ifx-icon", { key: 'icon-down', icon: 'chevron-down-16' })))), this.internalError ?
+      h("div", { class: "ifx-error-message-wrapper" }, h("span", null, this.errorMessage)) : null));
+  }
+  static get is() { return "ifx-multiselect"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["multiselect.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["multiselect.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "options": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "any[] | string",
+          "resolved": "any[] | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "options",
+        "reflect": false
+      },
+      "batchSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "batch-size",
+        "reflect": false,
+        "defaultValue": "50"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'medium (40px)'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "error": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "errorMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error-message",
+        "reflect": false,
+        "defaultValue": "\"Error\""
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "maxItemCount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-item-count",
+        "reflect": false
+      },
+      "searchEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "search-enabled",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "internalError": {},
+      "persistentSelectedOptions": {},
+      "listOfOptions": {},
+      "dropdownOpen": {},
+      "dropdownFlipped": {},
+      "zIndex": {},
+      "isLoading": {},
+      "loadedOptions": {},
+      "filteredOptions": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ifxSelect",
+        "name": "ifxSelect",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "ifxMultiselectIsOpen",
+        "name": "ifxMultiselectIsOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "error",
+        "methodName": "updateInternalError"
+      }, {
+        "propName": "loadedOptions",
+        "methodName": "loadedOptionsChanged"
+      }];
+  }
+}
+Multiselect.globalZIndex = 1; // This will be shared among all instances of the component.
+//# sourceMappingURL=multiselect.js.map

Static/package/dist/collection/components/select/multi-select/multiselect.stories.js

@@ -0,0 +1,132 @@
+import { action } from "@storybook/addon-actions";
+const options = [{
+    value: "a",
+    label: "option a",
+    selected: false
+  },
+  {
+    value: "b",
+    label: "option b",
+    selected: false
+  },
+  {
+    value: "z",
+    label: "option z",
+    selected: false,
+    children: [
+      {
+        value: "z1",
+        label: "option z1",
+        selected: false
+      },
+      {
+        value: "z2",
+        label: "option z2",
+        selected: false
+      }
+    ]
+  }];
+export default {
+  title: 'Components/Select/Multi Select',
+  // tags: ['autodocs'],
+  args: {
+    size: "m",
+    batchSize: 10,
+    maxItemCount: 10,
+    searchEnabled: true,
+    error: false,
+    errorMessage: 'Some error',
+    label: '',
+    disabled: false,
+    placeholder: 'Placeholder'
+  },
+  argTypes: {
+    size: {
+      name: 'Size',
+      options: {
+        'small (36px)': 's',
+        'medium (40px)': 'm'
+      },
+      control: {
+        type: 'radio',
+      },
+    },
+    batchSize: {
+      name: 'Batch size',
+      description: 'Batch size used during lazy loading options',
+      control: {
+        type: 'number',
+      },
+    },
+    maxItemCount: {
+      name: 'Maximum selectable items',
+      control: { type: 'number' },
+      description: 'Number of maximum selectable items',
+    },
+    disabled: {
+      name: 'Disabled',
+      options: [true, false],
+      control: { type: 'radio' },
+    },
+    searchEnabled: {
+      name: 'Enable search',
+      options: [true, false],
+      control: { type: 'radio' }
+    },
+    error: {
+      name: 'Error',
+      options: [true, false],
+      control: { type: 'radio' },
+    },
+    errorMessage: {
+      name: 'Error message',
+      control: 'text'
+    },
+    label: {
+      name: 'Label',
+      control: 'text'
+    },
+    placeholder: {
+      name: 'Placeholder',
+      control: 'text'
+    },
+    options: {
+      name: 'Options',
+      description: 'Takes an array of objects in the following format',
+    },
+    ifxSelect: {
+      name: 'Custom event: ifxSelect',
+      action: 'ifxSelect',
+      description: 'Custom event emitted when item is selected or unselected',
+      table: {
+        type: {
+          summary: 'Framework integration',
+          detail: 'React: onIfxSelect={handleInput}\nVue:@ifxSelect="handleInput"\nAngular:(ifxSelect)="handleInput()"\nVanillaJs:.addEventListener("ifxSelect", (event) => {//handle input});',
+        },
+      },
+    },
+  }
+};
+const DefaultTemplate = (args) => {
+  const template = `<ifx-multiselect 
+  options='${JSON.stringify(args.options)}' 
+  batch-size='${args.batchSize}'
+  size='${args.size}'
+  max-item-count='${args.maxItemCount}'
+  error='${args.error}'
+  error-message='${args.errorMessage}'
+  label='${args.label}'
+  placeholder='${args.placeholder}'
+  disabled='${args.disabled}'
+  search-enabled='${args.searchEnabled}'>
+</ifx-multiselect>`;
+  setTimeout(() => {
+    document.querySelector('ifx-multiselect').addEventListener('ifxSelect', action('ifxSelect'));
+  }, 0);
+  return template;
+};
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  options: options
+};
+//# sourceMappingURL=multiselect.stories.js.map

Static/package/dist/collection/components/select/single-select/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

Static/package/dist/collection/components/select/single-select/select.css

@@ -0,0 +1,499 @@
+:root {
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
+}
+
+/*===============================
+=            Choices            =
+===============================*/
+.ifx-select-container {
+  background-color: #FFFFFF;
+  box-sizing: border-box;
+  font-family: var(--ifx-font-family);
+  /*
+  START Select options: item alignment
+  */
+  /*
+  END Select options: item alignment
+  */
+  /* clears the 'X' for the input type=search from Internet Explorer */
+  /* clears the 'X' for the input type=search from Chrome */
+  /*=====  End of Choices  ======*/
+}
+.ifx-select-container.small-select {
+  height: 36px;
+}
+.ifx-select-container.medium-select {
+  height: 40px;
+}
+.ifx-select-container:hover {
+  cursor: pointer;
+}
+.ifx-select-container .ifx-label-wrapper {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+  max-width: 100%;
+  overflow: hidden;
+}
+.ifx-select-container .ifx-error-message-wrapper {
+  color: #CD002F;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+  max-width: 100%;
+  overflow: hidden;
+}
+.ifx-select-container .ifx-choices__wrapper {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 1px solid #8D8786;
+  border-radius: 1px;
+  font-weight: 400;
+  font-style: normal;
+}
+.ifx-select-container .ifx-choices__wrapper.small-select {
+  height: 36px;
+  line-height: 20px;
+  padding: 8px 12px;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.ifx-select-container .ifx-choices__wrapper.medium-select {
+  height: 40px;
+  line-height: 24px;
+  padding: 8px 16px;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.ifx-select-container .ifx-choices__wrapper.disabled {
+  background: #EEEDED;
+  color: #575352;
+  border-color: #575352;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ifx-select-container .ifx-choices__wrapper.error {
+  border-color: #CD002F;
+}
+.ifx-select-container .ifx-choices__wrapper:hover:not(.focus, :focus) {
+  border-color: #575352;
+}
+.ifx-select-container .ifx-choices__wrapper.active {
+  border-color: #0A8276 !important;
+}
+.ifx-select-container .ifx-choices__wrapper.active .ifx-choices__icon-wrapper-up {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 8px;
+}
+.ifx-select-container .ifx-choices__wrapper.active .ifx-choices__icon-wrapper-down {
+  display: none;
+}
+.ifx-select-container .ifx-choices__wrapper:focus-visible:not(.active):not(:active) {
+  outline: none;
+}
+.ifx-select-container .ifx-choices__wrapper:focus-visible:not(.active):not(:active)::before {
+  content: "";
+  position: absolute;
+  width: calc(100% + 4px);
+  height: calc(100% + 4px);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border: 2px solid #0A8276;
+  border-radius: 2px;
+}
+.ifx-select-container .ifx-choices__wrapper:focus:not(.active, :active):not(.disabled)::before {
+  content: "";
+  position: absolute;
+  width: calc(100% + 4px);
+  height: calc(100% + 4px);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-up {
+  display: none;
+}
+.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-up:hover {
+  cursor: pointer;
+}
+.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-down {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 8px;
+}
+.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-down:hover {
+  cursor: pointer;
+}
+.ifx-select-container .choices {
+  width: 100%;
+}
+.ifx-select-container .choices:focus {
+  outline: none;
+}
+.choices .ifx-select-container.is-focused {
+  outline: none;
+}
+.ifx-select-container .choices:last-child {
+  margin-bottom: 0;
+}
+.ifx-select-container .choices.is-disabled .choices__inner,
+.ifx-select-container .choices.is-disabled .choices__input {
+  background-color: #eaeaea;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ifx-select-container .choices.is-disabled .choices__item {
+  cursor: not-allowed;
+  color: #575352;
+}
+.ifx-select-container .choices [hidden] {
+  display: none !important;
+}
+.ifx-select-container .choices[data-type*=select-one] {
+  cursor: pointer;
+}
+.ifx-select-container .choices[data-type*=select-one] .choices__input {
+  display: block;
+  width: 100%;
+  padding: 8px 16px;
+  border-bottom: 1px solid #8D8786;
+  background-color: #ffffff;
+  margin: 0;
+  font-style: normal;
+  font-weight: 400;
+}
+.ifx-select-container .choices[data-type*=select-one] .choices__input.small-select {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.ifx-select-container .choices[data-type*=select-one] .choices__input.medium-select {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.ifx-select-container .choices[data-type*=select-one] .choices__single-button {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
+  padding: 0;
+  background-size: 8px;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  margin-top: -10px;
+  margin-right: 25px;
+  height: 20px;
+  width: 20px;
+  border-radius: 10em;
+  opacity: 0.5;
+}
+.ifx-select-container .choices[data-type*=select-one] .choices__single-button:hover,
+.ifx-select-container .choices[data-type*=select-one] .choices__single-button:focus {
+  opacity: 1;
+}
+.ifx-select-container .choices[data-type*=select-one] .choices__single-button:focus {
+  box-shadow: 0px 0px 0px 2px #0A8276;
+}
+.ifx-select-container .choices[data-type*=select-one] .choices__item[data-value=""] .choices__single-button {
+  display: none;
+}
+.ifx-select-container .choices[data-type*=select-one].is-open:after {
+  margin-top: -7.5px;
+}
+.ifx-select-container .choices[data-type*=select-one][dir=rtl]:after {
+  left: 11.5px;
+  right: auto;
+}
+.ifx-select-container .choices[data-type*=select-one][dir=rtl] .choices__single-button {
+  right: auto;
+  left: 0;
+  margin-left: 25px;
+  margin-right: 0;
+}
+.ifx-select-container .choices[data-type*=select-multiple] {
+  cursor: pointer;
+}
+.ifx-select-container .choices[data-type*=select-multiple] .choices__input {
+  display: block;
+  width: 100%;
+  margin: 0;
+}
+.ifx-select-container .choices[data-type*=select-multiple] .choices__inner,
+.ifx-select-container .choices[data-type*=text] .choices__inner {
+  cursor: text;
+}
+.ifx-select-container .choices[data-type*=select-multiple] .choices__button,
+.ifx-select-container .choices[data-type*=text] .choices__button {
+  position: relative;
+  display: inline-block;
+  margin-top: 0;
+  margin-right: -4px;
+  margin-bottom: 0;
+  margin-left: 8px;
+  padding-left: 16px;
+  border-left: 1px solid #0A8276;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
+  background-size: 8px;
+  width: 8px;
+  line-height: 1;
+  opacity: 0.75;
+  border-radius: 0;
+}
+.ifx-select-container .choices[data-type*=select-multiple] .choices__button:hover,
+.ifx-select-container .choices[data-type*=select-multiple] .choices__button:focus,
+.ifx-select-container .choices[data-type*=text] .choices__button:hover,
+.ifx-select-container .choices[data-type*=text] .choices__button:focus {
+  opacity: 1;
+}
+.ifx-select-container .choices__inner {
+  overflow: hidden;
+}
+.ifx-select-container .is-focused .choices__inner,
+.ifx-select-container .is-open .choices__inner {
+  border-color: #b7b7b7;
+}
+.ifx-select-container .is-open .choices__inner {
+  border-radius: 2.5px 2.5px 0 0;
+}
+.ifx-select-container .is-flipped.is-open .choices__inner {
+  border-radius: 0 0 2.5px 2.5px;
+}
+.ifx-select-container .choices__list {
+  margin: 0;
+  padding-left: 0;
+  list-style: none;
+}
+.ifx-select-container .choices__list--single .choices__item {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.ifx-select-container .disabled > .choices__list--single .choices__item[data-value=""] {
+  color: #8D8786;
+  /* Placeholder font color */
+}
+.ifx-select-container .choices__list--multiple .choices__item {
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 20px;
+  padding: 4px 10px;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+  margin-right: 3.75px;
+  margin-bottom: 3.75px;
+  background-color: #0A8276;
+  border: 1px solid #0A8276;
+  color: #FFFFFF;
+  word-break: break-all;
+  box-sizing: border-box;
+}
+.ifx-select-container .choices__list--multiple .choices__item[data-deletable] {
+  padding-right: 5px;
+}
+.ifx-select-container [dir=rtl] .choices__list--multiple .choices__item {
+  margin-right: 0;
+  margin-left: 3.75px;
+}
+.ifx-select-container .choices__list--multiple .choices__item.is-highlighted {
+  background-color: #EEEDED;
+  border: 1px solid #0A8276;
+}
+.ifx-select-container .choices__list--dropdown {
+  visibility: hidden;
+  box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  background-color: #fff;
+  top: 100%;
+  margin-top: -1px;
+  overflow: hidden;
+  word-break: break-all;
+  will-change: visibility;
+  box-shadow: 0px 0px 16px rgba(29, 29, 29, 0.12);
+  border-radius: 1px;
+  margin-top: 8px;
+  z-index: 1000;
+  left: 0;
+}
+.ifx-select-container .choices__list--dropdown.is-active {
+  visibility: visible;
+}
+.ifx-select-container .is-open .choices__list--dropdown {
+  border-color: #b7b7b7;
+}
+.ifx-select-container .is-flipped .choices__list--dropdown {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: -1px;
+  border-radius: 0.25rem 0.25rem 0 0;
+}
+.ifx-select-container .choices__list--dropdown .choices__list {
+  position: relative;
+  max-height: 300px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  will-change: scroll-position;
+}
+.ifx-select-container .choices__list--dropdown .choices__item {
+  position: relative;
+  padding: 8px 16px;
+  gap: 8px;
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  font-style: normal;
+  font-weight: 400;
+}
+.ifx-select-container .choices__list--dropdown .choices__item.small-select {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.ifx-select-container .choices__list--dropdown .choices__item.medium-select {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.ifx-select-container .choices__list--dropdown .choices__item.selected {
+  color: #0A8276;
+}
+.ifx-select-container [dir=rtl] .choices__list--dropdown .choices__item {
+  text-align: right;
+}
+@media (min-width: 640px) {
+  .ifx-select-container .choices__list--dropdown .choices__item--selectable:after {
+    font-size: 0.75rem;
+    line-height: 1rem;
+    opacity: 0;
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .ifx-select-container [dir=rtl] .choices__list--dropdown .choices__item--selectable {
+    text-align: right;
+    padding-left: 100px;
+    padding-right: 10px;
+  }
+  .ifx-select-container [dir=rtl] .choices__list--dropdown .choices__item--selectable:after {
+    right: auto;
+    left: 10px;
+  }
+}
+.ifx-select-container .choices__list--dropdown .choices__item--selectable.is-highlighted {
+  background-color: #EEEDED;
+}
+.ifx-select-container .choices__list--dropdown .choices__item--selectable.is-highlighted.selected {
+  color: #0A8276;
+}
+.ifx-select-container .choices__list--dropdown .choices__item--selectable:hover {
+  background-color: #EEEDED;
+}
+.ifx-select-container .choices__list--dropdown .choices__item--selectable:hover.selected {
+  color: #0A8276;
+}
+.ifx-select-container .choices__list--dropdown .choices__item--selectable.is-highlighted:after {
+  opacity: 0.5;
+}
+.ifx-select-container .choices__item {
+  cursor: default;
+}
+.ifx-select-container .choices__item--selectable {
+  cursor: pointer;
+}
+.ifx-select-container .choices__item--disabled {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  opacity: 0.5;
+}
+.ifx-select-container .choices__heading {
+  font-weight: 600;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  padding: 10px;
+  border-bottom: 1px solid #f7f7f7;
+  color: #1D1D1D;
+}
+.ifx-select-container .choices__button {
+  text-indent: -9999px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: 0;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+}
+.ifx-select-container .choices__button:focus {
+  outline: none;
+}
+.ifx-select-container .choices__single-button {
+  text-indent: -9999px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: 0;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+  visibility: hidden;
+}
+.ifx-select-container .choices__single-button:focus {
+  outline: none;
+}
+.ifx-select-container .choices__input {
+  display: inline-block;
+  vertical-align: baseline;
+  background-color: #f9f9f9;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin-bottom: 5px;
+  border: 0;
+  border-radius: 0;
+  max-width: 100%;
+}
+.ifx-select-container .choices__input--cloned {
+  background-color: transparent;
+}
+.ifx-select-container .choices__input::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0;
+}
+.ifx-select-container .choices__input::-ms-reveal {
+  display: none;
+  width: 0;
+  height: 0;
+}
+.ifx-select-container .choices__input::-webkit-search-decoration,
+.ifx-select-container .choices__input::-webkit-search-cancel-button,
+.ifx-select-container .choices__input::-webkit-search-results-button,
+.ifx-select-container .choices__input::-webkit-search-results-decoration {
+  display: none;
+}
+.ifx-select-container .choices__input:focus {
+  outline: 0;
+}
+.ifx-select-container [dir=rtl] .choices__input {
+  padding-right: 2px;
+  padding-left: 0;
+}
+.ifx-select-container .choices__placeholder {
+  opacity: 0.5;
+}

Static/package/dist/collection/components/select/single-select/select.e2e.js

@@ -0,0 +1,24 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('ifx-select', () => {
+  it('should render without errors', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-select></ifx-select>');
+    const element = await page.find('ifx-select');
+    expect(element).toHaveClass('hydrated');
+  });
+  it('should accept properties and reflect them', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-select ifx-label="Test label"></ifx-select>');
+    const component = await page.find('ifx-select');
+    const label = await component.getProperty('ifxLabel');
+    expect(label).toBe('Test label');
+  });
+  it('should display error message when ifxError is true', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-select ifx-error="true" ifx-error-message="This is an error"></ifx-select>');
+    const component = await page.find('ifx-select');
+    const errorMessage = await component.getProperty('ifxErrorMessage');
+    expect(errorMessage).toBe('This is an error');
+  });
+});
+//# sourceMappingURL=select.e2e.js.map

Static/package/dist/collection/components/select/single-select/select.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.e2e.js","sourceRoot":"","sources":["../../../../src/components/select/single-select/select.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAE1B,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC5C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,2BAA2B,CAAC,CAAC;IAEnD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC9C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;IACzD,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,kDAAkD,CAAC,CAAC;IAE1E,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAEhD,MAAM,KAAK,GAAG,MAAM,SAAS,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IACtD,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EACnC,CAAC,CAAC,CAAC;EAIH,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;IAClE,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,iFAAiF,CAAC,CAAC;IACzG,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAEhD,MAAM,YAAY,GAAG,MAAM,SAAS,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;IACpE,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;EAChD,CAAC,CAAC,CAAC;AAIL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-select', () => {\n\n  it('should render without errors', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<ifx-select></ifx-select>');\n\n    const element = await page.find('ifx-select');\n    expect(element).toHaveClass('hydrated');\n  });\n\n  it('should accept properties and reflect them', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<ifx-select ifx-label=\"Test label\"></ifx-select>');\n\n    const component = await page.find('ifx-select');\n\n    const label = await component.getProperty('ifxLabel');\n    expect(label).toBe('Test label');\n  });\n\n\n\n  it('should display error message when ifxError is true', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<ifx-select ifx-error=\"true\" ifx-error-message=\"This is an error\"></ifx-select>');\n    const component = await page.find('ifx-select');\n\n    const errorMessage = await component.getProperty('ifxErrorMessage');\n    expect(errorMessage).toBe('This is an error');\n  });\n\n\n\n});\n"]}

Static/package/dist/collection/components/select/single-select/select.stories.js

@@ -0,0 +1,138 @@
+import { action } from "@storybook/addon-actions";
+//use string instead of json format here to avoid ugly formatting in the storybook code snippet
+// let options = "[{'value': 'a','label': 'option a','selected': 'false'},{'value': 'b','label': 'option b','selected': 'false'},{'value': 'c','label': 'option c','selected': 'false'}]"
+const options = [{
+    value: "a",
+    label: "option a",
+    selected: false
+  },
+  {
+    value: "b",
+    label: "option b",
+    selected: false
+  },
+  {
+    value: "c",
+    label: "option c",
+    selected: false
+  }];
+export default {
+  title: 'Components/Select/Single Select',
+  // tags: ['autodocs'],
+  args: {
+    size: "m",
+    searchEnabled: true,
+    searchPlaceholderValue: 'Search...',
+    placeholder: true,
+    placeholderValue: 'Placeholder',
+    error: false,
+    errorMessage: 'Some error',
+    label: '',
+    disabled: false,
+    // type: 'single', //for later implementation
+  },
+  argTypes: {
+    // type: { //for later implementation
+    //   // control: { type: 'radio' },
+    //   control: false,
+    // },
+    size: {
+      options: {
+        'small (36px)': 's',
+        'medium (40px)': 'm'
+      },
+      control: {
+        type: 'radio',
+      },
+    },
+    placeholder: {
+      options: [true, false],
+      control: { type: 'radio' },
+    },
+    placeholderValue: { control: 'text' },
+    // value: { for later implementation
+    //   control: 'text',
+    //   description: 'Programmatically set the selected value',
+    // },
+    error: {
+      options: [true, false],
+      control: { type: 'radio' },
+    },
+    errorMessage: { control: 'text' },
+    label: { control: 'text' },
+    disabled: {
+      options: [true, false],
+      control: { type: 'radio' },
+    },
+    searchEnabled: {
+      options: [true, false],
+      control: { type: 'radio' },
+    },
+    searchPlaceholderValue: { control: { type: 'text' } },
+    options: {
+      description: 'Takes an array of objects in the following format',
+    },
+    ifxSelect: {
+      action: 'ifxSelect',
+      description: 'Custom event emitted when item is selected',
+      table: {
+        type: {
+          summary: 'Framework integration',
+          detail: 'React: onIfxSelect={handleInput}\nVue:@ifxSelect="handleInput"\nAngular:(ifxSelect)="handleInput()"\nVanillaJs:.addEventListener("ifxSelect", (event) => {//handle input});',
+        },
+      },
+    },
+  },
+};
+const DefaultTemplate = (args) => {
+  const template = `<ifx-select 
+  ifx-size='${args.size}'
+  placeholder='${args.placeholder}'
+  search-enabled='${args.searchEnabled}'
+  search-placeholder-value='${args.searchPlaceholderValue}'
+  ifx-disabled='${args.disabled}'
+  ifx-error='${args.error}'
+  ifx-error-message='${args.errorMessage}'
+  ifx-label='${args.label}'
+  ifx-placeholder-value='${args.placeholderValue}'
+  ifx-options='${JSON.stringify(args.options)}' >
+ </ifx-select>`;
+  setTimeout(() => {
+    var _a, _b;
+    (_a = document.querySelector('ifx-select')) === null || _a === void 0 ? void 0 : _a.addEventListener('ifxSelect', action('ifxSelect'));
+    (_b = document.querySelector('ifx-select')) === null || _b === void 0 ? void 0 : _b.addEventListener('ifxInput', action('ifxInput'));
+  }, 0);
+  return template;
+};
+export const Single = DefaultTemplate.bind({});
+Single.args = {
+  // type: 'single',
+  options: options,
+};
+// export const Text = DefaultTemplate.bind({});
+// Text.args = {
+//   type: 'text',
+//   name: 'text',
+//   value: 'Placeholder',
+//   allowHTML: true,
+//   delimiter: ',',
+//   editItems: true,
+//   maxItemCount: 5,
+// };
+// export const Text = DefaultTemplate.bind({});
+// Text.args = {
+//   type: 'multiple',
+//   name: 'multiple',
+//   choices: 'Choice 1, Choice 2, Choice 3',
+// };
+// export const SingleWithIcon = DefaultTemplate.bind({});
+// SingleWithIcon.args = {
+//   type: 'single',
+//   choices: "Choice 1, Choice 2 <ifx-icon icon='check16'></ifx-icon>, Choice 3 <ifx-icon icon='check16'></ifx-icon>",
+// };
+// export const MultiselectCombobox = DefaultTemplate.bind({});
+// MultiselectCombobox.args = {
+//   type: 'multiple',
+//   // removeItemButton: true,
+// };
+//# sourceMappingURL=select.stories.js.map

Static/package/dist/collection/components/select/single-select/utils.js

@@ -0,0 +1,37 @@
+/**
+ * Filter out entries from an object.
+ *
+ * @param obj - object to filter.
+ * @param fn - filter function.
+ * @returns a new object without the entries satisfying the filter function.
+ */
+export function filterObject(obj, fn) {
+  return Object.keys(obj).reduce((accum, property) => {
+    const value = obj[property];
+    if (fn(value, property, obj)) {
+      accum[property] = value;
+    }
+    return accum;
+  }, {});
+}
+/**
+ * Check if given parameter is not undefined.
+ *
+ * @param value - value to check.
+ * @returns whether the value is defined.
+ */
+export function isDefined(value) {
+  return typeof value !== 'undefined';
+}
+/**
+ * Returns the list of values.
+ *
+ * @param value - Value or list of values.
+ * @returns List of values.
+ */
+export function getValues(value) {
+  return typeof value !== 'undefined'
+    ? [].concat(typeof value === 'string' ? value.split(',') : value)
+    : [];
+}
+//# sourceMappingURL=utils.js.map

Static/package/dist/collection/components/select/single-select/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/select/single-select/utils.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,UAAU,YAAY,CAAC,GAAW,EAAE,EAAkB;EAC1D,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE;IACjD,MAAM,KAAK,GAAG,GAAG,CAAC,QAAQ,CAAC,CAAC;IAE5B,IAAI,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,EAAE;MAC5B,KAAK,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC;KACzB;IAED,OAAO,KAAK,CAAC;EACf,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CAAC,KAAU;EAClC,OAAO,OAAO,KAAK,KAAK,WAAW,CAAC;AACtC,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CAAC,KAA6B;EACrD,OAAO,OAAO,KAAK,KAAK,WAAW;IACjC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACjE,CAAC,CAAC,EAAE,CAAC;AACT,CAAC","sourcesContent":["export type FilterObjectFn = (value: any, key: string | number, obj: object) => boolean;\n\n/**\n * Filter out entries from an object.\n *\n * @param obj - object to filter.\n * @param fn - filter function.\n * @returns a new object without the entries satisfying the filter function.\n */\nexport function filterObject(obj: object, fn: FilterObjectFn): object {\n  return Object.keys(obj).reduce((accum, property) => {\n    const value = obj[property];\n\n    if (fn(value, property, obj)) {\n      accum[property] = value;\n    }\n\n    return accum;\n  }, {});\n}\n\n/**\n * Check if given parameter is not undefined.\n *\n * @param value - value to check.\n * @returns whether the value is defined.\n */\nexport function isDefined(value: any): boolean {\n  return typeof value !== 'undefined';\n}\n\n/**\n * Returns the list of values.\n *\n * @param value - Value or list of values.\n * @returns List of values.\n */\nexport function getValues(value: string | Array<string>): Array<string> {\n  return typeof value !== 'undefined'\n    ? [].concat(typeof value === 'string' ? value.split(',') : value)\n    : [];\n}\n"]}