npm - @francofantomius/material-components - Versions diffs - 1.0.1 → 1.1.0 - Mend

@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.

Files changed (163) hide show

package/dist/chunks/account-menu-Dau0UHTl.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"account-menu-Dau0UHTl.js","names":[],"sources":["../../src/components/account-menu/account-menu.css.ts","../../src/components/account-menu/account-menu.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const accountMenuStyles = css`\n :host {\n display: inline-block;\n position: relative;\n font-family: var(--md-sys-typescale-font-family, inherit);\n }\n\n :host([hidden]) {\n display: none;\n }\n\n .trigger-container {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .avatar-btn {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--md-account-trigger-size, 40px);\n height: var(--md-account-trigger-size, 40px);\n border-radius: var(--md-sys-shape-corner-full, 9999px);\n background-color: var(--md-sys-color-primary-container, #EADDFF);\n color: var(--md-sys-color-on-primary-container, #21005D);\n border: 2px solid transparent;\n padding: 0;\n cursor: pointer;\n outline: none;\n font-family: inherit;\n font-size: 16px;\n font-weight: 600;\n user-select: none;\n transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;\n -webkit-tap-highlight-color: transparent;\n overflow: visible;\n }\n\n .avatar-btn:hover {\n box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);\n border-color: var(--md-sys-color-outline-variant, #CAC4D0);\n }\n\n .avatar-btn:focus-visible {\n border-color: var(--md-sys-color-primary, #6750A4);\n }\n\n .avatar-img {\n width: 100%;\n height: 100%;\n border-radius: var(--md-sys-shape-corner-full, 9999px);\n object-fit: cover;\n }\n\n .avatar-initials {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .backdrop {\n display: none;\n position: fixed;\n inset: 0;\n z-index: 990;\n background-color: transparent;\n }\n\n :host([modal]) .backdrop {\n background-color: rgba(0, 0, 0, 0.32);\n backdrop-filter: blur(1px);\n }\n\n :host([open][modal]) .backdrop {\n display: block;\n }\n\n .popover {\n display: none;\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n z-index: 1000;\n width: var(--md-account-menu-width, 380px);\n max-width: calc(100vw - 24px);\n height: fit-content;\n max-height: var(--md-account-menu-max-height, none);\n box-sizing: border-box;\n padding: 0;\n border-radius: var(--md-sys-shape-corner-extra-large, 28px);\n background-color: var(--md-sys-color-surface-container-high, #ECE6F0);\n color: var(--md-sys-color-on-surface, #1D1B20);\n box-shadow: var(--md-sys-elevation-level3, 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3));\n overflow-y: auto;\n overflow-x: hidden;\n overscroll-behavior: contain;\n scrollbar-width: thin;\n scrollbar-color: var(--md-sys-color-outline-variant, #CAC4D0) transparent;\n }\n\n :host([alignment='start']) .popover,\n :host([pivot='left']) .popover {\n right: auto;\n left: 0;\n }\n\n :host([open]) .popover {\n display: flex;\n flex-direction: column;\n animation: md-account-menu-in 150ms cubic-bezier(0.2, 0, 0, 1) forwards;\n }\n\n @keyframes md-account-menu-in {\n from {\n opacity: 0;\n transform: scale(0.92) translateY(-8px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n }\n\n /* Header Section */\n .popover-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding: 12px 16px 4px;\n box-sizing: border-box;\n }\n\n .header-leading {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n }\n\n .back-btn,\n slot[name=\"back-button\"] {\n display: none;\n --md-icon-size: 24px;\n font-size: 24px;\n flex-shrink: 0;\n }\n\n .popover-header .headline {\n display: none;\n margin: 0;\n font-size: var(--md-sys-typescale-title-large-size, 20px);\n font-weight: 500;\n line-height: 28px;\n color: var(--md-sys-color-on-surface, #1D1B20);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .close-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: transparent;\n border: none;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n cursor: pointer;\n padding: 0;\n transition: background-color 150ms ease;\n }\n\n .close-btn:hover {\n background-color: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.08));\n color: var(--md-sys-color-on-surface, #1D1B20);\n }\n\n /* Profile Card (Account Centerpiece) */\n .profile-card {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n padding: 8px 24px 20px;\n background-color: var(--md-sys-color-surface-container-lowest, #FFFFFF);\n margin: 8px 16px 12px;\n border-radius: var(--md-sys-shape-corner-large, 24px);\n border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n box-sizing: border-box;\n }\n\n .profile-avatar-wrapper {\n position: relative;\n margin: 12px 0 14px;\n }\n\n .profile-avatar {\n width: 76px;\n height: 76px;\n border-radius: 50%;\n background-color: var(--md-sys-color-primary, #6750A4);\n color: var(--md-sys-color-on-primary, #FFFFFF);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 30px;\n font-weight: 600;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n overflow: hidden;\n }\n\n .profile-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .avatar-edit-badge {\n position: absolute;\n bottom: -2px;\n right: -2px;\n width: 26px;\n height: 26px;\n border-radius: 50%;\n background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n border: 2px solid var(--md-sys-color-surface-container-lowest, #FFFFFF);\n color: var(--md-sys-color-on-surface, #1D1B20);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n padding: 0;\n transition: background-color 150ms ease;\n }\n\n .avatar-edit-badge:hover {\n background-color: var(--md-sys-color-primary-container, #EADDFF);\n color: var(--md-sys-color-on-primary-container, #21005D);\n }\n\n .avatar-edit-badge md-icon {\n --md-icon-size: 16px;\n font-size: 16px;\n }\n\n .profile-name {\n font-size: 18px;\n font-weight: 600;\n line-height: 24px;\n color: var(--md-sys-color-on-surface, #1D1B20);\n margin: 0 0 4px;\n }\n\n .profile-email {\n font-size: 13px;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n margin: 0 0 16px;\n }\n\n .manage-btn {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 8px 18px;\n border-radius: var(--md-sys-shape-corner-full, 9999px);\n border: 1px solid var(--md-sys-color-outline, #79747E);\n background: transparent;\n color: var(--md-sys-color-primary, #6750A4);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n text-decoration: none;\n transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;\n overflow: hidden;\n -webkit-tap-highlight-color: transparent;\n }\n\n .manage-btn:hover {\n background-color: var(--md-sys-color-primary-container, rgba(103, 80, 164, 0.08));\n border-color: var(--md-sys-color-primary, #6750A4);\n }\n\n /* Internal Tabs for Account Info */\n .account-tabs {\n display: flex;\n border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n padding: 0 16px;\n margin-bottom: 8px;\n gap: 4px;\n }\n\n .tab-btn {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 10px 8px;\n background: transparent;\n border: none;\n border-bottom: 2px solid transparent;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n font-family: inherit;\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: color 150ms ease, border-color 150ms ease;\n outline: none;\n }\n\n .tab-btn:hover {\n color: var(--md-sys-color-on-surface, #1D1B20);\n }\n\n .tab-btn.active {\n color: var(--md-sys-color-primary, #6750A4);\n border-bottom-color: var(--md-sys-color-primary, #6750A4);\n font-weight: 600;\n }\n\n .tab-btn md-icon {\n --md-icon-size: 16px;\n font-size: 16px;\n }\n\n .tab-panel {\n display: none;\n padding: 8px 16px 14px;\n box-sizing: border-box;\n }\n\n .tab-panel.active {\n display: block;\n animation: tabFadeIn 150ms ease forwards;\n }\n\n @keyframes tabFadeIn {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n /* Info & Detail Rows */\n .info-card {\n background-color: var(--md-sys-color-surface-container-lowest, #FFFFFF);\n border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n border-radius: var(--md-sys-shape-corner-medium, 16px);\n padding: 12px 16px;\n margin-bottom: 8px;\n box-sizing: border-box;\n }\n\n .info-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 0;\n border-bottom: 1px solid var(--md-sys-color-surface-container-high, #ECE6F0);\n font-size: 13px;\n }\n\n .info-row:last-child {\n border-bottom: none;\n padding-bottom: 0;\n }\n\n .info-row:first-child {\n padding-top: 0;\n }\n\n .info-label {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n }\n\n .info-label md-icon {\n --md-icon-size: 18px;\n font-size: 18px;\n color: var(--md-sys-color-primary, #6750A4);\n }\n\n .info-value {\n font-weight: 500;\n color: var(--md-sys-color-on-surface, #1D1B20);\n text-align: right;\n }\n\n .badge-chip {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n border-radius: 100px;\n font-size: 11px;\n font-weight: 600;\n background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n color: var(--md-sys-color-on-secondary-container, #1D192B);\n }\n\n .badge-chip.success {\n background-color: #E8F5E9;\n color: #2E7D32;\n }\n\n /* Storage Section */\n .storage-box {\n background-color: var(--md-sys-color-surface-container-lowest, #FFFFFF);\n border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n border-radius: var(--md-sys-shape-corner-medium, 16px);\n padding: 16px;\n box-sizing: border-box;\n }\n\n .storage-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 10px;\n }\n\n .storage-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--md-sys-color-on-surface, #1D1B20);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .storage-title md-icon {\n --md-icon-size: 20px;\n font-size: 20px;\n color: var(--md-sys-color-primary, #6750A4);\n }\n\n .storage-meta {\n font-size: 13px;\n font-weight: 500;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n }\n\n .storage-bar-track {\n width: 100%;\n height: 8px;\n border-radius: 4px;\n background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n overflow: hidden;\n margin-bottom: 12px;\n }\n\n .storage-bar-fill {\n height: 100%;\n border-radius: 4px;\n background: linear-gradient(90deg, var(--md-sys-color-primary, #6750A4), var(--md-sys-color-tertiary, #7D5260));\n transition: width 300ms ease;\n }\n\n .storage-breakdown {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 8px;\n font-size: 12px;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n }\n\n .storage-item {\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .storage-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n }\n\n /* Multi-account switcher list */\n .accounts-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n box-sizing: border-box;\n }\n\n /* Footer */\n .popover-footer {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n padding: 12px 16px 16px;\n border-top: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n box-sizing: border-box;\n }\n\n .signout-btn {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n padding: 10px 16px;\n border-radius: var(--md-sys-shape-corner-full, 9999px);\n background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n color: var(--md-sys-color-on-surface, #1D1B20);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background-color 150ms ease, color 150ms ease;\n overflow: hidden;\n -webkit-tap-highlight-color: transparent;\n }\n\n .signout-btn:hover {\n background-color: var(--md-sys-color-error-container, #F9DEDC);\n color: var(--md-sys-color-on-error-container, #410E0B);\n border-color: var(--md-sys-color-error, #B3261E);\n }\n\n .signout-btn md-icon {\n --md-icon-size: 18px;\n font-size: 18px;\n }\n\n .footer-links {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n font-size: 11px;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n }\n\n .footer-links a {\n color: inherit;\n text-decoration: none;\n }\n\n .footer-links a:hover {\n text-decoration: underline;\n color: var(--md-sys-color-primary, #6750A4);\n }\n\n .footer-dot {\n opacity: 0.5;\n }\n\n /* Responsive Fullscreen / Mobile Mode */\n @media (max-width: 768px) {\n .back-btn,\n slot[name=\"back-button\"] {\n display: inline-flex;\n }\n\n .popover-header .headline {\n display: block;\n }\n\n .popover-header {\n justify-content: space-between;\n min-height: 48px;\n padding: 12px 16px 8px;\n }\n\n :host([open]) .popover {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100vw;\n max-width: 100vw;\n height: 100vh;\n height: 100dvh;\n max-height: 100vh;\n max-height: 100dvh;\n border-radius: 0;\n box-shadow: none;\n z-index: 10000;\n padding: 0 0 env(safe-area-inset-bottom, 16px) 0;\n margin: 0;\n animation: md-account-menu-mobile-in 200ms cubic-bezier(0.2, 0, 0, 1) forwards;\n }\n\n .profile-card {\n margin: 4px 16px 12px;\n }\n }\n\n @keyframes md-account-menu-mobile-in {\n from {\n opacity: 0;\n transform: translateY(12px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n /* Explicit Fullscreen Mode */\n :host([fullscreen]) .back-btn,\n :host([fullscreen]) slot[name=\"back-button\"] {\n display: inline-flex;\n }\n\n :host([fullscreen]) .popover-header .headline {\n display: block;\n }\n\n :host([fullscreen]) .popover-header {\n justify-content: space-between;\n min-height: 48px;\n padding: 12px 16px 8px;\n }\n\n :host([fullscreen][open]) .popover {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100vw;\n max-width: 100vw;\n height: 100vh;\n height: 100dvh;\n max-height: 100vh;\n max-height: 100dvh;\n border-radius: 0;\n box-shadow: none;\n z-index: 10000;\n padding: 0 0 env(safe-area-inset-bottom, 16px) 0;\n margin: 0;\n }\n\n :host([fullscreen]) .profile-card {\n margin: 4px 16px 12px;\n }\n`;\n\nexport const accountItemStyles = css`\n :host {\n display: block;\n box-sizing: border-box;\n font-family: var(--md-sys-typescale-font-family, inherit);\n }\n\n :host([hidden]) {\n display: none;\n }\n\n .item {\n position: relative;\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 10px 12px;\n border-radius: var(--md-sys-shape-corner-medium, 14px);\n background: transparent;\n border: none;\n color: var(--md-sys-color-on-surface, #1D1B20);\n text-align: left;\n cursor: pointer;\n font-family: inherit;\n text-decoration: none;\n transition: background-color 150ms ease;\n box-sizing: border-box;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n .item:hover {\n background-color: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.06));\n }\n\n :host([active]) .item {\n background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n color: var(--md-sys-color-on-secondary-container, #1D192B);\n }\n\n :host([disabled]) .item {\n opacity: 0.38;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .item-avatar {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background-color: var(--md-sys-color-primary-container, #EADDFF);\n color: var(--md-sys-color-on-primary-container, #21005D);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: 600;\n flex-shrink: 0;\n overflow: hidden;\n }\n\n .item-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .item-content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n }\n\n .item-name {\n font-size: 13.5px;\n font-weight: 500;\n color: var(--md-sys-color-on-surface, #1D1B20);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .item-email {\n font-size: 12px;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .item-trailing {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n }\n\n .check-icon {\n color: var(--md-sys-color-primary, #6750A4);\n font-size: 20px;\n }\n\n .action-icon {\n color: var(--md-sys-color-on-surface-variant, #49454F);\n font-size: 20px;\n }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, state } 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 '../icon-button/icon-button.js';\nimport { accountMenuStyles, accountItemStyles } from './account-menu.css.js';\n\nexport type AccountMenuAlignment = 'start' | 'end';\nexport type AccountMenuPivot = 'left' | 'right';\nexport type AccountMenuTab = 'overview' | 'security' | 'storage' | 'accounts';\n\n/**\n * Material Design 3 Account Item component.\n * Represents a single account profile in the account switcher or an account action item.\n *\n * @slot icon - Custom icon or graphic.\n * @slot - Default slot for account name/details.\n * @slot trailing - Custom trailing content or checkmark.\n */\n@customElement('md-account-item')\nexport class MdAccountItem extends MdBaseElement {\n static override styles = [MdBaseElement.styles, accountItemStyles];\n\n @property({ type: String })\n name = '';\n\n @property({ type: String })\n email = '';\n\n @property({ type: String })\n avatar = '';\n\n @property({ type: String })\n initials = '';\n\n @property({ type: String })\n icon = '';\n\n @property({ type: String })\n badge = '';\n\n @property({ type: String })\n href = '';\n\n @property({ type: String })\n target = '';\n\n @property({ type: Boolean, reflect: true })\n active = false;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean })\n action = false;\n\n private handleClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n return;\n }\n\n this.emitEvent('account-click', {\n name: this.name,\n email: this.email,\n avatar: this.avatar,\n initials: this.initials,\n active: this.active,\n action: this.action,\n });\n };\n\n override render() {\n const displayInitials = this.initials || (this.name ? this.name.charAt(0).toUpperCase() : '');\n\n const avatarContent = this.avatar\n ? html`<img class=\"item-avatar-img\" src=${this.avatar} alt=${this.name || 'Account avatar'} />`\n : this.icon\n ? html`<md-icon name=${this.icon}></md-icon>`\n : displayInitials\n ? html`<span>${displayInitials}</span>`\n : html`<md-icon name=\"person\"></md-icon>`;\n\n const trailingContent = this.active\n ? html`<md-icon name=\"check\" class=\"check-icon\"></md-icon>`\n : this.action\n ? html`<md-icon name=\"chevron_right\" class=\"action-icon\"></md-icon>`\n : nothing;\n\n const inner = html`\n <md-ripple ?disabled=${this.disabled}></md-ripple>\n <md-focus-ring></md-focus-ring>\n\n <div class=\"item-avatar\">\n <slot name=\"icon\">${avatarContent}</slot>\n </div>\n\n <div class=\"item-content\">\n <span class=\"item-name\"><slot name=\"name\">${this.name || 'Account'}</slot></span>\n ${this.email ? html`<span class=\"item-email\"><slot name=\"email\">${this.email}</slot></span>` : nothing}\n </div>\n\n <div class=\"item-trailing\">\n <slot name=\"trailing\">${trailingContent}</slot>\n </div>\n `;\n\n if (this.href) {\n return html`\n <a\n class=\"item\"\n href=${this.disabled ? nothing : this.href}\n target=${this.target || nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n tabindex=${this.disabled ? '-1' : '0'}\n @click=${this.handleClick}\n >\n ${inner}\n </a>\n `;\n }\n\n return html`\n <button\n class=\"item\"\n type=\"button\"\n tabindex=${this.disabled ? '-1' : '0'}\n aria-disabled=${this.disabled ? 'true' : nothing}\n ?disabled=${this.disabled}\n @click=${this.handleClick}\n >\n ${inner}\n </button>\n `;\n }\n}\n\n/**\n * Material Design 3 Account Menu (Account Profile Switcher) component.\n * Displays a profile menu with rich user info, storage usage, security overview, and multi-account switcher.\n *\n * @slot trigger - Custom trigger element replacing the default avatar button.\n * @slot header - Custom header element.\n * @slot overview - Custom overview info content.\n * @slot security - Custom security info content.\n * @slot storage - Custom storage info content.\n * @slot accounts - Container for md-account-item instances.\n * @slot footer - Custom footer content.\n */\n@customElement('md-account-menu')\nexport class MdAccountMenu extends MdBaseElement {\n static override styles = [MdBaseElement.styles, accountMenuStyles];\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ type: String })\n name = 'Franco Fantomius';\n\n @property({ type: String })\n email = 'franco.fantomius@example.com';\n\n @property({ type: String })\n avatar = '';\n\n @property({ type: String })\n initials = '';\n\n @property({ type: String })\n icon = 'account_circle';\n\n @property({ type: String, attribute: 'headline' })\n headline = 'Account';\n\n @property({ type: String, attribute: 'manage-text' })\n manageText = 'Manage your Account';\n\n @property({ type: String, attribute: 'manage-url' })\n manageUrl = '';\n\n @property({ type: String, attribute: 'organization' })\n organization = 'Material Components';\n\n @property({ type: String, attribute: 'role-title' })\n roleTitle = 'Lead Architect';\n\n @property({ type: String, attribute: 'status' })\n status = 'Active';\n\n @property({ type: String, attribute: 'storage-used' })\n storageUsed = '10.4 GB';\n\n @property({ type: String, attribute: 'storage-total' })\n storageTotal = '15 GB';\n\n @property({ type: Number, attribute: 'storage-progress' })\n storageProgress = 0.69;\n\n @property({ type: String, attribute: 'security-status' })\n securityStatus = 'Protected';\n\n @property({ type: String, attribute: 'aria-label' })\n ariaLabelText = 'Account info';\n\n @property({ type: Boolean, attribute: 'no-trigger' })\n noTrigger = false;\n\n get trigger(): boolean {\n return !this.noTrigger;\n }\n\n set trigger(value: boolean) {\n this.noTrigger = !value;\n this.requestUpdate('noTrigger');\n }\n\n @property({ type: String, reflect: true })\n alignment: AccountMenuAlignment = 'end';\n\n @property({ type: String, reflect: true })\n pivot: AccountMenuPivot = 'right';\n\n @property({ type: Boolean, reflect: true })\n modal = false;\n\n @property({ type: Boolean, reflect: true })\n fullscreen = false;\n\n @property({ type: Boolean, attribute: 'show-tabs' })\n showTabs = true;\n\n @state()\n activeTab: AccountMenuTab = 'overview';\n\n override connectedCallback() {\n super.connectedCallback();\n window.addEventListener('keydown', this.handleKeyDown);\n document.addEventListener('pointerdown', this.handleDocumentClick);\n this.addEventListener('account-click', this.handleAccountItemClick 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('account-click', this.handleAccountItemClick as EventListener);\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 }\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) return;\n const path = event.composedPath();\n if (!path.includes(this)) {\n this.close();\n }\n };\n\n private handleBackdropClick = () => {\n this.close();\n };\n\n private handleBackClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.close();\n };\n\n private handleTriggerClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.toggle();\n };\n\n private handleTabClick = (tab: AccountMenuTab) => {\n this.activeTab = tab;\n this.emitEvent('tab-change', { tab });\n };\n\n private handleManageClick = (event: MouseEvent) => {\n this.emitEvent('manage-click', {\n name: this.name,\n email: this.email,\n manageUrl: this.manageUrl,\n });\n };\n\n private handleSignOutClick = () => {\n this.emitEvent('sign-out', {\n email: this.email,\n });\n this.close();\n };\n\n private handleEditAvatarClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.emitEvent('edit-avatar', {\n email: this.email,\n });\n };\n\n private handleAccountItemClick = (e: CustomEvent) => {\n const detail = e.detail;\n if (!detail.action && detail.email) {\n this.name = detail.name || this.name;\n this.email = detail.email;\n if (detail.avatar) this.avatar = detail.avatar;\n if (detail.initials) this.initials = detail.initials;\n }\n this.emitEvent('account-select', detail);\n };\n\n /**\n * Opens the account menu popover.\n */\n show() {\n if (!this.open) {\n this.open = true;\n }\n }\n\n /**\n * Closes the account menu popover.\n */\n close() {\n if (this.open) {\n this.open = false;\n }\n }\n\n /**\n * Toggles the account menu open/closed state.\n */\n toggle() {\n this.open = !this.open;\n }\n\n override render() {\n const displayInitials = this.initials || (this.name ? this.name.charAt(0).toUpperCase() : 'G');\n\n const triggerAvatar = this.avatar\n ? html`<img class=\"avatar-img\" src=${this.avatar} alt=${this.name || 'User Profile'} />`\n : displayInitials\n ? html`<span class=\"avatar-initials\">${displayInitials}</span>`\n : html`<md-icon name=${this.icon}></md-icon>`;\n\n const triggerContent = !this.noTrigger\n ? html`\n <div class=\"trigger-container\" @click=${this.handleTriggerClick}>\n <slot name=\"trigger\">\n <button\n type=\"button\"\n class=\"avatar-btn\"\n aria-label=${this.ariaLabelText}\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-haspopup=\"dialog\"\n title=\"${this.name} (${this.email})\"\n >\n <md-ripple></md-ripple>\n <md-focus-ring></md-focus-ring>\n ${triggerAvatar}\n </button>\n </slot>\n </div>\n `\n : html`<slot name=\"trigger\" @click=${this.handleTriggerClick}></slot>`;\n\n return html`\n <div class=\"backdrop\" @click=${this.handleBackdropClick}></div>\n\n <div class=\"trigger-wrapper\">\n ${triggerContent}\n </div>\n\n <div\n class=\"popover\"\n role=\"dialog\"\n aria-modal=${this.modal ? 'true' : 'false'}\n aria-label=${this.headline || this.ariaLabelText}\n aria-hidden=${this.open ? 'false' : 'true'}\n >\n \n <div class=\"popover-header\">\n <div class=\"header-leading\">\n <slot name=\"back-button\">\n <md-icon-button\n class=\"back-btn\"\n variant=\"standard\"\n icon=\"arrow_back\"\n aria-label=\"Back\"\n title=\"Back\"\n @click=${this.handleBackClick}\n ></md-icon-button>\n </slot>\n ${this.headline ? html`<span class=\"headline\">${this.headline}</span>` : nothing}\n </div>\n <slot name=\"header\">\n <button\n type=\"button\"\n class=\"close-btn\"\n aria-label=\"Close account menu\"\n @click=${this.close}\n >\n <md-icon name=\"close\"></md-icon>\n </button>\n </slot>\n </div>\n\n \n <div class=\"profile-card\">\n <div class=\"profile-avatar-wrapper\">\n <div class=\"profile-avatar\">\n ${this.avatar\n ? html`<img src=${this.avatar} alt=${this.name} />`\n : html`<span>${displayInitials}</span>`}\n </div>\n <button\n type=\"button\"\n class=\"avatar-edit-badge\"\n aria-label=\"Change profile picture\"\n title=\"Change profile picture\"\n @click=${this.handleEditAvatarClick}\n >\n <md-icon name=\"photo_camera\"></md-icon>\n </button>\n </div>\n\n <h2 class=\"profile-name\">${this.name}</h2>\n <span class=\"profile-email\">${this.email}</span>\n\n <a\n class=\"manage-btn\"\n href=${this.manageUrl || 'javascript:void(0)'}\n @click=${this.handleManageClick}\n >\n <md-ripple></md-ripple>\n <md-focus-ring></md-focus-ring>\n <md-icon name=\"manage_accounts\"></md-icon>\n <span>${this.manageText}</span>\n </a>\n </div>\n\n \n ${this.showTabs\n ? html`\n <nav class=\"account-tabs\" role=\"tablist\" aria-label=\"Account information tabs\">\n <button\n type=\"button\"\n class=\"tab-btn ${this.activeTab === 'overview' ? 'active' : ''}\"\n role=\"tab\"\n aria-selected=${this.activeTab === 'overview' ? 'true' : 'false'}\n @click=${() => this.handleTabClick('overview')}\n >\n <md-icon name=\"badge\"></md-icon>\n <span>Overview</span>\n </button>\n <button\n type=\"button\"\n class=\"tab-btn ${this.activeTab === 'security' ? 'active' : ''}\"\n role=\"tab\"\n aria-selected=${this.activeTab === 'security' ? 'true' : 'false'}\n @click=${() => this.handleTabClick('security')}\n >\n <md-icon name=\"shield\"></md-icon>\n <span>Security</span>\n </button>\n <button\n type=\"button\"\n class=\"tab-btn ${this.activeTab === 'storage' ? 'active' : ''}\"\n role=\"tab\"\n aria-selected=${this.activeTab === 'storage' ? 'true' : 'false'}\n @click=${() => this.handleTabClick('storage')}\n >\n <md-icon name=\"cloud\"></md-icon>\n <span>Storage</span>\n </button>\n <button\n type=\"button\"\n class=\"tab-btn ${this.activeTab === 'accounts' ? 'active' : ''}\"\n role=\"tab\"\n aria-selected=${this.activeTab === 'accounts' ? 'true' : 'false'}\n @click=${() => this.handleTabClick('accounts')}\n >\n <md-icon name=\"people\"></md-icon>\n <span>Accounts</span>\n </button>\n </nav>\n `\n : nothing}\n\n \n \n <div class=\"tab-panel ${this.activeTab === 'overview' ? 'active' : ''}\" role=\"tabpanel\">\n <slot name=\"overview\">\n <div class=\"info-card\">\n <div class=\"info-row\">\n <div class=\"info-label\">\n <md-icon name=\"apartment\"></md-icon>\n <span>Organization</span>\n </div>\n <span class=\"info-value\">${this.organization}</span>\n </div>\n <div class=\"info-row\">\n <div class=\"info-label\">\n <md-icon name=\"engineering\"></md-icon>\n <span>Role</span>\n </div>\n <span class=\"info-value\">${this.roleTitle}</span>\n </div>\n <div class=\"info-row\">\n <div class=\"info-label\">\n <md-icon name=\"verified_user\"></md-icon>\n <span>Status</span>\n </div>\n <span class=\"info-value\">\n <span class=\"badge-chip success\">\n <md-icon name=\"check_circle\" style=\"font-size: 13px;\"></md-icon>\n ${this.status}\n </span>\n </span>\n </div>\n </div>\n </slot>\n </div>\n\n \n <div class=\"tab-panel ${this.activeTab === 'security' ? 'active' : ''}\" role=\"tabpanel\">\n <slot name=\"security\">\n <div class=\"info-card\">\n <div class=\"info-row\">\n <div class=\"info-label\">\n <md-icon name=\"security\"></md-icon>\n <span>2-Step Verification</span>\n </div>\n <span class=\"info-value\">\n <span class=\"badge-chip success\">Enabled</span>\n </span>\n </div>\n <div class=\"info-row\">\n <div class=\"info-label\">\n <md-icon name=\"devices\"></md-icon>\n <span>Active Sessions</span>\n </div>\n <span class=\"info-value\">2 devices (PC, Mobile)</span>\n </div>\n <div class=\"info-row\">\n <div class=\"info-label\">\n <md-icon name=\"lock_reset\"></md-icon>\n <span>Password Changed</span>\n </div>\n <span class=\"info-value\">3 months ago</span>\n </div>\n </div>\n </slot>\n </div>\n\n \n <div class=\"tab-panel ${this.activeTab === 'storage' ? 'active' : ''}\" role=\"tabpanel\">\n <slot name=\"storage\">\n <div class=\"storage-box\">\n <div class=\"storage-header\">\n <div class=\"storage-title\">\n <md-icon name=\"cloud\"></md-icon>\n <span>Account Storage</span>\n </div>\n <span class=\"storage-meta\">${this.storageUsed} of ${this.storageTotal} used</span>\n </div>\n <div class=\"storage-bar-track\">\n <div\n class=\"storage-bar-fill\"\n style=\"width: ${Math.min(100, Math.max(0, this.storageProgress * 100))}%;\"\n ></div>\n </div>\n <div class=\"storage-breakdown\">\n <div class=\"storage-item\">\n <span class=\"storage-dot\" style=\"background-color: var(--md-sys-color-primary, #6750A4);\"></span>\n <span>Files: 6.2 GB</span>\n <div class=\"storage-item\">\n <span class=\"storage-dot\" style=\"background-color: var(--md-sys-color-tertiary, #7D5260);\"></span>\n <span>Mail: 3.1 GB</span>\n </div>\n <span class=\"storage-dot\" style=\"background-color: var(--md-sys-color-secondary, #625B71);\"></span>\n <span>Media: 1.1 GB</span>\n </div>\n <div class=\"storage-item\">\n <span>Free: 4.6 GB</span>\n </div>\n </div>\n </div>\n </slot>\n </div>\n\n \n <div class=\"tab-panel ${this.activeTab === 'accounts' ? 'active' : ''}\" role=\"tabpanel\">\n <div class=\"accounts-list\">\n <slot name=\"accounts\">\n <md-account-item\n name=${this.name}\n email=${this.email}\n initials=${displayInitials}\n active\n ></md-account-item>\n <md-account-item\n name=\"Work Workspace\"\n email=\"franco.dev@work.corp\"\n initials=\"W\"\n ></md-account-item>\n <md-account-item\n name=\"Add another account\"\n icon=\"person_add\"\n action\n ></md-account-item>\n </slot>\n </div>\n </div>\n\n \n <slot></slot>\n\n \n <div class=\"popover-footer\">\n <slot name=\"footer\">\n <button type=\"button\" class=\"signout-btn\" @click=${this.handleSignOutClick}>\n <md-ripple></md-ripple>\n <md-focus-ring></md-focus-ring>\n <md-icon name=\"logout\"></md-icon>\n <span>Sign out of all accounts</span>\n </button>\n <div class=\"footer-links\">\n <a href=\"#/privacy\">Privacy Policy</a>\n <span class=\"footer-dot\">•</span>\n <a href=\"#/terms\">Terms of Service</a>\n </div>\n </slot>\n </div>\n </div>\n `;\n }\n}\n\n// Aliases\n@customElement('md-account-drawer')\nexport class MdAccountDrawer extends MdAccountMenu {}\n\n@customElement('md-account-profile')\nexport class MdAccountProfile extends MdAccountMenu {}\n\n@customElement('md-account-profile-item')\nexport class MdAccountProfileItem extends MdAccountItem {}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-account-menu': MdAccountMenu;\n 'md-account-drawer': MdAccountDrawer;\n 'md-account-profile': MdAccountProfile;\n 'md-account-item': MdAccountItem;\n 'md-account-profile-item': MdAccountProfileItem;\n }\n}\n\n"],"mappings":";;;;;;;AAEA,IAAa,IAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgpBpB,IAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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"}