@genesislcap/foundation-ui 14.138.1 → 14.139.1

package/dist/esm/search-bar/search-bar.js

@@ -0,0 +1,144 @@
+import { __awaiter, __decorate } from "tslib";
+import { attr, DOM, observable } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { foundationSearchBarStyles as styles } from './search-bar.styles';
+import { foundationSearchBarTemplate as template } from './search-bar.template';
+import { INPUT_MIN_LENGTH, SCROLL_TIMEOUT, } from './search-bar.types';
+/**
+ * @tagname %%prefix%%-search-bar
+ */
+export class SearchBar extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.searchTerm = '';
+        this.appearance = 'neutral';
+        this.minlength = INPUT_MIN_LENGTH;
+        this.placeholder = 'Start typing to search';
+        this.selectedOptions = [];
+        this.normalizeDelimiter = (inputString) => {
+            return inputString.trim().replace(/\t|\r\n|\n|\r|,/g, ' ');
+        };
+        this.addOrReplaceSelectedText = (previousText, selectedText, newText) => {
+            return (selectedText === null || selectedText === void 0 ? void 0 : selectedText.length) > 0
+                ? previousText.replace(selectedText, newText)
+                : previousText.concat(newText);
+        };
+    }
+    clear() {
+        this.selectedOptions = [];
+        this.combobox.currentValue = '';
+        this.$emit('selectionChange', []);
+    }
+    clearSearch() {
+        this.clear();
+    }
+    inputdeleted() {
+        if (this.selectedOptions.length > 0) {
+            this.unselectOption(this.selectedOptions[this.selectedOptions.length - 1]);
+        }
+    }
+    changeHandler() {
+        const newOptions = [];
+        this.combobox.selectedOptions.forEach((option) => {
+            var _a, _b;
+            const field = option.value;
+            const trimSearchTerm = this.searchTerm.trim();
+            newOptions.push({
+                field,
+                term: trimSearchTerm,
+                label: ((_a = this.options
+                    .find((availableOption) => availableOption.field === field)) === null || _a === void 0 ? void 0 : _a.label(trimSearchTerm)) || option.text,
+                createCriteria: (_b = this.options.find((availableOption) => availableOption.field === field)) === null || _b === void 0 ? void 0 : _b.createCriteria,
+            });
+        });
+        this.selectedOptions = [...this.selectedOptions, ...newOptions];
+        this.selectedOptions = this.selectedOptions.filter((option, index, self) => index ===
+            self.findIndex((compareOption) => option.field === compareOption.field && option.term === compareOption.term));
+        this.combobox.value = '';
+        this.combobox.open = false;
+        this.$emit('selectionChange', this.selectedOptions);
+        DOM.queueUpdate(() => {
+            setTimeout(() => {
+                this.selectedOptionsDiv.scrollTo(this.selectedOptionsDiv.scrollWidth, 0);
+            }, SCROLL_TIMEOUT);
+        });
+    }
+    pasteHandler(event) {
+        var _a;
+        this.loading = true;
+        const pastedText = event.clipboardData.getData('text/plain');
+        const formattedText = this.normalizeDelimiter(pastedText);
+        const selectedText = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString();
+        const newText = this.addOrReplaceSelectedText(this.combobox.value, selectedText, formattedText);
+        if ((newText === null || newText === void 0 ? void 0 : newText.length) >= this.minlength) {
+            this.combobox.value = newText;
+            this.searchTerm = newText;
+            this.combobox.open = true;
+        }
+        this.loading = false;
+    }
+    hasSelectedOption(term, field) {
+        return this.selectedOptions.some((option) => {
+            return option.term === term && option.field === field;
+        });
+    }
+    unselectOption(option) {
+        this.selectedOptions = this.selectedOptions.filter((x) => x !== option);
+        this.$emit('selectionChange', this.selectedOptions);
+    }
+    inputHandler() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.loading = true;
+            this.searchTerm = this.combobox.value;
+            if (this.combobox.value.length >= this.minlength) {
+                this.filterSelectedOptions(this.combobox.value);
+            }
+            this.loading = false;
+        });
+    }
+    filterSelectedOptions(term) {
+        this.filteredOptions = this.options.filter((option) => !this.selectedOptions.find((selectedOption) => selectedOption.field === option.field && selectedOption.term.trim() === term.trim()));
+    }
+}
+__decorate([
+    observable
+], SearchBar.prototype, "defaultSlottedNodes", void 0);
+__decorate([
+    observable
+], SearchBar.prototype, "options", void 0);
+__decorate([
+    observable
+], SearchBar.prototype, "searchTerm", void 0);
+__decorate([
+    attr
+], SearchBar.prototype, "appearance", void 0);
+__decorate([
+    attr
+], SearchBar.prototype, "minlength", void 0);
+__decorate([
+    attr
+], SearchBar.prototype, "placeholder", void 0);
+__decorate([
+    attr
+], SearchBar.prototype, "disabled", void 0);
+__decorate([
+    observable
+], SearchBar.prototype, "loading", void 0);
+__decorate([
+    observable
+], SearchBar.prototype, "selectedOptions", void 0);
+__decorate([
+    observable
+], SearchBar.prototype, "filteredOptions", void 0);
+// explicitly declaring for extensibility
+export const foundationSearchBarShadowOptions = undefined;
+export const defaultSearchBarConfig = {};
+/**
+ * The Foundation Search Bar
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<foundation-search-bar\>
+ */
+export const foundationSearchBar = SearchBar.compose(Object.assign({ baseName: 'search-bar', template,
+    styles, shadowOptions: foundationSearchBarShadowOptions }, defaultSearchBarConfig));

