@francofantomius/material-components 1.1.1 → 1.2.0

package/dist/chunks/{account-menu-Dau0UHTl.js → account-menu-Bo7NghIm.js}

@@ -1,11 +1,12 @@
-import { n as p, t as e } from "./decorate-DXuynaiA.js";
-import "./ripple-squbKHhj.js";
-import "./focus-ring-CuiJuM-y.js";
-import "./icon-DrNqcNEL.js";
-import "./icon-button-BQz73GLa.js";
-import { css as u, html as i, nothing as c } from "lit";
-import { customElement as l, property as t, state as b } from "lit/decorators.js";
-var f = u`
+import { n as e, t } from "./decorate-DknOJ8FJ.js";
+import "./ripple-CBOKeVfm.js";
+import "./focus-ring-K6SY_mIm.js";
+import "./icon-FvKeXi61.js";
+import "./icon-button-CulnCZpZ.js";
+import { css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
+//#region src/components/account-menu/account-menu.css.ts
+var c = n`
   :host {
     display: inline-block;
     position: relative;
@@ -659,7 +660,7 @@ var f = u`
   :host([fullscreen]) .profile-card {
     margin: 4px 16px 12px;
   }
-`, y = u`
+`, l = n`
   :host {
     display: block;
     box-sizing: border-box;
@@ -767,145 +768,134 @@ var f = u`
     color: var(--md-sys-color-on-surface-variant, #49454F);
     font-size: 20px;
   }
-`, s = class extends p {
-  constructor(...r) {
-    super(...r), this.name = "", this.email = "", this.avatar = "", this.initials = "", this.icon = "", this.badge = "", this.href = "", this.target = "", this.active = !1, this.disabled = !1, this.action = !1, this.handleClick = (o) => {
-      if (this.disabled) {
-        o.preventDefault(), o.stopImmediatePropagation();
-        return;
-      }
-      this.emitEvent("account-click", {
-        name: this.name,
-        email: this.email,
-        avatar: this.avatar,
-        initials: this.initials,
-        active: this.active,
-        action: this.action
-      });
-    };
-  }
-  static {
-    this.styles = [p.styles, y];
-  }
-  render() {
-    const r = this.initials || (this.name ? this.name.charAt(0).toUpperCase() : ""), o = this.avatar ? i`<img class="item-avatar-img" src=${this.avatar} alt=${this.name || "Account avatar"} />` : this.icon ? i`<md-icon name=${this.icon}></md-icon>` : r ? i`<span>${r}</span>` : i`<md-icon name="person"></md-icon>`, n = this.active ? i`<md-icon name="check" class="check-icon"></md-icon>` : this.action ? i`<md-icon name="chevron_right" class="action-icon"></md-icon>` : c, m = i`
+`, u = class extends e {
+	constructor(...e) {
+		super(...e), this.name = "", this.email = "", this.avatar = "", this.initials = "", this.icon = "", this.badge = "", this.href = "", this.target = "", this.active = !1, this.disabled = !1, this.action = !1, this.handleClick = (e) => {
+			if (this.disabled) {
+				e.preventDefault(), e.stopImmediatePropagation();
+				return;
+			}
+			this.emitEvent("account-click", {
+				name: this.name,
+				email: this.email,
+				avatar: this.avatar,
+				initials: this.initials,
+				active: this.active,
+				action: this.action
+			});
+		};
+	}
+	static {
+		this.styles = [e.styles, l];
+	}
+	render() {
+		let e = this.initials || (this.name ? this.name.charAt(0).toUpperCase() : ""), t = this.avatar ? r`<img class="item-avatar-img" src=${this.avatar} alt=${this.name || "Account avatar"} />` : this.icon ? r`<md-icon name=${this.icon}></md-icon>` : e ? r`<span>${e}</span>` : r`<md-icon name="person"></md-icon>`, n = this.active ? r`<md-icon name="check" class="check-icon"></md-icon>` : this.action ? r`<md-icon name="chevron_right" class="action-icon"></md-icon>` : i, a = r`
       <md-ripple ?disabled=${this.disabled}></md-ripple>
       <md-focus-ring></md-focus-ring>
 
       <div class="item-avatar">
-        <slot name="icon">${o}</slot>
+        <slot name="icon">${t}</slot>
       </div>
 
       <div class="item-content">
         <span class="item-name"><slot name="name">${this.name || "Account"}</slot></span>
-        ${this.email ? i`<span class="item-email"><slot name="email">${this.email}</slot></span>` : c}
+        ${this.email ? r`<span class="item-email"><slot name="email">${this.email}</slot></span>` : i}
       </div>
 
       <div class="item-trailing">
         <slot name="trailing">${n}</slot>
       </div>
     `;
-    return this.href ? i`
+		return this.href ? r`
         <a
           class="item"
-          href=${this.disabled ? c : this.href}
-          target=${this.target || c}
-          aria-disabled=${this.disabled ? "true" : c}
+          href=${this.disabled ? i : this.href}
+          target=${this.target || i}
+          aria-disabled=${this.disabled ? "true" : i}
           tabindex=${this.disabled ? "-1" : "0"}
           @click=${this.handleClick}
         >
-          ${m}
+          ${a}
         </a>
-      ` : i`
+      ` : r`
       <button
         class="item"
         type="button"
         tabindex=${this.disabled ? "-1" : "0"}
-        aria-disabled=${this.disabled ? "true" : c}
+        aria-disabled=${this.disabled ? "true" : i}
         ?disabled=${this.disabled}
         @click=${this.handleClick}
       >
-        ${m}
+        ${a}
       </button>
     `;
-  }
+	}
 };
