@limetech/lime-elements 37.2.8 → 37.4.0

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 (185) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/dist/cjs/{component-6c4222b7.js → component-cba208a8.js} +137 -18
  3. package/dist/cjs/component-cba208a8.js.map +1 -0
  4. package/dist/cjs/{get-icon-props-d74b10c9.js → get-icon-props-50be7440.js} +1 -19
  5. package/dist/cjs/get-icon-props-50be7440.js.map +1 -0
  6. package/dist/cjs/lime-elements.cjs.js +1 -1
  7. package/dist/cjs/limel-action-bar-item_2.cjs.entry.js +1 -1
  8. package/dist/cjs/limel-breadcrumbs_3.cjs.entry.js +3 -4
  9. package/dist/cjs/limel-breadcrumbs_3.cjs.entry.js.map +1 -1
  10. package/dist/cjs/limel-chip_2.cjs.entry.js +608 -0
  11. package/dist/cjs/limel-chip_2.cjs.entry.js.map +1 -0
  12. package/dist/cjs/limel-collapsible-section.cjs.entry.js +1 -1
  13. package/dist/cjs/limel-collapsible-section.cjs.entry.js.map +1 -1
  14. package/dist/cjs/limel-color-picker-palette.cjs.entry.js +1 -1
  15. package/dist/cjs/limel-color-picker-palette.cjs.entry.js.map +1 -1
  16. package/dist/cjs/limel-color-picker.cjs.entry.js +1 -1
  17. package/dist/cjs/limel-color-picker.cjs.entry.js.map +1 -1
  18. package/dist/cjs/limel-file.cjs.entry.js +1 -1
  19. package/dist/cjs/limel-form.cjs.entry.js +1 -1
  20. package/dist/cjs/limel-form.cjs.entry.js.map +1 -1
  21. package/dist/cjs/limel-header.cjs.entry.js +1 -1
  22. package/dist/cjs/limel-header.cjs.entry.js.map +1 -1
  23. package/dist/cjs/limel-helper-line.cjs.entry.js +1 -1
  24. package/dist/cjs/limel-helper-line.cjs.entry.js.map +1 -1
  25. package/dist/cjs/limel-input-field_3.cjs.entry.js +4 -5
  26. package/dist/cjs/limel-input-field_3.cjs.entry.js.map +1 -1
  27. package/dist/cjs/limel-picker.cjs.entry.js +1 -1
  28. package/dist/cjs/limel-progress-flow-item.cjs.entry.js +1 -1
  29. package/dist/cjs/limel-progress-flow.cjs.entry.js +2 -2
  30. package/dist/cjs/limel-progress-flow.cjs.entry.js.map +1 -1
  31. package/dist/cjs/limel-select.cjs.entry.js +2 -2
  32. package/dist/cjs/limel-select.cjs.entry.js.map +1 -1
  33. package/dist/cjs/limel-slider.cjs.entry.js +1 -1
  34. package/dist/cjs/limel-slider.cjs.entry.js.map +1 -1
  35. package/dist/cjs/limel-tab-bar.cjs.entry.js +1 -1
  36. package/dist/cjs/loader.cjs.js +1 -1
  37. package/dist/collection/components/chip/chip.css +3 -0
  38. package/dist/collection/components/chip/chip.js +41 -14
  39. package/dist/collection/components/chip/chip.js.map +1 -1
  40. package/dist/collection/components/chip-set/chip-set.css +42 -734
  41. package/dist/collection/components/chip-set/chip-set.js +83 -108
  42. package/dist/collection/components/chip-set/chip-set.js.map +1 -1
  43. package/dist/collection/components/chip-set/chip.types.js.map +1 -1
  44. package/dist/collection/components/collapsible-section/collapsible-section.css +1 -2
  45. package/dist/collection/components/color-picker/color-picker-palette.css +71 -4
  46. package/dist/collection/components/color-picker/color-picker.css +71 -4
  47. package/dist/collection/components/form/form.css +1 -2
  48. package/dist/collection/components/header/header.js +1 -0
  49. package/dist/collection/components/header/header.js.map +1 -1
  50. package/dist/collection/components/helper-line/helper-line.css +1 -0
  51. package/dist/collection/components/input-field/input-field.css +24 -5
  52. package/dist/collection/components/list/list.css +2 -5
  53. package/dist/collection/components/menu-list/menu-list.css +2 -5
  54. package/dist/collection/components/progress-flow/progress-flow.css +1 -1
  55. package/dist/collection/components/select/select.css +9 -19
  56. package/dist/collection/components/select/select.js +0 -1
  57. package/dist/collection/components/select/select.js.map +1 -1
  58. package/dist/collection/components/slider/slider.css +12 -9
  59. package/dist/collection/style/internal/shared_input-select-picker.scss +11 -2
  60. package/dist/esm/{component-703e23db.js → component-db286494.js} +121 -2
  61. package/dist/esm/component-db286494.js.map +1 -0
  62. package/dist/esm/{get-icon-props-f581151a.js → get-icon-props-0b65f85e.js} +2 -19
  63. package/dist/esm/get-icon-props-0b65f85e.js.map +1 -0
  64. package/dist/esm/{keycodes-22fb659d.js → keycodes-bf11a644.js} +2 -2
  65. package/dist/esm/{keycodes-22fb659d.js.map → keycodes-bf11a644.js.map} +1 -1
  66. package/dist/esm/lime-elements.js +1 -1
  67. package/dist/esm/limel-action-bar-item_2.entry.js +1 -1
  68. package/dist/esm/limel-breadcrumbs_3.entry.js +4 -5
  69. package/dist/esm/limel-breadcrumbs_3.entry.js.map +1 -1
  70. package/dist/esm/limel-chip_2.entry.js +603 -0
  71. package/dist/esm/limel-chip_2.entry.js.map +1 -0
  72. package/dist/esm/limel-collapsible-section.entry.js +1 -1
  73. package/dist/esm/limel-collapsible-section.entry.js.map +1 -1
  74. package/dist/esm/limel-color-picker-palette.entry.js +1 -1
  75. package/dist/esm/limel-color-picker-palette.entry.js.map +1 -1
  76. package/dist/esm/limel-color-picker.entry.js +1 -1
  77. package/dist/esm/limel-color-picker.entry.js.map +1 -1
  78. package/dist/esm/limel-file.entry.js +1 -1
  79. package/dist/esm/limel-form.entry.js +1 -1
  80. package/dist/esm/limel-form.entry.js.map +1 -1
  81. package/dist/esm/limel-header.entry.js +1 -1
  82. package/dist/esm/limel-header.entry.js.map +1 -1
  83. package/dist/esm/limel-helper-line.entry.js +1 -1
  84. package/dist/esm/limel-helper-line.entry.js.map +1 -1
  85. package/dist/esm/limel-input-field_3.entry.js +5 -6
  86. package/dist/esm/limel-input-field_3.entry.js.map +1 -1
  87. package/dist/esm/limel-picker.entry.js +2 -2
  88. package/dist/esm/limel-popover_2.entry.js +1 -1
  89. package/dist/esm/limel-progress-flow-item.entry.js +1 -1
  90. package/dist/esm/limel-progress-flow.entry.js +2 -2
  91. package/dist/esm/limel-progress-flow.entry.js.map +1 -1
  92. package/dist/esm/limel-select.entry.js +3 -3
  93. package/dist/esm/limel-select.entry.js.map +1 -1
  94. package/dist/esm/limel-slider.entry.js +1 -1
  95. package/dist/esm/limel-slider.entry.js.map +1 -1
  96. package/dist/esm/limel-tab-bar.entry.js +1 -1
  97. package/dist/esm/loader.js +1 -1
  98. package/dist/lime-elements/lime-elements.esm.js +1 -1
  99. package/dist/lime-elements/lime-elements.esm.js.map +1 -1
  100. package/dist/lime-elements/{p-4a8ac53b.entry.js → p-00064897.entry.js} +4 -4
  101. package/dist/lime-elements/{p-4a8ac53b.entry.js.map → p-00064897.entry.js.map} +1 -1
  102. package/dist/lime-elements/p-027b500e.entry.js +2 -0
  103. package/dist/lime-elements/p-027b500e.entry.js.map +1 -0
  104. package/dist/lime-elements/{p-79fa180b.entry.js → p-0345e5c9.entry.js} +4 -4
  105. package/dist/lime-elements/{p-79fa180b.entry.js.map → p-0345e5c9.entry.js.map} +1 -1
  106. package/dist/lime-elements/p-104120ab.entry.js +2 -0
  107. package/dist/lime-elements/p-104120ab.entry.js.map +1 -0
  108. package/dist/lime-elements/p-27330d1d.entry.js +2 -0
  109. package/dist/lime-elements/p-27330d1d.entry.js.map +1 -0
  110. package/dist/lime-elements/{p-854343a1.entry.js → p-27d64a5a.entry.js} +2 -2
  111. package/dist/lime-elements/p-2f777fdb.js +2 -0
  112. package/dist/lime-elements/p-2f777fdb.js.map +1 -0
  113. package/dist/lime-elements/{p-554cdf9e.entry.js → p-5903e050.entry.js} +2 -2
  114. package/dist/lime-elements/{p-554cdf9e.entry.js.map → p-5903e050.entry.js.map} +1 -1
  115. package/dist/lime-elements/p-68cb9574.entry.js +2 -0
  116. package/dist/lime-elements/p-68cb9574.entry.js.map +1 -0
  117. package/dist/lime-elements/{p-af53d049.entry.js → p-71282352.entry.js} +2 -2
  118. package/dist/lime-elements/{p-af53d049.entry.js.map → p-71282352.entry.js.map} +1 -1
  119. package/dist/lime-elements/{p-60063e02.entry.js → p-870d72f1.entry.js} +2 -2
  120. package/dist/lime-elements/{p-60063e02.entry.js.map → p-870d72f1.entry.js.map} +1 -1
  121. package/dist/lime-elements/p-8d13a44f.entry.js +2 -0
  122. package/dist/lime-elements/{p-f613f943.entry.js.map → p-8d13a44f.entry.js.map} +1 -1
  123. package/dist/lime-elements/p-a1d841db.entry.js +2 -0
  124. package/dist/lime-elements/p-a1d841db.entry.js.map +1 -0
  125. package/dist/lime-elements/{p-acd589ef.entry.js → p-b03c1b71.entry.js} +2 -2
  126. package/dist/lime-elements/{p-85a770a4.entry.js → p-b51fd0c7.entry.js} +2 -2
  127. package/dist/lime-elements/{p-e53b7ccf.entry.js → p-b89d2cc3.entry.js} +2 -2
  128. package/dist/lime-elements/{p-c022dd0d.entry.js → p-d9ad1ebe.entry.js} +3 -3
  129. package/dist/lime-elements/{p-c022dd0d.entry.js.map → p-d9ad1ebe.entry.js.map} +1 -1
  130. package/dist/lime-elements/p-dfa06174.entry.js +2 -0
  131. package/dist/lime-elements/p-dfa06174.entry.js.map +1 -0
  132. package/dist/lime-elements/{p-93c6d561.js → p-e03dfe70.js} +2 -2
  133. package/dist/lime-elements/{p-38151879.js → p-f764b655.js} +32 -10
  134. package/dist/lime-elements/p-f764b655.js.map +1 -0
  135. package/dist/lime-elements/{p-bbe3ce51.entry.js → p-fdae60a1.entry.js} +2 -2
  136. package/dist/lime-elements/style/internal/shared_input-select-picker.scss +11 -2
  137. package/dist/types/components/chip/chip.d.ts +17 -4
  138. package/dist/types/components/chip-set/chip-set.d.ts +15 -15
  139. package/dist/types/components/chip-set/chip.types.d.ts +7 -1
  140. package/dist/types/components/header/header.d.ts +1 -0
  141. package/dist/types/components/select/select.d.ts +0 -1
  142. package/dist/types/components.d.ts +22 -12
  143. package/package.json +6 -6
  144. package/dist/cjs/component-6c4222b7.js.map +0 -1
  145. package/dist/cjs/get-icon-props-d74b10c9.js.map +0 -1
  146. package/dist/cjs/keyboard-9477d3a8.js +0 -133
  147. package/dist/cjs/keyboard-9477d3a8.js.map +0 -1
  148. package/dist/cjs/limel-chip-set.cjs.entry.js +0 -2095
  149. package/dist/cjs/limel-chip-set.cjs.entry.js.map +0 -1
  150. package/dist/cjs/limel-chip.cjs.entry.js +0 -105
  151. package/dist/cjs/limel-chip.cjs.entry.js.map +0 -1
  152. package/dist/esm/component-703e23db.js.map +0 -1
  153. package/dist/esm/get-icon-props-f581151a.js.map +0 -1
  154. package/dist/esm/keyboard-4b9e12e3.js +0 -129
  155. package/dist/esm/keyboard-4b9e12e3.js.map +0 -1
  156. package/dist/esm/limel-chip-set.entry.js +0 -2091
  157. package/dist/esm/limel-chip-set.entry.js.map +0 -1
  158. package/dist/esm/limel-chip.entry.js +0 -101
  159. package/dist/esm/limel-chip.entry.js.map +0 -1
  160. package/dist/lime-elements/p-1291ed2c.entry.js +0 -2
  161. package/dist/lime-elements/p-1291ed2c.entry.js.map +0 -1
  162. package/dist/lime-elements/p-38151879.js.map +0 -1
  163. package/dist/lime-elements/p-48aa89a6.entry.js +0 -2
  164. package/dist/lime-elements/p-48aa89a6.entry.js.map +0 -1
  165. package/dist/lime-elements/p-4d92b6fb.js +0 -2
  166. package/dist/lime-elements/p-4d92b6fb.js.map +0 -1
  167. package/dist/lime-elements/p-5240b8a3.entry.js +0 -2
  168. package/dist/lime-elements/p-5240b8a3.entry.js.map +0 -1
  169. package/dist/lime-elements/p-6e219bb4.js +0 -24
  170. package/dist/lime-elements/p-6e219bb4.js.map +0 -1
  171. package/dist/lime-elements/p-711c8538.entry.js +0 -2
  172. package/dist/lime-elements/p-711c8538.entry.js.map +0 -1
  173. package/dist/lime-elements/p-8a9d91cf.entry.js +0 -222
  174. package/dist/lime-elements/p-8a9d91cf.entry.js.map +0 -1
  175. package/dist/lime-elements/p-bccf626e.entry.js +0 -2
  176. package/dist/lime-elements/p-bccf626e.entry.js.map +0 -1
  177. package/dist/lime-elements/p-e0f37631.entry.js +0 -2
  178. package/dist/lime-elements/p-e0f37631.entry.js.map +0 -1
  179. package/dist/lime-elements/p-f613f943.entry.js +0 -2
  180. /package/dist/lime-elements/{p-854343a1.entry.js.map → p-27d64a5a.entry.js.map} +0 -0
  181. /package/dist/lime-elements/{p-acd589ef.entry.js.map → p-b03c1b71.entry.js.map} +0 -0
  182. /package/dist/lime-elements/{p-85a770a4.entry.js.map → p-b51fd0c7.entry.js.map} +0 -0
  183. /package/dist/lime-elements/{p-e53b7ccf.entry.js.map → p-b89d2cc3.entry.js.map} +0 -0
  184. /package/dist/lime-elements/{p-93c6d561.js.map → p-e03dfe70.js.map} +0 -0
  185. /package/dist/lime-elements/{p-bbe3ce51.entry.js.map → p-fdae60a1.entry.js.map} +0 -0