package/dist/esm/search-bar/search-bar.styles.js

@@ -0,0 +1,96 @@
+import { designUnit } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+export const foundationSearchBarStyles = css `
+  .search-bar-combobox {
+    width: 100%;
+    min-width: auto;
+  }
+
+  .padding {
+    padding-left: calc(${designUnit} * 1px);
+  }
+
+  .selected-options {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    gap: calc(${designUnit} * 1px);
+    padding-right: calc(${designUnit} * 1px);
+  }
+
+  .selected-options:hover {
+    overflow-x: overlay;
+  }
+
+  .selected-options::-webkit-scrollbar {
+    height: 7px;
+  }
+
+  .selected-options::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
+    background-color: #484848;
+    border: 1px solid #7e7e7e;
+  }
+
+  .selected-options-divider {
+    border-right: calc(var(--stroke-width) * 1px) solid var(--neutral-fill-rest);
+  }
+
+  .options-button {
+    height: fit-content;
+    min-width: fit-content;
+  }
+
+  .label {
+    display: block;
+    font-size: var(--type-ramp-base-font-size);
+    margin: calc(${designUnit} * 2px) 2px;
+  }
+
+  .label-hidden {
+    display: none;
+  }
+
+  .search-clear-button {
+    min-width: 28px;
+    min-height: 28px;
+    height: 28px;
+    margin: 0;
+  }
+
+  .search-clear-button svg {
+    rotate: 45deg;
+  }
+
+  .search-clear-button::part(control) {
+    padding: 0;
+  }
+
+  .search-clear-button .svg-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .tooltip {
+    position: absolute;
+    z-index: 999;
+  }
+
+  .tooltip::part(tooltip) {
+    background-color: rgb(18 18 18 / 100%);
+    border: 1px solid #2e3339;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
+    font-size: 10px;
+    color: #f1f1f1;
+    height: 26px;
+  }
+
+  .close-icon {
+    color: var(--accent-fill-rest);
+  }
+`;

package/dist/esm/search-bar/search-bar.template.js

