@francofantomius/material-components 1.0.1 → 1.1.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/CHANGELOG.md +39 -0
- package/README.md +41 -9
- package/custom-elements.json +19060 -9017
- package/dist/chunks/account-menu-Dau0UHTl.js +1290 -0
- package/dist/chunks/account-menu-Dau0UHTl.js.map +1 -0
- package/dist/chunks/app-drawer-Du1ePzxZ.js +903 -0
- package/dist/chunks/app-drawer-Du1ePzxZ.js.map +1 -0
- package/dist/chunks/bottom-sheet-q79BBYAj.js +402 -0
- package/dist/chunks/bottom-sheet-q79BBYAj.js.map +1 -0
- package/dist/chunks/{button-B4TSZ7Sl.js → button-D2vn7kJ8.js} +9 -8
- package/dist/chunks/button-D2vn7kJ8.js.map +1 -0
- package/dist/chunks/button-group-CNqvJx1n.js +143 -0
- package/dist/chunks/button-group-CNqvJx1n.js.map +1 -0
- package/dist/chunks/carousel-item-BG6kjjjk.js +371 -0
- package/dist/chunks/carousel-item-BG6kjjjk.js.map +1 -0
- package/dist/chunks/date-picker-DJeHi4w-.js +777 -0
- package/dist/chunks/date-picker-DJeHi4w-.js.map +1 -0
- package/dist/chunks/fab-menu.css-3pu930sZ.js +320 -0
- package/dist/chunks/fab-menu.css-3pu930sZ.js.map +1 -0
- package/dist/chunks/{icon-button-BdSc7eot.js → icon-button-BQz73GLa.js} +2 -2
- package/dist/chunks/icon-button-BQz73GLa.js.map +1 -0
- package/dist/chunks/loading-indicator-CvWnZr9o.js +193 -0
- package/dist/chunks/loading-indicator-CvWnZr9o.js.map +1 -0
- package/dist/chunks/menu-item-BBSp5Cqc.js +390 -0
- package/dist/chunks/menu-item-BBSp5Cqc.js.map +1 -0
- package/dist/chunks/navigation-bar-item-C9DfOEzg.js +397 -0
- package/dist/chunks/navigation-bar-item-C9DfOEzg.js.map +1 -0
- package/dist/chunks/navigation-rail-item-6pdhNHJK.js +357 -0
- package/dist/chunks/navigation-rail-item-6pdhNHJK.js.map +1 -0
- package/dist/chunks/segmented-button-B0BvGSQ7.js +265 -0
- package/dist/chunks/segmented-button-B0BvGSQ7.js.map +1 -0
- package/dist/chunks/side-sheet-S2w081AK.js +360 -0
- package/dist/chunks/side-sheet-S2w081AK.js.map +1 -0
- package/dist/chunks/slider-D-mnO8yQ.js +450 -0
- package/dist/chunks/slider-D-mnO8yQ.js.map +1 -0
- package/dist/chunks/split-button-DUfjukQY.js +450 -0
- package/dist/chunks/split-button-DUfjukQY.js.map +1 -0
- package/dist/chunks/{table-aRTYzDyE.js → table-CqHnneAj.js} +2 -2
- package/dist/chunks/{table-aRTYzDyE.js.map → table-CqHnneAj.js.map} +1 -1
- package/dist/chunks/time-picker-CZnb2sWz.js +785 -0
- package/dist/chunks/time-picker-CZnb2sWz.js.map +1 -0
- package/dist/chunks/toolbar-DXVQbQKJ.js +271 -0
- package/dist/chunks/toolbar-DXVQbQKJ.js.map +1 -0
- package/dist/chunks/tooltip-CE7JMHMu.js +398 -0
- package/dist/chunks/tooltip-CE7JMHMu.js.map +1 -0
- package/dist/components/account-menu/account-menu.js +8 -0
- package/dist/components/app-drawer/app-drawer.js +9 -0
- package/dist/components/bottom-sheet/bottom-sheet.css.d.ts +2 -0
- package/dist/components/bottom-sheet/bottom-sheet.css.d.ts.map +1 -0
- package/dist/components/bottom-sheet/bottom-sheet.d.ts +69 -0
- package/dist/components/bottom-sheet/bottom-sheet.d.ts.map +1 -0
- package/dist/components/bottom-sheet/bottom-sheet.js +4 -0
- package/dist/components/button/button.css.d.ts.map +1 -1
- package/dist/components/button/button.js +1 -1
- package/dist/components/button-group/button-group.css.d.ts +2 -0
- package/dist/components/button-group/button-group.css.d.ts.map +1 -0
- package/dist/components/button-group/button-group.d.ts +28 -0
- package/dist/components/button-group/button-group.d.ts.map +1 -0
- package/dist/components/button-group/button-group.js +4 -0
- package/dist/components/carousel/carousel-item.d.ts +33 -0
- package/dist/components/carousel/carousel-item.d.ts.map +1 -0
- package/dist/components/carousel/carousel-item.js +4 -0
- package/dist/components/carousel/carousel.css.d.ts +3 -0
- package/dist/components/carousel/carousel.css.d.ts.map +1 -0
- package/dist/components/carousel/carousel.d.ts +81 -0
- package/dist/components/carousel/carousel.d.ts.map +1 -0
- package/dist/components/carousel/carousel.js +284 -0
- package/dist/components/carousel/carousel.js.map +1 -0
- package/dist/components/date-picker/date-picker.css.d.ts +2 -0
- package/dist/components/date-picker/date-picker.css.d.ts.map +1 -0
- package/dist/components/date-picker/date-picker.d.ts +59 -0
- package/dist/components/date-picker/date-picker.d.ts.map +1 -0
- package/dist/components/date-picker/date-picker.js +4 -0
- package/dist/components/fab-menu/fab-menu-item.d.ts +35 -0
- package/dist/components/fab-menu/fab-menu-item.d.ts.map +1 -0
- package/dist/components/fab-menu/fab-menu-item.js +93 -0
- package/dist/components/fab-menu/fab-menu-item.js.map +1 -0
- package/dist/components/fab-menu/fab-menu.css.d.ts +3 -0
- package/dist/components/fab-menu/fab-menu.css.d.ts.map +1 -0
- package/dist/components/fab-menu/fab-menu.d.ts +72 -0
- package/dist/components/fab-menu/fab-menu.d.ts.map +1 -0
- package/dist/components/fab-menu/fab-menu.js +148 -0
- package/dist/components/fab-menu/fab-menu.js.map +1 -0
- package/dist/components/icon-button/icon-button.js +1 -1
- package/dist/components/loading-indicator/loading-indicator.css.d.ts +2 -0
- package/dist/components/loading-indicator/loading-indicator.css.d.ts.map +1 -0
- package/dist/components/loading-indicator/loading-indicator.d.ts +48 -0
- package/dist/components/loading-indicator/loading-indicator.d.ts.map +1 -0
- package/dist/components/loading-indicator/loading-indicator.js +4 -0
- package/dist/components/menu/menu-item.d.ts +41 -0
- package/dist/components/menu/menu-item.d.ts.map +1 -0
- package/dist/components/menu/menu-item.js +4 -0
- package/dist/components/menu/menu.css.d.ts +3 -0
- package/dist/components/menu/menu.css.d.ts.map +1 -0
- package/dist/components/menu/menu.d.ts +91 -0
- package/dist/components/menu/menu.d.ts.map +1 -0
- package/dist/components/menu/menu.js +205 -0
- package/dist/components/menu/menu.js.map +1 -0
- package/dist/components/navigation-bar/navigation-bar-item.d.ts +49 -0
- package/dist/components/navigation-bar/navigation-bar-item.d.ts.map +1 -0
- package/dist/components/navigation-bar/navigation-bar-item.js +5 -0
- package/dist/components/navigation-bar/navigation-bar.css.d.ts +3 -0
- package/dist/components/navigation-bar/navigation-bar.css.d.ts.map +1 -0
- package/dist/components/navigation-bar/navigation-bar.d.ts +50 -0
- package/dist/components/navigation-bar/navigation-bar.d.ts.map +1 -0
- package/dist/components/navigation-bar/navigation-bar.js +150 -0
- package/dist/components/navigation-bar/navigation-bar.js.map +1 -0
- package/dist/components/navigation-rail/navigation-rail-item.d.ts +36 -0
- package/dist/components/navigation-rail/navigation-rail-item.d.ts.map +1 -0
- package/dist/components/navigation-rail/navigation-rail-item.js +5 -0
- package/dist/components/navigation-rail/navigation-rail.css.d.ts +3 -0
- package/dist/components/navigation-rail/navigation-rail.css.d.ts.map +1 -0
- package/dist/components/navigation-rail/navigation-rail.d.ts +43 -0
- package/dist/components/navigation-rail/navigation-rail.d.ts.map +1 -0
- package/dist/components/navigation-rail/navigation-rail.js +121 -0
- package/dist/components/navigation-rail/navigation-rail.js.map +1 -0
- package/dist/components/segmented-button/segmented-button.css.d.ts +3 -0
- package/dist/components/segmented-button/segmented-button.css.d.ts.map +1 -0
- package/dist/components/segmented-button/segmented-button.d.ts +40 -0
- package/dist/components/segmented-button/segmented-button.d.ts.map +1 -0
- package/dist/components/segmented-button/segmented-button.js +5 -0
- package/dist/components/side-sheet/side-sheet.css.d.ts +2 -0
- package/dist/components/side-sheet/side-sheet.css.d.ts.map +1 -0
- package/dist/components/side-sheet/side-sheet.d.ts +57 -0
- package/dist/components/side-sheet/side-sheet.d.ts.map +1 -0
- package/dist/components/side-sheet/side-sheet.js +4 -0
- package/dist/components/slider/slider.css.d.ts +2 -0
- package/dist/components/slider/slider.css.d.ts.map +1 -0
- package/dist/components/slider/slider.d.ts +51 -0
- package/dist/components/slider/slider.d.ts.map +1 -0
- package/dist/components/slider/slider.js +4 -0
- package/dist/components/split-button/split-button.css.d.ts +2 -0
- package/dist/components/split-button/split-button.css.d.ts.map +1 -0
- package/dist/components/split-button/split-button.d.ts +89 -0
- package/dist/components/split-button/split-button.d.ts.map +1 -0
- package/dist/components/split-button/split-button.js +4 -0
- package/dist/components/table/table.js +1 -1
- package/dist/components/time-picker/time-picker.css.d.ts +2 -0
- package/dist/components/time-picker/time-picker.css.d.ts.map +1 -0
- package/dist/components/time-picker/time-picker.d.ts +87 -0
- package/dist/components/time-picker/time-picker.d.ts.map +1 -0
- package/dist/components/time-picker/time-picker.js +4 -0
- package/dist/components/toolbar/toolbar.css.d.ts +2 -0
- package/dist/components/toolbar/toolbar.css.d.ts.map +1 -0
- package/dist/components/toolbar/toolbar.d.ts +53 -0
- package/dist/components/toolbar/toolbar.d.ts.map +1 -0
- package/dist/components/toolbar/toolbar.js +4 -0
- package/dist/components/tooltip/tooltip.css.d.ts +2 -0
- package/dist/components/tooltip/tooltip.css.d.ts.map +1 -0
- package/dist/components/tooltip/tooltip.d.ts +89 -0
- package/dist/components/tooltip/tooltip.d.ts.map +1 -0
- package/dist/components/tooltip/tooltip.js +4 -0
- package/dist/index.d.ts +21 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +148 -2263
- package/dist/tokens/index.js +4 -2
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/theme.css.d.ts.map +1 -1
- package/llms.txt +2326 -0
- package/package.json +99 -2
- package/dist/chunks/button-B4TSZ7Sl.js.map +0 -1
- package/dist/chunks/icon-button-BdSc7eot.js.map +0 -1
- package/dist/index.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fab-menu-item.js","names":[],"sources":["../../../src/components/fab-menu/fab-menu-item.ts"],"sourcesContent":["import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { fabMenuItemStyles } from './fab-menu.css.js';\n\nexport type FabMenuItemSize = 'small' | 'medium';\nexport type FabMenuItemLabelPlacement = 'start' | 'end' | 'top' | 'bottom';\n\n/**\n * Material Design 3 FAB Menu Item component.\n * Represents a single action item inside an `md-fab-menu` stack.\n *\n * @element md-fab-menu-item\n *\n * @slot - Default slot for item text label.\n * @slot label - Explicit slot for custom label content.\n * @slot icon - Custom icon replacement.\n *\n * @fires action - Dispatched when the item is clicked or activated.\n */\n@customElement('md-fab-menu-item')\nexport class MdFabMenuItem extends MdBaseElement {\n static override styles = [MdBaseElement.styles, fabMenuItemStyles];\n\n @property({ type: String })\n icon = '';\n\n @property({ type: String })\n label = '';\n\n @property({ type: String, attribute: 'label-placement', reflect: true })\n labelPlacement: FabMenuItemLabelPlacement = 'start';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: String })\n value = '';\n\n @property({ type: String, reflect: true })\n size: FabMenuItemSize = 'small';\n\n @property({ type: Boolean, reflect: true })\n lowered = false;\n\n @property({ type: String, attribute: 'aria-label' })\n ariaLabelText = '';\n\n private handleClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n return;\n }\n\n this.emitEvent('action', {\n item: this,\n value: this.value,\n label: this.label,\n });\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) return;\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handleClick(event as unknown as MouseEvent);\n }\n };\n\n override render() {\n const hasLabel = Boolean(this.label);\n const labelMarkup = html`\n <slot name=\"label\">\n ${hasLabel ? html`<span class=\"label-pill\">${this.label}</span>` : html`<slot class=\"label-pill\"></slot>`}\n </slot>\n `;\n\n return html`\n <div\n class=\"item-container\"\n role=\"menuitem\"\n tabindex=${this.disabled ? '-1' : '0'}\n aria-disabled=${this.disabled ? 'true' : 'false'}\n aria-label=${this.ariaLabelText || this.label || nothing}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n >\n ${labelMarkup}\n\n <button\n type=\"button\"\n class=\"mini-fab\"\n tabindex=\"-1\"\n ?disabled=${this.disabled}\n aria-hidden=\"true\"\n >\n <md-ripple ?disabled=${this.disabled}></md-ripple>\n <md-focus-ring></md-focus-ring>\n <span class=\"icon-wrapper\">\n <slot name=\"icon\">\n ${this.icon ? html`<md-icon name=${this.icon}></md-icon>` : nothing}\n </slot>\n </span>\n </button>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-fab-menu-item': MdFabMenuItem;\n }\n}\n"],"mappings":";;;;;;;AAwBO,IAAM,IAAN,cAA4B,EAAc;AAAA;iBAIxC,KAAA,OAAA,IAGC,KAAA,QAAA,IAGoC,KAAA,iBAAA,SAGjC,KAAA,WAAA,IAGH,KAAA,QAAA,IAGgB,KAAA,OAAA,SAGd,KAAA,UAAA,IAGM,KAAA,gBAAA,IAEO,KAAA,cAAA,CAAA,MAAsB;AAC3C,UAAI,KAAK,UAAU;AACjB,QAAA,EAAM,eAAe,GACrB,EAAM,yBAAyB;AAC/B;AAAA,MACF;AAEA,WAAK,UAAU,UAAU;AAAA,QACvB,MAAM;AAAA,QACN,OAAO,KAAK;AAAA,QACZ,OAAO,KAAK;AAAA,MACd,CAAC;AAAA,IACH,GAEyB,KAAA,gBAAA,CAAA,MAAyB;AAChD,MAAI,KAAK,aACL,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,eAAe,GACrB,KAAK,YAAY,CAA8B;AAAA,IAEnD;AAAA;;AA9CyB,SAAA,SAAA,CAAC,EAAc,QAAQ,CAAiB;AAAA;EAgDjE,SAAkB;AAChB,UAAM,IAAW,EAAQ,KAAK,OACxB,IAAc;AAAA;AAAA,UAEd,IAAW,6BAAgC,KAAK,KAAA,YAAiB,mCAAI;AAAA;AAAA;AAI3E,WAAO;AAAA;AAAA;AAAA;AAAA,mBAIQ,KAAK,WAAW,OAAO,GAAA;AAAA,wBAClB,KAAK,WAAW,SAAS,OAAA;AAAA,qBAC5B,KAAK,iBAAiB,KAAK,SAAS,CAAA;AAAA,iBACxC,KAAK,WAAA;AAAA,mBACH,KAAK,aAAA;AAAA;AAAA,UAEd,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMY,KAAK,QAAA;AAAA;AAAA;AAAA,iCAGM,KAAK,QAAA;AAAA;AAAA;AAAA;AAAA,gBAItB,KAAK,OAAO,kBAAqB,KAAK,IAAA,gBAAoB,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMxE;AACF;AApFG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,MAAA;AAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,MAAA;AAGzB,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,WAAW;AAAA,EAAmB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,MAAA;AAGtE,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,MAAA;AAGzB,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,MAAA;AAGxC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,WAAW;AAAa,CAAC,CAAA,GAAA,EAAA,WAAA,iBAAA,MAAA;AAzBpD,IAAA,EAAA,CAAA,EAAc,kBAAkB,CAAA,GAAA,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fab-menu.css.d.ts","sourceRoot":"","sources":["../../../src/components/fab-menu/fab-menu.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,yBA8MzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,yBA0G7B,CAAC"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { MdBaseElement } from '../../internal/base-component.js';
|
|
2
|
+
export type FabMenuDirection = 'up' | 'down' | 'left' | 'right';
|
|
3
|
+
export type FabMenuSize = 'small' | 'medium' | 'large';
|
|
4
|
+
/**
|
|
5
|
+
* Material Design 3 Floating Action Button Menu (FAB Menu / Speed Dial) component.
|
|
6
|
+
* Expands a floating action button into a vertical or horizontal stack of related sub-actions with labels.
|
|
7
|
+
*
|
|
8
|
+
* @element md-fab-menu
|
|
9
|
+
*
|
|
10
|
+
* @slot - Default slot for md-fab-menu-item sub-actions.
|
|
11
|
+
* @slot trigger - Custom trigger element replacing the default FAB.
|
|
12
|
+
* @slot icon - Custom icon when closed.
|
|
13
|
+
* @slot open-icon - Custom icon when opened.
|
|
14
|
+
*
|
|
15
|
+
* @fires open - Dispatched when the FAB menu opens.
|
|
16
|
+
* @fires close - Dispatched when the FAB menu closes.
|
|
17
|
+
* @fires toggle - Dispatched when the menu toggles open/close state.
|
|
18
|
+
* @fires scrim-click - Dispatched when the modal scrim backdrop is clicked.
|
|
19
|
+
* @fires action - Dispatched when any child md-fab-menu-item is activated.
|
|
20
|
+
*/
|
|
21
|
+
export declare class MdFabMenu extends MdBaseElement {
|
|
22
|
+
static styles: import('lit').CSSResultGroup[];
|
|
23
|
+
open: boolean;
|
|
24
|
+
modal: boolean;
|
|
25
|
+
direction: FabMenuDirection;
|
|
26
|
+
icon: string;
|
|
27
|
+
openIcon: string;
|
|
28
|
+
label: string;
|
|
29
|
+
extended: boolean;
|
|
30
|
+
size: FabMenuSize;
|
|
31
|
+
lowered: boolean;
|
|
32
|
+
disabled: boolean;
|
|
33
|
+
closeOnItemClick: boolean;
|
|
34
|
+
closeOnOutsideClick: boolean;
|
|
35
|
+
ariaLabelText: string;
|
|
36
|
+
connectedCallback(): void;
|
|
37
|
+
disconnectedCallback(): void;
|
|
38
|
+
willUpdate(changedProperties: Map<string, unknown>): void;
|
|
39
|
+
updated(changedProperties: Map<string, unknown>): void;
|
|
40
|
+
private handleKeyDown;
|
|
41
|
+
private handleDocumentClick;
|
|
42
|
+
private handleScrimClick;
|
|
43
|
+
private handleTriggerClick;
|
|
44
|
+
private handleItemAction;
|
|
45
|
+
/**
|
|
46
|
+
* Opens the FAB menu.
|
|
47
|
+
*/
|
|
48
|
+
show(): void;
|
|
49
|
+
/**
|
|
50
|
+
* Opens the FAB menu (alias).
|
|
51
|
+
*/
|
|
52
|
+
openMenu(): void;
|
|
53
|
+
/**
|
|
54
|
+
* Closes the FAB menu.
|
|
55
|
+
*/
|
|
56
|
+
close(): void;
|
|
57
|
+
/**
|
|
58
|
+
* Closes the FAB menu (alias).
|
|
59
|
+
*/
|
|
60
|
+
closeMenu(): void;
|
|
61
|
+
/**
|
|
62
|
+
* Toggles the FAB menu open/closed state.
|
|
63
|
+
*/
|
|
64
|
+
toggle(): void;
|
|
65
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
66
|
+
}
|
|
67
|
+
declare global {
|
|
68
|
+
interface HTMLElementTagNameMap {
|
|
69
|
+
'md-fab-menu': MdFabMenu;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
//# sourceMappingURL=fab-menu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fab-menu.d.ts","sourceRoot":"","sources":["../../../src/components/fab-menu/fab-menu.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,iCAAiC,CAAC;AACzC,OAAO,yCAAyC,CAAC;AACjD,OAAO,iBAAiB,CAAC;AAIzB,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAChE,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,SAAU,SAAQ,aAAa;IAC1C,OAAgB,MAAM,iCAAyC;IAG/D,IAAI,UAAS;IAGb,KAAK,UAAS;IAGd,SAAS,EAAE,gBAAgB,CAAQ;IAGnC,IAAI,SAAS;IAGb,QAAQ,SAAM;IAGd,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,IAAI,EAAE,WAAW,CAAY;IAG7B,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,gBAAgB,UAAQ;IAGxB,mBAAmB,UAAQ;IAG3B,aAAa,SAA0B;IAE9B,iBAAiB;IAOjB,oBAAoB;IAOpB,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAOlD,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAYxD,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,mBAAmB,CAMzB;IAEF,OAAO,CAAC,gBAAgB,CAItB;IAEF,OAAO,CAAC,kBAAkB,CAIxB;IAEF,OAAO,CAAC,gBAAgB,CAKtB;IAEF;;OAEG;IACH,IAAI;IAMJ;;OAEG;IACH,QAAQ;IAIR;;OAEG;IACH,KAAK;IAML;;OAEG;IACH,SAAS;IAIT;;OAEG;IACH,MAAM;IAIG,MAAM;CAgDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,SAAS,CAAC;KAC1B;CACF"}
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
import { n as a, t } from "../../chunks/decorate-DXuynaiA.js";
|
|
2
|
+
import "../../chunks/ripple-squbKHhj.js";
|
|
3
|
+
import "../../chunks/focus-ring-CuiJuM-y.js";
|
|
4
|
+
import "../../chunks/icon-DrNqcNEL.js";
|
|
5
|
+
import { n as r } from "../../chunks/fab-menu.css-3pu930sZ.js";
|
|
6
|
+
import { html as s, nothing as l } from "lit";
|
|
7
|
+
import { customElement as c, property as i } from "lit/decorators.js";
|
|
8
|
+
var e = class extends a {
|
|
9
|
+
constructor(...o) {
|
|
10
|
+
super(...o), this.open = !1, this.modal = !1, this.direction = "up", this.icon = "add", this.openIcon = "", this.label = "", this.extended = !1, this.size = "medium", this.lowered = !1, this.disabled = !1, this.closeOnItemClick = !0, this.closeOnOutsideClick = !0, this.ariaLabelText = "Floating action menu", this.handleKeyDown = (n) => {
|
|
11
|
+
n.key === "Escape" && this.open && this.close();
|
|
12
|
+
}, this.handleDocumentClick = (n) => {
|
|
13
|
+
!this.open || !this.closeOnOutsideClick || n.composedPath().includes(this) || this.close();
|
|
14
|
+
}, this.handleScrimClick = (n) => {
|
|
15
|
+
n.stopPropagation(), this.emitEvent("scrim-click"), this.close();
|
|
16
|
+
}, this.handleTriggerClick = (n) => {
|
|
17
|
+
n.stopPropagation(), !this.disabled && this.toggle();
|
|
18
|
+
}, this.handleItemAction = (n) => {
|
|
19
|
+
this.closeOnItemClick && this.close();
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
static {
|
|
23
|
+
this.styles = [a.styles, r];
|
|
24
|
+
}
|
|
25
|
+
connectedCallback() {
|
|
26
|
+
super.connectedCallback(), window.addEventListener("keydown", this.handleKeyDown), document.addEventListener("pointerdown", this.handleDocumentClick), this.addEventListener("action", this.handleItemAction);
|
|
27
|
+
}
|
|
28
|
+
disconnectedCallback() {
|
|
29
|
+
super.disconnectedCallback(), window.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("pointerdown", this.handleDocumentClick), this.removeEventListener("action", this.handleItemAction);
|
|
30
|
+
}
|
|
31
|
+
willUpdate(o) {
|
|
32
|
+
super.willUpdate(o), o.has("label") && (this.extended = !!this.label);
|
|
33
|
+
}
|
|
34
|
+
updated(o) {
|
|
35
|
+
super.updated(o), o.has("open") && (this.open ? this.emitEvent("open") : this.emitEvent("close"), this.emitEvent("toggle", { open: this.open }));
|
|
36
|
+
}
|
|
37
|
+
show() {
|
|
38
|
+
this.open || (this.open = !0);
|
|
39
|
+
}
|
|
40
|
+
openMenu() {
|
|
41
|
+
this.show();
|
|
42
|
+
}
|
|
43
|
+
close() {
|
|
44
|
+
this.open && (this.open = !1);
|
|
45
|
+
}
|
|
46
|
+
closeMenu() {
|
|
47
|
+
this.close();
|
|
48
|
+
}
|
|
49
|
+
toggle() {
|
|
50
|
+
this.open = !this.open;
|
|
51
|
+
}
|
|
52
|
+
render() {
|
|
53
|
+
const o = !!this.openIcon, n = this.open && o ? this.openIcon : this.icon;
|
|
54
|
+
return s`
|
|
55
|
+
${this.modal ? s`<div class="scrim" @click=${this.handleScrimClick}></div>` : l}
|
|
56
|
+
|
|
57
|
+
<div class="container">
|
|
58
|
+
<!-- Sub-FAB Action Items Stack -->
|
|
59
|
+
<div
|
|
60
|
+
class="items"
|
|
61
|
+
role="menu"
|
|
62
|
+
aria-hidden=${this.open ? "false" : "true"}
|
|
63
|
+
aria-orientation=${this.direction === "left" || this.direction === "right" ? "horizontal" : "vertical"}
|
|
64
|
+
>
|
|
65
|
+
<slot></slot>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<!-- Main FAB Trigger -->
|
|
69
|
+
<slot name="trigger" @click=${this.handleTriggerClick}>
|
|
70
|
+
<button
|
|
71
|
+
type="button"
|
|
72
|
+
class="trigger-btn"
|
|
73
|
+
?disabled=${this.disabled}
|
|
74
|
+
aria-haspopup="menu"
|
|
75
|
+
aria-expanded=${this.open ? "true" : "false"}
|
|
76
|
+
aria-label=${this.ariaLabelText || this.label || l}
|
|
77
|
+
@click=${this.handleTriggerClick}
|
|
78
|
+
>
|
|
79
|
+
<md-ripple ?disabled=${this.disabled}></md-ripple>
|
|
80
|
+
<md-focus-ring></md-focus-ring>
|
|
81
|
+
<span class="trigger-content">
|
|
82
|
+
<span class="trigger-icon ${o ? "" : "rotate"}">
|
|
83
|
+
<slot name=${this.open && o ? "open-icon" : "icon"}>
|
|
84
|
+
${n ? s`<md-icon name=${n}></md-icon>` : l}
|
|
85
|
+
</slot>
|
|
86
|
+
</span>
|
|
87
|
+
<slot name="label">
|
|
88
|
+
${this.label ? s`<span class="trigger-label">${this.label}</span>` : l}
|
|
89
|
+
</slot>
|
|
90
|
+
</span>
|
|
91
|
+
</button>
|
|
92
|
+
</slot>
|
|
93
|
+
</div>
|
|
94
|
+
`;
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
t([i({
|
|
98
|
+
type: Boolean,
|
|
99
|
+
reflect: !0
|
|
100
|
+
})], e.prototype, "open", void 0);
|
|
101
|
+
t([i({
|
|
102
|
+
type: Boolean,
|
|
103
|
+
reflect: !0
|
|
104
|
+
})], e.prototype, "modal", void 0);
|
|
105
|
+
t([i({
|
|
106
|
+
type: String,
|
|
107
|
+
reflect: !0
|
|
108
|
+
})], e.prototype, "direction", void 0);
|
|
109
|
+
t([i({ type: String })], e.prototype, "icon", void 0);
|
|
110
|
+
t([i({
|
|
111
|
+
type: String,
|
|
112
|
+
attribute: "open-icon"
|
|
113
|
+
})], e.prototype, "openIcon", void 0);
|
|
114
|
+
t([i({ type: String })], e.prototype, "label", void 0);
|
|
115
|
+
t([i({
|
|
116
|
+
type: Boolean,
|
|
117
|
+
reflect: !0
|
|
118
|
+
})], e.prototype, "extended", void 0);
|
|
119
|
+
t([i({
|
|
120
|
+
type: String,
|
|
121
|
+
reflect: !0
|
|
122
|
+
})], e.prototype, "size", void 0);
|
|
123
|
+
t([i({
|
|
124
|
+
type: Boolean,
|
|
125
|
+
reflect: !0
|
|
126
|
+
})], e.prototype, "lowered", void 0);
|
|
127
|
+
t([i({
|
|
128
|
+
type: Boolean,
|
|
129
|
+
reflect: !0
|
|
130
|
+
})], e.prototype, "disabled", void 0);
|
|
131
|
+
t([i({
|
|
132
|
+
type: Boolean,
|
|
133
|
+
attribute: "close-on-item-click"
|
|
134
|
+
})], e.prototype, "closeOnItemClick", void 0);
|
|
135
|
+
t([i({
|
|
136
|
+
type: Boolean,
|
|
137
|
+
attribute: "close-on-outside-click"
|
|
138
|
+
})], e.prototype, "closeOnOutsideClick", void 0);
|
|
139
|
+
t([i({
|
|
140
|
+
type: String,
|
|
141
|
+
attribute: "aria-label"
|
|
142
|
+
})], e.prototype, "ariaLabelText", void 0);
|
|
143
|
+
e = t([c("md-fab-menu")], e);
|
|
144
|
+
export {
|
|
145
|
+
e as MdFabMenu
|
|
146
|
+
};
|
|
147
|
+
|
|
148
|
+
//# sourceMappingURL=fab-menu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fab-menu.js","names":[],"sources":["../../../src/components/fab-menu/fab-menu.ts"],"sourcesContent":["import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { fabMenuStyles } from './fab-menu.css.js';\nimport { MdFabMenuItem } from './fab-menu-item.js';\n\nexport type FabMenuDirection = 'up' | 'down' | 'left' | 'right';\nexport type FabMenuSize = 'small' | 'medium' | 'large';\n\n/**\n * Material Design 3 Floating Action Button Menu (FAB Menu / Speed Dial) component.\n * Expands a floating action button into a vertical or horizontal stack of related sub-actions with labels.\n *\n * @element md-fab-menu\n *\n * @slot - Default slot for md-fab-menu-item sub-actions.\n * @slot trigger - Custom trigger element replacing the default FAB.\n * @slot icon - Custom icon when closed.\n * @slot open-icon - Custom icon when opened.\n *\n * @fires open - Dispatched when the FAB menu opens.\n * @fires close - Dispatched when the FAB menu closes.\n * @fires toggle - Dispatched when the menu toggles open/close state.\n * @fires scrim-click - Dispatched when the modal scrim backdrop is clicked.\n * @fires action - Dispatched when any child md-fab-menu-item is activated.\n */\n@customElement('md-fab-menu')\nexport class MdFabMenu extends MdBaseElement {\n static override styles = [MdBaseElement.styles, fabMenuStyles];\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ type: Boolean, reflect: true })\n modal = false;\n\n @property({ type: String, reflect: true })\n direction: FabMenuDirection = 'up';\n\n @property({ type: String })\n icon = 'add';\n\n @property({ type: String, attribute: 'open-icon' })\n openIcon = '';\n\n @property({ type: String })\n label = '';\n\n @property({ type: Boolean, reflect: true })\n extended = false;\n\n @property({ type: String, reflect: true })\n size: FabMenuSize = 'medium';\n\n @property({ type: Boolean, reflect: true })\n lowered = false;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, attribute: 'close-on-item-click' })\n closeOnItemClick = true;\n\n @property({ type: Boolean, attribute: 'close-on-outside-click' })\n closeOnOutsideClick = true;\n\n @property({ type: String, attribute: 'aria-label' })\n ariaLabelText = 'Floating action menu';\n\n override connectedCallback() {\n super.connectedCallback();\n window.addEventListener('keydown', this.handleKeyDown);\n document.addEventListener('pointerdown', this.handleDocumentClick);\n this.addEventListener('action', this.handleItemAction as EventListener);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n window.removeEventListener('keydown', this.handleKeyDown);\n document.removeEventListener('pointerdown', this.handleDocumentClick);\n this.removeEventListener('action', this.handleItemAction as EventListener);\n }\n\n override willUpdate(changedProperties: Map<string, unknown>) {\n super.willUpdate(changedProperties);\n if (changedProperties.has('label')) {\n this.extended = Boolean(this.label);\n }\n }\n\n override updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties);\n if (changedProperties.has('open')) {\n if (this.open) {\n this.emitEvent('open');\n } else {\n this.emitEvent('close');\n }\n this.emitEvent('toggle', { open: this.open });\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && this.open) {\n this.close();\n }\n };\n\n private handleDocumentClick = (event: MouseEvent | PointerEvent) => {\n if (!this.open || !this.closeOnOutsideClick) return;\n const path = event.composedPath();\n if (!path.includes(this)) {\n this.close();\n }\n };\n\n private handleScrimClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.emitEvent('scrim-click');\n this.close();\n };\n\n private handleTriggerClick = (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) return;\n this.toggle();\n };\n\n private handleItemAction = (event: CustomEvent) => {\n // If the event came from a child md-fab-menu-item, close menu if closeOnItemClick is true\n if (this.closeOnItemClick) {\n this.close();\n }\n };\n\n /**\n * Opens the FAB menu.\n */\n show() {\n if (!this.open) {\n this.open = true;\n }\n }\n\n /**\n * Opens the FAB menu (alias).\n */\n openMenu() {\n this.show();\n }\n\n /**\n * Closes the FAB menu.\n */\n close() {\n if (this.open) {\n this.open = false;\n }\n }\n\n /**\n * Closes the FAB menu (alias).\n */\n closeMenu() {\n this.close();\n }\n\n /**\n * Toggles the FAB menu open/closed state.\n */\n toggle() {\n this.open = !this.open;\n }\n\n override render() {\n const hasCustomOpenIcon = Boolean(this.openIcon);\n const activeIcon = this.open && hasCustomOpenIcon ? this.openIcon : this.icon;\n\n return html`\n ${this.modal\n ? html`<div class=\"scrim\" @click=${this.handleScrimClick}></div>`\n : nothing}\n\n <div class=\"container\">\n <!-- Sub-FAB Action Items Stack -->\n <div\n class=\"items\"\n role=\"menu\"\n aria-hidden=${this.open ? 'false' : 'true'}\n aria-orientation=${this.direction === 'left' || this.direction === 'right' ? 'horizontal' : 'vertical'}\n >\n <slot></slot>\n </div>\n\n <!-- Main FAB Trigger -->\n <slot name=\"trigger\" @click=${this.handleTriggerClick}>\n <button\n type=\"button\"\n class=\"trigger-btn\"\n ?disabled=${this.disabled}\n aria-haspopup=\"menu\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-label=${this.ariaLabelText || this.label || nothing}\n @click=${this.handleTriggerClick}\n >\n <md-ripple ?disabled=${this.disabled}></md-ripple>\n <md-focus-ring></md-focus-ring>\n <span class=\"trigger-content\">\n <span class=\"trigger-icon ${hasCustomOpenIcon ? '' : 'rotate'}\">\n <slot name=${this.open && hasCustomOpenIcon ? 'open-icon' : 'icon'}>\n ${activeIcon ? html`<md-icon name=${activeIcon}></md-icon>` : nothing}\n </slot>\n </span>\n <slot name=\"label\">\n ${this.label ? html`<span class=\"trigger-label\">${this.label}</span>` : nothing}\n </slot>\n </span>\n </button>\n </slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-fab-menu': MdFabMenu;\n }\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"loading-indicator.css.d.ts","sourceRoot":"","sources":["../../../src/components/loading-indicator/loading-indicator.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,yBA+IlC,CAAC"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { MdBaseElement } from '../../internal/base-component.js';
|
|
2
|
+
export type LoadingIndicatorSize = 'small' | 'medium' | 'large';
|
|
3
|
+
export type LoadingIndicatorShape = 'morph' | 'square' | 'circle' | 'clover' | 'star';
|
|
4
|
+
/**
|
|
5
|
+
* Material Design 3 Expressive Loading Indicator Component.
|
|
6
|
+
*
|
|
7
|
+
* Contained or uncontained loading indicator with animated morphing shape for short wait times.
|
|
8
|
+
*
|
|
9
|
+
* @element md-loading-indicator
|
|
10
|
+
*/
|
|
11
|
+
export declare class MdLoadingIndicator extends MdBaseElement {
|
|
12
|
+
static styles: import('lit').CSSResultGroup[];
|
|
13
|
+
/**
|
|
14
|
+
* Visual size of the loading indicator.
|
|
15
|
+
* @attr size
|
|
16
|
+
*/
|
|
17
|
+
size: LoadingIndicatorSize;
|
|
18
|
+
/**
|
|
19
|
+
* Whether the loading indicator is enclosed in a contained surface container.
|
|
20
|
+
* @attr contained
|
|
21
|
+
*/
|
|
22
|
+
contained: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* The shape animation style.
|
|
25
|
+
* @attr shape
|
|
26
|
+
*/
|
|
27
|
+
shape: LoadingIndicatorShape;
|
|
28
|
+
/**
|
|
29
|
+
* Whether the animation is paused.
|
|
30
|
+
* @attr paused
|
|
31
|
+
*/
|
|
32
|
+
paused: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Accessible label for the loading indicator.
|
|
35
|
+
* @attr label
|
|
36
|
+
*/
|
|
37
|
+
label: string;
|
|
38
|
+
connectedCallback(): void;
|
|
39
|
+
updated(changedProperties: Map<string, unknown>): void;
|
|
40
|
+
private updateAriaLabel;
|
|
41
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
42
|
+
}
|
|
43
|
+
declare global {
|
|
44
|
+
interface HTMLElementTagNameMap {
|
|
45
|
+
'md-loading-indicator': MdLoadingIndicator;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
//# sourceMappingURL=loading-indicator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"loading-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/loading-indicator/loading-indicator.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAGjE,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChE,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEtF;;;;;;GAMG;AACH,qBACa,kBAAmB,SAAQ,aAAa;IACnD,OAAgB,MAAM,iCAAkD;IAExE;;;OAGG;IAEH,IAAI,EAAE,oBAAoB,CAAY;IAEtC;;;OAGG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,KAAK,EAAE,qBAAqB,CAAW;IAEvC;;;OAGG;IAEH,MAAM,UAAS;IAEf;;;OAGG;IAEH,KAAK,SAAa;IAET,iBAAiB;IAWjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAOxD,OAAO,CAAC,eAAe;IAMd,MAAM;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { MdBaseElement } from '../../internal/base-component.js';
|
|
2
|
+
/**
|
|
3
|
+
* Material Design 3 Menu Item component.
|
|
4
|
+
* Represents an individual choice or action inside an `md-menu`.
|
|
5
|
+
*
|
|
6
|
+
* @element md-menu-item
|
|
7
|
+
*
|
|
8
|
+
* @slot start / icon - Leading icon or custom graphic.
|
|
9
|
+
* @slot - Default slot for item headline / label text.
|
|
10
|
+
* @slot end / trailing - Trailing content, shortcut text, or checkmark.
|
|
11
|
+
*
|
|
12
|
+
* @fires item-click - Dispatched when the menu item is clicked or activated.
|
|
13
|
+
* @fires select - Dispatched when the menu item is selected.
|
|
14
|
+
*/
|
|
15
|
+
export declare class MdMenuItem extends MdBaseElement {
|
|
16
|
+
static styles: import('lit').CSSResultGroup[];
|
|
17
|
+
disabled: boolean;
|
|
18
|
+
selected: boolean;
|
|
19
|
+
headline: string;
|
|
20
|
+
supportingText: string;
|
|
21
|
+
trailingSupportingText: string;
|
|
22
|
+
icon: string;
|
|
23
|
+
trailingIcon: string;
|
|
24
|
+
href: string;
|
|
25
|
+
target: string;
|
|
26
|
+
value: string;
|
|
27
|
+
keepOpen: boolean;
|
|
28
|
+
dense: boolean;
|
|
29
|
+
private itemElement;
|
|
30
|
+
connectedCallback(): void;
|
|
31
|
+
focus(options?: FocusOptions): void;
|
|
32
|
+
private handleClick;
|
|
33
|
+
private handleKeyDown;
|
|
34
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
35
|
+
}
|
|
36
|
+
declare global {
|
|
37
|
+
interface HTMLElementTagNameMap {
|
|
38
|
+
'md-menu-item': MdMenuItem;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=menu-item.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu-item.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,iCAAiC,CAAC;AACzC,OAAO,yCAAyC,CAAC;AACjD,OAAO,iBAAiB,CAAC;AAGzB;;;;;;;;;;;;GAYG;AACH,qBACa,UAAW,SAAQ,aAAa;IAC3C,OAAgB,MAAM,iCAA0C;IAGhE,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,SAAM;IAGd,cAAc,SAAM;IAGpB,sBAAsB,SAAM;IAG5B,IAAI,SAAM;IAGV,YAAY,SAAM;IAGlB,IAAI,SAAM;IAGV,MAAM,SAAM;IAGZ,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,KAAK,UAAS;IAGd,OAAO,CAAC,WAAW,CAAe;IAEzB,iBAAiB,IAAI,IAAI;IAOzB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAQ5C,OAAO,CAAC,WAAW,CAgBjB;IAEF,OAAO,CAAC,aAAa,CAOnB;IAEO,MAAM;CAuEhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu.css.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAqGtB,CAAC;AAEF,eAAO,MAAM,cAAc,yBAmK1B,CAAC"}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { MdBaseElement } from '../../internal/base-component.js';
|
|
2
|
+
import { MdMenuItem } from './menu-item.js';
|
|
3
|
+
export type MenuPositioning = 'absolute' | 'fixed';
|
|
4
|
+
export type MenuPlacement = 'bottom-start' | 'bottom-end' | 'bottom' | 'top-start' | 'top-end' | 'top' | 'left' | 'right';
|
|
5
|
+
export type MenuAlignment = 'start' | 'end' | 'center';
|
|
6
|
+
/**
|
|
7
|
+
* Material Design 3 Menu component.
|
|
8
|
+
* Menus display a list of choices on temporary surfaces when users interact with a trigger.
|
|
9
|
+
*
|
|
10
|
+
* @element md-menu
|
|
11
|
+
*
|
|
12
|
+
* @slot trigger - Slotted trigger element (e.g. button or icon-button).
|
|
13
|
+
* @slot - Default slot for `md-menu-item` components or dividers.
|
|
14
|
+
*
|
|
15
|
+
* @fires open - Dispatched when the menu opens.
|
|
16
|
+
* @fires close - Dispatched when the menu closes.
|
|
17
|
+
* @fires select - Dispatched when an item inside the menu is selected.
|
|
18
|
+
*/
|
|
19
|
+
export declare class MdMenu extends MdBaseElement {
|
|
20
|
+
static styles: import('lit').CSSResultGroup[];
|
|
21
|
+
open: boolean;
|
|
22
|
+
anchor: string | HTMLElement | null;
|
|
23
|
+
positioning: MenuPositioning;
|
|
24
|
+
placement: MenuPlacement;
|
|
25
|
+
alignment: MenuAlignment;
|
|
26
|
+
xOffset: number;
|
|
27
|
+
yOffset: number;
|
|
28
|
+
quick: boolean;
|
|
29
|
+
stayOpenOnFocusout: boolean;
|
|
30
|
+
dense: boolean;
|
|
31
|
+
ariaLabelText: string;
|
|
32
|
+
noTrigger: boolean;
|
|
33
|
+
private menuSurfaceElement;
|
|
34
|
+
private assignedTriggers;
|
|
35
|
+
private defaultSlotElements;
|
|
36
|
+
private _anchorElement;
|
|
37
|
+
get anchorElement(): HTMLElement | null;
|
|
38
|
+
set anchorElement(el: HTMLElement | null);
|
|
39
|
+
connectedCallback(): void;
|
|
40
|
+
disconnectedCallback(): void;
|
|
41
|
+
updated(changedProperties: Map<string, unknown>): void;
|
|
42
|
+
private updateDenseProp;
|
|
43
|
+
private handlePositionUpdate;
|
|
44
|
+
/**
|
|
45
|
+
* Calculates and updates the positioning of the menu surface.
|
|
46
|
+
*/
|
|
47
|
+
updatePosition(): void;
|
|
48
|
+
private applyRelativePlacement;
|
|
49
|
+
private handleDocumentClick;
|
|
50
|
+
private handleWindowKeyDown;
|
|
51
|
+
private handleSurfaceKeyDown;
|
|
52
|
+
private handleItemSelection;
|
|
53
|
+
private handleTriggerClick;
|
|
54
|
+
/**
|
|
55
|
+
* Opens the menu.
|
|
56
|
+
*/
|
|
57
|
+
show(): void;
|
|
58
|
+
/**
|
|
59
|
+
* Closes the menu.
|
|
60
|
+
*/
|
|
61
|
+
close(): void;
|
|
62
|
+
/**
|
|
63
|
+
* Toggles the menu open/closed state.
|
|
64
|
+
*/
|
|
65
|
+
toggle(): void;
|
|
66
|
+
/**
|
|
67
|
+
* Returns all menu items inside the menu.
|
|
68
|
+
* @param onlyEnabled - If true, filters out disabled items.
|
|
69
|
+
*/
|
|
70
|
+
getItems(onlyEnabled?: boolean): MdMenuItem[];
|
|
71
|
+
/**
|
|
72
|
+
* Focuses the first non-disabled menu item.
|
|
73
|
+
*/
|
|
74
|
+
focusFirstItem(): void;
|
|
75
|
+
/**
|
|
76
|
+
* Focuses the last non-disabled menu item.
|
|
77
|
+
*/
|
|
78
|
+
focusLastItem(): void;
|
|
79
|
+
/**
|
|
80
|
+
* Focuses the menu item at the specified index.
|
|
81
|
+
*/
|
|
82
|
+
focusItemAtIndex(index: number): void;
|
|
83
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
84
|
+
}
|
|
85
|
+
export * from './menu-item.js';
|
|
86
|
+
declare global {
|
|
87
|
+
interface HTMLElementTagNameMap {
|
|
88
|
+
'md-menu': MdMenu;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
//# sourceMappingURL=menu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,OAAO,CAAC;AACnD,MAAM,MAAM,aAAa,GACrB,cAAc,GACd,YAAY,GACZ,QAAQ,GACR,WAAW,GACX,SAAS,GACT,KAAK,GACL,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEvD;;;;;;;;;;;;GAYG;AACH,qBACa,MAAO,SAAQ,aAAa;IACvC,OAAgB,MAAM,iCAAsC;IAG5D,IAAI,UAAS;IAGb,MAAM,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAQ;IAG3C,WAAW,EAAE,eAAe,CAAc;IAG1C,SAAS,EAAE,aAAa,CAAkB;IAG1C,SAAS,EAAE,aAAa,CAAW;IAGnC,OAAO,SAAK;IAGZ,OAAO,SAAK;IAGZ,KAAK,UAAS;IAGd,kBAAkB,UAAS;IAG3B,KAAK,UAAS;IAGd,aAAa,SAAU;IAGvB,SAAS,UAAS;IAGlB,OAAO,CAAC,kBAAkB,CAAe;IAGzC,OAAO,CAAC,gBAAgB,CAAiB;IAGzC,OAAO,CAAC,mBAAmB,CAAiB;IAE5C,OAAO,CAAC,cAAc,CAA4B;IAElD,IAAI,aAAa,IAAI,WAAW,GAAG,IAAI,CAgBtC;IAED,IAAI,aAAa,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,EAGvC;IAEQ,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAU5B,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAqB/D,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,oBAAoB,CAI1B;IAEF;;OAEG;IACH,cAAc,IAAI,IAAI;IAkDtB,OAAO,CAAC,sBAAsB;IAyB9B,OAAO,CAAC,mBAAmB,CAUzB;IAEF,OAAO,CAAC,mBAAmB,CASzB;IAEF,OAAO,CAAC,oBAAoB,CA6C1B;IAEF,OAAO,CAAC,mBAAmB,CAOzB;IAEF,OAAO,CAAC,kBAAkB,CAGxB;IAEF;;OAEG;IACH,IAAI,IAAI,IAAI;IAMZ;;OAEG;IACH,KAAK,IAAI,IAAI;IAMb;;OAEG;IACH,MAAM,IAAI,IAAI;IAId;;;OAGG;IACH,QAAQ,CAAC,WAAW,UAAQ,GAAG,UAAU,EAAE;IAQ3C;;OAEG;IACH,cAAc,IAAI,IAAI;IAStB;;OAEG;IACH,aAAa,IAAI,IAAI;IAOrB;;OAEG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAO5B,MAAM;CA0BhB;AAED,cAAc,gBAAgB,CAAC;AAE/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
|