@universal-material/web 3.0.19 → 3.0.21
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/app-bar/top-app-bar.d.ts +42 -0
- package/app-bar/top-app-bar.d.ts.map +1 -0
- package/app-bar/top-app-bar.js +139 -0
- package/app-bar/top-app-bar.js.map +1 -0
- package/{button/button-base.styles.d.ts → app-bar/top-app-bar.styles.d.ts} +1 -1
- package/app-bar/top-app-bar.styles.d.ts.map +1 -0
- package/app-bar/top-app-bar.styles.js +87 -0
- package/app-bar/top-app-bar.styles.js.map +1 -0
- package/button/button-base.d.ts +2 -30
- package/button/button-base.d.ts.map +1 -1
- package/button/button-base.js +4 -94
- package/button/button-base.js.map +1 -1
- package/button/button.d.ts +1 -1
- package/button/button.d.ts.map +1 -1
- package/button/button.js +9 -7
- package/button/button.js.map +1 -1
- package/button/button.styles.d.ts.map +1 -1
- package/button/button.styles.js +14 -10
- package/button/button.styles.js.map +1 -1
- package/button/fab.d.ts.map +1 -1
- package/button/fab.js +2 -2
- package/button/fab.js.map +1 -1
- package/button/icon-button.d.ts +2 -2
- package/button/icon-button.d.ts.map +1 -1
- package/button/icon-button.js +5 -4
- package/button/icon-button.js.map +1 -1
- package/button/icon-button.styles.js +8 -8
- package/button/icon-button.styles.js.map +1 -1
- package/card/card.d.ts +3 -3
- package/card/card.d.ts.map +1 -1
- package/card/card.js +4 -4
- package/card/card.js.map +1 -1
- package/checkbox/checkbox.d.ts.map +1 -1
- package/checkbox/checkbox.js +0 -1
- package/checkbox/checkbox.js.map +1 -1
- package/config.d.ts +6 -0
- package/config.d.ts.map +1 -0
- package/config.js +7 -0
- package/config.js.map +1 -0
- package/container/container.d.ts +1 -1
- package/container/container.d.ts.map +1 -1
- package/container/container.js +4 -4
- package/container/container.js.map +1 -1
- package/container/grid-base.styles.js +4 -4
- package/container/grid-base.styles.js.map +1 -1
- package/container/grid.d.ts +2 -2
- package/container/grid.d.ts.map +1 -1
- package/container/grid.js +4 -4
- package/container/grid.js.map +1 -1
- package/css/universal-material.css +1333 -0
- package/css/universal-material.min.css +2 -0
- package/custom-elements.json +2772 -814
- package/elevation/elevation.d.ts +1 -1
- package/elevation/elevation.d.ts.map +1 -1
- package/elevation/elevation.js +2 -2
- package/elevation/elevation.js.map +1 -1
- package/index.d.ts +41 -29
- package/index.d.ts.map +1 -1
- package/index.js +41 -29
- package/index.js.map +1 -1
- package/menu/menu-item.d.ts +26 -0
- package/menu/menu-item.d.ts.map +1 -0
- package/menu/menu-item.js +62 -0
- package/menu/menu-item.js.map +1 -0
- package/{table/table-row.styles.d.ts → menu/menu-item.styles.d.ts} +1 -1
- package/menu/menu-item.styles.d.ts.map +1 -0
- package/menu/menu-item.styles.js +37 -0
- package/menu/menu-item.styles.js.map +1 -0
- package/menu/menu.d.ts +55 -0
- package/menu/menu.d.ts.map +1 -0
- package/menu/menu.js +215 -0
- package/menu/menu.js.map +1 -0
- package/{table/table.styles.d.ts → menu/menu.styles.d.ts} +1 -1
- package/menu/menu.styles.d.ts.map +1 -0
- package/menu/menu.styles.js +95 -0
- package/menu/menu.styles.js.map +1 -0
- package/navigation/drawer-item.d.ts +39 -0
- package/navigation/drawer-item.d.ts.map +1 -0
- package/navigation/drawer-item.js +98 -0
- package/navigation/drawer-item.js.map +1 -0
- package/{table/table-body.styles.d.ts → navigation/drawer-item.styles.d.ts} +1 -1
- package/navigation/drawer-item.styles.d.ts.map +1 -0
- package/navigation/drawer-item.styles.js +43 -0
- package/navigation/drawer-item.styles.js.map +1 -0
- package/{table/table-row.d.ts → navigation/drawer.d.ts} +3 -3
- package/navigation/drawer.d.ts.map +1 -0
- package/{table/table-row.js → navigation/drawer.js} +11 -8
- package/navigation/drawer.js.map +1 -0
- package/{table/table-cell.styles.d.ts → navigation/drawer.styles.d.ts} +1 -1
- package/navigation/drawer.styles.d.ts.map +1 -0
- package/navigation/drawer.styles.js +17 -0
- package/navigation/drawer.styles.js.map +1 -0
- package/navigation/side-navigation-swiper.styles.d.ts +2 -0
- package/navigation/side-navigation-swiper.styles.d.ts.map +1 -0
- package/navigation/side-navigation-swiper.styles.js +131 -0
- package/navigation/side-navigation-swiper.styles.js.map +1 -0
- package/navigation/side-navigation.d.ts +32 -0
- package/navigation/side-navigation.d.ts.map +1 -0
- package/navigation/side-navigation.js +154 -0
- package/navigation/side-navigation.js.map +1 -0
- package/navigation/side-navigation.styles.d.ts +2 -0
- package/navigation/side-navigation.styles.d.ts.map +1 -0
- package/navigation/side-navigation.styles.js +124 -0
- package/navigation/side-navigation.styles.js.map +1 -0
- package/package.json +47 -21
- package/scss/_api.scss +2 -0
- package/scss/_common.scss +38 -0
- package/scss/_css-vars.scss +30 -0
- package/scss/_functions.scss +25 -0
- package/scss/_mixins.scss +3 -0
- package/scss/_variables.scss +110 -0
- package/scss/data-table/_data-table.scss +33 -0
- package/scss/data-table/_variables.scss +24 -0
- package/scss/functions/_font.scss +29 -0
- package/scss/mixins/_breakpoints.scss +21 -0
- package/scss/mixins/_colors.scss +6 -0
- package/scss/mixins/_text-bg.scss +33 -0
- package/scss/mixins/_typo.scss +26 -0
- package/scss/text-bg/_text-bg.scss +38 -0
- package/scss/text-bg/_text.scss +73 -0
- package/scss/typo/_font.scss +5 -0
- package/scss/typo/_typo.scss +19 -0
- package/scss/typo/_variables.scss +19 -0
- package/scss/universal-material.scss +7 -0
- package/shared/base.styles.js +1 -1
- package/shared/base.styles.js.map +1 -1
- package/shared/button-wrapper.d.ts +35 -0
- package/shared/button-wrapper.d.ts.map +1 -0
- package/shared/button-wrapper.js +110 -0
- package/shared/button-wrapper.js.map +1 -0
- package/shared/button-wrapper.styles.d.ts +2 -0
- package/shared/button-wrapper.styles.d.ts.map +1 -0
- package/{button/button-base.styles.js → shared/button-wrapper.styles.js} +27 -9
- package/shared/button-wrapper.styles.js.map +1 -0
- package/snackbar/snackbar.d.ts +38 -0
- package/snackbar/snackbar.d.ts.map +1 -0
- package/snackbar/snackbar.js +122 -0
- package/snackbar/snackbar.js.map +1 -0
- package/{table/table-head.styles.d.ts → snackbar/snackbar.styles.d.ts} +1 -1
- package/snackbar/snackbar.styles.d.ts.map +1 -0
- package/snackbar/snackbar.styles.js +81 -0
- package/snackbar/snackbar.styles.js.map +1 -0
- package/theme/css-var-builder.js +1 -1
- package/theme/css-var-builder.js.map +1 -1
- package/theme/index.d.ts +1 -1
- package/theme/index.d.ts.map +1 -1
- package/theme/index.js +1 -1
- package/theme/index.js.map +1 -1
- package/theme/neutral-colors.d.ts +1 -1
- package/theme/neutral-colors.d.ts.map +1 -1
- package/theme/neutral-colors.js +5 -0
- package/theme/neutral-colors.js.map +1 -1
- package/theme/theme-builder.d.ts +2 -3
- package/theme/theme-builder.d.ts.map +1 -1
- package/theme/theme-builder.js +41 -15
- package/theme/theme-builder.js.map +1 -1
- package/theme/theme-color.d.ts +1 -1
- package/theme/theme-color.d.ts.map +1 -1
- package/theme/theme-color.js.map +1 -1
- package/button/button-base.styles.d.ts.map +0 -1
- package/button/button-base.styles.js.map +0 -1
- package/table/table-body.d.ts +0 -11
- package/table/table-body.d.ts.map +0 -1
- package/table/table-body.js +0 -21
- package/table/table-body.js.map +0 -1
- package/table/table-body.styles.d.ts.map +0 -1
- package/table/table-body.styles.js +0 -11
- package/table/table-body.styles.js.map +0 -1
- package/table/table-cell.d.ts +0 -11
- package/table/table-cell.d.ts.map +0 -1
- package/table/table-cell.js +0 -21
- package/table/table-cell.js.map +0 -1
- package/table/table-cell.styles.d.ts.map +0 -1
- package/table/table-cell.styles.js +0 -11
- package/table/table-cell.styles.js.map +0 -1
- package/table/table-head.d.ts +0 -11
- package/table/table-head.d.ts.map +0 -1
- package/table/table-head.js +0 -21
- package/table/table-head.js.map +0 -1
- package/table/table-head.styles.d.ts.map +0 -1
- package/table/table-head.styles.js +0 -11
- package/table/table-head.styles.js.map +0 -1
- package/table/table-header-cell.d.ts +0 -11
- package/table/table-header-cell.d.ts.map +0 -1
- package/table/table-header-cell.js +0 -21
- package/table/table-header-cell.js.map +0 -1
- package/table/table-header-cell.styles.d.ts +0 -2
- package/table/table-header-cell.styles.d.ts.map +0 -1
- package/table/table-header-cell.styles.js +0 -12
- package/table/table-header-cell.styles.js.map +0 -1
- package/table/table-row.d.ts.map +0 -1
- package/table/table-row.js.map +0 -1
- package/table/table-row.styles.d.ts.map +0 -1
- package/table/table-row.styles.js +0 -7
- package/table/table-row.styles.js.map +0 -1
- package/table/table.d.ts +0 -16
- package/table/table.d.ts.map +0 -1
- package/table/table.js +0 -19
- package/table/table.js.map +0 -1
- package/table/table.styles.d.ts.map +0 -1
- package/table/table.styles.js +0 -16
- package/table/table.styles.js.map +0 -1
package/elevation/elevation.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"elevation.d.ts","sourceRoot":"","sources":["../../src/elevation/elevation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAU;IAEvB,
|
|
1
|
+
{"version":3,"file":"elevation.d.ts","sourceRoot":"","sources":["../../src/elevation/elevation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAU;IAEvB,iBAAiB;CAI3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,WAAW,CAAC;KAC5B;CACF"}
|
package/elevation/elevation.js
CHANGED
|
@@ -8,8 +8,8 @@ import { LitElement } from 'lit';
|
|
|
8
8
|
import { customElement } from 'lit/decorators.js';
|
|
9
9
|
import { styles } from './elevation.styles';
|
|
10
10
|
let UmElevation = class UmElevation extends LitElement {
|
|
11
|
-
|
|
12
|
-
super(
|
|
11
|
+
connectedCallback() {
|
|
12
|
+
super.connectedCallback();
|
|
13
13
|
this.ariaHidden = "true";
|
|
14
14
|
}
|
|
15
15
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"elevation.js","sourceRoot":"","sources":["../../src/elevation/elevation.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAGrC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"elevation.js","sourceRoot":"","sources":["../../src/elevation/elevation.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAGrC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAGhC,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC;IAC3B,CAAC;;AALe,kBAAM,GAAG,MAAM,AAAT,CAAU;AADrB,WAAW;IADvB,aAAa,CAAC,aAAa,CAAC;GAChB,WAAW,CAOvB","sourcesContent":["import { LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport { styles } from './elevation.styles';\n\n@customElement('u-elevation')\nexport class UmElevation extends LitElement {\n static override styles = styles;\n\n override connectedCallback() {\n super.connectedCallback();\n this.ariaHidden = \"true\";\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-elevation': UmElevation;\n }\n}\n"]}
|
package/index.d.ts
CHANGED
|
@@ -1,30 +1,42 @@
|
|
|
1
|
-
import './
|
|
2
|
-
import './button/
|
|
3
|
-
import './button/
|
|
4
|
-
import './button/
|
|
5
|
-
import './
|
|
6
|
-
import './
|
|
7
|
-
import './
|
|
8
|
-
import './container/
|
|
9
|
-
import './
|
|
10
|
-
import './
|
|
11
|
-
import './
|
|
12
|
-
import './
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
export * from './
|
|
20
|
-
export * from './
|
|
21
|
-
export * from './
|
|
22
|
-
export * from './
|
|
23
|
-
export * from './
|
|
24
|
-
export * from './
|
|
25
|
-
export * from './
|
|
26
|
-
export * from './
|
|
27
|
-
export * from './
|
|
28
|
-
export * from './
|
|
29
|
-
export * from './
|
|
1
|
+
import './app-bar/top-app-bar';
|
|
2
|
+
import './button/button';
|
|
3
|
+
import './button/button-set';
|
|
4
|
+
import './button/fab';
|
|
5
|
+
import './button/icon-button';
|
|
6
|
+
import './card/card';
|
|
7
|
+
import './checkbox/checkbox';
|
|
8
|
+
import './container/container';
|
|
9
|
+
import './container/grid';
|
|
10
|
+
import './divider/divider';
|
|
11
|
+
import './elevation/elevation';
|
|
12
|
+
import './menu/menu';
|
|
13
|
+
import './menu/menu-item';
|
|
14
|
+
import './navigation/drawer';
|
|
15
|
+
import './navigation/drawer-item';
|
|
16
|
+
import './navigation/side-navigation';
|
|
17
|
+
import './ripple/ripple';
|
|
18
|
+
import './snackbar/snackbar';
|
|
19
|
+
export * from './app-bar/top-app-bar';
|
|
20
|
+
export * from './button/button';
|
|
21
|
+
export * from './button/button-base';
|
|
22
|
+
export * from './button/button-set';
|
|
23
|
+
export * from './button/fab';
|
|
24
|
+
export * from './button/icon-button';
|
|
25
|
+
export * from './card/card';
|
|
26
|
+
export * from './card/card-content';
|
|
27
|
+
export * from './card/card-media';
|
|
28
|
+
export * from './checkbox/checkbox';
|
|
29
|
+
export * from './container/grid-base';
|
|
30
|
+
export * from './container/grid';
|
|
31
|
+
export * from './container/container';
|
|
32
|
+
export * from './divider/divider';
|
|
33
|
+
export * from './elevation/elevation';
|
|
34
|
+
export * from './menu/menu';
|
|
35
|
+
export * from './menu/menu-item';
|
|
36
|
+
export * from './navigation/drawer';
|
|
37
|
+
export * from './navigation/drawer-item';
|
|
38
|
+
export * from './navigation/side-navigation';
|
|
39
|
+
export * from './ripple/ripple';
|
|
40
|
+
export * from './snackbar/snackbar';
|
|
41
|
+
export * from './theme/theme-builder';
|
|
30
42
|
//# sourceMappingURL=index.d.ts.map
|
package/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iBAAiB,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,cAAc,CAAC;AACtB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,aAAa,CAAC;AACrB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,aAAa,CAAC;AACrB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0BAA0B,CAAC;AAClC,OAAO,8BAA8B,CAAC;AACtC,OAAO,iBAAiB,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAE7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC"}
|
package/index.js
CHANGED
|
@@ -1,30 +1,42 @@
|
|
|
1
|
-
import './
|
|
2
|
-
import './button/
|
|
3
|
-
import './button/
|
|
4
|
-
import './button/
|
|
5
|
-
import './
|
|
6
|
-
import './
|
|
7
|
-
import './
|
|
8
|
-
import './container/
|
|
9
|
-
import './
|
|
10
|
-
import './
|
|
11
|
-
import './
|
|
12
|
-
import './
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
export * from './
|
|
20
|
-
export * from './
|
|
21
|
-
export * from './
|
|
22
|
-
export * from './
|
|
23
|
-
export * from './
|
|
24
|
-
export * from './
|
|
25
|
-
export * from './
|
|
26
|
-
export * from './
|
|
27
|
-
export * from './
|
|
28
|
-
export * from './
|
|
29
|
-
export * from './
|
|
1
|
+
import './app-bar/top-app-bar';
|
|
2
|
+
import './button/button';
|
|
3
|
+
import './button/button-set';
|
|
4
|
+
import './button/fab';
|
|
5
|
+
import './button/icon-button';
|
|
6
|
+
import './card/card';
|
|
7
|
+
import './checkbox/checkbox';
|
|
8
|
+
import './container/container';
|
|
9
|
+
import './container/grid';
|
|
10
|
+
import './divider/divider';
|
|
11
|
+
import './elevation/elevation';
|
|
12
|
+
import './menu/menu';
|
|
13
|
+
import './menu/menu-item';
|
|
14
|
+
import './navigation/drawer';
|
|
15
|
+
import './navigation/drawer-item';
|
|
16
|
+
import './navigation/side-navigation';
|
|
17
|
+
import './ripple/ripple';
|
|
18
|
+
import './snackbar/snackbar';
|
|
19
|
+
export * from './app-bar/top-app-bar';
|
|
20
|
+
export * from './button/button';
|
|
21
|
+
export * from './button/button-base';
|
|
22
|
+
export * from './button/button-set';
|
|
23
|
+
export * from './button/fab';
|
|
24
|
+
export * from './button/icon-button';
|
|
25
|
+
export * from './card/card';
|
|
26
|
+
export * from './card/card-content';
|
|
27
|
+
export * from './card/card-media';
|
|
28
|
+
export * from './checkbox/checkbox';
|
|
29
|
+
export * from './container/grid-base';
|
|
30
|
+
export * from './container/grid';
|
|
31
|
+
export * from './container/container';
|
|
32
|
+
export * from './divider/divider';
|
|
33
|
+
export * from './elevation/elevation';
|
|
34
|
+
export * from './menu/menu';
|
|
35
|
+
export * from './menu/menu-item';
|
|
36
|
+
export * from './navigation/drawer';
|
|
37
|
+
export * from './navigation/drawer-item';
|
|
38
|
+
export * from './navigation/side-navigation';
|
|
39
|
+
export * from './ripple/ripple';
|
|
40
|
+
export * from './snackbar/snackbar';
|
|
41
|
+
export * from './theme/theme-builder';
|
|
30
42
|
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iBAAiB,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,cAAc,CAAC;AACtB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,aAAa,CAAC;AACrB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,aAAa,CAAC;AACrB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0BAA0B,CAAC;AAClC,OAAO,8BAA8B,CAAC;AACtC,OAAO,iBAAiB,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAE7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC","sourcesContent":["import './app-bar/top-app-bar';\nimport './button/button';\nimport './button/button-set';\nimport './button/fab';\nimport './button/icon-button';\nimport './card/card';\nimport './checkbox/checkbox';\nimport './container/container';\nimport './container/grid';\nimport './divider/divider';\nimport './elevation/elevation';\nimport './menu/menu';\nimport './menu/menu-item';\nimport './navigation/drawer';\nimport './navigation/drawer-item';\nimport './navigation/side-navigation';\nimport './ripple/ripple';\nimport './snackbar/snackbar';\n\nexport * from './app-bar/top-app-bar';\nexport * from './button/button';\nexport * from './button/button-base';\nexport * from './button/button-set';\nexport * from './button/fab';\nexport * from './button/icon-button';\nexport * from './card/card';\nexport * from './card/card-content';\nexport * from './card/card-media';\nexport * from './checkbox/checkbox';\nexport * from './container/grid-base';\nexport * from './container/grid';\nexport * from './container/container';\nexport * from './divider/divider';\nexport * from './elevation/elevation';\nexport * from './menu/menu';\nexport * from './menu/menu-item';\nexport * from './navigation/drawer';\nexport * from './navigation/drawer-item';\nexport * from './navigation/side-navigation';\nexport * from './ripple/ripple';\nexport * from './snackbar/snackbar';\nexport * from './theme/theme-builder';\n"]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { HTMLTemplateResult } from 'lit';
|
|
2
|
+
import { UmButtonWrapper } from '../shared/button-wrapper';
|
|
3
|
+
export declare class UmMenuItem extends UmButtonWrapper {
|
|
4
|
+
static styles: import("lit").CSSResult[];
|
|
5
|
+
/**
|
|
6
|
+
* Whether the drawer item has icon or not
|
|
7
|
+
*
|
|
8
|
+
* _Note:_ Readonly
|
|
9
|
+
*/
|
|
10
|
+
hasIcon: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Whether the drawer item has badge or not
|
|
13
|
+
*
|
|
14
|
+
* _Note:_ Readonly
|
|
15
|
+
*/
|
|
16
|
+
hasBadge: boolean;
|
|
17
|
+
private readonly assignedIcons;
|
|
18
|
+
protected renderContent(): HTMLTemplateResult;
|
|
19
|
+
private handleIconSlotChange;
|
|
20
|
+
}
|
|
21
|
+
declare global {
|
|
22
|
+
interface HTMLElementTagNameMap {
|
|
23
|
+
'u-menu-item': UmMenuItem;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
//# sourceMappingURL=menu-item.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../src/menu/menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAI/C,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAI3D,qBACa,UAAW,SAAQ,eAAe;IAE7C,OAAgB,MAAM,4BAIpB;IAEF;;;;OAIG;IAC8D,OAAO,UAAS;IAEjF;;;;OAIG;IAC+D,QAAQ,UAAS;IAGnF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;cAE5B,aAAa,IAAI,kBAAkB;IAYtD,OAAO,CAAC,oBAAoB;CAG7B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html } from 'lit';
|
|
8
|
+
import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
|
|
9
|
+
import { styles as baseStyles } from '../shared/base.styles';
|
|
10
|
+
import { UmButtonWrapper } from '../shared/button-wrapper';
|
|
11
|
+
import { styles as buttonWrapperStyles } from '../shared/button-wrapper.styles';
|
|
12
|
+
import { styles } from './menu-item.styles';
|
|
13
|
+
let UmMenuItem = class UmMenuItem extends UmButtonWrapper {
|
|
14
|
+
constructor() {
|
|
15
|
+
super(...arguments);
|
|
16
|
+
/**
|
|
17
|
+
* Whether the drawer item has icon or not
|
|
18
|
+
*
|
|
19
|
+
* _Note:_ Readonly
|
|
20
|
+
*/
|
|
21
|
+
this.hasIcon = false;
|
|
22
|
+
/**
|
|
23
|
+
* Whether the drawer item has badge or not
|
|
24
|
+
*
|
|
25
|
+
* _Note:_ Readonly
|
|
26
|
+
*/
|
|
27
|
+
this.hasBadge = false;
|
|
28
|
+
}
|
|
29
|
+
renderContent() {
|
|
30
|
+
return html `
|
|
31
|
+
<div class="icon">
|
|
32
|
+
<slot
|
|
33
|
+
name="icon"
|
|
34
|
+
aria-hidden="true"
|
|
35
|
+
@slotchange="${this.handleIconSlotChange}"></slot>
|
|
36
|
+
</div>
|
|
37
|
+
<span class="label"><slot></slot></span>
|
|
38
|
+
`;
|
|
39
|
+
}
|
|
40
|
+
handleIconSlotChange() {
|
|
41
|
+
this.hasIcon = this.assignedIcons.length > 0;
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
UmMenuItem.styles = [
|
|
45
|
+
baseStyles,
|
|
46
|
+
buttonWrapperStyles,
|
|
47
|
+
styles
|
|
48
|
+
];
|
|
49
|
+
__decorate([
|
|
50
|
+
property({ type: Boolean, attribute: 'has-icon', reflect: true })
|
|
51
|
+
], UmMenuItem.prototype, "hasIcon", void 0);
|
|
52
|
+
__decorate([
|
|
53
|
+
property({ type: Boolean, attribute: 'has-badge', reflect: true })
|
|
54
|
+
], UmMenuItem.prototype, "hasBadge", void 0);
|
|
55
|
+
__decorate([
|
|
56
|
+
queryAssignedElements({ slot: 'icon', flatten: true })
|
|
57
|
+
], UmMenuItem.prototype, "assignedIcons", void 0);
|
|
58
|
+
UmMenuItem = __decorate([
|
|
59
|
+
customElement('u-menu-item')
|
|
60
|
+
], UmMenuItem);
|
|
61
|
+
export { UmMenuItem };
|
|
62
|
+
//# sourceMappingURL=menu-item.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../src/menu/menu-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAEnF,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAChF,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAGrC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,eAAe;IAAxC;;QAQL;;;;WAIG;QAC8D,YAAO,GAAG,KAAK,CAAC;QAEjF;;;;WAIG;QAC+D,aAAQ,GAAG,KAAK,CAAC;IAoBrF,CAAC;IAfoB,aAAa;QAC9B,OAAO,IAAI,CAAA;;;;;yBAKU,IAAI,CAAC,oBAAoB;;;KAG7C,CAAC;IACJ,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/C,CAAC;;AArCe,iBAAM,GAAG;IACvB,UAAU;IACV,mBAAmB;IACnB,MAAM;CACP,AAJqB,CAIpB;AAO+D;IAAhE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;2CAAiB;AAOf;IAAjE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAAkB;AAGlE;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;iDACN;AAvBpC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAwCtB","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles';\nimport { UmButtonWrapper } from '../shared/button-wrapper';\nimport { styles as buttonWrapperStyles } from '../shared/button-wrapper.styles';\nimport { styles } from './menu-item.styles';\n\n@customElement('u-menu-item')\nexport class UmMenuItem extends UmButtonWrapper {\n\n static override styles = [\n baseStyles,\n buttonWrapperStyles,\n styles\n ];\n\n /**\n * Whether the drawer item has icon or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon = false;\n\n /**\n * Whether the drawer item has badge or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-badge', reflect: true}) hasBadge = false;\n\n @queryAssignedElements({slot: 'icon', flatten: true})\n private readonly assignedIcons!: HTMLElement[];\n\n protected override renderContent(): HTMLTemplateResult {\n return html`\n <div class=\"icon\">\n <slot\n name=\"icon\"\n aria-hidden=\"true\"\n @slotchange=\"${this.handleIconSlotChange}\"></slot>\n </div>\n <span class=\"label\"><slot></slot></span>\n `;\n }\n\n private handleIconSlotChange() {\n this.hasIcon = this.assignedIcons.length > 0;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-menu-item': UmMenuItem;\n }\n}\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export declare const styles: import("lit").CSSResult;
|
|
2
|
-
//# sourceMappingURL=
|
|
2
|
+
//# sourceMappingURL=menu-item.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu-item.styles.d.ts","sourceRoot":"","sources":["../../src/menu/menu-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkClB,CAAC"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const styles = css `
|
|
3
|
+
:host {
|
|
4
|
+
display: block;
|
|
5
|
+
--_menu-item-icon-size: var(--u-menu-item-icon-size, 1.125rem);
|
|
6
|
+
--_menu-item-padding: var(--u-menu-item-padding, 12px);
|
|
7
|
+
height: var(--u-menu-item-height, 56px);
|
|
8
|
+
padding-inline: var(--_menu-item-padding);
|
|
9
|
+
color: var(--u-menu-item-label-color, var(--u-color-on-surface, rgb(29, 27, 32)));
|
|
10
|
+
font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
|
|
11
|
+
line-height: var(--u-menu-item-label-line-height, var(--u-label-l-line-height, 1.25rem));
|
|
12
|
+
font-size: var(--u-menu-item-label-font-size, var(--u-label-l-font-size, 0.875rem));
|
|
13
|
+
letter-spacing: var(--u-menu-item-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));
|
|
14
|
+
font-weight: var(--u-menu-item-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
:host(:not([has-icon])) .icon {
|
|
18
|
+
display: none;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.icon {
|
|
22
|
+
font-size: var(--_menu-item-icon-size);
|
|
23
|
+
line-height: var(--_menu-item-icon-size);
|
|
24
|
+
margin-inline-end: var(--u-menu-item-icon-margin, 12px);
|
|
25
|
+
color: var(--u-menu-item-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.content {
|
|
29
|
+
justify-content: flex-start;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.button:focus-visible {
|
|
33
|
+
outline-offset: -4px;
|
|
34
|
+
border-radius: var(--u-spacing-extra-small, 4px);
|
|
35
|
+
}
|
|
36
|
+
`;
|
|
37
|
+
//# sourceMappingURL=menu-item.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu-item.styles.js","sourceRoot":"","sources":["../../src/menu/menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n display: block;\n --_menu-item-icon-size: var(--u-menu-item-icon-size, 1.125rem);\n --_menu-item-padding: var(--u-menu-item-padding, 12px);\n height: var(--u-menu-item-height, 56px);\n padding-inline: var(--_menu-item-padding);\n color: var(--u-menu-item-label-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-menu-item-label-line-height, var(--u-label-l-line-height, 1.25rem));\n font-size: var(--u-menu-item-label-font-size, var(--u-label-l-font-size, 0.875rem));\n letter-spacing: var(--u-menu-item-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n font-weight: var(--u-menu-item-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n }\n\n :host(:not([has-icon])) .icon {\n display: none;\n }\n\n .icon {\n font-size: var(--_menu-item-icon-size);\n line-height: var(--_menu-item-icon-size);\n margin-inline-end: var(--u-menu-item-icon-margin, 12px);\n color: var(--u-menu-item-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n .content {\n justify-content: flex-start;\n }\n\n .button:focus-visible {\n outline-offset: -4px;\n border-radius: var(--u-spacing-extra-small, 4px);\n }\n`;\n"]}
|
package/menu/menu.d.ts
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { HTMLTemplateResult, LitElement } from 'lit';
|
|
2
|
+
import '../elevation/elevation';
|
|
3
|
+
export declare class UmMenu extends LitElement {
|
|
4
|
+
#private;
|
|
5
|
+
static styles: import("lit").CSSResult[];
|
|
6
|
+
/**
|
|
7
|
+
* Opens the menu and makes it visible. Alternative to the `.show()`, `.close()` and `.toggle()` methods
|
|
8
|
+
*/
|
|
9
|
+
get open(): boolean;
|
|
10
|
+
set open(open: boolean);
|
|
11
|
+
/**
|
|
12
|
+
* The corner of the anchor which to align the menu in the standard logical
|
|
13
|
+
* property style of <block>-<inline> e.g. `'end-start'`.
|
|
14
|
+
*/
|
|
15
|
+
anchorCorner: 'start-start' | 'start-end' | 'end-start' | 'end-end';
|
|
16
|
+
/**
|
|
17
|
+
* The direction of the menu. e.g. `'end'`.
|
|
18
|
+
*
|
|
19
|
+
* NOTE: This value may not be respected by the menu positioning algorithm
|
|
20
|
+
* if the menu would render outside the viewport.
|
|
21
|
+
*/
|
|
22
|
+
direction: 'start' | 'end';
|
|
23
|
+
/**
|
|
24
|
+
* Limit the height of the menu to not overflow the viewport
|
|
25
|
+
*/
|
|
26
|
+
autoScrollBlock: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Set a selector to auto attach to a toggle element
|
|
29
|
+
*/
|
|
30
|
+
get toggleSelector(): string | undefined;
|
|
31
|
+
set toggleSelector(selector: string);
|
|
32
|
+
menu: HTMLElement;
|
|
33
|
+
get anchorElement(): HTMLElement;
|
|
34
|
+
private toggleElement;
|
|
35
|
+
protected render(): HTMLTemplateResult;
|
|
36
|
+
connectedCallback(): void;
|
|
37
|
+
disconnectedCallback(): void;
|
|
38
|
+
toggle: () => void;
|
|
39
|
+
show(): void;
|
|
40
|
+
close: () => void;
|
|
41
|
+
private calcDropdownPositioning;
|
|
42
|
+
private resetMenu;
|
|
43
|
+
private setToOpenUpOrDown;
|
|
44
|
+
private setToOpenToStartOrEnd;
|
|
45
|
+
private ensureMenuCanOpenToStart;
|
|
46
|
+
private ensureMenuCanOpenToEnd;
|
|
47
|
+
private getAnchorRect;
|
|
48
|
+
private getMenuRect;
|
|
49
|
+
}
|
|
50
|
+
declare global {
|
|
51
|
+
interface HTMLElementTagNameMap {
|
|
52
|
+
'u-menu': UmMenu;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
//# sourceMappingURL=menu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/menu/menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAM3D,OAAO,wBAAwB,CAAC;AAShC,qBACa,MAAO,SAAQ,UAAU;;IAEpC,OAAgB,MAAM,4BAAwB;IAK9C;;OAEG;IACH,IACI,IAAI,IAAI,OAAO,CAAsB;IACzC,IAAI,IAAI,CAAC,IAAI,EAAE,OAAO,EAMrB;IAED;;;OAGG;IACoD,YAAY,EAAE,aAAa,GAAG,WAAW,GAAG,WAAW,GAAG,SAAS,CAAe;IAEzI;;;;;OAKG;IACwB,SAAS,EAAE,OAAO,GAAG,KAAK,CAAS;IAE9D;;OAEG;IACuE,eAAe,UAAQ;IAEjG;;OAEG;IACH,IACI,cAAc,IAAI,MAAM,GAAG,SAAS,CAEvC;IACD,IAAI,cAAc,CAAC,QAAQ,EAAE,MAAM,EASlC;IAEe,IAAI,EAAG,WAAW,CAAC;IAEnC,IAAI,aAAa,IAAI,WAAW,CAE/B;IAED,OAAO,CAAC,aAAa,CAA4B;cAE9B,MAAM,IAAI,kBAAkB;IAWtC,iBAAiB;IAKjB,oBAAoB;IAK7B,MAAM,aAOJ;IAEF,IAAI,IAAI,IAAI;IASZ,KAAK,aAOJ;IAED,OAAO,CAAC,uBAAuB;IAS/B,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,iBAAiB;IAoBzB,OAAO,CAAC,qBAAqB;IAS7B,OAAO,CAAC,wBAAwB;IAQhC,OAAO,CAAC,sBAAsB;IAU9B,OAAO,CAAC,aAAa;IAsBrB,OAAO,CAAC,WAAW;CAWpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,MAAM,CAAC;KAClB;CACF"}
|
package/menu/menu.js
ADDED
|
@@ -0,0 +1,215 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
8
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
9
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
10
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
|
+
};
|
|
12
|
+
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
13
|
+
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
14
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
15
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
16
|
+
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
17
|
+
};
|
|
18
|
+
var _UmMenu_open, _UmMenu_justShow;
|
|
19
|
+
import { html, LitElement } from 'lit';
|
|
20
|
+
import { customElement, property, query } from 'lit/decorators.js';
|
|
21
|
+
import { styles as baseStyles } from '../shared/base.styles';
|
|
22
|
+
import { styles } from './menu.styles';
|
|
23
|
+
import '../elevation/elevation';
|
|
24
|
+
let UmMenu = class UmMenu extends LitElement {
|
|
25
|
+
constructor() {
|
|
26
|
+
super(...arguments);
|
|
27
|
+
_UmMenu_open.set(this, false);
|
|
28
|
+
_UmMenu_justShow.set(this, false);
|
|
29
|
+
/**
|
|
30
|
+
* The corner of the anchor which to align the menu in the standard logical
|
|
31
|
+
* property style of <block>-<inline> e.g. `'end-start'`.
|
|
32
|
+
*/
|
|
33
|
+
this.anchorCorner = 'end-start';
|
|
34
|
+
/**
|
|
35
|
+
* The direction of the menu. e.g. `'end'`.
|
|
36
|
+
*
|
|
37
|
+
* NOTE: This value may not be respected by the menu positioning algorithm
|
|
38
|
+
* if the menu would render outside the viewport.
|
|
39
|
+
*/
|
|
40
|
+
this.direction = 'end';
|
|
41
|
+
/**
|
|
42
|
+
* Limit the height of the menu to not overflow the viewport
|
|
43
|
+
*/
|
|
44
|
+
this.autoScrollBlock = true;
|
|
45
|
+
this.toggleElement = null;
|
|
46
|
+
this.toggle = () => {
|
|
47
|
+
if (this.open) {
|
|
48
|
+
this.close();
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
this.show();
|
|
52
|
+
};
|
|
53
|
+
this.close = () => {
|
|
54
|
+
if (this.open && !__classPrivateFieldGet(this, _UmMenu_justShow, "f")) {
|
|
55
|
+
this.open = false;
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
__classPrivateFieldSet(this, _UmMenu_justShow, false, "f");
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* Opens the menu and makes it visible. Alternative to the `.show()`, `.close()` and `.toggle()` methods
|
|
63
|
+
*/
|
|
64
|
+
get open() { return __classPrivateFieldGet(this, _UmMenu_open, "f"); }
|
|
65
|
+
set open(open) {
|
|
66
|
+
if (open) {
|
|
67
|
+
this.calcDropdownPositioning();
|
|
68
|
+
}
|
|
69
|
+
__classPrivateFieldSet(this, _UmMenu_open, open, "f");
|
|
70
|
+
}
|
|
71
|
+
/**
|
|
72
|
+
* Set a selector to auto attach to a toggle element
|
|
73
|
+
*/
|
|
74
|
+
get toggleSelector() {
|
|
75
|
+
return this.attributes.getNamedItem('toggle-selector')?.value;
|
|
76
|
+
}
|
|
77
|
+
set toggleSelector(selector) {
|
|
78
|
+
this.toggleElement?.removeEventListener('click', this.toggle);
|
|
79
|
+
if (!selector) {
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
this.toggleElement = document.querySelector(selector);
|
|
83
|
+
this.toggleElement?.addEventListener('click', this.toggle);
|
|
84
|
+
}
|
|
85
|
+
get anchorElement() {
|
|
86
|
+
return this.parentElement;
|
|
87
|
+
}
|
|
88
|
+
render() {
|
|
89
|
+
return html `
|
|
90
|
+
<div class="menu">
|
|
91
|
+
<u-elevation></u-elevation>
|
|
92
|
+
<div class="content">
|
|
93
|
+
<slot></slot>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
`;
|
|
97
|
+
}
|
|
98
|
+
connectedCallback() {
|
|
99
|
+
super.connectedCallback();
|
|
100
|
+
window.addEventListener('click', this.close);
|
|
101
|
+
}
|
|
102
|
+
disconnectedCallback() {
|
|
103
|
+
super.disconnectedCallback();
|
|
104
|
+
window.removeEventListener('click', this.close);
|
|
105
|
+
}
|
|
106
|
+
show() {
|
|
107
|
+
if (this.open) {
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
__classPrivateFieldSet(this, _UmMenu_justShow, true, "f");
|
|
111
|
+
this.open = true;
|
|
112
|
+
}
|
|
113
|
+
calcDropdownPositioning() {
|
|
114
|
+
const anchorRect = this.getAnchorRect();
|
|
115
|
+
const menuRect = this.getMenuRect();
|
|
116
|
+
this.resetMenu();
|
|
117
|
+
this.setToOpenUpOrDown(anchorRect, menuRect);
|
|
118
|
+
this.setToOpenToStartOrEnd(anchorRect, menuRect);
|
|
119
|
+
}
|
|
120
|
+
resetMenu() {
|
|
121
|
+
this.menu.className = 'menu';
|
|
122
|
+
this.menu.style.maxHeight = '';
|
|
123
|
+
}
|
|
124
|
+
setToOpenUpOrDown(anchorRect, menuRect) {
|
|
125
|
+
const viewPortHeight = window.innerHeight;
|
|
126
|
+
if (viewPortHeight - (anchorRect.y + menuRect.height) >= 0) {
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
if (anchorRect.y <= viewPortHeight / 2) {
|
|
130
|
+
this.menu.style.maxHeight = this.autoScrollBlock
|
|
131
|
+
? `${viewPortHeight - anchorRect.y}px`
|
|
132
|
+
: '';
|
|
133
|
+
return;
|
|
134
|
+
}
|
|
135
|
+
this.menu.classList.add('up');
|
|
136
|
+
this.menu.style.maxHeight = this.autoScrollBlock
|
|
137
|
+
? `${anchorRect.y}px`
|
|
138
|
+
: '';
|
|
139
|
+
}
|
|
140
|
+
setToOpenToStartOrEnd(anchorRect, menuRect) {
|
|
141
|
+
if (this.direction === 'start') {
|
|
142
|
+
this.ensureMenuCanOpenToStart(anchorRect, menuRect);
|
|
143
|
+
return;
|
|
144
|
+
}
|
|
145
|
+
this.ensureMenuCanOpenToEnd(anchorRect, menuRect);
|
|
146
|
+
}
|
|
147
|
+
ensureMenuCanOpenToStart(anchorRect, menuRect) {
|
|
148
|
+
const viewPortWidth = window.innerWidth;
|
|
149
|
+
if (viewPortWidth - (anchorRect.x - menuRect.width) >= 0) {
|
|
150
|
+
this.menu.classList.add('start');
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
ensureMenuCanOpenToEnd(anchorRect, menuRect) {
|
|
154
|
+
const viewPortWidth = window.innerWidth;
|
|
155
|
+
if (viewPortWidth - (anchorRect.x + menuRect.width) >= 0) {
|
|
156
|
+
return;
|
|
157
|
+
}
|
|
158
|
+
this.menu.classList.add('start');
|
|
159
|
+
}
|
|
160
|
+
getAnchorRect() {
|
|
161
|
+
const anchorElement = this.anchorElement;
|
|
162
|
+
const rect = anchorElement.getBoundingClientRect();
|
|
163
|
+
const styles = getComputedStyle(anchorElement);
|
|
164
|
+
const width = parseInt(styles.width, 10);
|
|
165
|
+
const height = parseInt(styles.height, 10);
|
|
166
|
+
const xOffset = this.anchorCorner.endsWith('-end')
|
|
167
|
+
? width
|
|
168
|
+
: 0;
|
|
169
|
+
const yOffset = this.anchorCorner.startsWith('end-')
|
|
170
|
+
? height
|
|
171
|
+
: 0;
|
|
172
|
+
return {
|
|
173
|
+
y: rect.y + yOffset,
|
|
174
|
+
x: rect.x + xOffset,
|
|
175
|
+
width: width,
|
|
176
|
+
height: height
|
|
177
|
+
};
|
|
178
|
+
}
|
|
179
|
+
getMenuRect() {
|
|
180
|
+
const menu = this.menu;
|
|
181
|
+
const styles = getComputedStyle(menu);
|
|
182
|
+
const width = parseInt(styles.width, 10);
|
|
183
|
+
const height = parseInt(styles.height, 10);
|
|
184
|
+
return {
|
|
185
|
+
width: width,
|
|
186
|
+
height: height
|
|
187
|
+
};
|
|
188
|
+
}
|
|
189
|
+
};
|
|
190
|
+
_UmMenu_open = new WeakMap();
|
|
191
|
+
_UmMenu_justShow = new WeakMap();
|
|
192
|
+
UmMenu.styles = [baseStyles, styles];
|
|
193
|
+
__decorate([
|
|
194
|
+
property({ type: Boolean, reflect: true })
|
|
195
|
+
], UmMenu.prototype, "open", null);
|
|
196
|
+
__decorate([
|
|
197
|
+
property({ attribute: 'anchor-corner', reflect: true })
|
|
198
|
+
], UmMenu.prototype, "anchorCorner", void 0);
|
|
199
|
+
__decorate([
|
|
200
|
+
property({ reflect: true })
|
|
201
|
+
], UmMenu.prototype, "direction", void 0);
|
|
202
|
+
__decorate([
|
|
203
|
+
property({ type: Boolean, attribute: 'auto-scroll-block', reflect: true })
|
|
204
|
+
], UmMenu.prototype, "autoScrollBlock", void 0);
|
|
205
|
+
__decorate([
|
|
206
|
+
property({ attribute: 'toggle-selector', reflect: true })
|
|
207
|
+
], UmMenu.prototype, "toggleSelector", null);
|
|
208
|
+
__decorate([
|
|
209
|
+
query('.menu')
|
|
210
|
+
], UmMenu.prototype, "menu", void 0);
|
|
211
|
+
UmMenu = __decorate([
|
|
212
|
+
customElement('u-menu')
|
|
213
|
+
], UmMenu);
|
|
214
|
+
export { UmMenu };
|
|
215
|
+
//# sourceMappingURL=menu.js.map
|