@isaiahiroko/tilmart-ngx-apps-buyer 0.2.4 → 0.2.7

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.
@@ -102,11 +102,11 @@ class AccountComponent extends BaseDirective {
102
102
  this.router.navigate(['/start']);
103
103
  }
104
104
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
105
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccountComponent, isStandalone: false, selector: "x-account", usesInheritance: true, ngImport: i0, template: "<div class=\"x-acct\">\n @if (loading) {\n <div class=\"x-acct-note\">Loading your account\u2026</div>\n } @else if (!isLoggedIn) {\n <div class=\"x-acct-signin\">\n <h1>Your account</h1>\n <p>Sign in to see your orders, saved systems, addresses and settings.</p>\n <button type=\"button\" class=\"x-acct-btn\" (click)=\"signIn()\">Sign in</button>\n <p class=\"x-acct-muted\">\n No account yet? You can still\n <a routerLink=\"/track\">track an order</a> with your order number.\n </p>\n </div>\n } @else {\n <header class=\"x-acct-head\">\n <h1>{{ customerName }}</h1>\n </header>\n <div class=\"x-acct-body\">\n <nav class=\"x-acct-nav\">\n @for (item of nav; track item.path) {\n <a\n [routerLink]=\"item.path\"\n routerLinkActive=\"x-acct-nav-on\"\n class=\"x-acct-nav-link\"\n >\n <i class=\"fa-solid\" [class]=\"item.icon\"></i>\n <span>{{ item.label }}</span>\n </a>\n }\n </nav>\n <main class=\"x-acct-main\">\n <router-outlet></router-outlet>\n </main>\n </div>\n }\n</div>\n", styles: [".x-acct{max-width:1080px;margin:0 auto;padding:24px 20px 64px}.x-acct-note,.x-acct-muted{font-size:13.5px;color:var(--color-text-muted)}.x-acct-signin{max-width:420px;margin:48px auto;text-align:center}.x-acct-signin h1{font-size:26px;font-weight:800;color:var(--color-text);margin-bottom:10px}.x-acct-signin p{font-size:14.5px;color:var(--color-text-muted);margin-bottom:18px}.x-acct-signin a{color:var(--color-accent-hover);font-weight:700}.x-acct-head h1{font-size:28px;font-weight:800;color:var(--color-text);margin:4px 0 24px}.x-acct-body{display:grid;grid-template-columns:208px 1fr;gap:32px}.x-acct-nav{display:flex;flex-direction:column;gap:2px}.x-acct-nav-link{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--radius-lg);font-size:14px;font-weight:700;color:var(--color-text-muted);text-decoration:none;cursor:pointer}.x-acct-nav-link i{width:16px;text-align:center}.x-acct-nav-link:hover{background:var(--color-surface-2);color:var(--color-text)}.x-acct-nav-on{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface));color:var(--color-accent-hover)}.x-acct-main{min-width:0}.x-acct-h2{font-size:19px;font-weight:800;color:var(--color-text);margin:0 0 4px}.x-acct-sub{font-size:13.5px;color:var(--color-text-muted);margin:0 0 20px}.x-acct-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:20px;margin-bottom:16px}.x-acct-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--color-border-muted)}.x-acct-row:last-child{border-bottom:0}.x-acct-empty{font-size:13.5px;color:var(--color-text-muted);padding:8px 0}.x-acct-btn{display:inline-block;background:var(--color-accent);color:var(--color-accent-fg);border:0;border-radius:var(--radius-lg);padding:11px 18px;font-size:14px;font-weight:800;cursor:pointer;text-decoration:none}.x-acct-btn:hover:not(:disabled){background:var(--color-accent-hover)}.x-acct-btn:disabled{opacity:.55;cursor:default}.x-acct-btn-ghost{background:transparent;color:var(--color-accent-hover);border:1px solid var(--color-border);padding:9px 14px;border-radius:var(--radius-lg);font-size:13px;font-weight:700;cursor:pointer}.x-acct-btn-ghost:hover{border-color:var(--color-accent)}.x-acct-pill{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:var(--radius-sm);background:var(--color-surface-2);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.3px}.x-acct-pill-ok{background:color-mix(in srgb,var(--color-accent) 15%,var(--color-surface));color:var(--color-accent-hover)}.x-acct-pill-warn{background:color-mix(in srgb,var(--color-warn) 20%,var(--color-surface));color:color-mix(in srgb,var(--color-warn) 72%,black)}.x-acct-pill-bad{background:color-mix(in srgb,var(--color-danger) 15%,var(--color-surface));color:var(--color-danger)}.x-acct-field{margin-bottom:16px}.x-acct-field label{display:block;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--color-text-muted);margin-bottom:7px}.x-acct-field input,.x-acct-field select{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:var(--radius-lg);border:1px solid var(--color-border);font:inherit;font-size:14.5px;background:var(--color-surface);color:var(--color-text);outline:none}.x-acct-err{font-size:12.5px;color:var(--color-danger);margin-bottom:12px}.x-acct-ok{font-size:12.5px;color:var(--color-accent-hover);margin-bottom:12px}.x-acct-checkline{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13.5px;color:var(--color-text)}.x-acct-checkline input{width:auto}@media(max-width:720px){.x-acct-body{grid-template-columns:1fr;gap:16px}.x-acct-nav{flex-direction:row;flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], encapsulation: i0.ViewEncapsulation.None }); }
105
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccountComponent, isStandalone: false, selector: "x-account", usesInheritance: true, ngImport: i0, template: "<div class=\"x-acct\">\n @if (loading) {\n <div class=\"x-acct-note\">Loading your account\u2026</div>\n } @else if (!isLoggedIn) {\n <div class=\"x-acct-signin\">\n <h1>Your account</h1>\n <p>Sign in to see your orders, saved systems, addresses and settings.</p>\n <button type=\"button\" class=\"x-acct-btn\" (click)=\"signIn()\">Sign in</button>\n <p class=\"x-acct-muted\">\n No account yet? You can still\n <a routerLink=\"/track\">track an order</a> with your order number.\n </p>\n </div>\n } @else {\n <header class=\"x-acct-head\">\n <h1>{{ customerName }}</h1>\n </header>\n <div class=\"x-acct-body\">\n <nav class=\"x-acct-nav\">\n @for (item of nav; track item.path) {\n <a\n [routerLink]=\"item.path\"\n routerLinkActive=\"x-acct-nav-on\"\n class=\"x-acct-nav-link\"\n >\n <i class=\"fa-solid\" [class]=\"item.icon\"></i>\n <span>{{ item.label }}</span>\n </a>\n }\n </nav>\n <main class=\"x-acct-main\">\n <router-outlet></router-outlet>\n </main>\n </div>\n }\n</div>\n", styles: [".x-acct{max-width:1080px;margin:0 auto;padding:24px 20px 64px}.x-acct-note,.x-acct-muted{font-size:13.5px;color:var(--color-text-muted)}.x-acct-signin{max-width:420px;margin:48px auto;text-align:center}.x-acct-signin h1{font-size:26px;font-weight:800;color:var(--color-text);margin-bottom:10px}.x-acct-signin p{font-size:14.5px;color:var(--color-text-muted);margin-bottom:18px}.x-acct-signin a{color:var(--color-accent-hover);font-weight:700}.x-acct-head h1{font-size:28px;font-weight:800;color:var(--color-text);margin:4px 0 24px}.x-acct-body{display:grid;grid-template-columns:208px 1fr;gap:32px}.x-acct-nav{display:flex;flex-direction:column;gap:2px}.x-acct-nav-link{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--radius-lg);font-size:14px;font-weight:700;color:var(--color-text-muted);text-decoration:none;cursor:pointer}.x-acct-nav-link i{width:16px;text-align:center}.x-acct-nav-link:hover{background:var(--color-surface-2);color:var(--color-text)}.x-acct-nav-on{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface));color:var(--color-accent-hover)}.x-acct-main{min-width:0}.x-acct-h2{font-size:19px;font-weight:800;color:var(--color-text);margin:0 0 4px}.x-acct-sub{font-size:13.5px;color:var(--color-text-muted);margin:0 0 20px}.x-acct-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:20px;margin-bottom:16px}.x-acct-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--color-border-muted)}.x-acct-row:last-child{border-bottom:0}.x-acct-empty{font-size:13.5px;color:var(--color-text-muted);padding:8px 0}.x-acct-btn{display:inline-block;background:var(--color-accent);color:var(--color-accent-fg);border:0;border-radius:var(--radius-lg);padding:11px 18px;font-size:14px;font-weight:800;cursor:pointer;text-decoration:none}.x-acct-btn:hover:not(:disabled){background:var(--color-accent-hover)}.x-acct-btn:disabled{opacity:.55;cursor:default}.x-acct-btn-ghost{background:transparent;color:var(--color-accent-hover);border:1px solid var(--color-border);padding:9px 14px;border-radius:var(--radius-lg);font-size:13px;font-weight:700;cursor:pointer}.x-acct-btn-ghost:hover{border-color:var(--color-accent)}.x-acct-pill{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:var(--radius-sm);background:var(--color-surface-2);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.3px}.x-acct-pill-ok{background:color-mix(in srgb,var(--color-accent) 15%,var(--color-surface));color:var(--color-accent-hover)}.x-acct-pill-warn{background:color-mix(in srgb,var(--color-warn) 20%,var(--color-surface));color:color-mix(in srgb,var(--color-warn) 72%,black)}.x-acct-pill-bad{background:color-mix(in srgb,var(--color-danger) 15%,var(--color-surface));color:var(--color-danger)}.x-acct-field{margin-bottom:16px}.x-acct-field label{display:block;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--color-text-muted);margin-bottom:7px}.x-acct-field input,.x-acct-field select{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:var(--radius-lg);border:1px solid var(--color-border);font:inherit;font-size:14.5px;background:var(--color-surface);color:var(--color-text);outline:none}.x-acct-field .x-acct-pwd{position:relative;display:flex}.x-acct-field .x-acct-pwd input{padding-right:42px}.x-acct-field .x-acct-pwd-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--color-text-muted);padding:6px 8px;cursor:pointer}.x-acct-field .x-acct-pwd-toggle:hover{color:var(--color-text)}.x-acct-err{font-size:12.5px;color:var(--color-danger);margin-bottom:12px}.x-acct-ok{font-size:12.5px;color:var(--color-accent-hover);margin-bottom:12px}.x-acct-checkline{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13.5px;color:var(--color-text)}.x-acct-checkline input{width:auto}@media(max-width:720px){.x-acct-body{grid-template-columns:1fr;gap:16px}.x-acct-nav{flex-direction:row;flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], encapsulation: i0.ViewEncapsulation.None }); }
106
106
  }
107
107
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountComponent, decorators: [{
108
108
  type: Component,
109
- args: [{ standalone: false, selector: 'x-account', encapsulation: ViewEncapsulation.None, template: "<div class=\"x-acct\">\n @if (loading) {\n <div class=\"x-acct-note\">Loading your account\u2026</div>\n } @else if (!isLoggedIn) {\n <div class=\"x-acct-signin\">\n <h1>Your account</h1>\n <p>Sign in to see your orders, saved systems, addresses and settings.</p>\n <button type=\"button\" class=\"x-acct-btn\" (click)=\"signIn()\">Sign in</button>\n <p class=\"x-acct-muted\">\n No account yet? You can still\n <a routerLink=\"/track\">track an order</a> with your order number.\n </p>\n </div>\n } @else {\n <header class=\"x-acct-head\">\n <h1>{{ customerName }}</h1>\n </header>\n <div class=\"x-acct-body\">\n <nav class=\"x-acct-nav\">\n @for (item of nav; track item.path) {\n <a\n [routerLink]=\"item.path\"\n routerLinkActive=\"x-acct-nav-on\"\n class=\"x-acct-nav-link\"\n >\n <i class=\"fa-solid\" [class]=\"item.icon\"></i>\n <span>{{ item.label }}</span>\n </a>\n }\n </nav>\n <main class=\"x-acct-main\">\n <router-outlet></router-outlet>\n </main>\n </div>\n }\n</div>\n", styles: [".x-acct{max-width:1080px;margin:0 auto;padding:24px 20px 64px}.x-acct-note,.x-acct-muted{font-size:13.5px;color:var(--color-text-muted)}.x-acct-signin{max-width:420px;margin:48px auto;text-align:center}.x-acct-signin h1{font-size:26px;font-weight:800;color:var(--color-text);margin-bottom:10px}.x-acct-signin p{font-size:14.5px;color:var(--color-text-muted);margin-bottom:18px}.x-acct-signin a{color:var(--color-accent-hover);font-weight:700}.x-acct-head h1{font-size:28px;font-weight:800;color:var(--color-text);margin:4px 0 24px}.x-acct-body{display:grid;grid-template-columns:208px 1fr;gap:32px}.x-acct-nav{display:flex;flex-direction:column;gap:2px}.x-acct-nav-link{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--radius-lg);font-size:14px;font-weight:700;color:var(--color-text-muted);text-decoration:none;cursor:pointer}.x-acct-nav-link i{width:16px;text-align:center}.x-acct-nav-link:hover{background:var(--color-surface-2);color:var(--color-text)}.x-acct-nav-on{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface));color:var(--color-accent-hover)}.x-acct-main{min-width:0}.x-acct-h2{font-size:19px;font-weight:800;color:var(--color-text);margin:0 0 4px}.x-acct-sub{font-size:13.5px;color:var(--color-text-muted);margin:0 0 20px}.x-acct-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:20px;margin-bottom:16px}.x-acct-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--color-border-muted)}.x-acct-row:last-child{border-bottom:0}.x-acct-empty{font-size:13.5px;color:var(--color-text-muted);padding:8px 0}.x-acct-btn{display:inline-block;background:var(--color-accent);color:var(--color-accent-fg);border:0;border-radius:var(--radius-lg);padding:11px 18px;font-size:14px;font-weight:800;cursor:pointer;text-decoration:none}.x-acct-btn:hover:not(:disabled){background:var(--color-accent-hover)}.x-acct-btn:disabled{opacity:.55;cursor:default}.x-acct-btn-ghost{background:transparent;color:var(--color-accent-hover);border:1px solid var(--color-border);padding:9px 14px;border-radius:var(--radius-lg);font-size:13px;font-weight:700;cursor:pointer}.x-acct-btn-ghost:hover{border-color:var(--color-accent)}.x-acct-pill{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:var(--radius-sm);background:var(--color-surface-2);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.3px}.x-acct-pill-ok{background:color-mix(in srgb,var(--color-accent) 15%,var(--color-surface));color:var(--color-accent-hover)}.x-acct-pill-warn{background:color-mix(in srgb,var(--color-warn) 20%,var(--color-surface));color:color-mix(in srgb,var(--color-warn) 72%,black)}.x-acct-pill-bad{background:color-mix(in srgb,var(--color-danger) 15%,var(--color-surface));color:var(--color-danger)}.x-acct-field{margin-bottom:16px}.x-acct-field label{display:block;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--color-text-muted);margin-bottom:7px}.x-acct-field input,.x-acct-field select{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:var(--radius-lg);border:1px solid var(--color-border);font:inherit;font-size:14.5px;background:var(--color-surface);color:var(--color-text);outline:none}.x-acct-err{font-size:12.5px;color:var(--color-danger);margin-bottom:12px}.x-acct-ok{font-size:12.5px;color:var(--color-accent-hover);margin-bottom:12px}.x-acct-checkline{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13.5px;color:var(--color-text)}.x-acct-checkline input{width:auto}@media(max-width:720px){.x-acct-body{grid-template-columns:1fr;gap:16px}.x-acct-nav{flex-direction:row;flex-wrap:wrap}}\n"] }]
109
+ args: [{ standalone: false, selector: 'x-account', encapsulation: ViewEncapsulation.None, template: "<div class=\"x-acct\">\n @if (loading) {\n <div class=\"x-acct-note\">Loading your account\u2026</div>\n } @else if (!isLoggedIn) {\n <div class=\"x-acct-signin\">\n <h1>Your account</h1>\n <p>Sign in to see your orders, saved systems, addresses and settings.</p>\n <button type=\"button\" class=\"x-acct-btn\" (click)=\"signIn()\">Sign in</button>\n <p class=\"x-acct-muted\">\n No account yet? You can still\n <a routerLink=\"/track\">track an order</a> with your order number.\n </p>\n </div>\n } @else {\n <header class=\"x-acct-head\">\n <h1>{{ customerName }}</h1>\n </header>\n <div class=\"x-acct-body\">\n <nav class=\"x-acct-nav\">\n @for (item of nav; track item.path) {\n <a\n [routerLink]=\"item.path\"\n routerLinkActive=\"x-acct-nav-on\"\n class=\"x-acct-nav-link\"\n >\n <i class=\"fa-solid\" [class]=\"item.icon\"></i>\n <span>{{ item.label }}</span>\n </a>\n }\n </nav>\n <main class=\"x-acct-main\">\n <router-outlet></router-outlet>\n </main>\n </div>\n }\n</div>\n", styles: [".x-acct{max-width:1080px;margin:0 auto;padding:24px 20px 64px}.x-acct-note,.x-acct-muted{font-size:13.5px;color:var(--color-text-muted)}.x-acct-signin{max-width:420px;margin:48px auto;text-align:center}.x-acct-signin h1{font-size:26px;font-weight:800;color:var(--color-text);margin-bottom:10px}.x-acct-signin p{font-size:14.5px;color:var(--color-text-muted);margin-bottom:18px}.x-acct-signin a{color:var(--color-accent-hover);font-weight:700}.x-acct-head h1{font-size:28px;font-weight:800;color:var(--color-text);margin:4px 0 24px}.x-acct-body{display:grid;grid-template-columns:208px 1fr;gap:32px}.x-acct-nav{display:flex;flex-direction:column;gap:2px}.x-acct-nav-link{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--radius-lg);font-size:14px;font-weight:700;color:var(--color-text-muted);text-decoration:none;cursor:pointer}.x-acct-nav-link i{width:16px;text-align:center}.x-acct-nav-link:hover{background:var(--color-surface-2);color:var(--color-text)}.x-acct-nav-on{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface));color:var(--color-accent-hover)}.x-acct-main{min-width:0}.x-acct-h2{font-size:19px;font-weight:800;color:var(--color-text);margin:0 0 4px}.x-acct-sub{font-size:13.5px;color:var(--color-text-muted);margin:0 0 20px}.x-acct-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:20px;margin-bottom:16px}.x-acct-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--color-border-muted)}.x-acct-row:last-child{border-bottom:0}.x-acct-empty{font-size:13.5px;color:var(--color-text-muted);padding:8px 0}.x-acct-btn{display:inline-block;background:var(--color-accent);color:var(--color-accent-fg);border:0;border-radius:var(--radius-lg);padding:11px 18px;font-size:14px;font-weight:800;cursor:pointer;text-decoration:none}.x-acct-btn:hover:not(:disabled){background:var(--color-accent-hover)}.x-acct-btn:disabled{opacity:.55;cursor:default}.x-acct-btn-ghost{background:transparent;color:var(--color-accent-hover);border:1px solid var(--color-border);padding:9px 14px;border-radius:var(--radius-lg);font-size:13px;font-weight:700;cursor:pointer}.x-acct-btn-ghost:hover{border-color:var(--color-accent)}.x-acct-pill{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:var(--radius-sm);background:var(--color-surface-2);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.3px}.x-acct-pill-ok{background:color-mix(in srgb,var(--color-accent) 15%,var(--color-surface));color:var(--color-accent-hover)}.x-acct-pill-warn{background:color-mix(in srgb,var(--color-warn) 20%,var(--color-surface));color:color-mix(in srgb,var(--color-warn) 72%,black)}.x-acct-pill-bad{background:color-mix(in srgb,var(--color-danger) 15%,var(--color-surface));color:var(--color-danger)}.x-acct-field{margin-bottom:16px}.x-acct-field label{display:block;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--color-text-muted);margin-bottom:7px}.x-acct-field input,.x-acct-field select{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:var(--radius-lg);border:1px solid var(--color-border);font:inherit;font-size:14.5px;background:var(--color-surface);color:var(--color-text);outline:none}.x-acct-field .x-acct-pwd{position:relative;display:flex}.x-acct-field .x-acct-pwd input{padding-right:42px}.x-acct-field .x-acct-pwd-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--color-text-muted);padding:6px 8px;cursor:pointer}.x-acct-field .x-acct-pwd-toggle:hover{color:var(--color-text)}.x-acct-err{font-size:12.5px;color:var(--color-danger);margin-bottom:12px}.x-acct-ok{font-size:12.5px;color:var(--color-accent-hover);margin-bottom:12px}.x-acct-checkline{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13.5px;color:var(--color-text)}.x-acct-checkline input{width:auto}@media(max-width:720px){.x-acct-body{grid-template-columns:1fr;gap:16px}.x-acct-nav{flex-direction:row;flex-wrap:wrap}}\n"] }]
110
110
  }] });
