@rolatech/angular-billing 20.1.5 → 20.1.6-beta.0

package/fesm2022/rolatech-angular-billing.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, output, Component, inject, ViewEncapsulation, computed, signal, DestroyRef } from '@angular/core';
 import * as i10 from '@angular/common';
-import { DatePipe, KeyValuePipe, NgClass, CommonModule, CurrencyPipe, NgOptimizedImage } from '@angular/common';
+import { DatePipe, KeyValuePipe, CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from '@angular/material/button';
@@ -19,11 +19,10 @@ import * as i7 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i1 from '@angular/router';
 import { ActivatedRoute, RouterModule, RouterLink, Router } from '@angular/router';
-import { ContainerComponent, TabsComponent, TabComponent, ToolbarComponent, ListComponent, EmptyComponent, FilterComponent, BaseComponent, SpinnerComponent } from '@rolatech/angular-components';
+import { ContainerComponent, TabsComponent, TabComponent, ToolbarComponent, ListComponent, EmptyComponent, FilterComponent, BaseComponent } from '@rolatech/angular-components';
 import { InvoiceService, PaymentService } from '@rolatech/angular-services';
 import { Title } from '@angular/platform-browser';
 import { switchMap, map, distinctUntilChanged, finalize } from 'rxjs';
-import { FixedPipe, ShippingAddressPipe } from '@rolatech/angular-common';
 import * as i1$2 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import * as i9 from '@angular/material/card';
@@ -272,18 +271,7 @@ class InvoiceDetailComponent extends BaseComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InvoiceDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-invoice-detail', imports: [
-                        MatButtonModule,
-                        MatIconModule,
-                        NgClass,
-                        SpinnerComponent,
-                        ContainerComponent,
-                        ToolbarComponent,
-                        FixedPipe,
-                        ShippingAddressPipe,
-                        RouterLink,
-                        InvoiceLineItem,
-                    ], template: "<rolatech-container>\n  <rolatech-toolbar [title]=\"invoice() ? status[invoice()!.status] : ''\" large link=\"../\"> </rolatech-toolbar>\n  @if (invoice(); as invoice) {\n    <div>\n      <div>\n        <div>\n          @for (item of invoice.lines; track $index) {\n            <rolatech-invoice-line-item [item]=\"item\" [link]=\"'/properties/' + item.extId\"></rolatech-invoice-line-item>\n          }\n        </div>\n        <div class=\"mt-3\">\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Profile</span>\n            <span class=\"text-sm\"> {{ invoice.firstName }},{{ invoice.lastName }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Email</span>\n            <span class=\"text-sm\"> {{ invoice.email }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Phone</span>\n            <span class=\"text-sm\"> {{ invoice.phone }}</span>\n          </div>\n\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Total</span>\n            <span class=\"text-sm\">\u00A3{{ invoice.total }}</span>\n          </div>\n          <div class=\"flex items-baseline justify-between py-1\">\n            <span class=\"font-medium min-w-20\" i18n>Note</span>\n            <span class=\"text-sm\">{{ invoice.note || '\u65E0' }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Created at</span>\n            <span class=\"text-sm\"> {{ invoice.createdAt }}</span>\n          </div>\n        </div>\n        @if (invoice.status.toString() === 'CREATED' || invoice.status.toString() === 'PAID') {\n          <div class=\"mt-6\">\n            <div class=\"text-lg pb-3 font-medium\" i18n>Payment method</div>\n            <div class=\"flex items-center\">\n              <span class=\"ml-1\">Stripe</span>\n            </div>\n          </div>\n        }\n      </div>\n\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          <button mat-flat-button [disabled]=\"paying\" class=\"w-32 min-h-11\" (click)=\"pay()\" i18n>\n            {{ paying ? 'Processing' : 'Pay' }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</rolatech-container>\n" }]
+            args: [{ selector: 'rolatech-invoice-detail', imports: [MatButtonModule, MatIconModule, ContainerComponent, ToolbarComponent, InvoiceLineItem], template: "<rolatech-container>\n  <rolatech-toolbar [title]=\"invoice() ? status[invoice()!.status] : ''\" large link=\"../\"> </rolatech-toolbar>\n  @if (invoice(); as invoice) {\n    <div>\n      <div>\n        <div>\n          @for (item of invoice.lines; track $index) {\n            <rolatech-invoice-line-item [item]=\"item\" [link]=\"'/properties/' + item.extId\"></rolatech-invoice-line-item>\n          }\n        </div>\n        <div class=\"mt-3\">\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Profile</span>\n            <span class=\"text-sm\"> {{ invoice.firstName }},{{ invoice.lastName }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Email</span>\n            <span class=\"text-sm\"> {{ invoice.email }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Phone</span>\n            <span class=\"text-sm\"> {{ invoice.phone }}</span>\n          </div>\n\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Total</span>\n            <span class=\"text-sm\">\u00A3{{ invoice.total }}</span>\n          </div>\n          <div class=\"flex items-baseline justify-between py-1\">\n            <span class=\"font-medium min-w-20\" i18n>Note</span>\n            <span class=\"text-sm\">{{ invoice.note || '\u65E0' }}</span>\n          </div>\n          <div class=\"flex items-center justify-between py-1\">\n            <span class=\"font-medium\" i18n>Created at</span>\n            <span class=\"text-sm\"> {{ invoice.createdAt }}</span>\n          </div>\n        </div>\n        @if (invoice.status.toString() === 'CREATED' || invoice.status.toString() === 'PAID') {\n          <div class=\"mt-6\">\n            <div class=\"text-lg pb-3 font-medium\" i18n>Payment method</div>\n            <div class=\"flex items-center\">\n              <span class=\"ml-1\">Stripe</span>\n            </div>\n          </div>\n        }\n      </div>\n\n      <!-- safe area -->\n      <div class=\"pb-16 sm:pb-3\"></div>\n      <div class=\"\">\n        <div class=\"flex items-center justify-end\">\n          <button mat-flat-button [disabled]=\"paying\" class=\"w-32 min-h-11\" (click)=\"pay()\" i18n>\n            {{ paying ? 'Processing' : 'Pay' }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</rolatech-container>\n" }]
         }] });
 
 const invoiceRoutes = [
@@ -477,8 +465,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         MatSelectModule,
                         MatDividerModule,
                         MatCardModule,
-                        CurrencyPipe,
-                        NgOptimizedImage,
                         ToolbarComponent,
                     ], template: "<rolatech-toolbar title=\"Create Invoice\">\n  <button mat-stroked-button (click)=\"addLine()\">\n    <mat-icon>add</mat-icon>\n    Add line\n  </button>\n  <button\n    mat-flat-button\n    color=\"primary\"\n    (click)=\"save(invoiceForm)\"\n    [disabled]=\"!invoiceForm.form.valid || invoice.lines.length === 0\"\n  >\n    Save\n  </button>\n</rolatech-toolbar>\n<div class=\"p-4 md:p-8 max-w-6xl mx-auto space-y-6\">\n  <form #invoiceForm=\"ngForm\" novalidate>\n    <mat-card appearance=\"outlined\" class=\"p-4\">\n      <div class=\"grid md:grid-cols-2 gap-4\">\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Customer name</mat-label>\n          <input matInput name=\"customerName\" [(ngModel)]=\"invoice.customerName\" required />\n          @if (invoiceForm.submitted && !invoice.customerName) {<mat-error>Name is required</mat-error>}\n        </mat-form-field>\n\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Customer email</mat-label>\n          <input matInput type=\"email\" name=\"customerEmail\" [(ngModel)]=\"invoice.customerEmail\" #email=\"ngModel\" email />\n          @if (email.invalid && (email.dirty || email.touched)) {<mat-error>Invalid email</mat-error>}\n        </mat-form-field>\n\n        <mat-form-field appearance=\"fill\" class=\"md:col-span-2\">\n          <mat-label>Customer address</mat-label>\n          <textarea matInput rows=\"2\" name=\"customerAddress\" [(ngModel)]=\"invoice.customerAddress\"></textarea>\n        </mat-form-field>\n\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Currency</mat-label>\n          <mat-select name=\"currency\" [(ngModel)]=\"invoice.currency\" required>\n            <mat-option value=\"GBP\">GBP</mat-option>\n            <mat-option value=\"USD\">USD</mat-option>\n            <mat-option value=\"EUR\">EUR</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Issue date</mat-label>\n          <input matInput type=\"date\" name=\"issueDate\" [(ngModel)]=\"invoice.issueDate\" required />\n        </mat-form-field>\n\n        <mat-form-field appearance=\"fill\">\n          <mat-label>Due date</mat-label>\n          <input matInput type=\"date\" name=\"dueDate\" [(ngModel)]=\"invoice.dueDate\" />\n        </mat-form-field>\n\n        <mat-form-field appearance=\"fill\" class=\"md:col-span-2\">\n          <mat-label>Notes</mat-label>\n          <textarea\n            matInput\n            rows=\"2\"\n            name=\"notes\"\n            [(ngModel)]=\"invoice.notes\"\n            placeholder=\"Optional notes shown on the invoice\"\n          ></textarea>\n        </mat-form-field>\n      </div>\n    </mat-card>\n\n    <mat-card appearance=\"outlined\" class=\"p-4 space-y-4 mt-4\">\n      <div class=\"flex items-center justify-between\">\n        <h2 class=\"text-xl font-medium\">Line items</h2>\n        <button mat-stroked-button type=\"button\" (click)=\"addLine()\">\n          <mat-icon>playlist_add</mat-icon>\n          Add line\n        </button>\n      </div>\n\n      <div class=\"hidden md:grid grid-cols-12 gap-2 text-sm font-medium px-2\">\n        <div class=\"col-span-5\">Description</div>\n        <div class=\"col-span-2 text-right\">Qty</div>\n        <div class=\"col-span-2 text-right\">Unit Price</div>\n        <div class=\"col-span-2 text-right\">Tax %</div>\n        <div class=\"col-span-1\"></div>\n      </div>\n\n      <div class=\"space-y-3\">\n        @for ( line of invoice.lines; track line; let i = $index) {\n        <div class=\"grid grid-cols-1 md:grid-cols-12 gap-2 items-start\">\n          <mat-form-field class=\"md:col-span-5\" appearance=\"fill\">\n            <mat-label>Description</mat-label>\n            <input\n              matInput\n              [name]=\"'desc'+i\"\n              [(ngModel)]=\"line.description\"\n              required\n              placeholder=\"e.g. Photo editing package\"\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"md:col-span-2\" appearance=\"fill\">\n            <mat-label>Quantity</mat-label>\n            <input matInput type=\"number\" min=\"1\" step=\"1\" [name]=\"'qty'+i\" [(ngModel)]=\"line.quantity\" required />\n          </mat-form-field>\n\n          <mat-form-field class=\"md:col-span-2\" appearance=\"fill\">\n            <mat-label>Unit Price (major unit)</mat-label>\n            <input matInput type=\"number\" min=\"0\" step=\"0.01\" [name]=\"'unit'+i\" [(ngModel)]=\"line.unitPrice\" required />\n            <mat-hint>e.g. 99.99</mat-hint>\n          </mat-form-field>\n\n          <mat-form-field class=\"md:col-span-2\" appearance=\"fill\">\n            <mat-label>Tax %</mat-label>\n            <input matInput type=\"number\" min=\"0\" step=\"0.01\" [name]=\"'tax'+i\" [(ngModel)]=\"line.taxRate\" />\n          </mat-form-field>\n\n          <div class=\"md:col-span-1 flex items-center justify-end\">\n            <button mat-icon-button color=\"warn\" type=\"button\" (click)=\"removeLine(i)\" aria-label=\"Remove line\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          </div>\n        </div>\n        <mat-divider></mat-divider>\n        }\n      </div>\n\n      <div class=\"flex flex-col items-end space-y-1\">\n        <div class=\"text-sm\">\n          Subtotal: <span class=\"font-medium\">{{ subtotalMajor() | number:'1.2-2' }} {{ invoice.currency }}</span>\n        </div>\n        <div class=\"text-sm\">\n          Tax: <span class=\"font-medium\">{{ taxMajor() | number:'1.2-2' }} {{ invoice.currency }}</span>\n        </div>\n        <div class=\"text-lg font-semibold\">Total: {{ totalMajor() | number:'1.2-2' }} {{ invoice.currency }}</div>\n      </div>\n    </mat-card>\n  </form>\n\n  @if (lastResponse) {\n  <mat-card appearance=\"outlined\" class=\"p-4 flex items-center justify-between\">\n    <div>\n      <div class=\"font-medium\">Created invoice #{{ lastResponse.data.id }}</div>\n      <div class=\"text-sm opacity-70\">\n        Total: {{ penceToMajor(lastResponse.data.total) | number:'1.2-2' }} {{ invoice.currency }}\n      </div>\n    </div>\n    <div class=\"space-x-2\">\n      <button mat-stroked-button (click)=\"resetForm()\">Create another</button>\n      <button mat-flat-button color=\"primary\">Download PDF</button>\n    </div>\n  </mat-card>\n  }\n</div>\n" }]
         }] });