@genesislcap/foundation-ui 14.138.1 → 14.139.0

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.0",
   "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.0",
+    "@genesislcap/genx": "14.139.0",
     "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.0",
+    "@genesislcap/foundation-criteria": "14.139.0",
+    "@genesislcap/foundation-errors": "14.139.0",
+    "@genesislcap/foundation-logger": "14.139.0",
+    "@genesislcap/foundation-notifications": "14.139.0",
+    "@genesislcap/foundation-utils": "14.139.0",
     "@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": "403107fcfb26a335c8db254a3327663e60e7af78"
 }