@design.estate/dees-catalog 3.60.0 → 3.61.1
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.
- package/dist_bundle/bundle.js +87 -38
- package/dist_ts_web/00_commitinfo_data.js +1 -1
- package/dist_ts_web/elements/00group-input/dees-input-list/dees-input-list.d.ts +2 -0
- package/dist_ts_web/elements/00group-input/dees-input-list/dees-input-list.demo.js +20 -2
- package/dist_ts_web/elements/00group-input/dees-input-list/dees-input-list.js +63 -24
- package/dist_watch/bundle.js +85 -36
- package/dist_watch/bundle.js.map +3 -3
- package/package.json +1 -1
- package/ts_web/00_commitinfo_data.ts +1 -1
- package/ts_web/elements/00group-input/dees-input-list/dees-input-list.demo.ts +19 -1
- package/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts +55 -22
package/dist_bundle/bundle.js
CHANGED
|
@@ -151076,7 +151076,25 @@ var demoFunc26 = /* @__PURE__ */ __name(() => b2`
|
|
|
151076
151076
|
></dees-input-list>
|
|
151077
151077
|
</dees-panel>
|
|
151078
151078
|
|
|
151079
|
-
<dees-panel .title=${"11.
|
|
151079
|
+
<dees-panel .title=${"11. Freeform + Candidates"} .subtitle=${"Allow adding items not in the candidate list (shown with a question mark)"}>
|
|
151080
|
+
<dees-input-list
|
|
151081
|
+
.label=${"Tags"}
|
|
151082
|
+
.placeholder=${"Type a tag... (freeform allowed)"}
|
|
151083
|
+
.allowFreeform=${true}
|
|
151084
|
+
.candidates=${[
|
|
151085
|
+
{ viewKey: "bug", payload: { color: "red" } },
|
|
151086
|
+
{ viewKey: "feature", payload: { color: "blue" } },
|
|
151087
|
+
{ viewKey: "docs", payload: { color: "green" } },
|
|
151088
|
+
{ viewKey: "refactor", payload: { color: "purple" } },
|
|
151089
|
+
{ viewKey: "performance", payload: { color: "orange" } },
|
|
151090
|
+
{ viewKey: "security", payload: { color: "red" } }
|
|
151091
|
+
]}
|
|
151092
|
+
.value=${["bug", "my-custom-tag", "feature"]}
|
|
151093
|
+
.description=${"Known tags get a checkmark, custom tags get a question mark. Tab to complete, Enter to add freeform."}
|
|
151094
|
+
></dees-input-list>
|
|
151095
|
+
</dees-panel>
|
|
151096
|
+
|
|
151097
|
+
<dees-panel .title=${"12. Empty State"} .subtitle=${"How the component looks with no items"}>
|
|
151080
151098
|
<dees-input-list
|
|
151081
151099
|
.label=${"Your Ideas"}
|
|
151082
151100
|
.placeholder=${"Share your ideas..."}
|
|
@@ -151092,9 +151110,9 @@ var demoFunc26 = /* @__PURE__ */ __name(() => b2`
|
|
|
151092
151110
|
init_dist_ts30();
|
|
151093
151111
|
init_dees_icon();
|
|
151094
151112
|
init_theme();
|
|
151095
|
-
var _itemHeight_dec, _targetIndex_dec, _dragCurrentY_dec, _dragStartY_dec, _dragOverIndex_dec, _draggedIndex_dec, _editingValue_dec, _editingIndex_dec, _currentCandidateIndex_dec, _ghostText_dec, _inputValue_dec3, _validationText_dec3, _candidates_dec, _confirmDelete_dec, _sortable_dec, _allowDuplicates_dec, _minItems_dec, _maxItems_dec, _placeholder_dec4, _value_dec12, _a36, _DeesInputList_decorators, _init33, _value12, _placeholder4, _maxItems, _minItems, _allowDuplicates, _sortable, _confirmDelete, _candidates, _validationText3, _inputValue3, _ghostText, _currentCandidateIndex, _editingIndex, _editingValue, _draggedIndex, _dragOverIndex, _dragStartY, _dragCurrentY, _targetIndex, _itemHeight;
|
|
151113
|
+
var _itemHeight_dec, _targetIndex_dec, _dragCurrentY_dec, _dragStartY_dec, _dragOverIndex_dec, _draggedIndex_dec, _editingValue_dec, _editingIndex_dec, _currentCandidateIndex_dec, _ghostText_dec, _inputValue_dec3, _validationText_dec3, _allowFreeform_dec, _candidates_dec, _confirmDelete_dec, _sortable_dec, _allowDuplicates_dec, _minItems_dec, _maxItems_dec, _placeholder_dec4, _value_dec12, _a36, _DeesInputList_decorators, _init33, _value12, _placeholder4, _maxItems, _minItems, _allowDuplicates, _sortable, _confirmDelete, _candidates, _allowFreeform, _validationText3, _inputValue3, _ghostText, _currentCandidateIndex, _editingIndex, _editingValue, _draggedIndex, _dragOverIndex, _dragStartY, _dragCurrentY, _targetIndex, _itemHeight;
|
|
151096
151114
|
_DeesInputList_decorators = [customElement("dees-input-list")];
|
|
151097
|
-
var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_dec12 = [n5({ type: Array })], _placeholder_dec4 = [n5({ type: String })], _maxItems_dec = [n5({ type: Number })], _minItems_dec = [n5({ type: Number })], _allowDuplicates_dec = [n5({ type: Boolean })], _sortable_dec = [n5({ type: Boolean })], _confirmDelete_dec = [n5({ type: Boolean })], _candidates_dec = [n5({ type: Array })], _validationText_dec3 = [n5({ type: String })], _inputValue_dec3 = [r5()], _ghostText_dec = [r5()], _currentCandidateIndex_dec = [r5()], _editingIndex_dec = [r5()], _editingValue_dec = [r5()], _draggedIndex_dec = [r5()], _dragOverIndex_dec = [r5()], _dragStartY_dec = [r5()], _dragCurrentY_dec = [r5()], _targetIndex_dec = [r5()], _itemHeight_dec = [r5()], _a36) {
|
|
151115
|
+
var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_dec12 = [n5({ type: Array })], _placeholder_dec4 = [n5({ type: String })], _maxItems_dec = [n5({ type: Number })], _minItems_dec = [n5({ type: Number })], _allowDuplicates_dec = [n5({ type: Boolean })], _sortable_dec = [n5({ type: Boolean })], _confirmDelete_dec = [n5({ type: Boolean })], _candidates_dec = [n5({ type: Array })], _allowFreeform_dec = [n5({ type: Boolean })], _validationText_dec3 = [n5({ type: String })], _inputValue_dec3 = [r5()], _ghostText_dec = [r5()], _currentCandidateIndex_dec = [r5()], _editingIndex_dec = [r5()], _editingValue_dec = [r5()], _draggedIndex_dec = [r5()], _dragOverIndex_dec = [r5()], _dragStartY_dec = [r5()], _dragCurrentY_dec = [r5()], _targetIndex_dec = [r5()], _itemHeight_dec = [r5()], _a36) {
|
|
151098
151116
|
constructor() {
|
|
151099
151117
|
super(...arguments);
|
|
151100
151118
|
__privateAdd(this, _value12, __runInitializers(_init33, 8, this, [])), __runInitializers(_init33, 11, this);
|
|
@@ -151105,20 +151123,21 @@ var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_
|
|
|
151105
151123
|
__privateAdd(this, _sortable, __runInitializers(_init33, 28, this, false)), __runInitializers(_init33, 31, this);
|
|
151106
151124
|
__privateAdd(this, _confirmDelete, __runInitializers(_init33, 32, this, false)), __runInitializers(_init33, 35, this);
|
|
151107
151125
|
__privateAdd(this, _candidates, __runInitializers(_init33, 36, this, [])), __runInitializers(_init33, 39, this);
|
|
151108
|
-
__privateAdd(this,
|
|
151126
|
+
__privateAdd(this, _allowFreeform, __runInitializers(_init33, 40, this, false)), __runInitializers(_init33, 43, this);
|
|
151127
|
+
__privateAdd(this, _validationText3, __runInitializers(_init33, 44, this, "")), __runInitializers(_init33, 47, this);
|
|
151109
151128
|
__publicField(this, "addedCandidatesMap", /* @__PURE__ */ new Map());
|
|
151110
151129
|
__publicField(this, "matchingCandidates", []);
|
|
151111
|
-
__privateAdd(this, _inputValue3, __runInitializers(_init33,
|
|
151112
|
-
__privateAdd(this, _ghostText, __runInitializers(_init33,
|
|
151113
|
-
__privateAdd(this, _currentCandidateIndex, __runInitializers(_init33,
|
|
151114
|
-
__privateAdd(this, _editingIndex, __runInitializers(_init33,
|
|
151115
|
-
__privateAdd(this, _editingValue, __runInitializers(_init33,
|
|
151116
|
-
__privateAdd(this, _draggedIndex, __runInitializers(_init33,
|
|
151117
|
-
__privateAdd(this, _dragOverIndex, __runInitializers(_init33,
|
|
151118
|
-
__privateAdd(this, _dragStartY, __runInitializers(_init33,
|
|
151119
|
-
__privateAdd(this, _dragCurrentY, __runInitializers(_init33,
|
|
151120
|
-
__privateAdd(this, _targetIndex, __runInitializers(_init33,
|
|
151121
|
-
__privateAdd(this, _itemHeight, __runInitializers(_init33,
|
|
151130
|
+
__privateAdd(this, _inputValue3, __runInitializers(_init33, 48, this, "")), __runInitializers(_init33, 51, this);
|
|
151131
|
+
__privateAdd(this, _ghostText, __runInitializers(_init33, 52, this, "")), __runInitializers(_init33, 55, this);
|
|
151132
|
+
__privateAdd(this, _currentCandidateIndex, __runInitializers(_init33, 56, this, -1)), __runInitializers(_init33, 59, this);
|
|
151133
|
+
__privateAdd(this, _editingIndex, __runInitializers(_init33, 60, this, -1)), __runInitializers(_init33, 63, this);
|
|
151134
|
+
__privateAdd(this, _editingValue, __runInitializers(_init33, 64, this, "")), __runInitializers(_init33, 67, this);
|
|
151135
|
+
__privateAdd(this, _draggedIndex, __runInitializers(_init33, 68, this, -1)), __runInitializers(_init33, 71, this);
|
|
151136
|
+
__privateAdd(this, _dragOverIndex, __runInitializers(_init33, 72, this, -1)), __runInitializers(_init33, 75, this);
|
|
151137
|
+
__privateAdd(this, _dragStartY, __runInitializers(_init33, 76, this, 0)), __runInitializers(_init33, 79, this);
|
|
151138
|
+
__privateAdd(this, _dragCurrentY, __runInitializers(_init33, 80, this, 0)), __runInitializers(_init33, 83, this);
|
|
151139
|
+
__privateAdd(this, _targetIndex, __runInitializers(_init33, 84, this, -1)), __runInitializers(_init33, 87, this);
|
|
151140
|
+
__privateAdd(this, _itemHeight, __runInitializers(_init33, 88, this, 0)), __runInitializers(_init33, 91, this);
|
|
151122
151141
|
// Bound event handlers for cleanup
|
|
151123
151142
|
__publicField(this, "boundHandleGlobalDragOver", null);
|
|
151124
151143
|
__publicField(this, "boundHandleGlobalDragEnd", null);
|
|
@@ -151130,7 +151149,7 @@ var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_
|
|
|
151130
151149
|
<div class="input-wrapper">
|
|
151131
151150
|
${this.label ? b2`<dees-label .label=${this.label} .required=${this.required}></dees-label>` : ""}
|
|
151132
151151
|
|
|
151133
|
-
<
|
|
151152
|
+
<dees-tile .heading="${this.value.length} item${this.value.length !== 1 ? "s" : ""}">
|
|
151134
151153
|
<div class="list-items">
|
|
151135
151154
|
${this.value.length > 0 ? this.value.map((item, index3) => b2`
|
|
151136
151155
|
<div
|
|
@@ -151146,7 +151165,17 @@ var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_
|
|
|
151146
151165
|
<dees-icon .icon=${"lucide:gripVertical"}></dees-icon>
|
|
151147
151166
|
</div>
|
|
151148
151167
|
` : ""}
|
|
151149
|
-
|
|
151168
|
+
|
|
151169
|
+
${this.candidates.length > 0 ? b2`
|
|
151170
|
+
${this.candidates.some((c11) => c11.viewKey === item) ? b2`
|
|
151171
|
+
<dees-icon class="candidate-check" .icon=${"lucide:check"}></dees-icon>
|
|
151172
|
+
` : b2`
|
|
151173
|
+
<dees-icon class="candidate-unknown" .icon=${"lucide:helpCircle"}></dees-icon>
|
|
151174
|
+
`}
|
|
151175
|
+
` : !this.sortable || this.disabled ? b2`
|
|
151176
|
+
<dees-icon class="item-bullet" .icon=${"lucide:dot"}></dees-icon>
|
|
151177
|
+
` : ""}
|
|
151178
|
+
|
|
151150
151179
|
<div class="item-content">
|
|
151151
151180
|
${this.editingIndex === index3 ? b2`
|
|
151152
151181
|
<input
|
|
@@ -151192,7 +151221,7 @@ var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_
|
|
|
151192
151221
|
</div>
|
|
151193
151222
|
|
|
151194
151223
|
${!this.disabled && (!this.maxItems || this.value.length < this.maxItems) ? b2`
|
|
151195
|
-
<div class="add-item-container">
|
|
151224
|
+
<div slot="footer" class="add-item-container">
|
|
151196
151225
|
<div class="autocomplete-wrapper">
|
|
151197
151226
|
${this.ghostText ? b2`
|
|
151198
151227
|
<span class="ghost-text">
|
|
@@ -151218,7 +151247,7 @@ var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_
|
|
|
151218
151247
|
</button>
|
|
151219
151248
|
</div>
|
|
151220
151249
|
` : ""}
|
|
151221
|
-
</
|
|
151250
|
+
</dees-tile>
|
|
151222
151251
|
|
|
151223
151252
|
${this.validationText ? b2`
|
|
151224
151253
|
<div class="validation-message">${this.validationText}</div>
|
|
@@ -151285,6 +151314,11 @@ var _DeesInputList = class _DeesInputList extends (_a36 = DeesInputBase, _value_
|
|
|
151285
151314
|
);
|
|
151286
151315
|
if (match2) {
|
|
151287
151316
|
this.selectCandidate(match2);
|
|
151317
|
+
} else if (this.allowFreeform) {
|
|
151318
|
+
this.ghostText = "";
|
|
151319
|
+
this.currentCandidateIndex = -1;
|
|
151320
|
+
this.matchingCandidates = [];
|
|
151321
|
+
this.addItem();
|
|
151288
151322
|
}
|
|
151289
151323
|
return;
|
|
151290
151324
|
}
|
|
@@ -151653,6 +151687,7 @@ _allowDuplicates = new WeakMap();
|
|
|
151653
151687
|
_sortable = new WeakMap();
|
|
151654
151688
|
_confirmDelete = new WeakMap();
|
|
151655
151689
|
_candidates = new WeakMap();
|
|
151690
|
+
_allowFreeform = new WeakMap();
|
|
151656
151691
|
_validationText3 = new WeakMap();
|
|
151657
151692
|
_inputValue3 = new WeakMap();
|
|
151658
151693
|
_ghostText = new WeakMap();
|
|
@@ -151673,6 +151708,7 @@ __decorateElement(_init33, 4, "allowDuplicates", _allowDuplicates_dec, _DeesInpu
|
|
|
151673
151708
|
__decorateElement(_init33, 4, "sortable", _sortable_dec, _DeesInputList, _sortable);
|
|
151674
151709
|
__decorateElement(_init33, 4, "confirmDelete", _confirmDelete_dec, _DeesInputList, _confirmDelete);
|
|
151675
151710
|
__decorateElement(_init33, 4, "candidates", _candidates_dec, _DeesInputList, _candidates);
|
|
151711
|
+
__decorateElement(_init33, 4, "allowFreeform", _allowFreeform_dec, _DeesInputList, _allowFreeform);
|
|
151676
151712
|
__decorateElement(_init33, 4, "validationText", _validationText_dec3, _DeesInputList, _validationText3);
|
|
151677
151713
|
__decorateElement(_init33, 4, "inputValue", _inputValue_dec3, _DeesInputList, _inputValue3);
|
|
151678
151714
|
__decorateElement(_init33, 4, "ghostText", _ghostText_dec, _DeesInputList, _ghostText);
|
|
@@ -151705,26 +151741,19 @@ __publicField(_DeesInputList, "styles", [
|
|
|
151705
151741
|
width: 100%;
|
|
151706
151742
|
}
|
|
151707
151743
|
|
|
151708
|
-
|
|
151709
|
-
|
|
151710
|
-
border: 1px solid ${cssManager.bdTheme("hsl(0 0% 89.8%)", "hsl(0 0% 14.9%)")};
|
|
151711
|
-
border-radius: 6px;
|
|
151712
|
-
overflow: hidden;
|
|
151713
|
-
transition: all 0.15s ease;
|
|
151714
|
-
}
|
|
151715
|
-
|
|
151716
|
-
.list-container:hover:not(.disabled) {
|
|
151717
|
-
border-color: ${cssManager.bdTheme("hsl(0 0% 79.8%)", "hsl(0 0% 20.9%)")};
|
|
151744
|
+
dees-tile:hover::part(outer) {
|
|
151745
|
+
border-color: var(--dees-color-border-strong);
|
|
151718
151746
|
}
|
|
151719
151747
|
|
|
151720
|
-
|
|
151748
|
+
dees-tile:focus-within::part(outer) {
|
|
151721
151749
|
border-color: ${cssManager.bdTheme("hsl(222.2 47.4% 51.2%)", "hsl(217.2 91.2% 59.8%)")};
|
|
151722
151750
|
box-shadow: 0 0 0 3px ${cssManager.bdTheme("hsl(222.2 47.4% 51.2% / 0.1)", "hsl(217.2 91.2% 59.8% / 0.1)")};
|
|
151723
151751
|
}
|
|
151724
151752
|
|
|
151725
|
-
|
|
151753
|
+
:host([disabled]) dees-tile {
|
|
151726
151754
|
opacity: 0.6;
|
|
151727
151755
|
cursor: not-allowed;
|
|
151756
|
+
pointer-events: none;
|
|
151728
151757
|
}
|
|
151729
151758
|
|
|
151730
151759
|
.list-items {
|
|
@@ -151737,8 +151766,8 @@ __publicField(_DeesInputList, "styles", [
|
|
|
151737
151766
|
align-items: center;
|
|
151738
151767
|
gap: 6px;
|
|
151739
151768
|
padding: 6px 10px;
|
|
151740
|
-
border-bottom: 1px solid
|
|
151741
|
-
background:
|
|
151769
|
+
border-bottom: 1px solid var(--dees-color-border-subtle);
|
|
151770
|
+
background: transparent;
|
|
151742
151771
|
transition: transform 0.2s ease, background 0.15s ease, box-shadow 0.15s ease;
|
|
151743
151772
|
position: relative;
|
|
151744
151773
|
overflow: hidden;
|
|
@@ -151749,7 +151778,7 @@ __publicField(_DeesInputList, "styles", [
|
|
|
151749
151778
|
}
|
|
151750
151779
|
|
|
151751
151780
|
.list-items:not(.is-dragging) .list-item:hover:not(.disabled) {
|
|
151752
|
-
background:
|
|
151781
|
+
background: var(--dees-color-row-hover);
|
|
151753
151782
|
}
|
|
151754
151783
|
|
|
151755
151784
|
/* Dragging item - follows cursor */
|
|
@@ -151773,6 +151802,28 @@ __publicField(_DeesInputList, "styles", [
|
|
|
151773
151802
|
}
|
|
151774
151803
|
|
|
151775
151804
|
|
|
151805
|
+
.candidate-check {
|
|
151806
|
+
width: 14px;
|
|
151807
|
+
height: 14px;
|
|
151808
|
+
color: ${cssManager.bdTheme("hsl(142.1 76.2% 36.3%)", "hsl(142.1 70.6% 45.3%)")};
|
|
151809
|
+
flex-shrink: 0;
|
|
151810
|
+
}
|
|
151811
|
+
|
|
151812
|
+
.candidate-unknown {
|
|
151813
|
+
width: 14px;
|
|
151814
|
+
height: 14px;
|
|
151815
|
+
color: ${cssManager.bdTheme("hsl(45 93% 47%)", "hsl(45 93% 58%)")};
|
|
151816
|
+
flex-shrink: 0;
|
|
151817
|
+
}
|
|
151818
|
+
|
|
151819
|
+
.item-bullet {
|
|
151820
|
+
width: 14px;
|
|
151821
|
+
height: 14px;
|
|
151822
|
+
color: var(--dees-color-text-muted);
|
|
151823
|
+
flex-shrink: 0;
|
|
151824
|
+
opacity: 0.5;
|
|
151825
|
+
}
|
|
151826
|
+
|
|
151776
151827
|
.drag-handle {
|
|
151777
151828
|
display: flex;
|
|
151778
151829
|
align-items: center;
|
|
@@ -151875,8 +151926,6 @@ __publicField(_DeesInputList, "styles", [
|
|
|
151875
151926
|
display: flex;
|
|
151876
151927
|
gap: 6px;
|
|
151877
151928
|
padding: 6px 10px;
|
|
151878
|
-
background: ${cssManager.bdTheme("hsl(0 0% 97.5%)", "hsl(0 0% 6.9%)")};
|
|
151879
|
-
border-top: 1px solid ${cssManager.bdTheme("hsl(0 0% 89.8%)", "hsl(0 0% 14.9%)")};
|
|
151880
151929
|
}
|
|
151881
151930
|
|
|
151882
151931
|
.add-input {
|
|
@@ -198962,7 +199011,7 @@ init_group_runtime();
|
|
|
198962
199011
|
// ts_web/00_commitinfo_data.ts
|
|
198963
199012
|
var commitinfo = {
|
|
198964
199013
|
name: "@design.estate/dees-catalog",
|
|
198965
|
-
version: "3.
|
|
199014
|
+
version: "3.61.1",
|
|
198966
199015
|
description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
|
|
198967
199016
|
};
|
|
198968
199017
|
export {
|
|
@@ -200935,4 +200984,4 @@ ibantools/jsnext/ibantools.js:
|
|
|
200935
200984
|
* @preferred
|
|
200936
200985
|
*)
|
|
200937
200986
|
*/
|
|
200938
|
-
//# sourceMappingURL=bundle-
|
|
200987
|
+
//# sourceMappingURL=bundle-1775387335721.js.map
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export const commitinfo = {
|
|
5
5
|
name: '@design.estate/dees-catalog',
|
|
6
|
-
version: '3.
|
|
6
|
+
version: '3.61.1',
|
|
7
7
|
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
|
8
8
|
};
|
|
9
9
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsNkJBQTZCO0lBQ25DLE9BQU8sRUFBRSxRQUFRO0lBQ2pCLFdBQVcsRUFBRSxzSkFBc0o7Q0FDcEssQ0FBQSJ9
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { type TemplateResult } from '@design.estate/dees-element';
|
|
2
2
|
import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
|
|
3
3
|
import '../../00group-utility/dees-icon/dees-icon.js';
|
|
4
|
+
import '../../00group-layout/dees-tile/dees-tile.js';
|
|
4
5
|
export interface IListCandidate {
|
|
5
6
|
viewKey: string;
|
|
6
7
|
payload?: any;
|
|
@@ -21,6 +22,7 @@ export declare class DeesInputList extends DeesInputBase<DeesInputList> {
|
|
|
21
22
|
accessor sortable: boolean;
|
|
22
23
|
accessor confirmDelete: boolean;
|
|
23
24
|
accessor candidates: IListCandidate[];
|
|
25
|
+
accessor allowFreeform: boolean;
|
|
24
26
|
accessor validationText: string;
|
|
25
27
|
private addedCandidatesMap;
|
|
26
28
|
private matchingCandidates;
|
|
@@ -321,7 +321,25 @@ export const demoFunc = () => html `
|
|
|
321
321
|
></dees-input-list>
|
|
322
322
|
</dees-panel>
|
|
323
323
|
|
|
324
|
-
<dees-panel .title=${'11.
|
|
324
|
+
<dees-panel .title=${'11. Freeform + Candidates'} .subtitle=${'Allow adding items not in the candidate list (shown with a question mark)'}>
|
|
325
|
+
<dees-input-list
|
|
326
|
+
.label=${'Tags'}
|
|
327
|
+
.placeholder=${'Type a tag... (freeform allowed)'}
|
|
328
|
+
.allowFreeform=${true}
|
|
329
|
+
.candidates=${[
|
|
330
|
+
{ viewKey: 'bug', payload: { color: 'red' } },
|
|
331
|
+
{ viewKey: 'feature', payload: { color: 'blue' } },
|
|
332
|
+
{ viewKey: 'docs', payload: { color: 'green' } },
|
|
333
|
+
{ viewKey: 'refactor', payload: { color: 'purple' } },
|
|
334
|
+
{ viewKey: 'performance', payload: { color: 'orange' } },
|
|
335
|
+
{ viewKey: 'security', payload: { color: 'red' } },
|
|
336
|
+
]}
|
|
337
|
+
.value=${['bug', 'my-custom-tag', 'feature']}
|
|
338
|
+
.description=${'Known tags get a checkmark, custom tags get a question mark. Tab to complete, Enter to add freeform.'}
|
|
339
|
+
></dees-input-list>
|
|
340
|
+
</dees-panel>
|
|
341
|
+
|
|
342
|
+
<dees-panel .title=${'12. Empty State'} .subtitle=${'How the component looks with no items'}>
|
|
325
343
|
<dees-input-list
|
|
326
344
|
.label=${'Your Ideas'}
|
|
327
345
|
.placeholder=${'Share your ideas...'}
|
|
@@ -332,4 +350,4 @@ export const demoFunc = () => html `
|
|
|
332
350
|
</div>
|
|
333
351
|
</dees-demowrapper>
|
|
334
352
|
`;
|
|
335
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
353
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1saXN0LmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9kZWVzLWlucHV0LWxpc3QvZGVlcy1pbnB1dC1saXN0LmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUN4RCxPQUFPLHdDQUF3QyxDQUFDO0FBQ2hELE9BQU8sK0NBQStDLENBQUM7QUFDdkQsT0FBTywyQ0FBMkMsQ0FBQztBQUNuRCxPQUFPLHVDQUF1QyxDQUFDO0FBQy9DLE9BQU8seURBQXlELENBQUM7QUFFakUsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7O1FBRzFCLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7T0FpRUo7Ozs7MkJBSW9CLHFCQUFxQixjQUFjLG1EQUFtRDs7bUJBRTlGLGVBQWU7eUJBQ1QsMEJBQTBCO21CQUNoQyxDQUFDLE1BQU0sRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFFLFFBQVEsQ0FBQzt5QkFDN0Isb0RBQW9EOzs7Ozs7OzJCQU9sRCxrQkFBa0IsY0FBYyxnQ0FBZ0M7O21CQUV4RSxlQUFlO3lCQUNULGVBQWU7c0JBQ2xCLElBQUk7bUJBQ1A7SUFDUCxzQkFBc0I7SUFDdEIsa0JBQWtCO0lBQ2xCLHNCQUFzQjtJQUN0QixzQkFBc0I7SUFDdEIsc0JBQXNCO0NBQ3ZCO3lCQUNjLDZDQUE2Qzs7Ozs7OzsyQkFPM0MsNkJBQTZCLGNBQWMsMkRBQTJEOzs7cUJBRzVHLDZCQUE2QjsyQkFDdkIsb0JBQW9CO3dCQUN2QixDQUFDO3dCQUNELENBQUM7cUJBQ0osQ0FBQyxPQUFPLEVBQUUsS0FBSyxDQUFDO3dCQUNiLElBQUk7MkJB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
|