@@ -0,0 +1,100 @@
+import { html, ref, repeat, slotted } from '@microsoft/fast-element';
+import { whitespaceFilter } from '@microsoft/fast-foundation';
+import { classNames } from '@microsoft/fast-web-utilities';
+import { getPrefix } from '../utils';
+export const crossIcon = (slot = 'start') => `
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="10px" height="10px">
+  <g transform="matrix(1 0 0 1 -256 -14 )">
+    <path class="cross-icon" fill="white" d="M 9.9265625 8.865937499999998  L 6.060625000000001 5  L 9.265625 1.795  L 9.9265625 1.1340624999999993  C 10.0240625 1.0365624999999996  10.0240625 0.8781249999999996  9.9265625 0.7806249999999992  L 9.219375 0.07343749999999982  C 9.121875 -0.024062500000000542  8.9634375 -0.024062500000000542  8.8659375 0.07343749999999982  L 5 3.9393750000000005  L 1.1340625 0.073125  C 1.0365625 -0.02437500000000037  0.8781250000000002 -0.02437500000000037  0.7806249999999999 0.073125  L 0.073125 0.7803125  C -0.024375000000000008 0.8778124999999998  -0.024375000000000008 1.0362499999999997  0.073125 1.13375  L 3.9393750000000005 5  L 0.073125 8.865937499999998  C -0.024375000000000008 8.9634375  -0.024375000000000008 9.121875  0.073125 9.219375000000001  L 0.7803125 9.9265625  C 0.8778125000000001 10.0240625  1.03625 10.0240625  1.13375 9.9265625  L 5 6.060625  L 8.205 9.265625  L 8.8659375 9.9265625  C 8.9634375 10.0240625  9.121875 10.0240625  9.219375 9.9265625  L 9.9265625 9.219375000000001  C 10.0240625 9.121875  10.0240625 8.9634375  9.9265625 8.865937499999998  Z " fill-rule="nonzero" fill="#c9c9c9" stroke="none" fill-opacity="0.8" transform="matrix(1 0 0 1 256 14 )"/>
+  </g>
+</svg>
+`;
+export const plusIcon = () => `
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="30px" height="30px" class="bi bi-plus" viewBox="0 0 16 16">
+  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
+</svg>`;
+export const getPrefixedSearchBar = (prefix) => html `
+
+  <label part="label" for="control" data-test-id="label" class=${(x) => { var _a; return classNames('label', ['label-hidden', !((_a = x.defaultSlottedNodes) === null || _a === void 0 ? void 0 : _a.length)]); }}
+  >
+    <slot
+      ${slotted({
+    property: 'defaultSlottedNodes',
+    filter: whitespaceFilter,
+})}
+    ></slot>
+  </label>
+
+  <${prefix}-search-bar-combobox
+    ${ref('combobox')}
+    placeholder=${(x) => x.placeholder}
+    disabled=${(x) => x.disabled}
+    autocomplete="none"
+    minlength=${(x) => x.minlength}
+    @inputdeleted=${(x) => x.inputdeleted()}
+    @change=${(x) => x.changeHandler()}
+    @input=${(x) => x.inputHandler()}
+    @paste=${(x, c) => x.pasteHandler(c.event)}
+    class="search-bar-combobox ${(x) => (x.selectedOptions.length > 0 ? 'padding' : null)}"
+    data-test-id="search-bar"
+  >
+    <div
+      ${ref('selectedOptionsDiv')}
+      slot="selectedOptions"
+      class="selected-options ${(x) => x.selectedOptions.length > 0 ? 'selected-options-divider' : null}"
+    >
+      ${repeat((x) => x.selectedOptions, html `
+          <${prefix}-button
+            class="options-button"
+            appearance=${(x, c) => c.parent.appearance}
+            disabled=${(x, c) => c.parent.disabled}
+            @click=${(x, c) => c.parent.unselectOption(x)}
+          >
+            ${(x) => x.label}
+            <${prefix}-icon
+              class="close-icon"
+              slot="end"
+              name="circle-xmark"
+              variant="regular"
+            ></${prefix}-icon>
+          </${prefix}-button>
+        `)}
+    </div>
+    ${repeat((x) => x.filteredOptions, html `
+        <${prefix}-option
+          value="${(x) => x.field}"
+          :disabled=${(x, ctx) => !x.isEnabled(ctx.parent.searchTerm, ctx.parent.selectedOptions)}
+        >
+          ${(x, ctx) => x.label(ctx.parent.searchTerm)}
+        </${prefix}-option>
+      `)}
+    <${prefix}-button
+      class="search-clear-button"
+      @click=${(x) => x.clearSearch()}
+      id="search-clear-button"
+      slot="end"
+      data-test-id="clear-search"
+    >
+      <div class="svg-container">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          width="26px"
+          height="26px"
+          class="bi bi-plus"
+          viewBox="0 0 16 16"
+        >
+          <path
+            d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"
+          />
+        </svg>
+      </div>
+    </${prefix}-button>
+  </${prefix}-search-bar-combobox>
+  <${prefix}-tooltip class="tooltip" anchor="search-clear-button">
+    Clear Search Terms
+  </${prefix}-tooltip>
+`;
+export const foundationSearchBarTemplate = html `
+  ${(x) => getPrefixedSearchBar(getPrefix(x))}
+`;

package/dist/esm/search-bar/search-bar.types.js

@@ -0,0 +1,13 @@
+import { CriteriaBuilder, ExpressionBuilder, Serialisers } from '@genesislcap/foundation-criteria';
+export const SCROLL_TIMEOUT = 10;
+export const INPUT_MIN_LENGTH = 3;
+export const COMBO_INPUT_MIN_LENGTH = 1;
+export const getCriteriaBuilder = (field, term) => {
+    return new CriteriaBuilder()
+        .withExpression(new ExpressionBuilder()
+        .withField(field)
+        .withValue(term)
+        .withSerialiser(Serialisers.containsIgnoreCase)
+        .build())
+        .build();
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-ui",
   "description": "Genesis Foundation UI",
-  "version": "14.138.1",
+  "version": "14.139.1",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -74,8 +74,8 @@
     "test:debug": "genx test --debug"
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.138.1",
-    "@genesislcap/genx": "14.138.1",
+    "@genesislcap/foundation-testing": "14.139.1",
+    "@genesislcap/genx": "14.139.1",
     "copyfiles": "^2.4.1",
     "rimraf": "^3.0.2",
     "rxjs": "^7.5.4"
@@ -86,12 +86,12 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^4.0.0",
-    "@genesislcap/foundation-comms": "14.138.1",
-    "@genesislcap/foundation-criteria": "14.138.1",
-    "@genesislcap/foundation-errors": "14.138.1",
-    "@genesislcap/foundation-logger": "14.138.1",
-    "@genesislcap/foundation-notifications": "14.138.1",
-    "@genesislcap/foundation-utils": "14.138.1",
+    "@genesislcap/foundation-comms": "14.139.1",
+    "@genesislcap/foundation-criteria": "14.139.1",
+    "@genesislcap/foundation-errors": "14.139.1",
+    "@genesislcap/foundation-logger": "14.139.1",
+    "@genesislcap/foundation-notifications": "14.139.1",
+    "@genesislcap/foundation-utils": "14.139.1",
     "@microsoft/fast-colors": "^5.3.1",
     "@microsoft/fast-components": "^2.30.6",
     "@microsoft/fast-element": "^1.12.0",
@@ -113,5 +113,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "2b0b86a7a094976879b0cfdcd47a7ab35714625e"
+  "gitHead": "37c2db3914ae002405d21f0c8118727d92d0cc4b"
 }