@universal-material/web 3.6.7 → 3.6.8
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/chip-field/chip-field.styles.d.ts.map +1 -1
- package/chip-field/chip-field.styles.js +1 -0
- package/chip-field/chip-field.styles.js.map +1 -1
- package/custom-elements.json +12047 -11952
- package/datepicker/datepicker.d.ts +8 -0
- package/datepicker/datepicker.d.ts.map +1 -1
- package/datepicker/datepicker.js +9 -1
- package/datepicker/datepicker.js.map +1 -1
- package/overflow-menu/overflow-menu.d.ts +3 -0
- package/overflow-menu/overflow-menu.d.ts.map +1 -1
- package/overflow-menu/overflow-menu.js +100 -45
- package/overflow-menu/overflow-menu.js.map +1 -1
- package/overflow-menu/overflow-menu.styles.d.ts.map +1 -1
- package/overflow-menu/overflow-menu.styles.js +20 -11
- package/overflow-menu/overflow-menu.styles.js.map +1 -1
- package/package.json +2 -1
- package/vscode.html-custom-data.json +289 -274
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../src/datepicker/datepicker.ts"],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../src/datepicker/datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC,qBACa,YAAa,SAAQ,UAAU;CAE3C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,YAAY,CAAC;KAC9B;CACF"}
|
package/datepicker/datepicker.js
CHANGED
|
@@ -1,2 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { LitElement } from 'lit';
|
|
3
|
+
import { customElement } from 'lit/decorators.js';
|
|
4
|
+
let UmDatepicker = class UmDatepicker extends LitElement {
|
|
5
|
+
};
|
|
6
|
+
UmDatepicker = __decorate([
|
|
7
|
+
customElement('u-datepicker')
|
|
8
|
+
], UmDatepicker);
|
|
9
|
+
export { UmDatepicker };
|
|
2
10
|
//# sourceMappingURL=datepicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datepicker.js","sourceRoot":"","sources":["../../src/datepicker/datepicker.ts"],"names":[],"mappings":"","sourcesContent":[""]}
|
|
1
|
+
{"version":3,"file":"datepicker.js","sourceRoot":"","sources":["../../src/datepicker/datepicker.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;CAE3C,CAAA;AAFY,YAAY;IADxB,aAAa,CAAC,cAAc,CAAC;GACjB,YAAY,CAExB","sourcesContent":["import { LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('u-datepicker')\nexport class UmDatepicker extends LitElement {\n\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-datepicker': UmDatepicker;\n }\n}\n"]}
|
|
@@ -5,6 +5,9 @@ export declare class OverflowMenu extends LitElement {
|
|
|
5
5
|
static styles: import("lit").CSSResult;
|
|
6
6
|
_showMenu: boolean;
|
|
7
7
|
menu?: UmMenu;
|
|
8
|
+
set anchor(value: HTMLElement | null);
|
|
9
|
+
get anchor(): HTMLElement | null;
|
|
10
|
+
constructor();
|
|
8
11
|
connectedCallback(): void;
|
|
9
12
|
disconnectedCallback(): void;
|
|
10
13
|
protected render(): HTMLTemplateResult;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overflow-menu.d.ts","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"overflow-menu.d.ts","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAU,MAAM,KAAK,CAAC;AAMnE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAIzC,qBACa,YAAa,SAAQ,UAAU;;IAC1C,OAAgB,MAAM,0BAAU;IAMvB,SAAS,UAAS;IAEV,IAAI,CAAC,EAAE,MAAM,CAAC;IAG/B,IACI,MAAM,CAAC,KAAK,EAQF,WAAW,GAAG,IAAI,AARhB,EAMf;IAED,IAAI,MAAM,IAAI,WAAW,GAAG,IAAI,CAE/B;;IAaQ,iBAAiB;IAMjB,oBAAoB;cAwEV,MAAM,IAAI,kBAAkB;CAsDhD"}
|
|
@@ -1,51 +1,82 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { html, LitElement } from 'lit';
|
|
3
|
-
import { customElement, query, state } from 'lit/decorators.js';
|
|
2
|
+
import { html, LitElement, render } from 'lit';
|
|
3
|
+
import { customElement, property, query, state } from 'lit/decorators.js';
|
|
4
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
4
5
|
import { map } from 'lit/directives/map.js';
|
|
5
6
|
import { when } from 'lit/directives/when.js';
|
|
6
7
|
import { styles } from './overflow-menu.styles.js';
|
|
7
8
|
let OverflowMenu = class OverflowMenu extends LitElement {
|
|
9
|
+
static { this.styles = styles; }
|
|
10
|
+
#resizeObserver;
|
|
11
|
+
#items;
|
|
12
|
+
#collapsedItems;
|
|
13
|
+
#anchor;
|
|
14
|
+
set anchor(value) {
|
|
15
|
+
this.#anchor = value;
|
|
16
|
+
this.#invalidate();
|
|
17
|
+
this.#resizeObserver.disconnect();
|
|
18
|
+
this.#resizeObserver.observe(this.anchor);
|
|
19
|
+
}
|
|
20
|
+
get anchor() {
|
|
21
|
+
return this.#anchor ?? this;
|
|
22
|
+
}
|
|
23
|
+
#menuItemsContainer;
|
|
24
|
+
#updateMenusTimeout;
|
|
8
25
|
constructor() {
|
|
9
|
-
super(
|
|
10
|
-
this.#resizeObserver =
|
|
26
|
+
super();
|
|
27
|
+
this.#resizeObserver = new ResizeObserver(() => this.#invalidate());
|
|
11
28
|
this.#items = [];
|
|
12
29
|
this.#collapsedItems = [];
|
|
13
30
|
this._showMenu = false;
|
|
31
|
+
this.#anchor = null;
|
|
32
|
+
this.#menuItemsContainer = document.createElement('div');
|
|
14
33
|
this.#updateMenusTimeout = 0;
|
|
34
|
+
this.#menuItemsContainer.slot = 'menu-items';
|
|
35
|
+
setTimeout(() => this.appendChild(this.#menuItemsContainer));
|
|
15
36
|
}
|
|
16
|
-
static { this.styles = styles; }
|
|
17
|
-
#resizeObserver;
|
|
18
|
-
#items;
|
|
19
|
-
#collapsedItems;
|
|
20
|
-
#updateMenusTimeout;
|
|
21
37
|
connectedCallback() {
|
|
22
38
|
super.connectedCallback();
|
|
23
|
-
this
|
|
24
|
-
this.#resizeObserver.observe(this);
|
|
25
|
-
this.#updateMenus();
|
|
39
|
+
this.anchor = this.anchor;
|
|
26
40
|
}
|
|
27
41
|
disconnectedCallback() {
|
|
28
42
|
super.disconnectedCallback();
|
|
29
43
|
this.#resizeObserver.disconnect();
|
|
30
|
-
this.#resizeObserver = null;
|
|
31
44
|
}
|
|
32
|
-
#
|
|
45
|
+
#invalidate() {
|
|
46
|
+
this.#updateMenuToggleVisibility();
|
|
47
|
+
this.#updateMenuItems();
|
|
48
|
+
}
|
|
49
|
+
#updateMenuToggleVisibility() {
|
|
50
|
+
let collapsedCount = 0;
|
|
51
|
+
for (const item of this.#items) {
|
|
52
|
+
if (item.offsetTop === this.offsetTop) {
|
|
53
|
+
break;
|
|
54
|
+
}
|
|
55
|
+
collapsedCount++;
|
|
56
|
+
}
|
|
57
|
+
const firstItem = this.#items[0];
|
|
58
|
+
const showMenu = !!firstItem && this._showMenu
|
|
59
|
+
? collapsedCount > 1
|
|
60
|
+
: collapsedCount > 0;
|
|
61
|
+
if (this._showMenu !== showMenu) {
|
|
62
|
+
this._showMenu = showMenu;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
#updateMenuItems() {
|
|
66
|
+
if (!this._showMenu) {
|
|
67
|
+
this.#collapsedItems.length = 0;
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
33
70
|
clearTimeout(this.#updateMenusTimeout);
|
|
34
71
|
this.#updateMenusTimeout = setTimeout(() => {
|
|
35
|
-
let firstWrapperMenu = true;
|
|
36
72
|
const previousCollapsedLength = this.#collapsedItems.length;
|
|
37
73
|
this.#collapsedItems.length = 0;
|
|
38
74
|
for (const item of this.#items) {
|
|
39
75
|
if (item.offsetTop === this.offsetTop) {
|
|
40
|
-
|
|
41
|
-
}
|
|
42
|
-
if (firstWrapperMenu && !this._showMenu) {
|
|
43
|
-
this.#collapsedItems.push(item.previousSibling);
|
|
76
|
+
break;
|
|
44
77
|
}
|
|
45
78
|
this.#collapsedItems.push(item);
|
|
46
|
-
firstWrapperMenu = false;
|
|
47
79
|
}
|
|
48
|
-
this._showMenu = this.#collapsedItems.length > 1;
|
|
49
80
|
if (previousCollapsedLength !== this.#collapsedItems.length) {
|
|
50
81
|
this.requestUpdate();
|
|
51
82
|
}
|
|
@@ -53,38 +84,59 @@ let OverflowMenu = class OverflowMenu extends LitElement {
|
|
|
53
84
|
}
|
|
54
85
|
#handleSlotChange(e) {
|
|
55
86
|
const slot = e.target;
|
|
56
|
-
this.#items = slot
|
|
57
|
-
|
|
87
|
+
this.#items = slot
|
|
88
|
+
.assignedElements()
|
|
89
|
+
.filter(el => el.tagName === 'U-OVERFLOW-MENU-ITEM')
|
|
90
|
+
.reverse();
|
|
91
|
+
this.#invalidate();
|
|
58
92
|
}
|
|
59
93
|
render() {
|
|
94
|
+
this.#renderMenuItems();
|
|
95
|
+
const classes = { 'show-menu': this._showMenu };
|
|
60
96
|
return html `
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
97
|
+
<div class="container ${classMap(classes)}">
|
|
98
|
+
<div class="items-set">
|
|
99
|
+
<div class="empty-space"></div>
|
|
64
100
|
<slot @slotchange="${this.#handleSlotChange}"></slot>
|
|
65
|
-
</
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
101
|
+
</div>
|
|
102
|
+
${when(this._showMenu, () => html `
|
|
103
|
+
<div class="inner-menu">
|
|
104
|
+
<u-icon-button @click=${{ handleEvent: () => this.menu?.toggle() }}>
|
|
105
|
+
<slot name="icon">
|
|
106
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em"
|
|
107
|
+
fill="currentColor">
|
|
108
|
+
<path
|
|
109
|
+
d="M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0
|
|
73
110
|
33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0
|
|
74
111
|
33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z"/>
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
`)}
|
|
85
|
-
</u-button-set>
|
|
112
|
+
</svg>
|
|
113
|
+
</slot>
|
|
114
|
+
</u-icon-button>
|
|
115
|
+
<u-menu anchor-corner="end-end">
|
|
116
|
+
<slot name="menu-items"></slot>
|
|
117
|
+
</u-menu>
|
|
118
|
+
</div>
|
|
119
|
+
`)}
|
|
120
|
+
</div>
|
|
86
121
|
`;
|
|
87
122
|
}
|
|
123
|
+
#renderMenuItems() {
|
|
124
|
+
console.log(this.#collapsedItems);
|
|
125
|
+
const menuItems = html `
|
|
126
|
+
${map(this.#collapsedItems, item => {
|
|
127
|
+
const nodes = item.childNodes.values();
|
|
128
|
+
return html `
|
|
129
|
+
<u-menu-item @click=${{ handleEvent: () => item.click() }}>
|
|
130
|
+
<div slot="leading-icon">
|
|
131
|
+
${map(nodes, node => node.cloneNode(true))}
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
${item.label}
|
|
135
|
+
</u-menu-item>
|
|
136
|
+
`;
|
|
137
|
+
})}`;
|
|
138
|
+
render(menuItems, this.#menuItemsContainer);
|
|
139
|
+
}
|
|
88
140
|
};
|
|
89
141
|
__decorate([
|
|
90
142
|
state()
|
|
@@ -92,6 +144,9 @@ __decorate([
|
|
|
92
144
|
__decorate([
|
|
93
145
|
query('u-menu')
|
|
94
146
|
], OverflowMenu.prototype, "menu", void 0);
|
|
147
|
+
__decorate([
|
|
148
|
+
property()
|
|
149
|
+
], OverflowMenu.prototype, "anchor", null);
|
|
95
150
|
OverflowMenu = __decorate([
|
|
96
151
|
customElement('u-overflow-menu')
|
|
97
152
|
], OverflowMenu);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overflow-menu.js","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"overflow-menu.js","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, render } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { map } from 'lit/directives/map.js';\nimport { when } from 'lit/directives/when.js';\n\nimport { UmMenu } from '../menu/menu.js';\nimport { OverflowMenuItem } from './overflow-menu-item.js';\nimport { styles } from './overflow-menu.styles.js';\n\n@customElement('u-overflow-menu')\nexport class OverflowMenu extends LitElement {\n static override styles = styles;\n readonly #resizeObserver: ResizeObserver = new ResizeObserver(() => this.#invalidate());\n #items: OverflowMenuItem[] = [];\n\n readonly #collapsedItems: OverflowMenuItem[] = [];\n\n @state() _showMenu = false;\n\n @query('u-menu') menu?: UmMenu;\n\n #anchor: HTMLElement | null = null;\n @property()\n set anchor(value) {\n this.#anchor = value;\n\n this.#invalidate();\n this.#resizeObserver.disconnect();\n this.#resizeObserver.observe(this.anchor!);\n }\n\n get anchor(): HTMLElement | null {\n return this.#anchor ?? this;\n }\n\n readonly #menuItemsContainer = document.createElement('div');\n\n #updateMenusTimeout = 0;\n\n constructor() {\n super();\n\n this.#menuItemsContainer.slot = 'menu-items';\n setTimeout(() => this.appendChild(this.#menuItemsContainer));\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.anchor = this.anchor;\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.#resizeObserver.disconnect();\n }\n\n #invalidate(): void {\n\n this.#updateMenuToggleVisibility();\n this.#updateMenuItems();\n }\n\n #updateMenuToggleVisibility(): void {\n\n let collapsedCount = 0;\n\n for (const item of this.#items) {\n\n if (item.offsetTop === this.offsetTop) {\n break;\n }\n\n collapsedCount++;\n }\n\n const firstItem = this.#items[0];\n const showMenu = !!firstItem && this._showMenu\n ? collapsedCount > 1\n : collapsedCount > 0;\n\n if (this._showMenu !== showMenu) {\n this._showMenu = showMenu;\n }\n }\n\n #updateMenuItems(): void {\n\n if (!this._showMenu) {\n this.#collapsedItems.length = 0;\n return;\n }\n\n clearTimeout(this.#updateMenusTimeout);\n\n this.#updateMenusTimeout = setTimeout(() => {\n const previousCollapsedLength = this.#collapsedItems.length;\n this.#collapsedItems.length = 0;\n\n for (const item of this.#items) {\n\n if (item.offsetTop === this.offsetTop) {\n break;\n }\n\n this.#collapsedItems.push(item);\n }\n\n if (previousCollapsedLength !== this.#collapsedItems.length) {\n this.requestUpdate();\n }\n }, 100);\n }\n\n #handleSlotChange(e: Event) {\n const slot = e.target as HTMLSlotElement;\n this.#items = slot\n .assignedElements()\n .filter(el => el.tagName === 'U-OVERFLOW-MENU-ITEM')\n .reverse() as OverflowMenuItem[];\n\n this.#invalidate();\n }\n\n protected override render(): HTMLTemplateResult {\n this.#renderMenuItems();\n\n const classes = { 'show-menu': this._showMenu };\n\n return html`\n <div class=\"container ${classMap(classes)}\">\n <div class=\"items-set\">\n <div class=\"empty-space\"></div>\n <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\n </div>\n ${when(this._showMenu, () => html`\n <div class=\"inner-menu\">\n <u-icon-button @click=${{ handleEvent: () => this.menu?.toggle() }}>\n <slot name=\"icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\"\n fill=\"currentColor\">\n <path\n d=\"M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 \n 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 \n 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z\"/>\n </svg>\n </slot>\n </u-icon-button>\n <u-menu anchor-corner=\"end-end\">\n <slot name=\"menu-items\"></slot>\n </u-menu>\n </div>\n `)}\n </div>\n `;\n }\n\n #renderMenuItems() {\n console.log(this.#collapsedItems);\n const menuItems = html`\n ${map(\n this.#collapsedItems,\n item => {\n const nodes = item.childNodes.values();\n\n return html`\n <u-menu-item @click=${{ handleEvent: () => item.click() }}>\n <div slot=\"leading-icon\">\n ${map(nodes, node => node.cloneNode(true))}\n </div>\n \n ${item.label}\n </u-menu-item>\n `;\n })}`;\n\n render(menuItems, this.#menuItemsContainer);\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overflow-menu.styles.d.ts","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"overflow-menu.styles.d.ts","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA+BlB,CAAC"}
|
|
@@ -1,25 +1,34 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const styles = css `
|
|
3
|
-
|
|
4
|
-
--
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
height: var(--
|
|
10
|
-
overflow: hidden;
|
|
3
|
+
:host {
|
|
4
|
+
--_gap: var(--u-overflow-menu-items-gap, 8px);
|
|
5
|
+
--_items-height: var(--u-icon-button-small-height, 40px) ;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.empty-space {
|
|
9
|
+
height: var(--_items-height);
|
|
11
10
|
}
|
|
12
11
|
|
|
13
12
|
.items-set {
|
|
13
|
+
display: flex;
|
|
14
|
+
justify-content: flex-end;
|
|
14
15
|
flex-wrap: wrap;
|
|
15
|
-
|
|
16
|
+
gap: var(--_gap);
|
|
17
|
+
max-height: var(--_items-height);
|
|
16
18
|
overflow: hidden;
|
|
17
19
|
}
|
|
18
20
|
|
|
21
|
+
.container {
|
|
22
|
+
display: grid;
|
|
23
|
+
grid-template-columns: 1fr auto;
|
|
24
|
+
margin-inline-start: calc(var(--_gap) * -1);
|
|
25
|
+
}
|
|
26
|
+
.container.show-menu {
|
|
27
|
+
gap: var(--_gap);
|
|
28
|
+
}
|
|
29
|
+
|
|
19
30
|
.inner-menu {
|
|
20
31
|
position: relative;
|
|
21
|
-
grid-row: 1;
|
|
22
|
-
grid-column: -2;
|
|
23
32
|
}
|
|
24
33
|
`;
|
|
25
34
|
//# sourceMappingURL=overflow-menu.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overflow-menu.styles.js","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"overflow-menu.styles.js","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_gap: var(--u-overflow-menu-items-gap, 8px);\n --_items-height: var(--u-icon-button-small-height, 40px) ;\n }\n\n .empty-space {\n height: var(--_items-height);\n }\n\n .items-set {\n display: flex;\n justify-content: flex-end;\n flex-wrap: wrap;\n gap: var(--_gap);\n max-height: var(--_items-height);\n overflow: hidden;\n }\n\n .container {\n display: grid;\n grid-template-columns: 1fr auto;\n margin-inline-start: calc(var(--_gap) * -1);\n }\n .container.show-menu {\n gap: var(--_gap);\n }\n\n .inner-menu {\n position: relative;\n }\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@universal-material/web",
|
|
3
|
-
"version": "3.6.
|
|
3
|
+
"version": "3.6.8",
|
|
4
4
|
"description": "Material web components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"keywords": [
|
|
@@ -53,6 +53,7 @@
|
|
|
53
53
|
"@bart-krakowski/get-week-info-polyfill": "^1.0.8",
|
|
54
54
|
"@lit/context": "^1.1.5",
|
|
55
55
|
"@material/material-color-utilities": "^0.3.0",
|
|
56
|
+
"cally": "^0.8.0",
|
|
56
57
|
"dompurify": "^3.2.6",
|
|
57
58
|
"lit": "^3.2.1",
|
|
58
59
|
"swiper": "^11.2.4"
|