111
111
 
112
112
  function blankForm() {
@@ -1101,6 +1101,9 @@ class AccountSettingsComponent extends BaseDirective {
1101
1101
  this.currentSecret = '';
1102
1102
  this.newSecret = '';
1103
1103
  this.confirmNewSecret = '';
1104
+ this.showCurrentSecret = false;
1105
+ this.showNewSecret = false;
1106
+ this.showConfirmSecret = false;
1104
1107
  this.changingPassword = false;
1105
1108
  this.passwordError = '';
1106
1109
  this.passwordDone = false;
@@ -1246,11 +1249,11 @@ class AccountSettingsComponent extends BaseDirective {
1246
1249
  }
1247
1250
  }
1248
1251
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountSettingsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1249
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccountSettingsComponent, isStandalone: false, selector: "x-account-settings", usesInheritance: true, ngImport: i0, template: "<h2 class=\"x-acct-h2\">Settings</h2>\n<p class=\"x-acct-sub\">Profile, security, appearance and how we reach you.</p>\n\n<div class=\"x-acct-card\">\n <strong>Profile</strong>\n @if (loadingProfile) {\n <div class=\"x-acct-empty\">Loading\u2026</div>\n } @else {\n <div style=\"margin-top: 14px\">\n <div class=\"x-acct-field\">\n <label>Name</label>\n <input [value]=\"fullName\" disabled />\n </div>\n <div class=\"x-acct-field\">\n <label>Phone number</label>\n <input type=\"tel\" [(ngModel)]=\"phoneNumber\" placeholder=\"+234\u2026\" />\n </div>\n @if (profileError) {\n <div class=\"x-acct-err\">{{ profileError }}</div>\n }\n <button type=\"button\" class=\"x-acct-btn\" [disabled]=\"savingProfile\" (click)=\"saveProfile()\">\n {{ savingProfile ? 'Saving\u2026' : 'Save profile' }}\n </button>\n </div>\n }\n</div>\n\n<div class=\"x-acct-card\">\n <strong>Change password</strong>\n <div style=\"margin-top: 14px\">\n <div class=\"x-acct-field\">\n <label>Current password</label>\n <input type=\"password\" [(ngModel)]=\"currentSecret\" />\n </div>\n <div class=\"x-acct-field\">\n <label>New password</label>\n <input type=\"password\" [(ngModel)]=\"newSecret\" />\n </div>\n <div class=\"x-acct-field\">\n <label>Confirm new password</label>\n <input type=\"password\" [(ngModel)]=\"confirmNewSecret\" />\n </div>\n @if (passwordError) {\n <div class=\"x-acct-err\">{{ passwordError }}</div>\n }\n @if (passwordDone) {\n <div class=\"x-acct-ok\">Password changed. Signing you out\u2026</div>\n }\n <button\n type=\"button\"\n class=\"x-acct-btn\"\n [disabled]=\"!canChangePassword || changingPassword\"\n (click)=\"changePassword()\"\n >\n {{ changingPassword ? 'Saving\u2026' : 'Change password' }}\n </button>\n </div>\n</div>\n\n<div class=\"x-acct-card\">\n <strong>Appearance</strong>\n <div class=\"x-acct-field\" style=\"margin-top: 14px; max-width: 240px\">\n <label>Theme</label>\n <select aria-label=\"Theme\" [ngModel]=\"theme\" (ngModelChange)=\"setTheme($event)\">\n <option value=\"system\">Match my device</option>\n <option value=\"light\">Light</option>\n <option value=\"dark\">Dark</option>\n </select>\n </div>\n</div>\n\n<div class=\"x-acct-card\">\n <strong>Notifications</strong>\n @if (loadingPrefs) {\n <div class=\"x-acct-empty\">Loading\u2026</div>\n } @else {\n <p class=\"x-acct-sub\" style=\"margin: 8px 0 16px\">\n Order and payment updates are always sent. Everything else is up to you.\n </p>\n\n @for (cat of categories; track cat.key) {\n <div style=\"padding: 10px 0; border-bottom: 1px solid var(--color-border-muted)\">\n <div style=\"font-weight: 700; font-size: 13.5px; margin-bottom: 8px\">\n {{ cat.label }}\n @if (cat.locked) {\n <span class=\"x-acct-pill\" style=\"margin-left: 6px\">Always on</span>\n }\n </div>\n @if (cat.consent && !marketingConsent) {\n <label class=\"x-acct-checkline\">\n <input type=\"checkbox\" [(ngModel)]=\"marketingConsent\" />\n Opt in to offers and promotions\n </label>\n } @else {\n <div style=\"display: flex; gap: 16px; flex-wrap: wrap\">\n @for (ch of channels; track ch.key) {\n <label class=\"x-acct-checkline\">\n <input\n type=\"checkbox\"\n [disabled]=\"cat.locked || unsubscribedAll || (cat.consent && !marketingConsent)\"\n [checked]=\"channelOn(cat.key, ch.key)\"\n (change)=\"toggleChannel(cat.key, ch.key)\"\n />\n {{ ch.label }}\n </label>\n }\n </div>\n @if (cat.consent && marketingConsent) {\n <label class=\"x-acct-checkline\" style=\"margin-top: 4px\">\n <input type=\"checkbox\" [(ngModel)]=\"marketingConsent\" />\n Keep me opted in to offers\n </label>\n }\n }\n </div>\n }\n\n <div style=\"padding: 14px 0\">\n <label class=\"x-acct-checkline\">\n <input type=\"checkbox\" [(ngModel)]=\"quietHoursEnabled\" />\n Quiet hours \u2014 hold non-urgent messages overnight\n </label>\n @if (quietHoursEnabled) {\n <div style=\"display: flex; gap: 12px; margin-top: 8px\">\n <div class=\"x-acct-field\" style=\"margin: 0\">\n <label>From</label>\n <input type=\"time\" [(ngModel)]=\"quietHoursStart\" />\n </div>\n <div class=\"x-acct-field\" style=\"margin: 0\">\n <label>To</label>\n <input type=\"time\" [(ngModel)]=\"quietHoursEnd\" />\n </div>\n </div>\n }\n </div>\n\n <label class=\"x-acct-checkline\">\n <input type=\"checkbox\" [(ngModel)]=\"unsubscribedAll\" />\n Unsubscribe from everything except order &amp; payment updates\n </label>\n\n @if (prefsError) {\n <div class=\"x-acct-err\" style=\"margin-top: 12px\">{{ prefsError }}</div>\n }\n <button\n type=\"button\"\n class=\"x-acct-btn\"\n style=\"margin-top: 14px\"\n [disabled]=\"savingPrefs\"\n (click)=\"savePrefs()\"\n >\n {{ savingPrefs ? 'Saving\u2026' : 'Save preferences' }}\n </button>\n }\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
1252
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccountSettingsComponent, isStandalone: false, selector: "x-account-settings", usesInheritance: true, ngImport: i0, template: "<h2 class=\"x-acct-h2\">Settings</h2>\n<p class=\"x-acct-sub\">Profile, security, appearance and how we reach you.</p>\n\n<div class=\"x-acct-card\">\n <strong>Profile</strong>\n @if (loadingProfile) {\n <div class=\"x-acct-empty\">Loading\u2026</div>\n } @else {\n <div style=\"margin-top: 14px\">\n <div class=\"x-acct-field\">\n <label>Name</label>\n <input [value]=\"fullName\" disabled />\n </div>\n <div class=\"x-acct-field\">\n <label>Phone number</label>\n <input type=\"tel\" [(ngModel)]=\"phoneNumber\" placeholder=\"+234\u2026\" />\n </div>\n @if (profileError) {\n <div class=\"x-acct-err\">{{ profileError }}</div>\n }\n <button type=\"button\" class=\"x-acct-btn\" [disabled]=\"savingProfile\" (click)=\"saveProfile()\">\n {{ savingProfile ? 'Saving\u2026' : 'Save profile' }}\n </button>\n </div>\n }\n</div>\n\n<div class=\"x-acct-card\">\n <strong>Change password</strong>\n <div style=\"margin-top: 14px\">\n <div class=\"x-acct-field\">\n <label>Current password</label>\n <div class=\"x-acct-pwd\">\n <input [type]=\"showCurrentSecret ? 'text' : 'password'\" [(ngModel)]=\"currentSecret\" />\n <button\n type=\"button\"\n class=\"x-acct-pwd-toggle\"\n [title]=\"showCurrentSecret ? 'Hide password' : 'Show password'\"\n [attr.aria-label]=\"showCurrentSecret ? 'Hide password' : 'Show password'\"\n (click)=\"showCurrentSecret = !showCurrentSecret\"\n >\n <i class=\"fa-solid\" [ngClass]=\"showCurrentSecret ? 'fa-eye' : 'fa-eye-slash'\"></i>\n </button>\n </div>\n </div>\n <div class=\"x-acct-field\">\n <label>New password</label>\n <div class=\"x-acct-pwd\">\n <input [type]=\"showNewSecret ? 'text' : 'password'\" [(ngModel)]=\"newSecret\" />\n <button\n type=\"button\"\n class=\"x-acct-pwd-toggle\"\n [title]=\"showNewSecret ? 'Hide password' : 'Show password'\"\n [attr.aria-label]=\"showNewSecret ? 'Hide password' : 'Show password'\"\n (click)=\"showNewSecret = !showNewSecret\"\n >\n <i class=\"fa-solid\" [ngClass]=\"showNewSecret ? 'fa-eye' : 'fa-eye-slash'\"></i>\n </button>\n </div>\n </div>\n <div class=\"x-acct-field\">\n <label>Confirm new password</label>\n <div class=\"x-acct-pwd\">\n <input [type]=\"showConfirmSecret ? 'text' : 'password'\" [(ngModel)]=\"confirmNewSecret\" />\n <button\n type=\"button\"\n class=\"x-acct-pwd-toggle\"\n [title]=\"showConfirmSecret ? 'Hide password' : 'Show password'\"\n [attr.aria-label]=\"showConfirmSecret ? 'Hide password' : 'Show password'\"\n (click)=\"showConfirmSecret = !showConfirmSecret\"\n >\n <i class=\"fa-solid\" [ngClass]=\"showConfirmSecret ? 'fa-eye' : 'fa-eye-slash'\"></i>\n </button>\n </div>\n </div>\n @if (passwordError) {\n <div class=\"x-acct-err\">{{ passwordError }}</div>\n }\n @if (passwordDone) {\n <div class=\"x-acct-ok\">Password changed. Signing you out\u2026</div>\n }\n <button\n type=\"button\"\n class=\"x-acct-btn\"\n [disabled]=\"!canChangePassword || changingPassword\"\n (click)=\"changePassword()\"\n >\n {{ changingPassword ? 'Saving\u2026' : 'Change password' }}\n </button>\n </div>\n</div>\n\n<div class=\"x-acct-card\">\n <strong>Appearance</strong>\n <div class=\"x-acct-field\" style=\"margin-top: 14px; max-width: 240px\">\n <label>Theme</label>\n <select aria-label=\"Theme\" [ngModel]=\"theme\" (ngModelChange)=\"setTheme($event)\">\n <option value=\"system\">Match my device</option>\n <option value=\"light\">Light</option>\n <option value=\"dark\">Dark</option>\n </select>\n </div>\n</div>\n\n<div class=\"x-acct-card\">\n <strong>Notifications</strong>\n @if (loadingPrefs) {\n <div class=\"x-acct-empty\">Loading\u2026</div>\n } @else {\n <p class=\"x-acct-sub\" style=\"margin: 8px 0 16px\">\n Order and payment updates are always sent. Everything else is up to you.\n </p>\n\n @for (cat of categories; track cat.key) {\n <div style=\"padding: 10px 0; border-bottom: 1px solid var(--color-border-muted)\">\n <div style=\"font-weight: 700; font-size: 13.5px; margin-bottom: 8px\">\n {{ cat.label }}\n @if (cat.locked) {\n <span class=\"x-acct-pill\" style=\"margin-left: 6px\">Always on</span>\n }\n </div>\n @if (cat.consent && !marketingConsent) {\n <label class=\"x-acct-checkline\">\n <input type=\"checkbox\" [(ngModel)]=\"marketingConsent\" />\n Opt in to offers and promotions\n </label>\n } @else {\n <div style=\"display: flex; gap: 16px; flex-wrap: wrap\">\n @for (ch of channels; track ch.key) {\n <label class=\"x-acct-checkline\">\n <input\n type=\"checkbox\"\n [disabled]=\"cat.locked || unsubscribedAll || (cat.consent && !marketingConsent)\"\n [checked]=\"channelOn(cat.key, ch.key)\"\n (change)=\"toggleChannel(cat.key, ch.key)\"\n />\n {{ ch.label }}\n </label>\n }\n </div>\n @if (cat.consent && marketingConsent) {\n <label class=\"x-acct-checkline\" style=\"margin-top: 4px\">\n <input type=\"checkbox\" [(ngModel)]=\"marketingConsent\" />\n Keep me opted in to offers\n </label>\n }\n }\n </div>\n }\n\n <div style=\"padding: 14px 0\">\n <label class=\"x-acct-checkline\">\n <input type=\"checkbox\" [(ngModel)]=\"quietHoursEnabled\" />\n Quiet hours \u2014 hold non-urgent messages overnight\n </label>\n @if (quietHoursEnabled) {\n <div style=\"display: flex; gap: 12px; margin-top: 8px\">\n <div class=\"x-acct-field\" style=\"margin: 0\">\n <label>From</label>\n <input type=\"time\" [(ngModel)]=\"quietHoursStart\" />\n </div>\n <div class=\"x-acct-field\" style=\"margin: 0\">\n <label>To</label>\n <input type=\"time\" [(ngModel)]=\"quietHoursEnd\" />\n </div>\n </div>\n }\n </div>\n\n <label class=\"x-acct-checkline\">\n <input type=\"checkbox\" [(ngModel)]=\"unsubscribedAll\" />\n Unsubscribe from everything except order &amp; payment updates\n </label>\n\n @if (prefsError) {\n <div class=\"x-acct-err\" style=\"margin-top: 12px\">{{ prefsError }}</div>\n }\n <button\n type=\"button\"\n class=\"x-acct-btn\"\n style=\"margin-top: 14px\"\n [disabled]=\"savingPrefs\"\n (click)=\"savePrefs()\"\n >\n {{ savingPrefs ? 'Saving\u2026' : 'Save preferences' }}\n </button>\n }\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
1250
1253
  }
