tango-app-ui-manage-billing 3.3.1 → 3.3.2

package/esm2022/lib/components/billing-tabs/billing-tabs.component.mjs

@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/router";
+import * as i2 from "tango-app-ui-global";
+import * as i3 from "@angular/common";
+export class BillingTabsComponent {
+    router;
+    route;
+    pageInfo;
+    activeTab = 'brands-billing';
+    constructor(router, route, pageInfo) {
+        this.router = router;
+        this.route = route;
+        this.pageInfo = pageInfo;
+    }
+    ngOnInit() {
+        this.setPageData();
+        // Determine active tab from current child route
+        const childPath = this.route.firstChild?.snapshot?.url?.[0]?.path;
+        if (childPath === 'invoices') {
+            this.activeTab = 'invoices';
+        }
+        else {
+            this.activeTab = 'brands-billing';
+        }
+    }
+    setPageData() {
+        this.pageInfo.setTitle('Billing');
+        this.pageInfo.setDescription('Manage billing and invoices');
+        this.pageInfo.setBreadcrumbs([
+            { title: 'Manage', path: '/manage', isActive: false, isSeparator: false },
+            { title: 'Manage', path: '/manage', isActive: false, isSeparator: true },
+        ]);
+    }
+    selectTab(tab) {
+        this.activeTab = tab;
+        if (tab === 'brands-billing') {
+            this.router.navigate(['./'], { relativeTo: this.route });
+        }
+        else {
+            this.router.navigate(['./invoices'], { relativeTo: this.route });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BillingTabsComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BillingTabsComponent, selector: "lib-billing-tabs", ngImport: i0, template: "<div class=\"card\">\n    <div class=\"billing-tabs-header mt-4 mx-3\">\n        <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\n            [ngClass]=\"activeTab === 'brands-billing' ? 'activePlanBtnprimary' : 'inactivePlanBtn'\"\n            (click)=\"selectTab('brands-billing')\">\n            Brands & Billing\n        </button>\n        <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\n            [ngClass]=\"activeTab === 'invoices' ? 'activePlanBtnprimary' : 'inactivePlanBtn'\"\n            (click)=\"selectTab('invoices')\">\n            Invoice\n        </button>\n    </div>\n    <router-outlet></router-outlet>\n</div>", styles: [".billing-tabs-header{padding:0px 1.25rem!important}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px;font-weight:500!important;line-height:20px}.activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BillingTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-billing-tabs', template: "<div class=\"card\">\n    <div class=\"billing-tabs-header mt-4 mx-3\">\n        <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\n            [ngClass]=\"activeTab === 'brands-billing' ? 'activePlanBtnprimary' : 'inactivePlanBtn'\"\n            (click)=\"selectTab('brands-billing')\">\n            Brands & Billing\n        </button>\n        <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\n            [ngClass]=\"activeTab === 'invoices' ? 'activePlanBtnprimary' : 'inactivePlanBtn'\"\n            (click)=\"selectTab('invoices')\">\n            Invoice\n        </button>\n    </div>\n    <router-outlet></router-outlet>\n</div>", styles: [".billing-tabs-header{padding:0px 1.25rem!important}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px;font-weight:500!important;line-height:20px}.activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.PageInfoService }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmlsbGluZy10YWJzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3RhbmdvLW1hbmFnZS1iaWxsaW5nL3NyYy9saWIvY29tcG9uZW50cy9iaWxsaW5nLXRhYnMvYmlsbGluZy10YWJzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3RhbmdvLW1hbmFnZS1iaWxsaW5nL3NyYy9saWIvY29tcG9uZW50cy9iaWxsaW5nLXRhYnMvYmlsbGluZy10YWJzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBU2xELE1BQU0sT0FBTyxvQkFBb0I7SUFJckI7SUFDQTtJQUNBO0lBTFYsU0FBUyxHQUFXLGdCQUFnQixDQUFDO0lBRXJDLFlBQ1UsTUFBYyxFQUNkLEtBQXFCLEVBQ3JCLFFBQXlCO1FBRnpCLFdBQU0sR0FBTixNQUFNLENBQVE7UUFDZCxVQUFLLEdBQUwsS0FBSyxDQUFnQjtRQUNyQixhQUFRLEdBQVIsUUFBUSxDQUFpQjtJQUNoQyxDQUFDO0lBRUosUUFBUTtRQUNOLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUNuQixnREFBZ0Q7UUFDaEQsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxVQUFVLEVBQUUsUUFBUSxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQztRQUNsRSxJQUFJLFNBQVMsS0FBSyxVQUFVLEVBQUU7WUFDNUIsSUFBSSxDQUFDLFNBQVMsR0FBRyxVQUFVLENBQUM7U0FDN0I7YUFBTTtZQUNMLElBQUksQ0FBQyxTQUFTLEdBQUcsZ0JBQWdCLENBQUM7U0FDbkM7SUFDSCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBQ2xDLElBQUksQ0FBQyxRQUFRLENBQUMsY0FBYyxDQUFDLDZCQUE2QixDQUFDLENBQUM7UUFDNUQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxjQUFjLENBQUM7WUFDM0IsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFO1lBQ3pFLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRTtTQUN6RSxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsU0FBUyxDQUFDLEdBQVc7UUFDbkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxHQUFHLENBQUM7UUFDckIsSUFBSSxHQUFHLEtBQUssZ0JBQWdCLEVBQUU7WUFDNUIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQyxJQUFJLENBQUMsRUFBRSxFQUFFLFVBQVUsRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztTQUMxRDthQUFNO1lBQ0wsSUFBSSxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQyxZQUFZLENBQUMsRUFBRSxFQUFFLFVBQVUsRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztTQUNsRTtJQUNILENBQUM7d0dBcENVLG9CQUFvQjs0RkFBcEIsb0JBQW9CLHdEQ1RqQyxzc0JBY007OzRGRExPLG9CQUFvQjtrQkFMaEMsU0FBUzsrQkFDRSxrQkFBa0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUm91dGVyLCBBY3RpdmF0ZWRSb3V0ZSB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQgeyBQYWdlSW5mb1NlcnZpY2UgfSBmcm9tICd0YW5nby1hcHAtdWktZ2xvYmFsJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLWJpbGxpbmctdGFicycsXG4gIHRlbXBsYXRlVXJsOiAnLi9iaWxsaW5nLXRhYnMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vYmlsbGluZy10YWJzLmNvbXBvbmVudC5zY3NzJ1xufSlcbmV4cG9ydCBjbGFzcyBCaWxsaW5nVGFic0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIGFjdGl2ZVRhYjogc3RyaW5nID0gJ2JyYW5kcy1iaWxsaW5nJztcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIHJvdXRlcjogUm91dGVyLFxuICAgIHByaXZhdGUgcm91dGU6IEFjdGl2YXRlZFJvdXRlLFxuICAgIHByaXZhdGUgcGFnZUluZm86IFBhZ2VJbmZvU2VydmljZVxuICApIHt9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5zZXRQYWdlRGF0YSgpO1xuICAgIC8vIERldGVybWluZSBhY3RpdmUgdGFiIGZyb20gY3VycmVudCBjaGlsZCByb3V0ZVxuICAgIGNvbnN0IGNoaWxkUGF0aCA9IHRoaXMucm91dGUuZmlyc3RDaGlsZD8uc25hcHNob3Q/LnVybD8uWzBdPy5wYXRoO1xuICAgIGlmIChjaGlsZFBhdGggPT09ICdpbnZvaWNlcycpIHtcbiAgICAgIHRoaXMuYWN0aXZlVGFiID0gJ2ludm9pY2VzJztcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5hY3RpdmVUYWIgPSAnYnJhbmRzLWJpbGxpbmcnO1xuICAgIH1cbiAgfVxuXG4gIHNldFBhZ2VEYXRhKCkge1xuICAgIHRoaXMucGFnZUluZm8uc2V0VGl0bGUoJ0JpbGxpbmcnKTtcbiAgICB0aGlzLnBhZ2VJbmZvLnNldERlc2NyaXB0aW9uKCdNYW5hZ2UgYmlsbGluZyBhbmQgaW52b2ljZXMnKTtcbiAgICB0aGlzLnBhZ2VJbmZvLnNldEJyZWFkY3J1bWJzKFtcbiAgICAgIHsgdGl0bGU6ICdNYW5hZ2UnLCBwYXRoOiAnL21hbmFnZScsIGlzQWN0aXZlOiBmYWxzZSwgaXNTZXBhcmF0b3I6IGZhbHNlIH0sXG4gICAgICB7IHRpdGxlOiAnTWFuYWdlJywgcGF0aDogJy9tYW5hZ2UnLCBpc0FjdGl2ZTogZmFsc2UsIGlzU2VwYXJhdG9yOiB0cnVlIH0sXG4gICAgXSk7XG4gIH1cblxuICBzZWxlY3RUYWIodGFiOiBzdHJpbmcpIHtcbiAgICB0aGlzLmFjdGl2ZVRhYiA9IHRhYjtcbiAgICBpZiAodGFiID09PSAnYnJhbmRzLWJpbGxpbmcnKSB7XG4gICAgICB0aGlzLnJvdXRlci5uYXZpZ2F0ZShbJy4vJ10sIHsgcmVsYXRpdmVUbzogdGhpcy5yb3V0ZSB9KTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5yb3V0ZXIubmF2aWdhdGUoWycuL2ludm9pY2VzJ10sIHsgcmVsYXRpdmVUbzogdGhpcy5yb3V0ZSB9KTtcbiAgICB9XG4gIH1cbn0iLCI8ZGl2IGNsYXNzPVwiY2FyZFwiPlxuICAgIDxkaXYgY2xhc3M9XCJiaWxsaW5nLXRhYnMtaGVhZGVyIG10LTQgbXgtM1wiPlxuICAgICAgICA8YnV0dG9uIGNsYXNzPVwiYnRuIGJ0bi1jb2xvci1ncmF5LTYwMCBidG4tYWN0aXZlIGJ0bi1hY3RpdmUtc2Vjb25kYXJ5IHB4LTYgcHktMyBtZS0yXCJcbiAgICAgICAgICAgIFtuZ0NsYXNzXT1cImFjdGl2ZVRhYiA9PT0gJ2JyYW5kcy1iaWxsaW5nJyA/ICdhY3RpdmVQbGFuQnRucHJpbWFyeScgOiAnaW5hY3RpdmVQbGFuQnRuJ1wiXG4gICAgICAgICAgICAoY2xpY2spPVwic2VsZWN0VGFiKCdicmFuZHMtYmlsbGluZycpXCI+XG4gICAgICAgICAgICBCcmFuZHMgJiBCaWxsaW5nXG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgICA8YnV0dG9uIGNsYXNzPVwiYnRuIGJ0bi1jb2xvci1ncmF5LTYwMCBidG4tYWN0aXZlIGJ0bi1hY3RpdmUtc2Vjb25kYXJ5IHB4LTYgcHktM1wiXG4gICAgICAgICAgICBbbmdDbGFzc109XCJhY3RpdmVUYWIgPT09ICdpbnZvaWNlcycgPyAnYWN0aXZlUGxhbkJ0bnByaW1hcnknIDogJ2luYWN0aXZlUGxhbkJ0bidcIlxuICAgICAgICAgICAgKGNsaWNrKT1cInNlbGVjdFRhYignaW52b2ljZXMnKVwiPlxuICAgICAgICAgICAgSW52b2ljZVxuICAgICAgICA8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgICA8cm91dGVyLW91dGxldD48L3JvdXRlci1vdXRsZXQ+XG48L2Rpdj4iXX0=