@leavittsoftware/web 2.34.0 → 2.35.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.
- package/package.json +2 -2
- package/titanium/chip/chip.d.ts +34 -0
- package/titanium/chip/chip.js +201 -0
- package/titanium/chip/chip.js.map +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@leavittsoftware/web",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.35.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "",
|
|
6
6
|
"files": [
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"url": "https://github.com/LeavittSoftware/titanium-elements/issues"
|
|
41
41
|
},
|
|
42
42
|
"homepage": "https://github.com/LeavittSoftware/titanium-elements/#readme",
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "716594cc2ba405d88a72546c5cd784d6945479de"
|
|
44
44
|
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import '@material/web/icon/icon';
|
|
2
|
+
import '@material/web/iconbutton/icon-button';
|
|
3
|
+
import '@material/web/ripple/ripple';
|
|
4
|
+
import '@material/web/focus/md-focus-ring';
|
|
5
|
+
import { LitElement } from 'lit';
|
|
6
|
+
export declare class TitaniumChip extends LitElement {
|
|
7
|
+
/**
|
|
8
|
+
* Label / text of the chip
|
|
9
|
+
*/
|
|
10
|
+
accessor label: string;
|
|
11
|
+
/**
|
|
12
|
+
* When true, the chip is selected
|
|
13
|
+
*/
|
|
14
|
+
accessor selected: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* When true, trailing slot is replaced with a remove icon button
|
|
17
|
+
*/
|
|
18
|
+
accessor inputChip: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Icon name of the remove icon chip
|
|
21
|
+
*/
|
|
22
|
+
accessor inputChipRemoveIcon: string;
|
|
23
|
+
/**
|
|
24
|
+
* Whether or not the input should be disabled
|
|
25
|
+
*/
|
|
26
|
+
accessor disabled: boolean;
|
|
27
|
+
private accessor hasLeadingItems;
|
|
28
|
+
private accessor hasTrailingItems;
|
|
29
|
+
private readonly leadingSlotElements;
|
|
30
|
+
private readonly trailingSlotElements;
|
|
31
|
+
static styles: import("lit").CSSResult[];
|
|
32
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
33
|
+
}
|
|
34
|
+
//# sourceMappingURL=chip.d.ts.map
|
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import '@material/web/icon/icon';
|
|
3
|
+
import '@material/web/iconbutton/icon-button';
|
|
4
|
+
import '@material/web/ripple/ripple';
|
|
5
|
+
import '@material/web/focus/md-focus-ring';
|
|
6
|
+
import { css, html, LitElement } from 'lit';
|
|
7
|
+
import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
|
|
8
|
+
import { ellipsis } from '@leavittsoftware/web/titanium/styles/ellipsis';
|
|
9
|
+
let TitaniumChip = class TitaniumChip extends LitElement {
|
|
10
|
+
#label_accessor_storage;
|
|
11
|
+
/**
|
|
12
|
+
* Label / text of the chip
|
|
13
|
+
*/
|
|
14
|
+
get label() { return this.#label_accessor_storage; }
|
|
15
|
+
set label(value) { this.#label_accessor_storage = value; }
|
|
16
|
+
#selected_accessor_storage;
|
|
17
|
+
/**
|
|
18
|
+
* When true, the chip is selected
|
|
19
|
+
*/
|
|
20
|
+
get selected() { return this.#selected_accessor_storage; }
|
|
21
|
+
set selected(value) { this.#selected_accessor_storage = value; }
|
|
22
|
+
#inputChip_accessor_storage;
|
|
23
|
+
/**
|
|
24
|
+
* When true, trailing slot is replaced with a remove icon button
|
|
25
|
+
*/
|
|
26
|
+
get inputChip() { return this.#inputChip_accessor_storage; }
|
|
27
|
+
set inputChip(value) { this.#inputChip_accessor_storage = value; }
|
|
28
|
+
#inputChipRemoveIcon_accessor_storage = 'close';
|
|
29
|
+
/**
|
|
30
|
+
* Icon name of the remove icon chip
|
|
31
|
+
*/
|
|
32
|
+
get inputChipRemoveIcon() { return this.#inputChipRemoveIcon_accessor_storage; }
|
|
33
|
+
set inputChipRemoveIcon(value) { this.#inputChipRemoveIcon_accessor_storage = value; }
|
|
34
|
+
#disabled_accessor_storage = false;
|
|
35
|
+
/**
|
|
36
|
+
* Whether or not the input should be disabled
|
|
37
|
+
*/
|
|
38
|
+
get disabled() { return this.#disabled_accessor_storage; }
|
|
39
|
+
set disabled(value) { this.#disabled_accessor_storage = value; }
|
|
40
|
+
#hasLeadingItems_accessor_storage = false;
|
|
41
|
+
get hasLeadingItems() { return this.#hasLeadingItems_accessor_storage; }
|
|
42
|
+
set hasLeadingItems(value) { this.#hasLeadingItems_accessor_storage = value; }
|
|
43
|
+
#hasTrailingItems_accessor_storage = false;
|
|
44
|
+
get hasTrailingItems() { return this.#hasTrailingItems_accessor_storage; }
|
|
45
|
+
set hasTrailingItems(value) { this.#hasTrailingItems_accessor_storage = value; }
|
|
46
|
+
static { this.styles = [
|
|
47
|
+
ellipsis,
|
|
48
|
+
css `
|
|
49
|
+
:host {
|
|
50
|
+
display: grid;
|
|
51
|
+
height: 32px;
|
|
52
|
+
width: auto;
|
|
53
|
+
|
|
54
|
+
font-size: 14px;
|
|
55
|
+
font-weight: 500;
|
|
56
|
+
line-height: 20px;
|
|
57
|
+
|
|
58
|
+
text-align: left;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
button {
|
|
62
|
+
display: grid;
|
|
63
|
+
align-items: center;
|
|
64
|
+
align-content: center;
|
|
65
|
+
|
|
66
|
+
position: relative;
|
|
67
|
+
|
|
68
|
+
-webkit-appearance: button;
|
|
69
|
+
cursor: pointer;
|
|
70
|
+
|
|
71
|
+
font: inherit;
|
|
72
|
+
margin: 0;
|
|
73
|
+
border: 0;
|
|
74
|
+
|
|
75
|
+
box-sizing: border-box;
|
|
76
|
+
height: inherit;
|
|
77
|
+
text-align: inherit;
|
|
78
|
+
|
|
79
|
+
border: 1px solid var(--titanium-chip-outline-color, var(--md-sys-color-outline));
|
|
80
|
+
border-radius: 8px;
|
|
81
|
+
--md-focus-ring-shape: 8px;
|
|
82
|
+
|
|
83
|
+
color: inherit;
|
|
84
|
+
background: inherit;
|
|
85
|
+
width: inherit;
|
|
86
|
+
|
|
87
|
+
outline: none;
|
|
88
|
+
|
|
89
|
+
font-size: inherit;
|
|
90
|
+
font-weight: inherit;
|
|
91
|
+
line-height: inherit;
|
|
92
|
+
letter-spacing: inherit;
|
|
93
|
+
|
|
94
|
+
padding: 0 12px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
:host([has-leading-items]) button {
|
|
98
|
+
grid: 'icon label' / auto 1fr;
|
|
99
|
+
padding-left: 8px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
:host([input-chip]) button,
|
|
103
|
+
:host([has-trailing-items]) butt on {
|
|
104
|
+
grid: 'label trailing' / 1fr auto;
|
|
105
|
+
padding-right: 4px;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
:host([has-leading-items][input-chip]) button,
|
|
109
|
+
:host([has-trailing-items][has-leading-items]) button {
|
|
110
|
+
grid: 'icon label trailing' / auto 1fr auto;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
main[label] {
|
|
114
|
+
font-size: inherit;
|
|
115
|
+
font-weight: inherit;
|
|
116
|
+
line-height: inherit;
|
|
117
|
+
letter-spacing: inherit;
|
|
118
|
+
text-align: inherit;
|
|
119
|
+
|
|
120
|
+
padding: 6px 0;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
[name='icon']::slotted(md-icon) {
|
|
124
|
+
color: var(--md-sys-color-primary);
|
|
125
|
+
--md-icon-size: 18px;
|
|
126
|
+
padding-right: var(--titanium-chip-with-leading-icon-leading-space, 8px);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
[name='icon']::slotted(profile-picture) {
|
|
130
|
+
padding-right: var(--titanium-chip-with-leading-icon-leading-space, 8px);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
md-icon-button {
|
|
134
|
+
--md-icon-button-icon-size: 18px;
|
|
135
|
+
--md-icon-button-state-layer-height: 24px;
|
|
136
|
+
--md-icon-button-state-layer-width: 24px;
|
|
137
|
+
margin-left: 4px;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
:host([selected]) button {
|
|
141
|
+
background: var(--md-sys-color-primary);
|
|
142
|
+
color: var(--md-sys-color-on-primary);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
:host([selected]) md-icon {
|
|
146
|
+
color: var(--md-sys-color-on-primary);
|
|
147
|
+
}
|
|
148
|
+
`,
|
|
149
|
+
]; }
|
|
150
|
+
render() {
|
|
151
|
+
return html `<button part="button">
|
|
152
|
+
<md-ripple ?disabled=${this.disabled}></md-ripple>
|
|
153
|
+
<md-focus-ring ></md-focus-ring>
|
|
154
|
+
<slot name="icon" @slotchange=${() => (this.hasLeadingItems = this.leadingSlotElements.length > 0)}></slot>
|
|
155
|
+
<main label ellipsis><slot name="label">${this.label}</slot></main>
|
|
156
|
+
|
|
157
|
+
${this.inputChip
|
|
158
|
+
? html `<md-icon-button
|
|
159
|
+
@click=${(e) => {
|
|
160
|
+
e.stopPropagation();
|
|
161
|
+
this.dispatchEvent(new Event('remove'));
|
|
162
|
+
}}
|
|
163
|
+
><md-icon>${this.inputChipRemoveIcon}</md-icon></md-icon-button
|
|
164
|
+
>`
|
|
165
|
+
: html `<slot name="trailing" @slotchange=${() => (this.hasTrailingItems = this.trailingSlotElements.length > 0)}></slot>`}
|
|
166
|
+
</slot>
|
|
167
|
+
</button>`;
|
|
168
|
+
}
|
|
169
|
+
};
|
|
170
|
+
__decorate([
|
|
171
|
+
property({ type: String })
|
|
172
|
+
], TitaniumChip.prototype, "label", null);
|
|
173
|
+
__decorate([
|
|
174
|
+
property({ type: Boolean, reflect: true })
|
|
175
|
+
], TitaniumChip.prototype, "selected", null);
|
|
176
|
+
__decorate([
|
|
177
|
+
property({ type: Boolean, reflect: true, attribute: 'input-chip' })
|
|
178
|
+
], TitaniumChip.prototype, "inputChip", null);
|
|
179
|
+
__decorate([
|
|
180
|
+
property({ type: String })
|
|
181
|
+
], TitaniumChip.prototype, "inputChipRemoveIcon", null);
|
|
182
|
+
__decorate([
|
|
183
|
+
property({ type: Boolean, reflect: true })
|
|
184
|
+
], TitaniumChip.prototype, "disabled", null);
|
|
185
|
+
__decorate([
|
|
186
|
+
property({ type: Boolean, reflect: true, attribute: 'has-leading-items' })
|
|
187
|
+
], TitaniumChip.prototype, "hasLeadingItems", null);
|
|
188
|
+
__decorate([
|
|
189
|
+
property({ type: Boolean, reflect: true, attribute: 'has-trailing-items' })
|
|
190
|
+
], TitaniumChip.prototype, "hasTrailingItems", null);
|
|
191
|
+
__decorate([
|
|
192
|
+
queryAssignedElements({ slot: 'icon' })
|
|
193
|
+
], TitaniumChip.prototype, "leadingSlotElements", void 0);
|
|
194
|
+
__decorate([
|
|
195
|
+
queryAssignedElements({ slot: 'trailing' })
|
|
196
|
+
], TitaniumChip.prototype, "trailingSlotElements", void 0);
|
|
197
|
+
TitaniumChip = __decorate([
|
|
198
|
+
customElement('titanium-chip')
|
|
199
|
+
], TitaniumChip);
|
|
200
|
+
export { TitaniumChip };
|
|
201
|
+
//# sourceMappingURL=chip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"chip.js","sourceRoot":"","sources":["chip.ts"],"names":[],"mappings":"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"}
|