1251
1254
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountSettingsComponent, decorators: [{
1252
1255
  type: Component,
1253
- args: [{ standalone: false, selector: 'x-account-settings', template: "<h2 class=\"x-acct-h2\">Settings</h2>\n<p class=\"x-acct-sub\">Profile, security, appearance and how we reach you.</p>\n\n<div class=\"x-acct-card\">\n <strong>Profile</strong>\n @if (loadingProfile) {\n <div class=\"x-acct-empty\">Loading\u2026</div>\n } @else {\n <div style=\"margin-top: 14px\">\n <div class=\"x-acct-field\">\n <label>Name</label>\n <input [value]=\"fullName\" disabled />\n </div>\n <div class=\"x-acct-field\">\n <label>Phone number</label>\n <input type=\"tel\" [(ngModel)]=\"phoneNumber\" placeholder=\"+234\u2026\" />\n </div>\n @if (profileError) {\n <div class=\"x-acct-err\">{{ profileError }}</div>\n }\n <button type=\"button\" class=\"x-acct-btn\" [disabled]=\"savingProfile\" (click)=\"saveProfile()\">\n {{ savingProfile ? 'Saving\u2026' : 'Save profile' }}\n </button>\n </div>\n }\n</div>\n\n<div class=\"x-acct-card\">\n <strong>Change password</strong>\n <div style=\"margin-top: 14px\">\n <div class=\"x-acct-field\">\n <label>Current password</label>\n <input type=\"password\" [(ngModel)]=\"currentSecret\" />\n </div>\n <div class=\"x-acct-field\">\n <label>New password</label>\n <input type=\"password\" [(ngModel)]=\"newSecret\" />\n </div>\n <div class=\"x-acct-field\">\n <label>Confirm new password</label>\n <input type=\"password\" [(ngModel)]=\"confirmNewSecret\" />\n </div>\n @if (passwordError) {\n <div class=\"x-acct-err\">{{ passwordError }}</div>\n }\n @if (passwordDone) {\n <div class=\"x-acct-ok\">Password changed. Signing you out\u2026</div>\n }\n <button\n type=\"button\"\n class=\"x-acct-btn\"\n [disabled]=\"!canChangePassword || changingPassword\"\n (click)=\"changePassword()\"\n >\n {{ changingPassword ? 'Saving\u2026' : 'Change password' }}\n </button>\n </div>\n</div>\n\n<div class=\"x-acct-card\">\n <strong>Appearance</strong>\n <div class=\"x-acct-field\" style=\"margin-top: 14px; max-width: 240px\">\n <label>Theme</label>\n <select aria-label=\"Theme\" [ngModel]=\"theme\" (ngModelChange)=\"setTheme($event)\">\n <option value=\"system\">Match my device</option>\n <option value=\"light\">Light</option>\n <option value=\"dark\">Dark</option>\n </select>\n </div>\n</div>\n\n<div class=\"x-acct-card\">\n <strong>Notifications</strong>\n @if (loadingPrefs) {\n <div class=\"x-acct-empty\">Loading\u2026</div>\n } @else {\n <p class=\"x-acct-sub\" style=\"margin: 8px 0 16px\">\n Order and payment updates are always sent. Everything else is up to you.\n </p>\n\n @for (cat of categories; track cat.key) {\n <div style=\"padding: 10px 0; border-bottom: 1px solid var(--color-border-muted)\">\n <div style=\"font-weight: 700; font-size: 13.5px; margin-bottom: 8px\">\n {{ cat.label }}\n @if (cat.locked) {\n <span class=\"x-acct-pill\" style=\"margin-left: 6px\">Always on</span>\n }\n </div>\n @if (cat.consent && !marketingConsent) {\n <label class=\"x-acct-checkline\">\n <input type=\"checkbox\" [(ngModel)]=\"marketingConsent\" />\n Opt in to offers and promotions\n </label>\n } @else {\n <div style=\"display: flex; gap: 16px; flex-wrap: wrap\">\n @for (ch of channels; track ch.key) {\n <label class=\"x-acct-checkline\">\n <input\n type=\"checkbox\"\n [disabled]=\"cat.locked || unsubscribedAll || (cat.consent && !marketingConsent)\"\n [checked]=\"channelOn(cat.key, ch.key)\"\n (change)=\"toggleChannel(cat.key, ch.key)\"\n />\n {{ ch.label }}\n </label>\n }\n </div>\n @if (cat.consent && marketingConsent) {\n <label class=\"x-acct-checkline\" style=\"margin-top: 4px\">\n <input type=\"checkbox\" [(ngModel)]=\"marketingConsent\" />\n Keep me opted in to offers\n </label>\n }\n }\n </div>\n }\n\n <div style=\"padding: 14px 0\">\n <label class=\"x-acct-checkline\">\n <input type=\"checkbox\" [(ngModel)]=\"quietHoursEnabled\" />\n Quiet hours \u2014 hold non-urgent messages overnight\n </label>\n @if (quietHoursEnabled) {\n <div style=\"display: flex; gap: 12px; margin-top: 8px\">\n <div class=\"x-acct-field\" style=\"margin: 0\">\n <label>From</label>\n <input type=\"time\" [(ngModel)]=\"quietHoursStart\" />\n </div>\n <div class=\"x-acct-field\" style=\"margin: 0\">\n <label>To</label>\n <input type=\"time\" [(ngModel)]=\"quietHoursEnd\" />\n </div>\n </div>\n }\n </div>\n\n <label class=\"x-acct-checkline\">\n <input type=\"checkbox\" [(ngModel)]=\"unsubscribedAll\" />\n Unsubscribe from everything except order &amp; payment updates\n </label>\n\n @if (prefsError) {\n <div class=\"x-acct-err\" style=\"margin-top: 12px\">{{ prefsError }}</div>\n }\n <button\n type=\"button\"\n class=\"x-acct-btn\"\n style=\"margin-top: 14px\"\n [disabled]=\"savingPrefs\"\n (click)=\"savePrefs()\"\n >\n {{ savingPrefs ? 'Saving\u2026' : 'Save preferences' }}\n </button>\n }\n</div>\n" }]
1256
+ args: [{ standalone: false, selector: 'x-account-settings', template: "<h2 class=\"x-acct-h2\">Settings</h2>\n<p class=\"x-acct-sub\">Profile, security, appearance and how we reach you.</p>\n\n<div class=\"x-acct-card\">\n <strong>Profile</strong>\n @if (loadingProfile) {\n <div class=\"x-acct-empty\">Loading\u2026</div>\n } @else {\n <div style=\"margin-top: 14px\">\n <div class=\"x-acct-field\">\n <label>Name</label>\n <input [value]=\"fullName\" disabled />\n </div>\n <div class=\"x-acct-field\">\n <label>Phone number</label>\n <input type=\"tel\" [(ngModel)]=\"phoneNumber\" placeholder=\"+234\u2026\" />\n </div>\n @if (profileError) {\n <div class=\"x-acct-err\">{{ profileError }}</div>\n }\n <button type=\"button\" class=\"x-acct-btn\" [disabled]=\"savingProfile\" (click)=\"saveProfile()\">\n {{ savingProfile ? 'Saving\u2026' : 'Save profile' }}\n </button>\n </div>\n }\n</div>\n\n<div class=\"x-acct-card\">\n <strong>Change password</strong>\n <div style=\"margin-top: 14px\">\n <div class=\"x-acct-field\">\n <label>Current password</label>\n <div class=\"x-acct-pwd\">\n <input [type]=\"showCurrentSecret ? 'text' : 'password'\" [(ngModel)]=\"currentSecret\" />\n <button\n type=\"button\"\n class=\"x-acct-pwd-toggle\"\n [title]=\"showCurrentSecret ? 'Hide password' : 'Show password'\"\n [attr.aria-label]=\"showCurrentSecret ? 'Hide password' : 'Show password'\"\n (click)=\"showCurrentSecret = !showCurrentSecret\"\n >\n <i class=\"fa-solid\" [ngClass]=\"showCurrentSecret ? 'fa-eye' : 'fa-eye-slash'\"></i>\n </button>\n </div>\n </div>\n <div class=\"x-acct-field\">\n <label>New password</label>\n <div class=\"x-acct-pwd\">\n <input [type]=\"showNewSecret ? 'text' : 'password'\" [(ngModel)]=\"newSecret\" />\n <button\n type=\"button\"\n class=\"x-acct-pwd-toggle\"\n [title]=\"showNewSecret ? 'Hide password' : 'Show password'\"\n [attr.aria-label]=\"showNewSecret ? 'Hide password' : 'Show password'\"\n (click)=\"showNewSecret = !showNewSecret\"\n >\n <i class=\"fa-solid\" [ngClass]=\"showNewSecret ? 'fa-eye' : 'fa-eye-slash'\"></i>\n </button>\n </div>\n </div>\n <div class=\"x-acct-field\">\n <label>Confirm new password</label>\n <div class=\"x-acct-pwd\">\n <input [type]=\"showConfirmSecret ? 'text' : 'password'\" [(ngModel)]=\"confirmNewSecret\" />\n <button\n type=\"button\"\n class=\"x-acct-pwd-toggle\"\n [title]=\"showConfirmSecret ? 'Hide password' : 'Show password'\"\n [attr.aria-label]=\"showConfirmSecret ? 'Hide password' : 'Show password'\"\n (click)=\"showConfirmSecret = !showConfirmSecret\"\n >\n <i class=\"fa-solid\" [ngClass]=\"showConfirmSecret ? 'fa-eye' : 'fa-eye-slash'\"></i>\n </button>\n </div>\n </div>\n @if (passwordError) {\n <div class=\"x-acct-err\">{{ passwordError }}</div>\n }\n @if (passwordDone) {\n <div class=\"x-acct-ok\">Password changed. Signing you out\u2026</div>\n }\n <button\n type=\"button\"\n class=\"x-acct-btn\"\n [disabled]=\"!canChangePassword || changingPassword\"\n (click)=\"changePassword()\"\n >\n {{ changingPassword ? 'Saving\u2026' : 'Change password' }}\n </button>\n </div>\n</div>\n\n<div class=\"x-acct-card\">\n <strong>Appearance</strong>\n <div class=\"x-acct-field\" style=\"margin-top: 14px; max-width: 240px\">\n <label>Theme</label>\n <select aria-label=\"Theme\" [ngModel]=\"theme\" (ngModelChange)=\"setTheme($event)\">\n <option value=\"system\">Match my device</option>\n <option value=\"light\">Light</option>\n <option value=\"dark\">Dark</option>\n </select>\n </div>\n</div>\n\n<div class=\"x-acct-card\">\n <strong>Notifications</strong>\n @if (loadingPrefs) {\n <div class=\"x-acct-empty\">Loading\u2026</div>\n } @else {\n <p class=\"x-acct-sub\" style=\"margin: 8px 0 16px\">\n Order and payment updates are always sent. Everything else is up to you.\n </p>\n\n @for (cat of categories; track cat.key) {\n <div style=\"padding: 10px 0; border-bottom: 1px solid var(--color-border-muted)\">\n <div style=\"font-weight: 700; font-size: 13.5px; margin-bottom: 8px\">\n {{ cat.label }}\n @if (cat.locked) {\n <span class=\"x-acct-pill\" style=\"margin-left: 6px\">Always on</span>\n }\n </div>\n @if (cat.consent && !marketingConsent) {\n <label class=\"x-acct-checkline\">\n <input type=\"checkbox\" [(ngModel)]=\"marketingConsent\" />\n Opt in to offers and promotions\n </label>\n } @else {\n <div style=\"display: flex; gap: 16px; flex-wrap: wrap\">\n @for (ch of channels; track ch.key) {\n <label class=\"x-acct-checkline\">\n <input\n type=\"checkbox\"\n [disabled]=\"cat.locked || unsubscribedAll || (cat.consent && !marketingConsent)\"\n [checked]=\"channelOn(cat.key, ch.key)\"\n (change)=\"toggleChannel(cat.key, ch.key)\"\n />\n {{ ch.label }}\n </label>\n }\n </div>\n @if (cat.consent && marketingConsent) {\n <label class=\"x-acct-checkline\" style=\"margin-top: 4px\">\n <input type=\"checkbox\" [(ngModel)]=\"marketingConsent\" />\n Keep me opted in to offers\n </label>\n }\n }\n </div>\n }\n\n <div style=\"padding: 14px 0\">\n <label class=\"x-acct-checkline\">\n <input type=\"checkbox\" [(ngModel)]=\"quietHoursEnabled\" />\n Quiet hours \u2014 hold non-urgent messages overnight\n </label>\n @if (quietHoursEnabled) {\n <div style=\"display: flex; gap: 12px; margin-top: 8px\">\n <div class=\"x-acct-field\" style=\"margin: 0\">\n <label>From</label>\n <input type=\"time\" [(ngModel)]=\"quietHoursStart\" />\n </div>\n <div class=\"x-acct-field\" style=\"margin: 0\">\n <label>To</label>\n <input type=\"time\" [(ngModel)]=\"quietHoursEnd\" />\n </div>\n </div>\n }\n </div>\n\n <label class=\"x-acct-checkline\">\n <input type=\"checkbox\" [(ngModel)]=\"unsubscribedAll\" />\n Unsubscribe from everything except order &amp; payment updates\n </label>\n\n @if (prefsError) {\n <div class=\"x-acct-err\" style=\"margin-top: 12px\">{{ prefsError }}</div>\n }\n <button\n type=\"button\"\n class=\"x-acct-btn\"\n style=\"margin-top: 14px\"\n [disabled]=\"savingPrefs\"\n (click)=\"savePrefs()\"\n >\n {{ savingPrefs ? 'Saving\u2026' : 'Save preferences' }}\n </button>\n }\n</div>\n" }]
1254
1257
  }] });
1255
1258
 
1256
1259
  // P5.6, ACC-06 — one registered system: product, serial, dates,
@@ -1772,4 +1775,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
1772
1775
  }] });
1773
1776
 
1774
1777
  export { AccountModule };
1775
- //# sourceMappingURL=isaiahiroko-tilmart-ngx-apps-buyer-account.module-BTRypX8P.mjs.map
1778
+ //# sourceMappingURL=isaiahiroko-tilmart-ngx-apps-buyer-account.module-CLVC0SX-.mjs.map