@design.estate/dees-catalog 1.0.227 → 1.0.228
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 +156 -132
- package/dist_bundle/bundle.js.map +4 -4
- package/dist_ts_web/00_commitinfo_data.js +1 -1
- package/dist_ts_web/elements/dees-chips.d.ts +11 -5
- package/dist_ts_web/elements/dees-chips.demo.d.ts +1 -0
- package/dist_ts_web/elements/dees-chips.demo.js +28 -0
- package/dist_ts_web/elements/dees-chips.js +45 -22
- package/dist_watch/bundle.js +2870 -2227
- package/dist_watch/bundle.js.map +4 -4
- package/package.json +1 -1
- package/ts_web/00_commitinfo_data.ts +1 -1
- package/ts_web/elements/dees-chips.demo.ts +28 -0
- package/ts_web/elements/dees-chips.ts +50 -24
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export const commitinfo = {
|
|
5
5
|
name: '@design.estate/dees-catalog',
|
|
6
|
-
version: '1.0.
|
|
6
|
+
version: '1.0.227',
|
|
7
7
|
description: 'website for lossless.com'
|
|
8
8
|
};
|
|
9
9
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsNkJBQTZCO0lBQ25DLE9BQU8sRUFBRSxTQUFTO0lBQ2xCLFdBQVcsRUFBRSwwQkFBMEI7Q0FDeEMsQ0FBQSJ9
|
|
@@ -4,15 +4,21 @@ declare global {
|
|
|
4
4
|
'dees-chips': DeesChips;
|
|
5
5
|
}
|
|
6
6
|
}
|
|
7
|
+
type Tag = {
|
|
8
|
+
key: string;
|
|
9
|
+
value: string;
|
|
10
|
+
};
|
|
7
11
|
export declare class DeesChips extends DeesElement {
|
|
8
12
|
static demo: () => TemplateResult<1>;
|
|
9
|
-
selectionMode: 'single' | 'multiple';
|
|
10
|
-
selectableChips:
|
|
11
|
-
selectedChip:
|
|
12
|
-
selectedChips:
|
|
13
|
+
selectionMode: 'none' | 'single' | 'multiple';
|
|
14
|
+
selectableChips: Tag[];
|
|
15
|
+
selectedChip: Tag;
|
|
16
|
+
selectedChips: Tag[];
|
|
13
17
|
constructor();
|
|
14
18
|
static styles: CSSResult[];
|
|
15
19
|
render(): TemplateResult;
|
|
16
20
|
firstUpdated(): Promise<void>;
|
|
17
|
-
|
|
21
|
+
private isSelected;
|
|
22
|
+
selectChip(chip: Tag): Promise<void>;
|
|
18
23
|
}
|
|
24
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const demoFunc: () => import("@design.estate/dees-element").TemplateResult<1>;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { html } from '@design.estate/dees-element';
|
|
2
|
+
export const demoFunc = () => html `
|
|
3
|
+
<dees-chips
|
|
4
|
+
selectionMode="none"
|
|
5
|
+
.selectableChips=${[
|
|
6
|
+
{ key: 'account1', value: 'Payment Account 1' },
|
|
7
|
+
{ key: 'account2', value: 'PaymentAccount2' },
|
|
8
|
+
{ key: 'account3', value: 'Payment Account 3' }
|
|
9
|
+
]}
|
|
10
|
+
></dees-chips>
|
|
11
|
+
<dees-chips
|
|
12
|
+
selectionMode="single"
|
|
13
|
+
.selectableChips=${[
|
|
14
|
+
{ key: 'account1', value: 'Payment Account 1' },
|
|
15
|
+
{ key: 'account2', value: 'PaymentAccount2' },
|
|
16
|
+
{ key: 'account3', value: 'Payment Account 3' }
|
|
17
|
+
]}
|
|
18
|
+
></dees-chips>
|
|
19
|
+
<dees-chips
|
|
20
|
+
selectionMode="multiple"
|
|
21
|
+
.selectableChips=${[
|
|
22
|
+
{ key: 'account1', value: 'Payment Account 1' },
|
|
23
|
+
{ key: 'account2', value: 'PaymentAccount2' },
|
|
24
|
+
{ key: 'account3', value: 'Payment Account 3' }
|
|
25
|
+
]}
|
|
26
|
+
></dees-chips>
|
|
27
|
+
`;
|
|
28
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1jaGlwcy5kZW1vLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL2RlZXMtY2hpcHMuZGVtby50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFbkQsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7O3VCQUdYO0lBQ2pCLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsbUJBQW1CLEVBQUU7SUFDL0MsRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxpQkFBaUIsRUFBRTtJQUM3QyxFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLG1CQUFtQixFQUFFO0NBQ2hEOzs7O3VCQUlrQjtJQUNqQixFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLG1CQUFtQixFQUFFO0lBQy9DLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsaUJBQWlCLEVBQUU7SUFDN0MsRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxtQkFBbUIsRUFBRTtDQUNoRDs7Ozt1QkFJa0I7SUFDakIsRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxtQkFBbUIsRUFBRTtJQUMvQyxFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLGlCQUFpQixFQUFFO0lBQzdDLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsbUJBQW1CLEVBQUU7Q0FDaEQ7O0NBRUosQ0FBQyJ9
|
|
@@ -9,12 +9,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
|
|
|
9
9
|
};
|
|
10
10
|
import { customElement, html, DeesElement, property, cssManager, css, unsafeCSS, } from '@design.estate/dees-element';
|
|
11
11
|
import * as domtools from '@design.estate/dees-domtools';
|
|
12
|
+
import { demoFunc } from './dees-chips.demo.js';
|
|
12
13
|
export let DeesChips = class DeesChips extends DeesElement {
|
|
13
|
-
static { this.demo =
|
|
14
|
-
<dees-chips .selectableChips=${['Payment Account 1', 'PaymentAccount2', 'Payment Account 3']}></dees-chips>
|
|
15
|
-
<dees-chips selectionMode="multiple" .selectableChips=${['Payment Account 1', 'PaymentAccount2', 'Payment Account 3']}></dees-chips>
|
|
16
|
-
|
|
17
|
-
`; }
|
|
14
|
+
static { this.demo = demoFunc; }
|
|
18
15
|
constructor() {
|
|
19
16
|
super();
|
|
20
17
|
this.selectionMode = 'single';
|
|
@@ -32,18 +29,23 @@ export let DeesChips = class DeesChips extends DeesElement {
|
|
|
32
29
|
}
|
|
33
30
|
|
|
34
31
|
.mainbox {
|
|
35
|
-
|
|
32
|
+
user-select: none;
|
|
36
33
|
}
|
|
37
34
|
|
|
38
35
|
.chip {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
36
|
+
border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
|
|
37
|
+
background: #333333;
|
|
38
|
+
display: inline-flex;
|
|
39
|
+
height: 20px;
|
|
40
|
+
line-height: 20px;
|
|
41
|
+
padding: 0px 8px;
|
|
42
|
+
font-size: 12px;
|
|
43
43
|
color: #fff;
|
|
44
44
|
border-radius: 40px;
|
|
45
45
|
margin-right: 4px;
|
|
46
46
|
margin-bottom: 8px;
|
|
47
|
+
position: relative;
|
|
48
|
+
overflow: hidden;
|
|
47
49
|
}
|
|
48
50
|
|
|
49
51
|
.chip:hover {
|
|
@@ -54,15 +56,25 @@ export let DeesChips = class DeesChips extends DeesElement {
|
|
|
54
56
|
.chip.selected {
|
|
55
57
|
background: #00A3FF;
|
|
56
58
|
}
|
|
59
|
+
|
|
60
|
+
.chipKey {
|
|
61
|
+
background: rgba(0,0,0,0.3);
|
|
62
|
+
height: 100%;
|
|
63
|
+
display: inline-block;
|
|
64
|
+
margin-left: -8px;
|
|
65
|
+
padding-left: 8px;
|
|
66
|
+
padding-right: 8px;
|
|
67
|
+
margin-right: 8px;
|
|
68
|
+
}
|
|
57
69
|
|
|
58
70
|
`,
|
|
59
71
|
]; }
|
|
60
72
|
render() {
|
|
61
73
|
return html `
|
|
62
74
|
<div class="mainbox">
|
|
63
|
-
${this.selectableChips.map(
|
|
64
|
-
<div @click=${() => this.selectChip(
|
|
65
|
-
${
|
|
75
|
+
${this.selectableChips.map(chip => html `
|
|
76
|
+
<div @click=${() => this.selectChip(chip)} class="chip ${this.isSelected(chip) ? 'selected' : ''}">
|
|
77
|
+
${chip.key ? html `<div class="chipKey">${chip.key}</div>` : html ``}${chip.value}
|
|
66
78
|
</div>
|
|
67
79
|
`)}
|
|
68
80
|
</div>
|
|
@@ -74,23 +86,34 @@ export let DeesChips = class DeesChips extends DeesElement {
|
|
|
74
86
|
this.performUpdate();
|
|
75
87
|
}
|
|
76
88
|
}
|
|
77
|
-
|
|
89
|
+
isSelected(chip) {
|
|
78
90
|
if (this.selectionMode === 'single') {
|
|
79
|
-
|
|
91
|
+
return this.selectedChip?.key === chip.key;
|
|
92
|
+
}
|
|
93
|
+
else {
|
|
94
|
+
return this.selectedChips.some(selected => selected.key === chip.key);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
async selectChip(chip) {
|
|
98
|
+
if (this.selectionMode === 'none') {
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
if (this.selectionMode === 'single') {
|
|
102
|
+
if (this.isSelected(chip)) {
|
|
80
103
|
this.selectedChip = null;
|
|
81
104
|
this.selectedChips = [];
|
|
82
105
|
}
|
|
83
106
|
else {
|
|
84
|
-
this.selectedChip =
|
|
85
|
-
this.selectedChips = [
|
|
107
|
+
this.selectedChip = chip;
|
|
108
|
+
this.selectedChips = [chip];
|
|
86
109
|
}
|
|
87
110
|
}
|
|
88
111
|
else if (this.selectionMode === 'multiple') {
|
|
89
|
-
if (this.
|
|
90
|
-
this.selectedChips = this.selectedChips.filter(
|
|
112
|
+
if (this.isSelected(chip)) {
|
|
113
|
+
this.selectedChips = this.selectedChips.filter(selected => selected.key !== chip.key);
|
|
91
114
|
}
|
|
92
115
|
else {
|
|
93
|
-
this.selectedChips.
|
|
116
|
+
this.selectedChips = [...this.selectedChips, chip];
|
|
94
117
|
}
|
|
95
118
|
this.requestUpdate();
|
|
96
119
|
}
|
|
@@ -109,7 +132,7 @@ __decorate([
|
|
|
109
132
|
], DeesChips.prototype, "selectableChips", void 0);
|
|
110
133
|
__decorate([
|
|
111
134
|
property(),
|
|
112
|
-
__metadata("design:type",
|
|
135
|
+
__metadata("design:type", Object)
|
|
113
136
|
], DeesChips.prototype, "selectedChip", void 0);
|
|
114
137
|
__decorate([
|
|
115
138
|
property({
|
|
@@ -121,4 +144,4 @@ DeesChips = __decorate([
|
|
|
121
144
|
customElement('dees-chips'),
|
|
122
145
|
__metadata("design:paramtypes", [])
|
|
123
146
|
], DeesChips);
|
|
124
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
147
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1jaGlwcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9kZWVzLWNoaXBzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxhQUFhLEVBQ2IsSUFBSSxFQUNKLFdBQVcsRUFDWCxRQUFRLEVBRVIsVUFBVSxFQUNWLEdBQUcsRUFFSCxTQUFTLEdBQ1YsTUFBTSw2QkFBNkIsQ0FBQztBQUVyQyxPQUFPLEtBQUssUUFBUSxNQUFNLDhCQUE4QixDQUFDO0FBQ3pELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQVd6QyxXQUFNLFNBQVMsR0FBZixNQUFNLFNBQVUsU0FBUSxXQUFXO2FBQzFCLFNBQUksR0FBRyxRQUFRLEFBQVgsQ0FBWTtJQW1COUI7UUFDRSxLQUFLLEVBQUUsQ0FBQztRQWpCSCxrQkFBYSxHQUFtQyxRQUFRLENBQUM7UUFLekQsb0JBQWUsR0FBVSxFQUFFLENBQUM7UUFHNUIsaUJBQVksR0FBUSxJQUFJLENBQUM7UUFLekIsa0JBQWEsR0FBVSxFQUFFLENBQUM7SUFLakMsQ0FBQzthQUVhLFdBQU0sR0FBRztRQUNyQixVQUFVLENBQUMsYUFBYTtRQUN4QixHQUFHLENBQUE7Ozs7Ozs7Ozs7OztzQkFZZSxVQUFVLENBQUMsT0FBTyxDQUFDLGdCQUFnQixFQUFFLGdCQUFnQixDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBa0N2RTtLQUNGLEFBakRtQixDQWlEbEI7SUFFSyxNQUFNO1FBQ1gsT0FBTyxJQUFJLENBQUE7O1VBRUwsSUFBSSxDQUFDLGVBQWUsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUE7d0JBQ3ZCLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLGdCQUFnQixJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDLENB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
|