@genesislcap/foundation-ui 14.141.1 → 14.141.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/custom-elements.json +748 -729
  2. package/dist/dts/multiselect/multiselect-consts.d.ts +1 -2
  3. package/dist/dts/multiselect/multiselect-consts.d.ts.map +1 -1
  4. package/dist/dts/multiselect/multiselect.d.ts +16 -2
  5. package/dist/dts/multiselect/multiselect.d.ts.map +1 -1
  6. package/dist/esm/multiselect/multiselect-consts.js +0 -1
  7. package/dist/esm/multiselect/multiselect.js +53 -15
  8. package/dist/esm/notification-listener/notification-listener.js +2 -3
  9. package/package.json +10 -10
package/dist/dts/multiselect/multiselect-consts.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  export declare enum Position {
2
2
  BELOW = "below",
3
- ABOVE = "above",
4
- DYNAMIC = "dynamic"
3
+ ABOVE = "above"
5
4
  }
6
5
  //# sourceMappingURL=multiselect-consts.d.ts.map
package/dist/dts/multiselect/multiselect-consts.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"multiselect-consts.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect-consts.ts"],"names":[],"mappings":"AAAA,oBAAY,QAAQ;IAClB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,OAAO,YAAY;CACpB"}
1
+ {"version":3,"file":"multiselect-consts.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect-consts.ts"],"names":[],"mappings":"AAAA,oBAAY,QAAQ;IAClB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB"}
package/dist/dts/multiselect/multiselect.d.ts CHANGED
@@ -13,6 +13,7 @@ export type MultiselectOption = {
13
13
  */
14
14
  export declare class Multiselect extends FoundationElement {
15
15
  name: string;
16
+ autoPosition: boolean;
16
17
  all: boolean;
17
18
  allSelected: boolean;
18
19
  search: boolean;
@@ -33,6 +34,11 @@ export declare class Multiselect extends FoundationElement {
33
34
  selectedOptions: string[];
34
35
  filteredAvailableOptions: MultiselectOption[];
35
36
  scrollContainer: HTMLElement;
37
+ /**
38
+ * Controls the positioning of the multiselect dropdown. Accepts the following values:
39
+ * - Position.ABOVE: Forces the dropdown to always open above the input field.
40
+ * - Position.BELOW: Forces the dropdown to always open below the input field.
41
+ */
36
42
  position: Position;
37
43
  onAllSelectedCallback: (allSelected: boolean) => void;
38
44
  private initialisedOptions;
@@ -40,10 +46,18 @@ export declare class Multiselect extends FoundationElement {
40
46
  optionsElement: HTMLElement;
41
47
  connectedCallback(): void;
42
48
  disconnectedCallback(): void;
49
+ toggle(): void;
43
50
  optionsChanged(): void;
44
51
  selectedOptionsChanged(): void;
45
- toggle(): void;
46
- setDropdownPosition(): void;
52
+ /**
53
+ * Sets the dropdown position based on the current configuration.
54
+ * @remarks
55
+ * If `autoPosition` is `true`, this method calculates the available space above and below the input field in the viewport and positions the dropdown accordingly.
56
+ * This ensures the dropdown is always visible to the user. If `autoPosition` is `false`, the dropdown position is locked to either 'above' or 'below', as specified by the `position` attribute.
57
+ * This method is intended for internal use by the component and is marked as private.
58
+ * @private
59
+ */
60
+ private setDropdownPosition;
47
61
  optionGetter(option: MultiselectOption): string;
48
62
  getItemLabel(option: MultiselectOption): any;
49
63
  isOptionDisabled(option: MultiselectOption): boolean;
package/dist/dts/multiselect/multiselect.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAO9D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAMhD,eAAO,MAAM,kCAAkC,EAAE,cAA0B,CAAC;AAE5E,eAAO,MAAM,wBAAwB,IAAK,CAAC;AAE3C,MAAM,MAAM,iBAAiB,GACzB;IACE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GACD,MAAM,CAAC;AAEX;;GAEG;AACH,qBAAa,WAAY,SAAQ,iBAAiB;IAC1C,IAAI,SAAM;IACW,GAAG,UAAQ;IACX,WAAW,UAAS;IACpB,MAAM,UAAQ;IACd,QAAQ,UAAS;IACjB,KAAK,UAAS;IACnC,QAAQ,EAAE,MAAM,CAAiB;IACvC,eAAe,CAAC,QAAQ,KAAA,EAAE,QAAQ,EAAE,MAAM;IAG1C,qBAAqB,MAAC;IACV,mBAAmB,EAAE,IAAI,EAAE,CAAC;IAC5B,iBAAiB,EAAE,qBAAqB,EAAE,CAAC;IAC3C,cAAc,MAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,MAAM,CAAC;IACtC,OAAO,CAAC,YAAY,CAAiD;IACzD,IAAI,UAAS;IACzB,WAAW,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO;IAYhC,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAElC,eAAe,EAAE,MAAM,EAAE,CAAM;IAE/B,wBAAwB,EAAE,iBAAiB,EAAE,CAAqB;IAElE,eAAe,EAAE,WAAW,CAAC;IAE7B,QAAQ,EAAE,QAAQ,CAAkB;IAEpC,qBAAqB,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAElE,OAAO,CAAC,kBAAkB,CAAkB;IAE5C,SAAS,EAAE,UAAU,CAAC;IACtB,cAAc,EAAE,WAAW,CAAC;IAE5B,iBAAiB;IAOjB,oBAAoB;IAKpB,cAAc;IAQd,sBAAsB;IAOtB,MAAM;IAON,mBAAmB;IAanB,YAAY,CAAC,MAAM,EAAE,iBAAiB;IAOtC,YAAY,CAAC,MAAM,EAAE,iBAAiB;IAetC,gBAAgB,CAAC,MAAM,EAAE,iBAAiB;IAQ1C,IACI,eAAe,WAyBlB;IAED,IACI,cAAc,WAEjB;IAED,IACI,aAAa,YAIhB;IAED,IACI,oBAAoB,YAEvB;IAED,gBAAgB,CAAC,gBAAgB,EAAE,iBAAiB,GAAG,OAAO;IAI9D,iBAAiB,CAAC,gBAAgB,EAAE,iBAAiB;IAarD,sBAAsB;IAItB,iBAAiB;IAajB,YAAY;IAUZ,SAAS;IAST,cAAc;IAkBd,aAAa,CAAC,KAAK,EAAE,KAAK;IAK1B,OAAO,CAAC,kBAAkB;CAK3B;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;sBAMhC,CAAC"}
1
+ {"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAO9D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAMhD,eAAO,MAAM,kCAAkC,EAAE,cAA0B,CAAC;AAE5E,eAAO,MAAM,wBAAwB,IAAK,CAAC;AAE3C,MAAM,MAAM,iBAAiB,GACzB;IACE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GACD,MAAM,CAAC;AAEX;;GAEG;AACH,qBAAa,WAAY,SAAQ,iBAAiB;IAC1C,IAAI,SAAM;IACuC,YAAY,EAAE,OAAO,CAAQ;IACzD,GAAG,UAAQ;IACX,WAAW,UAAS;IACpB,MAAM,UAAQ;IACd,QAAQ,UAAS;IACjB,KAAK,UAAS;IACnC,QAAQ,EAAE,MAAM,CAAiB;IACvC,eAAe,CAAC,QAAQ,KAAA,EAAE,QAAQ,EAAE,MAAM;IAG1C,qBAAqB,MAAC;IACV,mBAAmB,EAAE,IAAI,EAAE,CAAC;IAC5B,iBAAiB,EAAE,qBAAqB,EAAE,CAAC;IAC3C,cAAc,MAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,MAAM,CAAC;IACtC,OAAO,CAAC,YAAY,CAAiD;IACzD,IAAI,UAAS;IACzB,WAAW,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO;IAYhC,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAClC,eAAe,EAAE,MAAM,EAAE,CAAM;IAC/B,wBAAwB,EAAE,iBAAiB,EAAE,CAAqB;IAClE,eAAe,EAAE,WAAW,CAAC;IAEzC;;;;OAIG;IACS,QAAQ,EAAE,QAAQ,CAAkB;IAEpC,qBAAqB,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAElE,OAAO,CAAC,kBAAkB,CAAkB;IAE5C,SAAS,EAAE,UAAU,CAAC;IACtB,cAAc,EAAE,WAAW,CAAC;IAE5B,iBAAiB;IAOjB,oBAAoB;IAKpB,MAAM;IAON,cAAc;IAQd,sBAAsB;IAOtB;;;;;;;OAOG;IACH,OAAO,CAAC,mBAAmB;IAqC3B,YAAY,CAAC,MAAM,EAAE,iBAAiB;IAOtC,YAAY,CAAC,MAAM,EAAE,iBAAiB;IAetC,gBAAgB,CAAC,MAAM,EAAE,iBAAiB;IAQ1C,IACI,eAAe,WAyBlB;IAED,IACI,cAAc,WAEjB;IAED,IACI,aAAa,YAIhB;IAED,IACI,oBAAoB,YAEvB;IAED,gBAAgB,CAAC,gBAAgB,EAAE,iBAAiB,GAAG,OAAO;IAI9D,iBAAiB,CAAC,gBAAgB,EAAE,iBAAiB;IAarD,sBAAsB;IAItB,iBAAiB;IAajB,YAAY;IAUZ,SAAS;IAST,cAAc;IAkBd,aAAa,CAAC,KAAK,EAAE,KAAK;IAK1B,OAAO,CAAC,kBAAkB;CAK3B;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;sBAMhC,CAAC"}
package/dist/esm/multiselect/multiselect-consts.js CHANGED
@@ -2,5 +2,4 @@ export var Position;
2
2
  (function (Position) {
3
3
  Position["BELOW"] = "below";
4
4
  Position["ABOVE"] = "above";
5
- Position["DYNAMIC"] = "dynamic";
6
5
  })(Position || (Position = {}));
package/dist/esm/multiselect/multiselect.js CHANGED
@@ -5,7 +5,7 @@ import { FoundationElement } from '@microsoft/fast-foundation';
5
5
  import debounce from 'lodash.debounce';
6
6
  import { dataserverCriteriaBuilder, logger, requestServerCriteriaBuilder, wasClickOutsideElement, } from '../utils';
7
7
  import { Position } from './multiselect-consts';
8
- import { multiselectStyles as styles, maxheight } from './multiselect.styles';
8
+ import { multiselectStyles as styles } from './multiselect.styles';
9
9
  import { multiselectTemplate as template } from './multiselect.template';
10
10
  const DEBOUNCE_TIME = 500;
11
11
  export const foundationMultiselectShadowOptions = undefined;
@@ -17,6 +17,7 @@ export class Multiselect extends FoundationElement {
17
17
  constructor() {
18
18
  super(...arguments);
19
19
  this.name = '';
20
+ this.autoPosition = true;
20
21
  this.all = true;
21
22
  this.allSelected = false;
22
23
  this.search = true;
@@ -28,6 +29,11 @@ export class Multiselect extends FoundationElement {
28
29
  this.options = [];
29
30
  this.selectedOptions = [];
30
31
  this.filteredAvailableOptions = [...this.options];
32
+ /**
33
+ * Controls the positioning of the multiselect dropdown. Accepts the following values:
34
+ * - Position.ABOVE: Forces the dropdown to always open above the input field.
35
+ * - Position.BELOW: Forces the dropdown to always open below the input field.
36
+ */
31
37
  this.position = Position.BELOW;
32
38
  this.initialisedOptions = false;
33
39
  }
@@ -58,6 +64,12 @@ export class Multiselect extends FoundationElement {
58
64
  super.disconnectedCallback();
59
65
  document.removeEventListener('mousedown', this.clickOutside);
60
66
  }
67
+ toggle() {
68
+ if (!this.open) {
69
+ this.setDropdownPosition();
70
+ }
71
+ this.open = !this.open;
72
+ }
61
73
  optionsChanged() {
62
74
  if (this.allSelected && !this.initialisedOptions) {
63
75
  this.selectedOptions = this.options.map((option) => this.optionGetter(option));
@@ -70,22 +82,45 @@ export class Multiselect extends FoundationElement {
70
82
  return;
71
83
  }
72
84
  }
73
- toggle() {
74
- if (!this.open && this.position === Position.DYNAMIC) {
75
- this.setDropdownPosition();
76
- }
77
- this.open = !this.open;
78
- }
85
+ /**
86
+ * Sets the dropdown position based on the current configuration.
87
+ * @remarks
88
+ * If `autoPosition` is `true`, this method calculates the available space above and below the input field in the viewport and positions the dropdown accordingly.
89
+ * This ensures the dropdown is always visible to the user. If `autoPosition` is `false`, the dropdown position is locked to either 'above' or 'below', as specified by the `position` attribute.
90
+ * This method is intended for internal use by the component and is marked as private.
91
+ * @private
92
+ */
79
93
  setDropdownPosition() {
80
- var _a, _b;
81
- const remainingSpace = (this.scrollContainer || this.parentElement).clientHeight -
82
- (this.offsetTop - (this.scrollContainer || this.parentElement).scrollTop);
83
- const totalHeight = maxheight + this.offsetHeight;
84
- if (remainingSpace < totalHeight) {
85
- (_a = this.optionsElement) === null || _a === void 0 ? void 0 : _a.classList.add('position-above');
94
+ let calculatedPosition = this.position;
95
+ if (this.autoPosition) {
96
+ let container = this.assignedSlot ? this.assignedSlot.parentElement : this.parentElement;
97
+ while (container && !container.classList.contains('content-wrapper')) {
98
+ container = container.parentElement;
99
+ }
100
+ if (!container) {
101
+ const multiselectRect = this.getBoundingClientRect();
102
+ const viewportHeight = window.innerHeight;
103
+ const spaceAbove = multiselectRect.top;
104
+ const spaceBelow = viewportHeight - multiselectRect.bottom;
105
+ calculatedPosition =
106
+ spaceBelow < multiselectRect.height && spaceAbove > spaceBelow
107
+ ? Position.ABOVE
108
+ : Position.BELOW;
109
+ }
110
+ else {
111
+ const containerRect = container.getBoundingClientRect();
112
+ const thisRect = this.getBoundingClientRect();
113
+ const midPoint = containerRect.top + containerRect.height / 2;
114
+ calculatedPosition = thisRect.top < midPoint ? Position.BELOW : Position.ABOVE;
115
+ }
86
116
  }
87
- else {
88
- (_b = this.optionsElement) === null || _b === void 0 ? void 0 : _b.classList.remove('position-above');
117
+ if (calculatedPosition === Position.ABOVE) {
118
+ this.optionsElement.classList.add('position-above');
119
+ this.optionsElement.classList.remove('position-below');
120
+ }
121
+ else if (calculatedPosition === Position.BELOW) {
122
+ this.optionsElement.classList.add('position-below');
123
+ this.optionsElement.classList.remove('position-above');
89
124
  }
90
125
  }
91
126
  optionGetter(option) {
@@ -221,6 +256,9 @@ export class Multiselect extends FoundationElement {
221
256
  __decorate([
222
257
  attr
223
258
  ], Multiselect.prototype, "name", void 0);
259
+ __decorate([
260
+ attr({ mode: 'boolean', attribute: 'auto-position' })
261
+ ], Multiselect.prototype, "autoPosition", void 0);
224
262
  __decorate([
225
263
  attr({ mode: 'boolean' })
226
264
  ], Multiselect.prototype, "all", void 0);
package/dist/esm/notification-listener/notification-listener.js CHANGED
@@ -53,10 +53,9 @@ export class NotificationListener extends FoundationElement {
53
53
  const rows = dataServerResult.inserts;
54
54
  if (rows.length > 0) {
55
55
  rows.forEach((row) => {
56
- var _a;
57
56
  const { HEADER: title, MESSAGE: message, NOTIFY_SEVERITY: type } = row;
58
57
  const createdAt = row.CREATED_AT ? new Date(row.CREATED_AT) : undefined;
59
- const expiry = row.EXPIRY ? row.EXPIRY - row.CREATED_AT : 0;
58
+ const expiry = row.EXPIRY ? row.EXPIRY - row.CREATED_AT : undefined;
60
59
  let buttons = [];
61
60
  if (this.toastButtons && this.toastButtons.length > 0) {
62
61
  buttons = this.toastButtons.filter(({ condition }) => !!condition ? condition({ details: row }) : true);
@@ -69,7 +68,7 @@ export class NotificationListener extends FoundationElement {
69
68
  details: row,
70
69
  type: type === null || type === void 0 ? void 0 : type.toLowerCase(),
71
70
  buttons: buttons,
72
- autoClose: (_a = !!expiry) !== null && _a !== void 0 ? _a : !!this.closeTimeout,
71
+ autoClose: expiry !== undefined ? !!expiry : !!this.closeTimeout,
73
72
  closeTimeout: expiry !== null && expiry !== void 0 ? expiry : this.closeTimeout,
74
73
  },
75
74
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@genesislcap/foundation-ui",
3
3
  "description": "Genesis Foundation UI",
4
- "version": "14.141.1",
4
+ "version": "14.141.3",
5
5
  "sideEffects": false,
6
6
  "license": "SEE LICENSE IN license.txt",
7
7
  "main": "dist/esm/index.js",
@@ -74,8 +74,8 @@
74
74
  "test:debug": "genx test --debug"
75
75
  },
76
76
  "devDependencies": {
77
- "@genesislcap/foundation-testing": "14.141.1",
78
- "@genesislcap/genx": "14.141.1",
77
+ "@genesislcap/foundation-testing": "14.141.3",
78
+ "@genesislcap/genx": "14.141.3",
79
79
  "copyfiles": "^2.4.1",
80
80
  "rimraf": "^3.0.2",
81
81
  "rxjs": "^7.5.4"
@@ -86,12 +86,12 @@
86
86
  "@fortawesome/free-regular-svg-icons": "^6.2.1",
87
87
  "@fortawesome/free-solid-svg-icons": "^6.2.1",
88
88
  "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^4.0.0",
89
- "@genesislcap/foundation-comms": "14.141.1",
90
- "@genesislcap/foundation-criteria": "14.141.1",
91
- "@genesislcap/foundation-errors": "14.141.1",
92
- "@genesislcap/foundation-logger": "14.141.1",
93
- "@genesislcap/foundation-notifications": "14.141.1",
94
- "@genesislcap/foundation-utils": "14.141.1",
89
+ "@genesislcap/foundation-comms": "14.141.3",
90
+ "@genesislcap/foundation-criteria": "14.141.3",
91
+ "@genesislcap/foundation-errors": "14.141.3",
92
+ "@genesislcap/foundation-logger": "14.141.3",
93
+ "@genesislcap/foundation-notifications": "14.141.3",
94
+ "@genesislcap/foundation-utils": "14.141.3",
95
95
  "@microsoft/fast-colors": "^5.3.1",
96
96
  "@microsoft/fast-components": "^2.30.6",
97
97
  "@microsoft/fast-element": "^1.12.0",
@@ -113,5 +113,5 @@
113
113
  "access": "public"
114
114
  },
115
115
  "customElements": "dist/custom-elements.json",
116
- "gitHead": "25fd8b62107c27f17a668eaba2182a4a2176966b"
116
+ "gitHead": "37b360922e11609ac87d08b72cb66de130732b8d"
117
117
  }