@@ -1,12 +1,9 @@
1
- import { MDCChipSet, } from '@material/chips/deprecated';
2
1
  import { MDCTextField } from '@material/textfield';
3
2
  import { h, } from '@stencil/core';
4
3
  import { handleKeyboardEvent } from './chip-set-input-helpers';
5
4
  import translate from '../../global/translations';
6
5
  import { getHref, getTarget } from '../../util/link-helper';
7
6
  import { isEqual } from 'lodash-es';
8
- import { getIconBackgroundColor, getIconColor, getIconName, getIconTitle, } from '../icon/get-icon-props';
9
- const SELECTED_CHIP_CLASS = 'mdc-chip--selected';
10
7
  const INPUT_FIELD_TABINDEX = 1;
11
8
  /**
12
9
  * @exampleComponent limel-example-chip-set
@@ -22,6 +19,11 @@ const INPUT_FIELD_TABINDEX = 1;
22
19
  export class ChipSet {
23
20
  constructor() {
24
21
  this.handleKeyDown = handleKeyboardEvent;
22
+ this.getValue = () => {
23
+ return this.value.map((chip) => (Object.assign(Object.assign({}, chip), (this.type && {
24
+ selected: this.selectedChipIds.includes(chip.id),
25
+ }))));
26
+ };
25
27
  this.renderEmptyValueForReadonly = () => {
26
28
  if (this.readonly && this.value.length === 0) {
27
29
  return (h("span", { class: "lime-empty-value-for-readonly lime-looks-like-input-value" }, "\u2013"));
@@ -44,12 +46,25 @@ export class ChipSet {
44
46
  }
45
47
  return (h("limel-helper-line", { length: this.value.length, maxLength: this.maxItems, helperText: this.helperText, invalid: this.isInvalid() }));
46
48
  };
49
+ this.catchInputChipClicks = (chip) => () => {
50
+ if (this.isSelectableChip(chip)) {
51
+ this.updateSelectedChipIds(chip);
52
+ this.change.emit(chip);
53
+ }
54
+ this.emitInteraction(chip);
55
+ };
56
+ this.handleRemoveChip = (event) => {
57
+ this.removeChip(event.detail);
58
+ };
59
+ this.removeChip = (identifier) => {
60
+ const newValue = this.value.filter((chip) => {
61
+ return chip.id !== identifier;
62
+ });
63
+ this.change.emit(newValue);
64
+ };
47
65
  this.clearAllChipsLabel = () => {
48
66
  return translate.get('chip-set.clear-all', this.language);
49
67
  };
50
- this.removeChipLabel = () => {
51
- return translate.get('chip-set.remove-chip', this.language);
52
- };
53
68
  this.value = [];
54
69
  this.type = undefined;
55
70
  this.label = undefined;
@@ -70,11 +85,10 @@ export class ChipSet {
70
85
  this.textValue = '';
71
86
  this.blurred = false;
72
87
  this.inputChipIndexSelected = null;
88
+ this.selectedChipIds = undefined;
73
89
  this.renderChip = this.renderChip.bind(this);
74
90
  this.renderInputChip = this.renderInputChip.bind(this);
75
91
  this.isFull = this.isFull.bind(this);
76
- this.handleInteractionEvent = this.handleInteractionEvent.bind(this);
77
- this.handleSelection = this.handleSelection.bind(this);
78
92
  this.handleTextFieldFocus = this.handleTextFieldFocus.bind(this);
79
93
  this.handleInputBlur = this.handleInputBlur.bind(this);
80
94
  this.handleTextInput = this.handleTextInput.bind(this);
@@ -85,6 +99,16 @@ export class ChipSet {
85
99
  this.handleDeleteAllIconClick.bind(this);
86
100
  this.renderDelimiter = this.renderDelimiter.bind(this);
87
101
  }
102
+ connectedCallback() {
103
+ this.initialize();
104
+ }
105
+ initialize() {
106
+ if (this.value.length) {
107
+ this.selectedChipIds = this.value
108
+ .filter((chip) => chip.selected)
109
+ .map((chip) => chip.id);
110
+ }
111
+ }
88
112
  /**
89
113
  * Used to find out whether the chip-set is in edit mode.
90
114
  *
@@ -124,20 +148,14 @@ export class ChipSet {
124
148
  if (this.type === 'input') {
125
149
  this.mdcTextField = new MDCTextField(this.host.shadowRoot.querySelector('.mdc-text-field'));
126
150
  }
127
- this.createMDCChipSet();
128
- }
129
- componentWillUpdate() {
130
- this.destroyMDCChipSet();
131
151
  }
132
152
  componentDidUpdate() {
133
- this.createMDCChipSet();
134
153
  const input = this.host.shadowRoot.querySelector('input');
135
154
  if (input && this.editMode) {
136
155
  input.focus();
137
156
  }
138
157
  }
139
158
  disconnectedCallback() {
140
- this.destroyMDCChipSet();
141
159
  if (this.mdcTextField) {
142
160
  this.mdcTextField.destroy();
143
161
  }
@@ -158,29 +176,15 @@ export class ChipSet {
158
176
  if (chipSetLabel) {
159
177
  classes['chip-set--with-label'] = true;
160
178
  }
161
- return (h("div", { class: classes, role: "grid" }, chipSetLabel, this.value.map(this.renderChip), this.renderHelperLine()));
179
+ const value = this.getValue();
180
+ return (h("div", { class: classes, role: "grid" }, chipSetLabel, value.map(this.renderChip), this.renderHelperLine()));
162
181
  }
163
182
  handleChangeChips(newValue, oldValue) {
164
183
  if (isEqual(newValue, oldValue)) {
165
184
  return;
166
185
  }
167
186
  this.syncEmptyInput();
168
- }
169
- createMDCChipSet() {
170
- this.mdcChipSet = new MDCChipSet(this.host.shadowRoot.querySelector('.mdc-chip-set'));
171
- if (!this.type || this.type === 'input') {
172
- this.mdcChipSet.listen('MDCChip:interaction', this.handleInteractionEvent);
173
- }
174
- if (this.type === 'choice' || this.type === 'filter') {
175
- this.mdcChipSet.listen('MDCChip:selection', this.handleSelection);
176
- }
177
- }
178
- destroyMDCChipSet() {
179
- if (this.mdcChipSet) {
180
- this.mdcChipSet.unlisten('MDCChip:interaction', this.handleInteractionEvent);
181
- this.mdcChipSet.unlisten('MDCChip:selection', this.handleSelection);
182
- this.mdcChipSet.destroy();
183
- }
187
+ this.initialize();
184
188
  }
185
189
  renderChipSetLabel() {
186
190
  if (!this.label) {
@@ -295,74 +299,64 @@ export class ChipSet {
295
299
  this.textValue = event.target.value;
296
300
  this.input.emit(event.target.value && event.target.value.trim());
297
301
  }
298
- handleInteractionEvent(event) {
299
- const chip = this.value.find((item) => {
300
- return `${item.id}` === event.detail.chipId;
301
- });
302
- this.emitInteraction(chip);
303
- }
304
302
  emitInteraction(chip) {
305
303
  this.interact.emit(chip);
306
304
  }
307
- handleSelection(event) {
308
- let chip = this.value.find((item) => {
309
- return `${item.id}` === event.detail.chipId;
310
- });
311
- chip = Object.assign(Object.assign({}, chip), { selected: event.detail.selected });
312
- this.change.emit(chip);
313
- }
314
- removeChip(id) {
315
- const newValue = this.value.filter((chip) => {
316
- return `${chip.id}` !== `${id}`;
317
- });
318
- this.change.emit(newValue);
319
- }
320
305
  renderChip(chip) {
321
- if (this.type === 'filter') {
322
- return this.renderFilterChip(chip);
323
- }
324
- return this.renderDefaultChip(chip);
325
- }
326
- renderDefaultChip(chip) {
327
- return (h("div", { class: `mdc-chip ${chip.selected ? SELECTED_CHIP_CLASS : ''}`, role: "row", id: `${chip.id}` }, chip.icon ? this.renderChipIcon(chip) : null, chip.text ? this.renderChipLabel(chip) : null));
328
- }
329
- renderChipLabel(chip) {
330
- const attributes = {};
331
- if (chip.href) {
332
- attributes.href = getHref(chip.href);
333
- attributes.target = getTarget(chip.href);
334
- }
335
- return (h("span", { role: "gridcell" }, h("a", Object.assign({ role: "button", tabindex: this.disabled ? '-1' : '0', class: "mdc-chip__text" }, attributes), chip.text)));
336
- }
337
- renderFilterChip(chip) {
338
- return (h("div", { class: `mdc-chip ${chip.selected ? SELECTED_CHIP_CLASS : ''}`, role: "row", id: `${chip.id}` }, h("span", { class: "mdc-chip__checkmark" }, h("svg", { class: "mdc-chip__checkmark-svg", viewBox: "-2 -3 30 30" }, h("path", { class: "mdc-chip__checkmark-path", fill: "none", stroke: "currentColor", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))), h("span", { role: "gridcell" }, h("span", { role: "checkbox", tabindex: this.disabled ? '-1' : '0', "aria-checked": "false", class: "mdc-chip__text" }, chip.text)), this.renderBadge(chip)));
306
+ const chipType = this.type === 'filter' ? 'filter' : 'default';
307
+ const chipProps = this.getChipProps(chip, chipType);
308
+ return h("limel-chip", Object.assign({}, chipProps));
339
309
  }
340
310
  renderInputChip(chip, index) {
311
+ const chipProps = this.getChipProps(chip, 'default');
341
312
  return [
342
- h("div", { class: {
343
- 'mdc-chip': true,
344
- 'mdc-chip--selected': this.inputChipIndexSelected === index,
345
- disabled: this.disabled,
346
- }, role: "row", id: `${chip.id}`, onClick: this.catchInputChipClicks }, chip.icon ? this.renderChipIcon(chip) : null, this.renderChipLabel(chip), this.renderChipRemoveButton(chip)),
313
+ h("limel-chip", Object.assign({ key: chip.id, class: {
314
+ 'can-be-removed': this.inputChipIndexSelected === index,
315
+ } }, chipProps)),
347
316
  this.renderDelimiter(),
348
317
  ];
349
318
  }
350
- catchInputChipClicks(event) {
351
- event.stopPropagation();
319
+ getChipProps(chip, chipType) {
320
+ const removable = this.type === 'input' && chip.removable;
321
+ return Object.assign({ role: 'row', identifier: chip.id, text: chip.text, icon: chip.icon, badge: chip.badge, selected: chip.selected, disabled: this.disabled, readonly: this.readonly, type: chipType, removable: removable, onClick: this.catchInputChipClicks(chip), onRemove: this.handleRemoveChip }, (chip.href && {
322
+ link: {
323
+ href: getHref(chip.href),
324
+ target: getTarget(chip.href),
325
+ },
326
+ }));
327
+ }
328
+ isSelectableChip(chip) {
329
+ return this.type !== 'input' && 'selected' in chip;
330
+ }
331
+ updateSelectedChipIds(chip) {
332
+ chip.selected = !chip.selected;
333
+ const id = chip.id;
334
+ if (this.type === 'choice') {
335
+ this.updateChoiceTypeSelectedIds(id);
336
+ }
337
+ else {
338
+ this.updateFilterTypeSelectedIds(id);
339
+ }
340
+ }
341
+ updateChoiceTypeSelectedIds(id) {
342
+ this.selectedChipIds = this.isChipSelected(id) ? [] : [id];
352
343
  }
353
- renderChipIcon(chip) {
354
- const name = getIconName(chip.icon);
355
- const color = getIconColor(chip.icon, chip.iconFillColor);
356
- const backgroundColor = getIconBackgroundColor(chip.icon, chip.iconBackgroundColor);
357
- const title = getIconTitle(chip.icon, chip.iconTitle);
358
- const style = {};
359
- if (color) {
360
- style['--icon-color'] = color;
344
+ isChipSelected(id) {
345
+ return !!this.selectedChipIds.find((chipId) => chipId === id);
346
+ }
347
+ updateFilterTypeSelectedIds(id) {
348
+ if (this.isChipSelected(id)) {
349
+ this.removeChipIdFromSelectedChipIds(id);
361
350
  }
362
- if (backgroundColor) {
363
- style['--icon-background-color'] = backgroundColor;
351
+ else {
352
+ this.addChipIdToSelectedChipIds(id);
364
353
  }
365
- return (h("limel-icon", { class: "mdc-chip__icon mdc-chip__icon--leading", name: name, style: style, size: "small", badge: true, title: title }));
354
+ }
355
+ removeChipIdFromSelectedChipIds(id) {
356
+ this.selectedChipIds = this.selectedChipIds.filter((chipId) => chipId !== id);
357
+ }
358
+ addChipIdToSelectedChipIds(id) {
359
+ this.selectedChipIds = [...this.selectedChipIds, id];
366
360
  }
367
361
  renderLeadingIcon() {
368
362
  if (!this.leadingIcon) {
@@ -370,20 +364,6 @@ export class ChipSet {
370
364
  }
371
365
  return (h("i", { class: "mdc-text-field__icon search-icon" }, h("limel-icon", { name: this.leadingIcon })));
372
366
  }
373
- renderChipRemoveButton(chip) {
374
- if (!chip.removable || this.readonly || this.disabled) {
375
- return;
376
- }
377
- const svgData = `<svg style="height:100%;width:100%;" width="32" height="32" x="0px" y="0px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
378
- <line fill="none" id="svg_1" stroke="currentColor" stroke-width="2" x1="8" x2="24" y1="8" y2="24"/>
379
- <line fill="none" id="svg_2" stroke="currentColor" stroke-width="2" x1="24" x2="8" y1="8" y2="24"/>
380
- </svg>`;
381
- const removeFunc = (event) => {
382
- event.stopPropagation();
383
- this.removeChip(chip.id);
384
- };
385
- return (h("button", { class: "mdc-chip__icon mdc-chip__icon--trailing mdc-deprecated-chip-trailing-action", "aria-label": this.removeChipLabel, tabindex: "-1", innerHTML: svgData, onClick: removeFunc }));
386
- }
387
367
  renderClearAllChipsButton() {
388
368
  if (this.disabled || this.readonly || !this.clearAllButton) {
389
369
  return;
@@ -400,12 +380,6 @@ export class ChipSet {
400
380
  }
401
381
  return h("div", { class: "delimiter" }, this.delimiter);
402
382
  }
403
- renderBadge(chip) {
404
- if (!chip.badge) {
405
- return;
406
- }
407
- return h("limel-badge", { label: chip.badge });
408
- }
409
383
  triggerIconColorWarning(value) {
410
384
  for (const chip of value) {
411
385
  if (chip.icon &&
@@ -464,7 +438,7 @@ export class ChipSet {
464
438
  "optional": true,
465
439
  "docs": {
466
440
  "tags": [],
467
- "text": "Type of chip set\n\n- `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored\n- `filter` renders a set of selectable chips where all are selectable. The `icon` property is ignored\n- `input` renders a set of chips that can be used in conjunction with an input field\n\nIf no type is set, a basic set of chips without additional functionality will be rendered"
441
+ "text": "Type of chip set\n\n- `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored\n- `filter` renders a set of selectable chips where all are selectable.\n- `input` renders a set of chips that can be used in conjunction with an input field\n\nIf no type is set, a basic set of chips without additional functionality will be rendered"
468
442
  },
469
443
  "attribute": "type",
470
444
  "reflect": true
@@ -729,7 +703,8 @@ export class ChipSet {
729
703
  "editMode": {},
730
704
  "textValue": {},
731
705
  "blurred": {},
732
- "inputChipIndexSelected": {}
706
+ "inputChipIndexSelected": {},
707
+ "selectedChipIds": {}
733
708
  };
734
709
  }
735
710
  static get events() {
@@ -1 +1 @@
1
- {"version":3,"file":"chip-set.js","sourceRoot":"","sources":["../../../src/components/chip-set/chip-set.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Chip } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport {\n MDCChipInteractionEvent,\n MDCChipSelectionEvent,\n MDCChipSet,\n} from '@material/chips/deprecated';\nimport { MDCTextField } from '@material/textfield';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { handleKeyboardEvent } from './chip-set-input-helpers';\nimport translate from '../../global/translations';\nimport { getHref, getTarget } from '../../util/link-helper';\nimport { isEqual } from 'lodash-es';\nimport {\n getIconBackgroundColor,\n getIconColor,\n getIconName,\n getIconTitle,\n} from '../icon/get-icon-props';\n\nconst SELECTED_CHIP_CLASS = 'mdc-chip--selected';\nconst INPUT_FIELD_TABINDEX = 1;\n\n/**\n * @exampleComponent limel-example-chip-set\n * @exampleComponent limel-example-chip-set-choice\n * @exampleComponent limel-example-chip-set-filter\n * @exampleComponent limel-example-chip-set-filter-badge\n * @exampleComponent limel-example-chip-set-input\n * @exampleComponent limel-example-chip-set-input-type-text\n * @exampleComponent limel-example-chip-set-input-type-search\n * @exampleComponent limel-example-chip-icon-color\n * @exampleComponent limel-example-chip-set-composite\n */\n@Component({\n tag: 'limel-chip-set',\n shadow: true,\n styleUrl: 'chip-set.scss',\n})\nexport class ChipSet {\n /**\n * List of chips for the set\n */\n @Prop()\n public value: Chip[] = [];\n\n /**\n * Type of chip set\n *\n * - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored\n * - `filter` renders a set of selectable chips where all are selectable. The `icon` property is ignored\n * - `input` renders a set of chips that can be used in conjunction with an input field\n *\n * If no type is set, a basic set of chips without additional functionality will be rendered\n */\n @Prop({ reflect: true })\n public type?: 'choice' | 'filter' | 'input';\n\n /**\n * Label for the chip-set\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * Optional helper text to display below the chipset.\n * When type is `input`, the helper text is displayed below the\n * input field when it has focus.\n * When type is not `input`, the helper text is always displayed\n * if the device is touch screen; otherwise it is shown when chip-set\n * is hovered or focused using keyboard navigation.\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * True if the chip set should be disabled\n */\n @Prop({ reflect: true })\n public disabled: boolean = false;\n\n /**\n * For chip-sets of type `input`, set to `true` to disable adding and\n * removing chips, but allow interaction with existing chips in the set.\n * For any other types, setting either `readonly` or `disabled` disables\n * the chip-set.\n */\n @Prop({ reflect: true })\n public readonly: boolean = false;\n\n /**\n * Set to `true` to indicate that the current value of the input field is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * For chip-sets of type `input`. Value to use for the `type` attribute on the\n * input field inside the chip-set.\n */\n @Prop({ reflect: true })\n public inputType: 'search' | 'text' = 'text';\n\n /**\n * For chip-sets of type `input`. Limits the maximum number of chips.\n * When the value is `0` or not set, no limit is applied.\n */\n @Prop({ reflect: true })\n public maxItems: number;\n\n /**\n * True if the control requires a value\n */\n @Prop({ reflect: true })\n public required: boolean = false;\n\n /**\n * Search label to display when type is `input` and component is in search mode\n */\n @Prop({ reflect: true })\n public searchLabel: string;\n\n /**\n * Whether the input field should be emptied when the chip-set loses focus.\n */\n @Prop({ reflect: true })\n public emptyInputOnBlur: boolean = true;\n\n /**\n * Whether the \"Clear all\" buttons should be shown\n */\n @Prop()\n public clearAllButton: boolean = true;\n\n /**\n * For chip-sets of type `input`. When the value is null, no leading icon is used.\n * Leading icon to show to the far left in the text field\n */\n @Prop({ reflect: true })\n public leadingIcon: string = null;\n\n /**\n * For chip-set of type `input`. Sets delimiters between chips.\n */\n @Prop({ reflect: true })\n public delimiter: string = null;\n\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components. For example, the clear all chips label.\n */\n @Prop()\n public language: Languages = 'en';\n\n /**\n * Dispatched when a chip is interacted with\n */\n @Event()\n private interact: EventEmitter<Chip>;\n\n /**\n * Dispatched when a chip is selected/deselected\n */\n @Event()\n private change: EventEmitter<Chip | Chip[]>;\n\n /**\n * Emitted when an input chip set has received focus and editing in the text field has started\n */\n @Event()\n private startEdit: EventEmitter<void>;\n\n /**\n * Emitted when an input chip set has lost focus and editing in the text field has ended\n */\n @Event()\n private stopEdit: EventEmitter<void>;\n\n /**\n * Dispatched when the input is changed for type `input`\n */\n @Event()\n private input: EventEmitter<string>;\n\n @Element()\n private host: HTMLLimelChipSetElement;\n\n @State()\n private editMode: boolean = false;\n\n @State()\n private textValue: string = '';\n\n @State()\n private blurred: boolean = false;\n\n @State()\n private inputChipIndexSelected: number = null;\n\n private mdcChipSet: MDCChipSet;\n private mdcTextField: MDCTextField;\n private handleKeyDown = handleKeyboardEvent;\n\n constructor() {\n this.renderChip = this.renderChip.bind(this);\n this.renderInputChip = this.renderInputChip.bind(this);\n this.isFull = this.isFull.bind(this);\n this.handleInteractionEvent = this.handleInteractionEvent.bind(this);\n this.handleSelection = this.handleSelection.bind(this);\n this.handleTextFieldFocus = this.handleTextFieldFocus.bind(this);\n this.handleInputBlur = this.handleInputBlur.bind(this);\n this.handleTextInput = this.handleTextInput.bind(this);\n this.inputFieldOnChange = this.inputFieldOnChange.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.inputHidden = this.inputHidden.bind(this);\n this.handleDeleteAllIconClick =\n this.handleDeleteAllIconClick.bind(this);\n this.renderDelimiter = this.renderDelimiter.bind(this);\n }\n\n /**\n * Used to find out whether the chip-set is in edit mode.\n *\n * @returns `true` if the chip-set is in edit mode, `false` otherwise.\n */\n @Method()\n public async getEditMode(): Promise<boolean> {\n return this.editMode;\n }\n\n /**\n * Used to set focus to the chip-set input field.\n *\n * @param emptyInput - if `true`, any text in the input is discarded\n * @returns does not return anything, but methods have to be async\n */\n @Method()\n public async setFocus(emptyInput: boolean = false) {\n if (this.disabled || this.readonly) {\n return;\n }\n\n this.editMode = true;\n if (emptyInput) {\n this.textValue = '';\n }\n\n this.host.shadowRoot.querySelector('input').focus();\n this.startEdit.emit();\n }\n\n /**\n * Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the\n * consumer control when the input is emptied.\n *\n * @returns does not return anything, but methods have to be async\n */\n @Method()\n public async emptyInput() {\n this.syncEmptyInput();\n }\n\n public componentDidLoad() {\n this.triggerIconColorWarning(this.value);\n\n if (this.type === 'input') {\n this.mdcTextField = new MDCTextField(\n this.host.shadowRoot.querySelector('.mdc-text-field'),\n );\n }\n\n this.createMDCChipSet();\n }\n\n public componentWillUpdate() {\n this.destroyMDCChipSet();\n }\n\n public componentDidUpdate() {\n this.createMDCChipSet();\n const input = this.host.shadowRoot.querySelector('input');\n if (input && this.editMode) {\n input.focus();\n }\n }\n\n public disconnectedCallback() {\n this.destroyMDCChipSet();\n\n if (this.mdcTextField) {\n this.mdcTextField.destroy();\n }\n }\n\n public render() {\n if (this.type === 'input') {\n return this.renderInputChips();\n }\n\n const classes = {\n 'mdc-chip-set': true,\n disabled: this.disabled || this.readonly,\n 'mdc-text-field--with-trailing-icon': true,\n };\n if (this.type) {\n classes[`mdc-chip-set--${this.type}`] = true;\n }\n\n const chipSetLabel = this.renderChipSetLabel();\n if (chipSetLabel) {\n classes['chip-set--with-label'] = true;\n }\n\n return (\n <div class={classes} role=\"grid\">\n {chipSetLabel}\n {this.value.map(this.renderChip)}\n {this.renderHelperLine()}\n </div>\n );\n }\n\n @Watch('value')\n protected handleChangeChips(newValue: Chip[], oldValue: Chip[]) {\n if (isEqual(newValue, oldValue)) {\n return;\n }\n\n this.syncEmptyInput();\n }\n\n private createMDCChipSet() {\n this.mdcChipSet = new MDCChipSet(\n this.host.shadowRoot.querySelector('.mdc-chip-set'),\n );\n\n if (!this.type || this.type === 'input') {\n this.mdcChipSet.listen(\n 'MDCChip:interaction',\n this.handleInteractionEvent,\n );\n }\n\n if (this.type === 'choice' || this.type === 'filter') {\n this.mdcChipSet.listen('MDCChip:selection', this.handleSelection);\n }\n }\n\n private destroyMDCChipSet() {\n if (this.mdcChipSet) {\n this.mdcChipSet.unlisten(\n 'MDCChip:interaction',\n this.handleInteractionEvent,\n );\n this.mdcChipSet.unlisten('MDCChip:selection', this.handleSelection);\n\n this.mdcChipSet.destroy();\n }\n }\n\n private renderChipSetLabel() {\n if (!this.label) {\n return;\n }\n\n return (\n <label class=\"chip-set__label mdc-floating-label mdc-floating-label--float-above\">\n {this.label}\n </label>\n );\n }\n\n private renderInputChips() {\n return [\n <div\n class={{\n 'mdc-text-field mdc-text-field--outlined': true,\n 'mdc-chip-set mdc-chip-set--input': true,\n 'force-invalid': this.isInvalid(),\n 'mdc-text-field--disabled': this.readonly || this.disabled,\n 'lime-text-field--readonly': this.readonly,\n 'has-chips mdc-text-field--label-floating':\n this.value.length !== 0,\n 'has-leading-icon': this.leadingIcon !== null,\n 'has-clear-all-button': this.clearAllButton,\n }}\n onClick={this.handleTextFieldFocus}\n >\n {this.value.map(this.renderInputChip)}\n <input\n tabIndex={INPUT_FIELD_TABINDEX}\n type={this.inputType}\n id=\"input-element\"\n disabled={this.readonly || this.disabled}\n class={{\n 'mdc-text-field__input': true,\n hidden: this.inputHidden(),\n }}\n value={this.textValue}\n onBlur={this.handleInputBlur}\n onFocus={this.handleTextFieldFocus}\n onKeyDown={this.handleKeyDown}\n onInput={this.handleTextInput}\n // Some browsers emit a change event on input elements, we need to stop\n // that event from propagating since we are emitting our own change event\n onChange={this.inputFieldOnChange}\n placeholder={this.isFull() ? '' : this.searchLabel}\n readonly={this.isFull()}\n />\n <div\n class={{\n 'mdc-notched-outline': true,\n 'mdc-notched-outline--upgraded': true,\n 'mdc-text-field--required': this.required,\n 'lime-notched-outline--notched': this.floatLabelAbove(),\n }}\n dropzone-tip={this.dropZoneTip()}\n >\n <div class=\"mdc-notched-outline__leading\" />\n {this.renderLabel()}\n <div class=\"mdc-notched-outline__trailing\" />\n </div>\n {this.renderLeadingIcon()}\n {this.renderEmptyValueForReadonly()}\n {this.renderClearAllChipsButton()}\n </div>,\n this.renderHelperLine(),\n ];\n }\n\n private renderEmptyValueForReadonly = () => {\n if (this.readonly && this.value.length === 0) {\n return (\n <span class=\"lime-empty-value-for-readonly lime-looks-like-input-value\">\n –\n </span>\n );\n }\n };\n\n private renderLabel() {\n const labelClassList = {\n 'mdc-floating-label': true,\n 'mdc-text-field--disabled': this.readonly || this.disabled,\n 'mdc-floating-label--required': this.required,\n 'lime-floating-label--float-above': this.floatLabelAbove(),\n };\n\n if (!this.label) {\n return;\n }\n\n return (\n <div class=\"mdc-notched-outline__notch\">\n <label class={labelClassList} htmlFor=\"input-element\">\n {this.label}\n </label>\n </div>\n );\n }\n\n private floatLabelAbove = () => {\n if (!!this.value.length || this.editMode || this.readonly) {\n return true;\n }\n };\n\n private dropZoneTip = (): string => {\n return translate.get('file.drag-and-drop-tips', this.language);\n };\n\n private isFull(): boolean {\n return !!this.maxItems && this.value.length >= this.maxItems;\n }\n\n private isInvalid() {\n if (this.readonly) {\n // A readonly field can never be invalid.\n return false;\n }\n\n if (this.invalid) {\n return true;\n }\n\n if (!this.required) {\n return false;\n }\n\n if (!this.blurred) {\n return false;\n }\n\n return !this.value || !this.value.length;\n }\n\n private inputFieldOnChange(event) {\n event.stopPropagation();\n }\n\n /**\n * Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible\n */\n private handleTextFieldFocus() {\n if (this.disabled || this.readonly) {\n return;\n }\n\n if (this.editMode) {\n return;\n }\n\n this.editMode = true;\n this.startEdit.emit();\n }\n\n /**\n * Exit edit mode when the input element loses focus. This makes sure the input element does not take up any\n * additional space when the user it not typing anything\n */\n private handleInputBlur() {\n if (this.emptyInputOnBlur) {\n this.syncEmptyInput();\n }\n\n this.editMode = false;\n this.blurred = true;\n this.inputChipIndexSelected = null;\n\n // This timeout is needed in order to let a new element receive focus\n setTimeout(() => {\n this.stopEdit.emit();\n }, 0);\n }\n\n private syncEmptyInput() {\n this.textValue = '';\n }\n\n private inputHidden() {\n if (this.editMode) {\n return this.isFull();\n }\n\n // If there are chips in the picker, hide the input to avoid the input\n // being placed on a new line and adding ugly space beneath the chips.\n // If there are no chips, show the input, or the picker will look weird.\n return !!(this.value && this.value.length);\n }\n\n private handleTextInput(event) {\n event.stopPropagation();\n this.inputChipIndexSelected = null;\n this.textValue = event.target.value;\n this.input.emit(event.target.value && event.target.value.trim());\n }\n\n private handleInteractionEvent(event: MDCChipInteractionEvent) {\n const chip = this.value.find((item) => {\n return `${item.id}` === event.detail.chipId;\n });\n this.emitInteraction(chip);\n }\n\n private emitInteraction(chip: Chip) {\n this.interact.emit(chip);\n }\n\n private handleSelection(event: MDCChipSelectionEvent) {\n let chip = this.value.find((item) => {\n return `${item.id}` === event.detail.chipId;\n });\n chip = { ...chip, selected: event.detail.selected };\n this.change.emit(chip);\n }\n\n private removeChip(id: string | number) {\n const newValue = this.value.filter((chip) => {\n return `${chip.id}` !== `${id}`;\n });\n this.change.emit(newValue);\n }\n\n private renderChip(chip: Chip) {\n if (this.type === 'filter') {\n return this.renderFilterChip(chip);\n }\n\n return this.renderDefaultChip(chip);\n }\n\n private renderDefaultChip(chip: Chip) {\n return (\n <div\n class={`mdc-chip ${chip.selected ? SELECTED_CHIP_CLASS : ''}`}\n role=\"row\"\n id={`${chip.id}`}\n >\n {chip.icon ? this.renderChipIcon(chip) : null}\n {chip.text ? this.renderChipLabel(chip) : null}\n </div>\n );\n }\n\n private renderChipLabel(chip: Chip<any>) {\n const attributes: any = {};\n if (chip.href) {\n attributes.href = getHref(chip.href);\n attributes.target = getTarget(chip.href);\n }\n\n return (\n <span role=\"gridcell\">\n <a\n role=\"button\"\n tabindex={this.disabled ? '-1' : '0'}\n class=\"mdc-chip__text\"\n {...attributes}\n >\n {chip.text}\n </a>\n </span>\n );\n }\n\n private hasHelperText = () => {\n return this.helperText !== null && this.helperText !== undefined;\n };\n\n private renderHelperLine = () => {\n if (!this.maxItems && !this.hasHelperText()) {\n return;\n }\n\n return (\n <limel-helper-line\n length={this.value.length}\n maxLength={this.maxItems}\n helperText={this.helperText}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private renderFilterChip(chip: Chip) {\n return (\n <div\n class={`mdc-chip ${chip.selected ? SELECTED_CHIP_CLASS : ''}`}\n role=\"row\"\n id={`${chip.id}`}\n >\n <span class=\"mdc-chip__checkmark\">\n <svg class=\"mdc-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\">\n <path\n class=\"mdc-chip__checkmark-path\"\n fill=\"none\"\n stroke=\"currentColor\"\n d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"\n />\n </svg>\n </span>\n <span role=\"gridcell\">\n <span\n role=\"checkbox\"\n tabindex={this.disabled ? '-1' : '0'}\n aria-checked=\"false\"\n class=\"mdc-chip__text\"\n >\n {chip.text}\n </span>\n </span>\n {this.renderBadge(chip)}\n </div>\n );\n }\n\n private renderInputChip(chip: Chip, index: number) {\n return [\n <div\n class={{\n 'mdc-chip': true,\n 'mdc-chip--selected': this.inputChipIndexSelected === index,\n disabled: this.disabled,\n }}\n role=\"row\"\n id={`${chip.id}`}\n onClick={this.catchInputChipClicks}\n >\n {chip.icon ? this.renderChipIcon(chip) : null}\n {this.renderChipLabel(chip)}\n {this.renderChipRemoveButton(chip)}\n </div>,\n this.renderDelimiter(),\n ];\n }\n\n private catchInputChipClicks(event) {\n event.stopPropagation();\n }\n\n private renderChipIcon(chip: Chip) {\n const name = getIconName(chip.icon);\n const color = getIconColor(chip.icon, chip.iconFillColor);\n const backgroundColor = getIconBackgroundColor(\n chip.icon,\n chip.iconBackgroundColor,\n );\n const title = getIconTitle(chip.icon, chip.iconTitle);\n const style = {};\n if (color) {\n style['--icon-color'] = color;\n }\n\n if (backgroundColor) {\n style['--icon-background-color'] = backgroundColor;\n }\n\n return (\n <limel-icon\n class=\"mdc-chip__icon mdc-chip__icon--leading\"\n name={name}\n style={style}\n size=\"small\"\n badge={true}\n title={title}\n />\n );\n }\n\n private renderLeadingIcon() {\n if (!this.leadingIcon) {\n return;\n }\n\n return (\n <i class=\"mdc-text-field__icon search-icon\">\n <limel-icon name={this.leadingIcon} />\n </i>\n );\n }\n\n private renderChipRemoveButton(chip: Chip) {\n if (!chip.removable || this.readonly || this.disabled) {\n return;\n }\n\n const svgData = `<svg style=\"height:100%;width:100%;\" width=\"32\" height=\"32\" x=\"0px\" y=\"0px\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\">\n <line fill=\"none\" id=\"svg_1\" stroke=\"currentColor\" stroke-width=\"2\" x1=\"8\" x2=\"24\" y1=\"8\" y2=\"24\"/>\n <line fill=\"none\" id=\"svg_2\" stroke=\"currentColor\" stroke-width=\"2\" x1=\"24\" x2=\"8\" y1=\"8\" y2=\"24\"/>\n</svg>`;\n\n const removeFunc = (event: MouseEvent) => {\n event.stopPropagation();\n this.removeChip(chip.id);\n };\n\n return (\n <button\n class=\"mdc-chip__icon mdc-chip__icon--trailing mdc-deprecated-chip-trailing-action\"\n aria-label={this.removeChipLabel}\n tabindex=\"-1\"\n innerHTML={svgData}\n onClick={removeFunc}\n />\n );\n }\n\n private renderClearAllChipsButton() {\n if (this.disabled || this.readonly || !this.clearAllButton) {\n return;\n }\n\n return (\n <a\n href=\"\"\n onClick={this.handleDeleteAllIconClick}\n class=\"mdc-text-field__icon clear-all-button\"\n tabindex=\"0\"\n role=\"button\"\n title={this.clearAllChipsLabel()}\n aria-label={this.clearAllChipsLabel()}\n />\n );\n }\n\n private clearAllChipsLabel = (): string => {\n return translate.get('chip-set.clear-all', this.language);\n };\n\n private removeChipLabel = (): string => {\n return translate.get('chip-set.remove-chip', this.language);\n };\n\n private handleDeleteAllIconClick(event: Event) {\n event.preventDefault();\n this.change.emit([]);\n }\n\n private renderDelimiter() {\n if (!this.delimiter) {\n return;\n }\n\n return <div class=\"delimiter\">{this.delimiter}</div>;\n }\n\n private renderBadge(chip: Chip) {\n if (!chip.badge) {\n return;\n }\n\n return <limel-badge label={chip.badge} />;\n }\n\n private triggerIconColorWarning(value: Chip[]) {\n for (const chip of value) {\n if (\n chip.icon &&\n (chip.iconFillColor ||\n chip.iconBackgroundColor ||\n chip.iconTitle)\n ) {\n /* eslint-disable-next-line no-console */\n console.warn(\n \"The `iconFillColor`, `iconBackgroundColor`, and `iconTitle` props are deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name', `iconBackgroundColor: 'color-name', and `iconTitle: 'title'`, write `icon { name: 'icon-name', color: 'color-name', backgroundColor: 'color-name', title: 'title' }`.\",\n );\n }\n }\n }\n}\n"]}
1
+ {"version":3,"file":"chip-set.js","sourceRoot":"","sources":["../../../src/components/chip-set/chip-set.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Chip, ChipType } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { MDCTextField } from '@material/textfield';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { handleKeyboardEvent } from './chip-set-input-helpers';\nimport translate from '../../global/translations';\nimport { getHref, getTarget } from '../../util/link-helper';\nimport { isEqual } from 'lodash-es';\nimport { LimelChipCustomEvent } from 'src/components';\n\nconst INPUT_FIELD_TABINDEX = 1;\n\n/**\n * @exampleComponent limel-example-chip-set\n * @exampleComponent limel-example-chip-set-choice\n * @exampleComponent limel-example-chip-set-filter\n * @exampleComponent limel-example-chip-set-filter-badge\n * @exampleComponent limel-example-chip-set-input\n * @exampleComponent limel-example-chip-set-input-type-text\n * @exampleComponent limel-example-chip-set-input-type-search\n * @exampleComponent limel-example-chip-icon-color\n * @exampleComponent limel-example-chip-set-composite\n */\n@Component({\n tag: 'limel-chip-set',\n shadow: true,\n styleUrl: 'chip-set.scss',\n})\nexport class ChipSet {\n /**\n * List of chips for the set\n */\n @Prop()\n public value: Chip[] = [];\n\n /**\n * Type of chip set\n *\n * - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored\n * - `filter` renders a set of selectable chips where all are selectable.\n * - `input` renders a set of chips that can be used in conjunction with an input field\n *\n * If no type is set, a basic set of chips without additional functionality will be rendered\n */\n @Prop({ reflect: true })\n public type?: 'choice' | 'filter' | 'input';\n\n /**\n * Label for the chip-set\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * Optional helper text to display below the chipset.\n * When type is `input`, the helper text is displayed below the\n * input field when it has focus.\n * When type is not `input`, the helper text is always displayed\n * if the device is touch screen; otherwise it is shown when chip-set\n * is hovered or focused using keyboard navigation.\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * True if the chip set should be disabled\n */\n @Prop({ reflect: true })\n public disabled: boolean = false;\n\n /**\n * For chip-sets of type `input`, set to `true` to disable adding and\n * removing chips, but allow interaction with existing chips in the set.\n * For any other types, setting either `readonly` or `disabled` disables\n * the chip-set.\n */\n @Prop({ reflect: true })\n public readonly: boolean = false;\n\n /**\n * Set to `true` to indicate that the current value of the input field is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * For chip-sets of type `input`. Value to use for the `type` attribute on the\n * input field inside the chip-set.\n */\n @Prop({ reflect: true })\n public inputType: 'search' | 'text' = 'text';\n\n /**\n * For chip-sets of type `input`. Limits the maximum number of chips.\n * When the value is `0` or not set, no limit is applied.\n */\n @Prop({ reflect: true })\n public maxItems: number;\n\n /**\n * True if the control requires a value\n */\n @Prop({ reflect: true })\n public required: boolean = false;\n\n /**\n * Search label to display when type is `input` and component is in search mode\n */\n @Prop({ reflect: true })\n public searchLabel: string;\n\n /**\n * Whether the input field should be emptied when the chip-set loses focus.\n */\n @Prop({ reflect: true })\n public emptyInputOnBlur: boolean = true;\n\n /**\n * Whether the \"Clear all\" buttons should be shown\n */\n @Prop()\n public clearAllButton: boolean = true;\n\n /**\n * For chip-sets of type `input`. When the value is null, no leading icon is used.\n * Leading icon to show to the far left in the text field\n */\n @Prop({ reflect: true })\n public leadingIcon: string = null;\n\n /**\n * For chip-set of type `input`. Sets delimiters between chips.\n */\n @Prop({ reflect: true })\n public delimiter: string = null;\n\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components. For example, the clear all chips label.\n */\n @Prop()\n public language: Languages = 'en';\n\n /**\n * Dispatched when a chip is interacted with\n */\n @Event()\n private interact: EventEmitter<Chip>;\n\n /**\n * Dispatched when a chip is selected/deselected\n */\n @Event()\n private change: EventEmitter<Chip | Chip[]>;\n\n /**\n * Emitted when an input chip set has received focus and editing in the text field has started\n */\n @Event()\n private startEdit: EventEmitter<void>;\n\n /**\n * Emitted when an input chip set has lost focus and editing in the text field has ended\n */\n @Event()\n private stopEdit: EventEmitter<void>;\n\n /**\n * Dispatched when the input is changed for type `input`\n */\n @Event()\n private input: EventEmitter<string>;\n\n @Element()\n private host: HTMLLimelChipSetElement;\n\n @State()\n private editMode: boolean = false;\n\n @State()\n private textValue: string = '';\n\n @State()\n private blurred: boolean = false;\n\n @State()\n private inputChipIndexSelected: number = null;\n\n @State()\n private selectedChipIds: Array<string | number>;\n\n private mdcTextField: MDCTextField;\n private handleKeyDown = handleKeyboardEvent;\n\n constructor() {\n this.renderChip = this.renderChip.bind(this);\n this.renderInputChip = this.renderInputChip.bind(this);\n this.isFull = this.isFull.bind(this);\n this.handleTextFieldFocus = this.handleTextFieldFocus.bind(this);\n this.handleInputBlur = this.handleInputBlur.bind(this);\n this.handleTextInput = this.handleTextInput.bind(this);\n this.inputFieldOnChange = this.inputFieldOnChange.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.inputHidden = this.inputHidden.bind(this);\n this.handleDeleteAllIconClick =\n this.handleDeleteAllIconClick.bind(this);\n this.renderDelimiter = this.renderDelimiter.bind(this);\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n private initialize() {\n if (this.value.length) {\n this.selectedChipIds = this.value\n .filter((chip) => chip.selected)\n .map((chip) => chip.id);\n }\n }\n\n /**\n * Used to find out whether the chip-set is in edit mode.\n *\n * @returns `true` if the chip-set is in edit mode, `false` otherwise.\n */\n @Method()\n public async getEditMode(): Promise<boolean> {\n return this.editMode;\n }\n\n /**\n * Used to set focus to the chip-set input field.\n *\n * @param emptyInput - if `true`, any text in the input is discarded\n * @returns does not return anything, but methods have to be async\n */\n @Method()\n public async setFocus(emptyInput: boolean = false) {\n if (this.disabled || this.readonly) {\n return;\n }\n\n this.editMode = true;\n if (emptyInput) {\n this.textValue = '';\n }\n\n this.host.shadowRoot.querySelector('input').focus();\n this.startEdit.emit();\n }\n\n /**\n * Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the\n * consumer control when the input is emptied.\n *\n * @returns does not return anything, but methods have to be async\n */\n @Method()\n public async emptyInput() {\n this.syncEmptyInput();\n }\n\n public componentDidLoad() {\n this.triggerIconColorWarning(this.value);\n\n if (this.type === 'input') {\n this.mdcTextField = new MDCTextField(\n this.host.shadowRoot.querySelector('.mdc-text-field'),\n );\n }\n }\n\n public componentDidUpdate() {\n const input = this.host.shadowRoot.querySelector('input');\n if (input && this.editMode) {\n input.focus();\n }\n }\n\n public disconnectedCallback() {\n if (this.mdcTextField) {\n this.mdcTextField.destroy();\n }\n }\n\n public render() {\n if (this.type === 'input') {\n return this.renderInputChips();\n }\n\n const classes = {\n 'mdc-chip-set': true,\n disabled: this.disabled || this.readonly,\n 'mdc-text-field--with-trailing-icon': true,\n };\n if (this.type) {\n classes[`mdc-chip-set--${this.type}`] = true;\n }\n\n const chipSetLabel = this.renderChipSetLabel();\n if (chipSetLabel) {\n classes['chip-set--with-label'] = true;\n }\n\n const value = this.getValue();\n\n return (\n <div class={classes} role=\"grid\">\n {chipSetLabel}\n {value.map(this.renderChip)}\n {this.renderHelperLine()}\n </div>\n );\n }\n\n private getValue = () => {\n return this.value.map((chip) => ({\n ...chip,\n ...(this.type && {\n selected: this.selectedChipIds.includes(chip.id),\n }),\n }));\n };\n\n @Watch('value')\n protected handleChangeChips(newValue: Chip[], oldValue: Chip[]) {\n if (isEqual(newValue, oldValue)) {\n return;\n }\n\n this.syncEmptyInput();\n this.initialize();\n }\n\n private renderChipSetLabel() {\n if (!this.label) {\n return;\n }\n\n return (\n <label class=\"chip-set__label mdc-floating-label mdc-floating-label--float-above\">\n {this.label}\n </label>\n );\n }\n\n private renderInputChips() {\n return [\n <div\n class={{\n 'mdc-text-field mdc-text-field--outlined': true,\n 'mdc-chip-set mdc-chip-set--input': true,\n 'force-invalid': this.isInvalid(),\n 'mdc-text-field--disabled': this.readonly || this.disabled,\n 'lime-text-field--readonly': this.readonly,\n 'has-chips mdc-text-field--label-floating':\n this.value.length !== 0,\n 'has-leading-icon': this.leadingIcon !== null,\n 'has-clear-all-button': this.clearAllButton,\n }}\n onClick={this.handleTextFieldFocus}\n >\n {this.value.map(this.renderInputChip)}\n <input\n tabIndex={INPUT_FIELD_TABINDEX}\n type={this.inputType}\n id=\"input-element\"\n disabled={this.readonly || this.disabled}\n class={{\n 'mdc-text-field__input': true,\n hidden: this.inputHidden(),\n }}\n value={this.textValue}\n onBlur={this.handleInputBlur}\n onFocus={this.handleTextFieldFocus}\n onKeyDown={this.handleKeyDown}\n onInput={this.handleTextInput}\n // Some browsers emit a change event on input elements, we need to stop\n // that event from propagating since we are emitting our own change event\n onChange={this.inputFieldOnChange}\n placeholder={this.isFull() ? '' : this.searchLabel}\n readonly={this.isFull()}\n />\n <div\n class={{\n 'mdc-notched-outline': true,\n 'mdc-notched-outline--upgraded': true,\n 'mdc-text-field--required': this.required,\n 'lime-notched-outline--notched': this.floatLabelAbove(),\n }}\n dropzone-tip={this.dropZoneTip()}\n >\n <div class=\"mdc-notched-outline__leading\" />\n {this.renderLabel()}\n <div class=\"mdc-notched-outline__trailing\" />\n </div>\n {this.renderLeadingIcon()}\n {this.renderEmptyValueForReadonly()}\n {this.renderClearAllChipsButton()}\n </div>,\n this.renderHelperLine(),\n ];\n }\n\n private renderEmptyValueForReadonly = () => {\n if (this.readonly && this.value.length === 0) {\n return (\n <span class=\"lime-empty-value-for-readonly lime-looks-like-input-value\">\n –\n </span>\n );\n }\n };\n\n private renderLabel() {\n const labelClassList = {\n 'mdc-floating-label': true,\n 'mdc-text-field--disabled': this.readonly || this.disabled,\n 'mdc-floating-label--required': this.required,\n 'lime-floating-label--float-above': this.floatLabelAbove(),\n };\n\n if (!this.label) {\n return;\n }\n\n return (\n <div class=\"mdc-notched-outline__notch\">\n <label class={labelClassList} htmlFor=\"input-element\">\n {this.label}\n </label>\n </div>\n );\n }\n\n private floatLabelAbove = () => {\n if (!!this.value.length || this.editMode || this.readonly) {\n return true;\n }\n };\n\n private dropZoneTip = (): string => {\n return translate.get('file.drag-and-drop-tips', this.language);\n };\n\n private isFull(): boolean {\n return !!this.maxItems && this.value.length >= this.maxItems;\n }\n\n private isInvalid() {\n if (this.readonly) {\n // A readonly field can never be invalid.\n return false;\n }\n\n if (this.invalid) {\n return true;\n }\n\n if (!this.required) {\n return false;\n }\n\n if (!this.blurred) {\n return false;\n }\n\n return !this.value || !this.value.length;\n }\n\n private inputFieldOnChange(event) {\n event.stopPropagation();\n }\n\n /**\n * Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible\n */\n private handleTextFieldFocus() {\n if (this.disabled || this.readonly) {\n return;\n }\n\n if (this.editMode) {\n return;\n }\n\n this.editMode = true;\n this.startEdit.emit();\n }\n\n /**\n * Exit edit mode when the input element loses focus. This makes sure the input element does not take up any\n * additional space when the user it not typing anything\n */\n private handleInputBlur() {\n if (this.emptyInputOnBlur) {\n this.syncEmptyInput();\n }\n\n this.editMode = false;\n this.blurred = true;\n this.inputChipIndexSelected = null;\n\n // This timeout is needed in order to let a new element receive focus\n setTimeout(() => {\n this.stopEdit.emit();\n }, 0);\n }\n\n private syncEmptyInput() {\n this.textValue = '';\n }\n\n private inputHidden() {\n if (this.editMode) {\n return this.isFull();\n }\n\n // If there are chips in the picker, hide the input to avoid the input\n // being placed on a new line and adding ugly space beneath the chips.\n // If there are no chips, show the input, or the picker will look weird.\n return !!(this.value && this.value.length);\n }\n\n private handleTextInput(event) {\n event.stopPropagation();\n this.inputChipIndexSelected = null;\n this.textValue = event.target.value;\n this.input.emit(event.target.value && event.target.value.trim());\n }\n\n private emitInteraction(chip: Chip) {\n this.interact.emit(chip);\n }\n\n private renderChip(chip: Chip) {\n const chipType: ChipType =\n this.type === 'filter' ? 'filter' : 'default';\n\n const chipProps = this.getChipProps(chip, chipType);\n\n return <limel-chip {...chipProps} />;\n }\n\n private hasHelperText = () => {\n return this.helperText !== null && this.helperText !== undefined;\n };\n\n private renderHelperLine = () => {\n if (!this.maxItems && !this.hasHelperText()) {\n return;\n }\n\n return (\n <limel-helper-line\n length={this.value.length}\n maxLength={this.maxItems}\n helperText={this.helperText}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private renderInputChip(chip: Chip, index: number) {\n const chipProps = this.getChipProps(chip, 'default');\n\n return [\n <limel-chip\n key={chip.id}\n class={{\n 'can-be-removed': this.inputChipIndexSelected === index,\n }}\n {...chipProps}\n />,\n this.renderDelimiter(),\n ];\n }\n\n private getChipProps(chip: Chip, chipType: ChipType) {\n const removable = this.type === 'input' && chip.removable;\n\n return {\n role: 'row',\n identifier: chip.id,\n text: chip.text,\n icon: chip.icon,\n badge: chip.badge,\n selected: chip.selected,\n disabled: this.disabled,\n readonly: this.readonly,\n type: chipType,\n removable: removable,\n onClick: this.catchInputChipClicks(chip),\n onRemove: this.handleRemoveChip,\n ...(chip.href && {\n link: {\n href: getHref(chip.href),\n target: getTarget(chip.href),\n },\n }),\n };\n }\n\n private catchInputChipClicks = (chip: Chip) => () => {\n if (this.isSelectableChip(chip)) {\n this.updateSelectedChipIds(chip);\n this.change.emit(chip);\n }\n\n this.emitInteraction(chip);\n };\n\n private isSelectableChip(chip: Chip): boolean {\n return this.type !== 'input' && 'selected' in chip;\n }\n\n private updateSelectedChipIds(chip: Chip): void {\n chip.selected = !chip.selected;\n const id = chip.id;\n if (this.type === 'choice') {\n this.updateChoiceTypeSelectedIds(id);\n } else {\n this.updateFilterTypeSelectedIds(id);\n }\n }\n\n private updateChoiceTypeSelectedIds(id: number | string): void {\n this.selectedChipIds = this.isChipSelected(id) ? [] : [id];\n }\n\n private isChipSelected(id: number | string): boolean {\n return !!this.selectedChipIds.find((chipId) => chipId === id);\n }\n\n private updateFilterTypeSelectedIds(id: number | string): void {\n if (this.isChipSelected(id)) {\n this.removeChipIdFromSelectedChipIds(id);\n } else {\n this.addChipIdToSelectedChipIds(id);\n }\n }\n\n private removeChipIdFromSelectedChipIds(id: number | string): void {\n this.selectedChipIds = this.selectedChipIds.filter(\n (chipId) => chipId !== id,\n );\n }\n\n private addChipIdToSelectedChipIds(id: number | string): void {\n this.selectedChipIds = [...this.selectedChipIds, id];\n }\n\n private handleRemoveChip = (\n event: LimelChipCustomEvent<string | number>,\n ) => {\n this.removeChip(event.detail);\n };\n\n private removeChip = (identifier: string | number) => {\n const newValue = this.value.filter((chip) => {\n return chip.id !== identifier;\n });\n this.change.emit(newValue);\n };\n\n private renderLeadingIcon() {\n if (!this.leadingIcon) {\n return;\n }\n\n return (\n <i class=\"mdc-text-field__icon search-icon\">\n <limel-icon name={this.leadingIcon} />\n </i>\n );\n }\n\n private renderClearAllChipsButton() {\n if (this.disabled || this.readonly || !this.clearAllButton) {\n return;\n }\n\n return (\n <a\n href=\"\"\n onClick={this.handleDeleteAllIconClick}\n class=\"mdc-text-field__icon clear-all-button\"\n tabindex=\"0\"\n role=\"button\"\n title={this.clearAllChipsLabel()}\n aria-label={this.clearAllChipsLabel()}\n />\n );\n }\n\n private clearAllChipsLabel = (): string => {\n return translate.get('chip-set.clear-all', this.language);\n };\n\n private handleDeleteAllIconClick(event: Event) {\n event.preventDefault();\n this.change.emit([]);\n }\n\n private renderDelimiter() {\n if (!this.delimiter) {\n return;\n }\n\n return <div class=\"delimiter\">{this.delimiter}</div>;\n }\n\n private triggerIconColorWarning(value: Chip[]) {\n for (const chip of value) {\n if (\n chip.icon &&\n (chip.iconFillColor ||\n chip.iconBackgroundColor ||\n chip.iconTitle)\n ) {\n /* eslint-disable-next-line no-console */\n console.warn(\n \"The `iconFillColor`, `iconBackgroundColor`, and `iconTitle` props are deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name', `iconBackgroundColor: 'color-name', and `iconTitle: 'title'`, write `icon { name: 'icon-name', color: 'color-name', backgroundColor: 'color-name', title: 'title' }`.\",\n );\n }\n }\n }\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"chip.types.js","sourceRoot":"","sources":["../../../src/components/chip-set/chip.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icon } from '../../interface';\n\n/**\n * @public\n */\nexport interface Chip<T = any> {\n /**\n * ID of the chip. Must be unique.\n */\n id: number | string;\n\n /**\n * Text to display inside the chip.\n */\n text: string;\n\n /**\n * Name of the icon to use. Not valid for `filter`.\n */\n icon?: string | Icon;\n\n /**\n * Color of the icon. Overrides `--icon-color`.\n *\n * @deprecated This property is deprecated and will be removed soon!\n *\n * Use the new `Icon` interface instead and write:\n * ```\n * icon {\n * name: string,\n * color: string,\n * },\n * ```\n */\n iconFillColor?: string;\n\n /**\n * `title` attribute of the icon\n *\n * @deprecated This property is deprecated and will be removed soon!\n *\n * Use the new `Icon` interface instead and write:\n * ```\n * icon {\n * name: string,\n * title: string,\n * },\n * ```\n */\n iconTitle?: string;\n\n /**\n * Background color of the icon. Overrides `--icon-background-color`.\n *\n * @deprecated This property is deprecated and will be removed soon!\n *\n * Use the new `Icon` interface instead and write:\n * ```\n * icon {\n * name: string,\n * backgroundColor: string,\n * },\n * ```\n */\n iconBackgroundColor?: string;\n\n /**\n * Whether the chip should be removable. Not valid for `choice`.\n */\n removable?: boolean;\n\n /**\n * Whether the chip is selected. Only valid for `choice` and `filter`.\n */\n selected?: boolean;\n\n /**\n * Value of the chip.\n */\n value?: T;\n\n /**\n * The value of the badge. Only valid for `filter`.\n */\n badge?: number;\n\n /**\n * If supplied, the chip will render a link, using the supplied href.\n */\n href?: string;\n}\n"]}
1
+ {"version":3,"file":"chip.types.js","sourceRoot":"","sources":["../../../src/components/chip-set/chip.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icon } from '../../interface';\n\n/**\n * @public\n */\nexport interface Chip<T = any> {\n /**\n * ID of the chip. Must be unique.\n */\n id: number | string;\n\n /**\n * Text to display inside the chip.\n */\n text: string;\n\n /**\n * Name of the icon to use. Not valid for `filter`.\n */\n icon?: string | Icon;\n\n /**\n * Color of the icon. Overrides `--icon-color`.\n *\n * @deprecated This property is deprecated and will be removed soon!\n *\n * Use the new `Icon` interface instead and write:\n * ```\n * icon {\n * name: string,\n * color: string,\n * },\n * ```\n */\n iconFillColor?: string;\n\n /**\n * `title` attribute of the icon\n *\n * @deprecated This property is deprecated and will be removed soon!\n *\n * Use the new `Icon` interface instead and write:\n * ```\n * icon {\n * name: string,\n * title: string,\n * },\n * ```\n */\n iconTitle?: string;\n\n /**\n * Background color of the icon. Overrides `--icon-background-color`.\n *\n * @deprecated This property is deprecated and will be removed soon!\n *\n * Use the new `Icon` interface instead and write:\n * ```\n * icon {\n * name: string,\n * backgroundColor: string,\n * },\n * ```\n */\n iconBackgroundColor?: string;\n\n /**\n * Whether the chip should be removable. Not valid for `choice`.\n */\n removable?: boolean;\n\n /**\n * Whether the chip is selected. Only valid for `choice` and `filter`.\n */\n selected?: boolean;\n\n /**\n * Value of the chip.\n */\n value?: T;\n\n /**\n * The value of the badge.\n */\n badge?: number;\n\n /**\n * If supplied, the chip will render a link, using the supplied href.\n */\n href?: string;\n}\n\n/**\n * This type is used to determine the visual style and behavior of a Chip component.\n *\n * @beta\n */\nexport type ChipType = 'default' | 'filter';\n"]}
@@ -176,8 +176,7 @@ header {
176
176
  display: flex;
177
177
  justify-content: space-between;
178
178
  padding-left: 0.5rem;
179
- padding-right: 0.5rem;
180
- height: 3rem;
179
+ height: 2.5rem;
181
180
  }
182
181
 
183
182
  .title {
@@ -689,6 +689,72 @@
689
689
  * 2. the CSS variables of `--kompendium-example-font-family`
690
690
  * in the `<style>` tag of `index.html`.
691
691
  */
692
+ /*
693
+ * This file is imported into every component!
694
+ *
695
+ * Nothing in this file may output any CSS
696
+ * without being explicitly called by outside code.
697
+ */
698
+ /*
699
+ * This file is imported into every component that uses MDC!
700
+ *
701
+ * Anything in this file that generates CSS output on its own,
702
+ * without being explicitly used, will output that CSS in every
703
+ * single component, increasing the size of the production build.
704
+ * Avoid that unless there's very good reason for it!
705
+ */
706
+ /*
707
+ * This file is imported into every component that uses MDC!
708
+ *
709
+ * Anything in this file that generates CSS output on its own,
710
+ * without being explicitly used, will output that CSS in every
711
+ * single component, increasing the size of the production build.
712
+ * Avoid that unless there's very good reason for it!
713
+ */
714
+ :host {
715
+ --mdc-theme-primary: var(
716
+ --lime-primary-color,
717
+ rgb(var(--color-teal-default))
718
+ );
719
+ --mdc-theme-secondary: var(
720
+ --lime-secondary-color,
721
+ rgb(var(--contrast-1100))
722
+ );
723
+ --mdc-theme-on-primary: var(
724
+ --lime-on-primary-color,
725
+ rgb(var(--contrast-100))
726
+ );
727
+ --mdc-theme-on-secondary: var(
728
+ --lime-on-secondary-color,
729
+ rgb(var(--contrast-100))
730
+ );
731
+ --mdc-theme-text-disabled-on-background: var(
732
+ --lime-text-disabled-on-background-color,
733
+ rgba(var(--contrast-1700), 0.38)
734
+ );
735
+ --mdc-theme-text-primary-on-background: var(
736
+ --lime-text-primary-on-background-color,
737
+ rgba(var(--contrast-1700), 0.87)
738
+ );
739
+ --mdc-theme-text-secondary-on-background: var(
740
+ --lime-text-secondary-on-background-color,
741
+ rgba(var(--contrast-1700), 0.54)
742
+ );
743
+ --mdc-theme-error: var(
744
+ --lime-error-background-color,
745
+ rgb(var(--color-red-dark))
746
+ );
747
+ --lime-error-text-color: rgb(var(--color-red-darker));
748
+ --mdc-theme-surface: var(
749
+ --lime-surface-background-color,
750
+ rgb(var(--contrast-100))
751
+ );
752
+ --mdc-theme-on-surface: var(
753
+ --lime-on-surface-color,
754
+ rgb(var(--contrast-1500))
755
+ );
756
+ }
757
+
692
758
  .picker-trigger[style="--background:lime-magenta;"]:after,
693
759
  .chosen-color-preview[style="--background:lime-magenta;"]:after {
694
760
  background-color: var(--lime-magenta);
@@ -727,13 +793,14 @@
727
793
  }
728
794
 
729
795
  :host {
796
+ position: relative;
730
797
  --popover-surface-width: 50rem;
731
798
  --color-picker-default-background: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>");
732
799
  }
733
800
 
734
801
  .color-picker {
735
802
  display: grid;
736
- gap: 0.5rem;
803
+ gap: 0.25rem;
737
804
  grid-template-columns: auto 1fr;
738
805
  }
739
806
 
@@ -771,8 +838,8 @@
771
838
  box-sizing: border-box;
772
839
  position: relative;
773
840
  isolation: isolate;
774
- width: 3.5rem;
775
- height: 3.5rem;
841
+ width: 2.5rem;
842
+ height: 2.5rem;
776
843
  }
777
844
  .chosen-color-preview:before, .chosen-color-preview:after,
778
845
  .picker-trigger:before,
@@ -801,7 +868,7 @@
801
868
  }
802
869
 
803
870
  .chosen-color-input[readonly] {
804
- transform: translateY(1rem);
871
+ transform: translateX(calc( 2.5rem / 4 * -1 )) translateY(calc(2.5rem / 4));
805
872
  }
806
873
 
807
874
  :host {