-e([t({ type: String })], s.prototype, "name", void 0);
-e([t({ type: String })], s.prototype, "email", void 0);
-e([t({ type: String })], s.prototype, "avatar", void 0);
-e([t({ type: String })], s.prototype, "initials", void 0);
-e([t({ type: String })], s.prototype, "icon", void 0);
-e([t({ type: String })], s.prototype, "badge", void 0);
-e([t({ type: String })], s.prototype, "href", void 0);
-e([t({ type: String })], s.prototype, "target", void 0);
-e([t({
-  type: Boolean,
-  reflect: !0
-})], s.prototype, "active", void 0);
-e([t({
-  type: Boolean,
-  reflect: !0
-})], s.prototype, "disabled", void 0);
-e([t({ type: Boolean })], s.prototype, "action", void 0);
-s = e([l("md-account-item")], s);
-var a = class extends p {
-  constructor(...r) {
-    super(...r), this.open = !1, this.name = "Franco Fantomius", this.email = "franco.fantomius@example.com", this.avatar = "", this.initials = "", this.icon = "account_circle", this.headline = "Account", this.manageText = "Manage your Account", this.manageUrl = "", this.organization = "Material Components", this.roleTitle = "Lead Architect", this.status = "Active", this.storageUsed = "10.4 GB", this.storageTotal = "15 GB", this.storageProgress = 0.69, this.securityStatus = "Protected", this.ariaLabelText = "Account info", this.noTrigger = !1, this.alignment = "end", this.pivot = "right", this.modal = !1, this.fullscreen = !1, this.showTabs = !0, this.activeTab = "overview", this.handleKeyDown = (o) => {
-      o.key === "Escape" && this.open && this.close();
-    }, this.handleDocumentClick = (o) => {
-      this.open && (o.composedPath().includes(this) || this.close());
-    }, this.handleBackdropClick = () => {
-      this.close();
-    }, this.handleBackClick = (o) => {
-      o.stopPropagation(), this.close();
-    }, this.handleTriggerClick = (o) => {
-      o.stopPropagation(), this.toggle();
-    }, this.handleTabClick = (o) => {
-      this.activeTab = o, this.emitEvent("tab-change", { tab: o });
-    }, this.handleManageClick = (o) => {
-      this.emitEvent("manage-click", {
-        name: this.name,
-        email: this.email,
-        manageUrl: this.manageUrl
-      });
-    }, this.handleSignOutClick = () => {
-      this.emitEvent("sign-out", { email: this.email }), this.close();
-    }, this.handleEditAvatarClick = (o) => {
-      o.stopPropagation(), this.emitEvent("edit-avatar", { email: this.email });
-    }, this.handleAccountItemClick = (o) => {
-      const n = o.detail;
-      !n.action && n.email && (this.name = n.name || this.name, this.email = n.email, n.avatar && (this.avatar = n.avatar), n.initials && (this.initials = n.initials)), this.emitEvent("account-select", n);
-    };
-  }
-  static {
-    this.styles = [p.styles, f];
-  }
-  get trigger() {
-    return !this.noTrigger;
-  }
-  set trigger(r) {
-    this.noTrigger = !r, this.requestUpdate("noTrigger");
-  }
-  connectedCallback() {
-    super.connectedCallback(), window.addEventListener("keydown", this.handleKeyDown), document.addEventListener("pointerdown", this.handleDocumentClick), this.addEventListener("account-click", this.handleAccountItemClick);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), window.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("pointerdown", this.handleDocumentClick), this.removeEventListener("account-click", this.handleAccountItemClick);
-  }
-  updated(r) {
-    super.updated(r), r.has("open") && (this.open ? this.emitEvent("open") : this.emitEvent("close"));
-  }
-  show() {
-    this.open || (this.open = !0);
-  }
-  close() {
-    this.open && (this.open = !1);
-  }
-  toggle() {
-    this.open = !this.open;
-  }
-  render() {
-    const r = this.initials || (this.name ? this.name.charAt(0).toUpperCase() : "G"), o = this.avatar ? i`<img class="avatar-img" src=${this.avatar} alt=${this.name || "User Profile"} />` : r ? i`<span class="avatar-initials">${r}</span>` : i`<md-icon name=${this.icon}></md-icon>`, n = this.noTrigger ? i`<slot name="trigger" @click=${this.handleTriggerClick}></slot>` : i`
+t([o({ type: String })], u.prototype, "name", void 0), t([o({ type: String })], u.prototype, "email", void 0), t([o({ type: String })], u.prototype, "avatar", void 0), t([o({ type: String })], u.prototype, "initials", void 0), t([o({ type: String })], u.prototype, "icon", void 0), t([o({ type: String })], u.prototype, "badge", void 0), t([o({ type: String })], u.prototype, "href", void 0), t([o({ type: String })], u.prototype, "target", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "active", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "disabled", void 0), t([o({ type: Boolean })], u.prototype, "action", void 0), u = t([a("md-account-item")], u);
+var d = class extends e {
+	constructor(...e) {
+		super(...e), this.open = !1, this.name = "Franco Fantomius", this.email = "franco.fantomius@example.com", this.avatar = "", this.initials = "", this.icon = "account_circle", this.headline = "Account", this.manageText = "Manage your Account", this.manageUrl = "", this.organization = "Material Components", this.roleTitle = "Lead Architect", this.status = "Active", this.storageUsed = "10.4 GB", this.storageTotal = "15 GB", this.storageProgress = .69, this.securityStatus = "Protected", this.ariaLabelText = "Account info", this.noTrigger = !1, this.alignment = "end", this.pivot = "right", this.modal = !1, this.fullscreen = !1, this.showTabs = !0, this.activeTab = "overview", this.handleKeyDown = (e) => {
+			e.key === "Escape" && this.open && this.close();
+		}, this.handleDocumentClick = (e) => {
+			this.open && (e.composedPath().includes(this) || this.close());
+		}, this.handleBackdropClick = () => {
+			this.close();
+		}, this.handleBackClick = (e) => {
+			e.stopPropagation(), this.close();
+		}, this.handleTriggerClick = (e) => {
+			e.stopPropagation(), this.toggle();
+		}, this.handleTabClick = (e) => {
+			this.activeTab = e, this.emitEvent("tab-change", { tab: e });
+		}, this.handleManageClick = (e) => {
+			this.emitEvent("manage-click", {
+				name: this.name,
+				email: this.email,
+				manageUrl: this.manageUrl
+			});
+		}, this.handleSignOutClick = () => {
+			this.emitEvent("sign-out", { email: this.email }), this.close();
+		}, this.handleEditAvatarClick = (e) => {
+			e.stopPropagation(), this.emitEvent("edit-avatar", { email: this.email });
+		}, this.handleAccountItemClick = (e) => {
+			let t = e.detail;
+			!t.action && t.email && (this.name = t.name || this.name, this.email = t.email, t.avatar && (this.avatar = t.avatar), t.initials && (this.initials = t.initials)), this.emitEvent("account-select", t);
+		};
+	}
+	static {
+		this.styles = [e.styles, c];
+	}
+	get trigger() {
+		return !this.noTrigger;
+	}
+	set trigger(e) {
+		this.noTrigger = !e, this.requestUpdate("noTrigger");
+	}
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("keydown", this.handleKeyDown), document.addEventListener("pointerdown", this.handleDocumentClick), this.addEventListener("account-click", this.handleAccountItemClick);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), window.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("pointerdown", this.handleDocumentClick), this.removeEventListener("account-click", this.handleAccountItemClick);
+	}
+	updated(e) {
+		super.updated(e), e.has("open") && (this.open ? this.emitEvent("open") : this.emitEvent("close"));
+	}
+	show() {
+		this.open ||= !0;
+	}
+	close() {
+		this.open &&= !1;
+	}
+	toggle() {
+		this.open = !this.open;
+	}
+	render() {
+		let e = this.initials || (this.name ? this.name.charAt(0).toUpperCase() : "G"), t = this.avatar ? r`<img class="avatar-img" src=${this.avatar} alt=${this.name || "User Profile"} />` : e ? r`<span class="avatar-initials">${e}</span>` : r`<md-icon name=${this.icon}></md-icon>`, n = this.noTrigger ? r`<slot name="trigger" @click=${this.handleTriggerClick}></slot>` : r`
           <div class="trigger-container" @click=${this.handleTriggerClick}>
             <slot name="trigger">
               <button
@@ -918,12 +908,12 @@ var a = class extends p {
               >
                 <md-ripple></md-ripple>
                 <md-focus-ring></md-focus-ring>
-                ${o}
+                ${t}
               </button>
             </slot>
           </div>
         `;
-    return i`
+		return r`
       <div class="backdrop" @click=${this.handleBackdropClick}></div>
 
       <div class="trigger-wrapper">
@@ -950,7 +940,7 @@ var a = class extends p {
                 @click=${this.handleBackClick}
               ></md-icon-button>
             </slot>
-            ${this.headline ? i`<span class="headline">${this.headline}</span>` : c}
+            ${this.headline ? r`<span class="headline">${this.headline}</span>` : i}
           </div>
           <slot name="header">
             <button
@@ -968,7 +958,7 @@ var a = class extends p {
         <div class="profile-card">
           <div class="profile-avatar-wrapper">
             <div class="profile-avatar">
-              ${this.avatar ? i`<img src=${this.avatar} alt=${this.name} />` : i`<span>${r}</span>`}
+              ${this.avatar ? r`<img src=${this.avatar} alt=${this.name} />` : r`<span>${e}</span>`}
             </div>
             <button
               type="button"
@@ -997,7 +987,7 @@ var a = class extends p {
         </div>
 
         <!-- Account Info Tabs -->
-        ${this.showTabs ? i`
+        ${this.showTabs ? r`
               <nav class="account-tabs" role="tablist" aria-label="Account information tabs">
                 <button
                   type="button"
@@ -1040,7 +1030,7 @@ var a = class extends p {
                   <span>Accounts</span>
                 </button>
               </nav>
-            ` : c}
+            ` : i}
 
         <!-- Tab Panels -->
         <!-- 1. Overview Tab Panel -->
@@ -1151,7 +1141,7 @@ var a = class extends p {
               <md-account-item
                 name=${this.name}
                 email=${this.email}
-                initials=${r}
+                initials=${e}
                 active
               ></md-account-item>
               <md-account-item
@@ -1189,102 +1179,70 @@ var a = class extends p {
         </div>
       </div>
     `;
-  }
-};
-e([t({
-  type: Boolean,
-  reflect: !0
-})], a.prototype, "open", void 0);
-e([t({ type: String })], a.prototype, "name", void 0);
-e([t({ type: String })], a.prototype, "email", void 0);
-e([t({ type: String })], a.prototype, "avatar", void 0);
-e([t({ type: String })], a.prototype, "initials", void 0);
-e([t({ type: String })], a.prototype, "icon", void 0);
-e([t({
-  type: String,
-  attribute: "headline"
-})], a.prototype, "headline", void 0);
-e([t({
-  type: String,
-  attribute: "manage-text"
-})], a.prototype, "manageText", void 0);
-e([t({
-  type: String,
-  attribute: "manage-url"
-})], a.prototype, "manageUrl", void 0);
-e([t({
-  type: String,
-  attribute: "organization"
-})], a.prototype, "organization", void 0);
-e([t({
-  type: String,
-  attribute: "role-title"
-})], a.prototype, "roleTitle", void 0);
-e([t({
-  type: String,
-  attribute: "status"
-})], a.prototype, "status", void 0);
-e([t({
-  type: String,
-  attribute: "storage-used"
-})], a.prototype, "storageUsed", void 0);
-e([t({
-  type: String,
-  attribute: "storage-total"
-})], a.prototype, "storageTotal", void 0);
-e([t({
-  type: Number,
-  attribute: "storage-progress"
-})], a.prototype, "storageProgress", void 0);
-e([t({
-  type: String,
-  attribute: "security-status"
-})], a.prototype, "securityStatus", void 0);
-e([t({
-  type: String,
-  attribute: "aria-label"
-})], a.prototype, "ariaLabelText", void 0);
-e([t({
-  type: Boolean,
-  attribute: "no-trigger"
-})], a.prototype, "noTrigger", void 0);
-e([t({
-  type: String,
-  reflect: !0
-})], a.prototype, "alignment", void 0);
-e([t({
-  type: String,
-  reflect: !0
-})], a.prototype, "pivot", void 0);
-e([t({
-  type: Boolean,
-  reflect: !0
-})], a.prototype, "modal", void 0);
-e([t({
-  type: Boolean,
-  reflect: !0
-})], a.prototype, "fullscreen", void 0);
-e([t({
-  type: Boolean,
-  attribute: "show-tabs"
-})], a.prototype, "showTabs", void 0);
-e([b()], a.prototype, "activeTab", void 0);
-a = e([l("md-account-menu")], a);
-var h = class extends a {
-};
-h = e([l("md-account-drawer")], h);
-var v = class extends a {
+	}
 };
