@vandeurenglenn/lite-elements 0.3.34 → 0.3.35
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/exports/bundle/dialog.js +6 -6
- package/exports/bundle/fab.js +146 -0
- package/exports/dialog.js +6 -6
- package/exports/fab/fab.d.ts +7 -0
- package/exports/fab.js +189 -0
- package/package.json +9 -1
package/exports/bundle/dialog.js
CHANGED
|
@@ -121,21 +121,21 @@ import{_ as e,a as t,e as s}from"./custom-element-BOdKJYdz.js";import{t as o,j a
|
|
|
121
121
|
<custom-elevation level=${this.fullscreen?0:3}></custom-elevation>
|
|
122
122
|
<slot name="hero-icon"></slot>
|
|
123
123
|
<slot name="supporting-text"></slot>
|
|
124
|
-
<slot name="header">
|
|
125
|
-
<flex-row class="header" center
|
|
124
|
+
<slot name="header">
|
|
125
|
+
<flex-row class="header" center>
|
|
126
126
|
<flex-row center style="width: 100%">
|
|
127
127
|
<slot name="header-start">
|
|
128
128
|
${this.fullscreen?n`<custom-button @click=${this._close}
|
|
129
|
-
|
|
130
|
-
|
|
129
|
+
><custom-icon slot="icon">close</custom-icon></custom-button
|
|
130
|
+
>`:""}
|
|
131
131
|
</slot>
|
|
132
132
|
<slot name="title"></slot>
|
|
133
133
|
<flex-it></flex-it>
|
|
134
134
|
<slot name="header-end">
|
|
135
135
|
${this.fullscreen?n`<slot name="actions"></slot>`:""}
|
|
136
136
|
${this.fullscreen?"":n`<custom-button @click=${this._close}
|
|
137
|
-
|
|
138
|
-
|
|
137
|
+
><custom-icon slot="icon">close</custom-icon></custom-button
|
|
138
|
+
>`}
|
|
139
139
|
</slot>
|
|
140
140
|
</flex-row>
|
|
141
141
|
</flex-row>
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import{_ as e,a as t,e as o}from"./custom-element-BOdKJYdz.js";import{t as a,j as r,v as s,D as l}from"./property-Do5-bKhz.js";import"./elevation.js";let n=(()=>{let n,i,c,d=[o("custom-fab")],y=[],m=l,p=[],v=[];return class extends m{static{i=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;c=[a({attribute:"type",reflect:!0})],e(this,null,c,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:e=>"type"in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},p,v),e(null,n={value:i},d,{kind:"class",name:i.name,metadata:t},null,y),i=n.value,t&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,p,"normal");get type(){return this.#e}set type(e){this.#e=e}static styles=[r`
|
|
2
|
+
:host {
|
|
3
|
+
color: var(--custom-fab-color, --md-sys-color-on-background);
|
|
4
|
+
display: flex;
|
|
5
|
+
|
|
6
|
+
height: 56px;
|
|
7
|
+
width: 56px;
|
|
8
|
+
border-radius: var(--md-sys-shape-corner-extra-large);
|
|
9
|
+
position: relative;
|
|
10
|
+
pointer-events: auto;
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
padding: 16px;
|
|
14
|
+
|
|
15
|
+
--elevation-level: 0;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
button {
|
|
19
|
+
box-sizing: border-box;
|
|
20
|
+
border: none;
|
|
21
|
+
background: transparent;
|
|
22
|
+
color: inherit;
|
|
23
|
+
align-items: center;
|
|
24
|
+
justify-content: center;
|
|
25
|
+
user-select: none;
|
|
26
|
+
outline: none;
|
|
27
|
+
cursor: pointer;
|
|
28
|
+
border-radius: inherit;
|
|
29
|
+
padding: none;
|
|
30
|
+
width: inherit;
|
|
31
|
+
height: inherit;
|
|
32
|
+
display: flex;
|
|
33
|
+
pointer-events: none;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
::slotted(*) {
|
|
37
|
+
font-family: var(--md-sys-typescale-label-large-font-family-name);
|
|
38
|
+
font-style: var(--md-sys-typescale-label-large-font-family-style);
|
|
39
|
+
font-weight: var(--md-sys-typescale-label-large-font-weight);
|
|
40
|
+
font-size: var(--md-sys-typescale-label-large-font-size);
|
|
41
|
+
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
42
|
+
line-height: var(--md-sys-typescale-label-large-height);
|
|
43
|
+
text-transform: var(--md-sys-typescale-label-large-text-transform);
|
|
44
|
+
text-decoration: var(--md-sys-typescale-label-large-text-decoration);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
:host([type='filled']),
|
|
48
|
+
:host([type='filled']) ::slotted(*) {
|
|
49
|
+
color: var(--md-sys-color-on-primary);
|
|
50
|
+
fill: var(--md-sys-color-on-primary);
|
|
51
|
+
background: var(--md-sys-color-primary);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
:host([type='outlined']),
|
|
55
|
+
:host([type='outlined']) ::slotted(*) {
|
|
56
|
+
color: var(--md-sys-color-on-surface);
|
|
57
|
+
fill: var(--md-sys-color-on-surface);
|
|
58
|
+
background: var(--md-sys-color-surface);
|
|
59
|
+
border: solid 1px;
|
|
60
|
+
border-color: var(--md-sys-color-outline);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
:host([type='elevated']),
|
|
64
|
+
:host([type='elevated']) ::slotted(*) {
|
|
65
|
+
color: var(--md-sys-color-primary);
|
|
66
|
+
fill: var(--md-sys-color-primary);
|
|
67
|
+
background: var(--md-sys-color-surface-container-low);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
:host([type='tertiary']),
|
|
71
|
+
:host([type='tertiary']) ::slotted(*) {
|
|
72
|
+
background: var(--md-sys-color-tertiary);
|
|
73
|
+
color: var(--md-sys-color-on-tertiary);
|
|
74
|
+
fill: var(--md-sys-color-on-tertiary);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
:host([type='tonal']),
|
|
78
|
+
:host([type='tonal']) ::slotted(*) {
|
|
79
|
+
background: var(--md-sys-color-secondary-container);
|
|
80
|
+
color: var(--md-sys-color-on-seconday-container);
|
|
81
|
+
fill: var(--md-sys-color-on-seconday-container);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
custom-elevation {
|
|
85
|
+
--md-elevation-level: var(--elevation-level);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
custom-elevation {
|
|
89
|
+
--elevation-level: 1;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
:host([type='normal']) button {
|
|
93
|
+
align-items: center;
|
|
94
|
+
justify-content: center;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
:host([type='extended']) button {
|
|
98
|
+
align-items: center;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
:host([type='extended']) {
|
|
102
|
+
min-width: 80px;
|
|
103
|
+
width: fit-content;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
:not([name='icon']) ::slotted(*) {
|
|
107
|
+
margin-left: 24px;
|
|
108
|
+
margin-right: 24px;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
:host([has-icon][has-label]) .label {
|
|
112
|
+
padding-left: 8px;
|
|
113
|
+
padding-right: 24px;
|
|
114
|
+
}
|
|
115
|
+
:host([has-icon][has-label]) slot[name='icon']::slotted(*) {
|
|
116
|
+
padding-left: 16px;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
:host([disabled]) .label,
|
|
120
|
+
:host([disabled]) slot[name='icon']::slotted(*) {
|
|
121
|
+
opacity: 0.38;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
::slotted(*) {
|
|
125
|
+
pointer-events: none;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
:host(:focus),
|
|
129
|
+
:host(:hover) {
|
|
130
|
+
--elevation-level: 2;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
:host(:active) {
|
|
134
|
+
--elevation-level: 0;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
button * {
|
|
138
|
+
pointer-events: none;
|
|
139
|
+
}
|
|
140
|
+
`];render(){return s`
|
|
141
|
+
<button>
|
|
142
|
+
<custom-elevation></custom-elevation>
|
|
143
|
+
<slot name="icon"></slot>
|
|
144
|
+
<slot></slot>
|
|
145
|
+
</button>
|
|
146
|
+
`}constructor(){super(...arguments),t(this,v)}static{t(i,y)}},i})();export{n as CustomButton};
|
package/exports/dialog.js
CHANGED
|
@@ -215,14 +215,14 @@ let CustomDialog = (() => {
|
|
|
215
215
|
<custom-elevation level=${this.fullscreen ? 0 : 3}></custom-elevation>
|
|
216
216
|
<slot name="hero-icon"></slot>
|
|
217
217
|
<slot name="supporting-text"></slot>
|
|
218
|
-
<slot name="header">
|
|
219
|
-
<flex-row class="header" center
|
|
218
|
+
<slot name="header">
|
|
219
|
+
<flex-row class="header" center>
|
|
220
220
|
<flex-row center style="width: 100%">
|
|
221
221
|
<slot name="header-start">
|
|
222
222
|
${this.fullscreen
|
|
223
223
|
? html `<custom-button @click=${this._close}
|
|
224
|
-
|
|
225
|
-
|
|
224
|
+
><custom-icon slot="icon">close</custom-icon></custom-button
|
|
225
|
+
>`
|
|
226
226
|
: ''}
|
|
227
227
|
</slot>
|
|
228
228
|
<slot name="title"></slot>
|
|
@@ -232,8 +232,8 @@ let CustomDialog = (() => {
|
|
|
232
232
|
${this.fullscreen
|
|
233
233
|
? ''
|
|
234
234
|
: html `<custom-button @click=${this._close}
|
|
235
|
-
|
|
236
|
-
|
|
235
|
+
><custom-icon slot="icon">close</custom-icon></custom-button
|
|
236
|
+
>`}
|
|
237
237
|
</slot>
|
|
238
238
|
</flex-row>
|
|
239
239
|
</flex-row>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { LiteElement } from '@vandeurenglenn/lite';
|
|
2
|
+
import '../elevation/elevation.js';
|
|
3
|
+
export declare class CustomButton extends LiteElement {
|
|
4
|
+
accessor type: 'normal' | 'extended';
|
|
5
|
+
static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
|
|
6
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
7
|
+
}
|
package/exports/fab.js
ADDED
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-CFl_-KPR.js';
|
|
2
|
+
import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
|
|
3
|
+
import './elevation.js';
|
|
4
|
+
|
|
5
|
+
let CustomButton = (() => {
|
|
6
|
+
let _classDecorators = [customElement('custom-fab')];
|
|
7
|
+
let _classDescriptor;
|
|
8
|
+
let _classExtraInitializers = [];
|
|
9
|
+
let _classThis;
|
|
10
|
+
let _classSuper = LiteElement;
|
|
11
|
+
let _type_decorators;
|
|
12
|
+
let _type_initializers = [];
|
|
13
|
+
let _type_extraInitializers = [];
|
|
14
|
+
(class extends _classSuper {
|
|
15
|
+
static { _classThis = this; }
|
|
16
|
+
static {
|
|
17
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
18
|
+
_type_decorators = [property({ attribute: 'type', reflect: true })];
|
|
19
|
+
__esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
|
|
20
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
21
|
+
_classThis = _classDescriptor.value;
|
|
22
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
23
|
+
}
|
|
24
|
+
#type_accessor_storage = __runInitializers(this, _type_initializers, 'normal');
|
|
25
|
+
get type() { return this.#type_accessor_storage; }
|
|
26
|
+
set type(value) { this.#type_accessor_storage = value; }
|
|
27
|
+
static styles = [
|
|
28
|
+
css `
|
|
29
|
+
:host {
|
|
30
|
+
color: var(--custom-fab-color, --md-sys-color-on-background);
|
|
31
|
+
display: flex;
|
|
32
|
+
|
|
33
|
+
height: 56px;
|
|
34
|
+
width: 56px;
|
|
35
|
+
border-radius: var(--md-sys-shape-corner-extra-large);
|
|
36
|
+
position: relative;
|
|
37
|
+
pointer-events: auto;
|
|
38
|
+
cursor: pointer;
|
|
39
|
+
box-sizing: border-box;
|
|
40
|
+
padding: 16px;
|
|
41
|
+
|
|
42
|
+
--elevation-level: 0;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
button {
|
|
46
|
+
box-sizing: border-box;
|
|
47
|
+
border: none;
|
|
48
|
+
background: transparent;
|
|
49
|
+
color: inherit;
|
|
50
|
+
align-items: center;
|
|
51
|
+
justify-content: center;
|
|
52
|
+
user-select: none;
|
|
53
|
+
outline: none;
|
|
54
|
+
cursor: pointer;
|
|
55
|
+
border-radius: inherit;
|
|
56
|
+
padding: none;
|
|
57
|
+
width: inherit;
|
|
58
|
+
height: inherit;
|
|
59
|
+
display: flex;
|
|
60
|
+
pointer-events: none;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
::slotted(*) {
|
|
64
|
+
font-family: var(--md-sys-typescale-label-large-font-family-name);
|
|
65
|
+
font-style: var(--md-sys-typescale-label-large-font-family-style);
|
|
66
|
+
font-weight: var(--md-sys-typescale-label-large-font-weight);
|
|
67
|
+
font-size: var(--md-sys-typescale-label-large-font-size);
|
|
68
|
+
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
69
|
+
line-height: var(--md-sys-typescale-label-large-height);
|
|
70
|
+
text-transform: var(--md-sys-typescale-label-large-text-transform);
|
|
71
|
+
text-decoration: var(--md-sys-typescale-label-large-text-decoration);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
:host([type='filled']),
|
|
75
|
+
:host([type='filled']) ::slotted(*) {
|
|
76
|
+
color: var(--md-sys-color-on-primary);
|
|
77
|
+
fill: var(--md-sys-color-on-primary);
|
|
78
|
+
background: var(--md-sys-color-primary);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
:host([type='outlined']),
|
|
82
|
+
:host([type='outlined']) ::slotted(*) {
|
|
83
|
+
color: var(--md-sys-color-on-surface);
|
|
84
|
+
fill: var(--md-sys-color-on-surface);
|
|
85
|
+
background: var(--md-sys-color-surface);
|
|
86
|
+
border: solid 1px;
|
|
87
|
+
border-color: var(--md-sys-color-outline);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
:host([type='elevated']),
|
|
91
|
+
:host([type='elevated']) ::slotted(*) {
|
|
92
|
+
color: var(--md-sys-color-primary);
|
|
93
|
+
fill: var(--md-sys-color-primary);
|
|
94
|
+
background: var(--md-sys-color-surface-container-low);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
:host([type='tertiary']),
|
|
98
|
+
:host([type='tertiary']) ::slotted(*) {
|
|
99
|
+
background: var(--md-sys-color-tertiary);
|
|
100
|
+
color: var(--md-sys-color-on-tertiary);
|
|
101
|
+
fill: var(--md-sys-color-on-tertiary);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
:host([type='tonal']),
|
|
105
|
+
:host([type='tonal']) ::slotted(*) {
|
|
106
|
+
background: var(--md-sys-color-secondary-container);
|
|
107
|
+
color: var(--md-sys-color-on-seconday-container);
|
|
108
|
+
fill: var(--md-sys-color-on-seconday-container);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
custom-elevation {
|
|
112
|
+
--md-elevation-level: var(--elevation-level);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
custom-elevation {
|
|
116
|
+
--elevation-level: 1;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
:host([type='normal']) button {
|
|
120
|
+
align-items: center;
|
|
121
|
+
justify-content: center;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
:host([type='extended']) button {
|
|
125
|
+
align-items: center;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
:host([type='extended']) {
|
|
129
|
+
min-width: 80px;
|
|
130
|
+
width: fit-content;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
:not([name='icon']) ::slotted(*) {
|
|
134
|
+
margin-left: 24px;
|
|
135
|
+
margin-right: 24px;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
:host([has-icon][has-label]) .label {
|
|
139
|
+
padding-left: 8px;
|
|
140
|
+
padding-right: 24px;
|
|
141
|
+
}
|
|
142
|
+
:host([has-icon][has-label]) slot[name='icon']::slotted(*) {
|
|
143
|
+
padding-left: 16px;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
:host([disabled]) .label,
|
|
147
|
+
:host([disabled]) slot[name='icon']::slotted(*) {
|
|
148
|
+
opacity: 0.38;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
::slotted(*) {
|
|
152
|
+
pointer-events: none;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
:host(:focus),
|
|
156
|
+
:host(:hover) {
|
|
157
|
+
--elevation-level: 2;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
:host(:active) {
|
|
161
|
+
--elevation-level: 0;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
button * {
|
|
165
|
+
pointer-events: none;
|
|
166
|
+
}
|
|
167
|
+
`
|
|
168
|
+
];
|
|
169
|
+
render() {
|
|
170
|
+
return html `
|
|
171
|
+
<button>
|
|
172
|
+
<custom-elevation></custom-elevation>
|
|
173
|
+
<slot name="icon"></slot>
|
|
174
|
+
<slot></slot>
|
|
175
|
+
</button>
|
|
176
|
+
`;
|
|
177
|
+
}
|
|
178
|
+
constructor() {
|
|
179
|
+
super(...arguments);
|
|
180
|
+
__runInitializers(this, _type_extraInitializers);
|
|
181
|
+
}
|
|
182
|
+
static {
|
|
183
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
184
|
+
}
|
|
185
|
+
});
|
|
186
|
+
return _classThis;
|
|
187
|
+
})();
|
|
188
|
+
|
|
189
|
+
export { CustomButton };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vandeurenglenn/lite-elements",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.35",
|
|
4
4
|
"description": "set of lite elements following Material Design 3 spec",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
@@ -209,6 +209,14 @@
|
|
|
209
209
|
"import": "./exports/elevation.js",
|
|
210
210
|
"types": "./exports/elevation/elevation.d.ts"
|
|
211
211
|
},
|
|
212
|
+
"./fab": {
|
|
213
|
+
"import": "./exports/fab.js",
|
|
214
|
+
"types": "./exports/fab/fab.d.ts"
|
|
215
|
+
},
|
|
216
|
+
"./fab.js": {
|
|
217
|
+
"import": "./exports/fab.js",
|
|
218
|
+
"types": "./exports/fab/fab.d.ts"
|
|
219
|
+
},
|
|
212
220
|
"./file-reader-mixin": {
|
|
213
221
|
"import": "./exports/file-reader-mixin.js",
|
|
214
222
|
"types": "./exports/mixins/file-reader-mixin.d.ts"
|