-v = e([l("md-account-profile")], v);
-var g = class extends s {
-};
-g = e([l("md-account-profile-item")], g);
-export {
-  g as a,
-  v as i,
-  s as n,
-  a as r,
-  h as t
-};
-
-//# sourceMappingURL=account-menu-Dau0UHTl.js.map
+t([o({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "open", void 0), t([o({ type: String })], d.prototype, "name", void 0), t([o({ type: String })], d.prototype, "email", void 0), t([o({ type: String })], d.prototype, "avatar", void 0), t([o({ type: String })], d.prototype, "initials", void 0), t([o({ type: String })], d.prototype, "icon", void 0), t([o({
+	type: String,
+	attribute: "headline"
+})], d.prototype, "headline", void 0), t([o({
+	type: String,
+	attribute: "manage-text"
+})], d.prototype, "manageText", void 0), t([o({
+	type: String,
+	attribute: "manage-url"
+})], d.prototype, "manageUrl", void 0), t([o({
+	type: String,
+	attribute: "organization"
+})], d.prototype, "organization", void 0), t([o({
+	type: String,
+	attribute: "role-title"
+})], d.prototype, "roleTitle", void 0), t([o({
+	type: String,
+	attribute: "status"
+})], d.prototype, "status", void 0), t([o({
+	type: String,
+	attribute: "storage-used"
+})], d.prototype, "storageUsed", void 0), t([o({
+	type: String,
+	attribute: "storage-total"
+})], d.prototype, "storageTotal", void 0), t([o({
+	type: Number,
+	attribute: "storage-progress"
+})], d.prototype, "storageProgress", void 0), t([o({
+	type: String,
+	attribute: "security-status"
+})], d.prototype, "securityStatus", void 0), t([o({
+	type: String,
+	attribute: "aria-label"
+})], d.prototype, "ariaLabelText", void 0), t([o({
+	type: Boolean,
+	attribute: "no-trigger"
+})], d.prototype, "noTrigger", void 0), t([o({
+	type: String,
+	reflect: !0
+})], d.prototype, "alignment", void 0), t([o({
+	type: String,
+	reflect: !0
+})], d.prototype, "pivot", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "modal", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "fullscreen", void 0), t([o({
+	type: Boolean,
+	attribute: "show-tabs"
+})], d.prototype, "showTabs", void 0), t([s()], d.prototype, "activeTab", void 0), d = t([a("md-account-menu")], d);
+var f = class extends d {};
+f = t([a("md-account-drawer")], f);
+var p = class extends d {};
+p = t([a("md-account-profile")], p);
+var m = class extends u {};
+m = t([a("md-account-profile-item")], m);
+//#endregion
+export { m as a, p as i, u as n, d as r, f as t };
+
+//# sourceMappingURL=account-menu-Bo7NghIm.js.map