quang 19.0.19-3 → 19.0.21
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.
- package/README.md +92 -12
- package/auth/README.md +2 -2
- package/components/autocomplete/README.md +55 -0
- package/components/checkbox/README.md +63 -0
- package/components/date/README.md +54 -0
- package/components/input/README.md +58 -0
- package/components/paginator/README.md +43 -0
- package/components/select/README.md +54 -0
- package/components/shared/option-list/option-list.component.d.ts +1 -1
- package/components/table/README.md +63 -0
- package/components/wysiwyg/README.md +55 -0
- package/fesm2022/quang-auth.mjs +18 -18
- package/fesm2022/quang-components-autocomplete.mjs +3 -3
- package/fesm2022/quang-components-checkbox.mjs +3 -3
- package/fesm2022/quang-components-date.mjs +3 -3
- package/fesm2022/quang-components-input.mjs +3 -3
- package/fesm2022/quang-components-paginator.mjs +13 -13
- package/fesm2022/quang-components-select.mjs +3 -3
- package/fesm2022/quang-components-shared.mjs +6 -6
- package/fesm2022/quang-components-table.mjs +5 -5
- package/fesm2022/quang-components-table.mjs.map +1 -1
- package/fesm2022/quang-components-wysiwyg.mjs +3 -4
- package/fesm2022/quang-components-wysiwyg.mjs.map +1 -1
- package/fesm2022/quang-device.mjs +3 -3
- package/fesm2022/quang-loader.mjs +6 -6
- package/fesm2022/quang-overlay-modal.mjs +3 -3
- package/fesm2022/quang-overlay-popover.mjs +8 -8
- package/fesm2022/quang-overlay-popover.mjs.map +1 -1
- package/fesm2022/quang-overlay-shared.mjs +11 -11
- package/fesm2022/quang-overlay-shared.mjs.map +1 -1
- package/fesm2022/quang-overlay-toast.mjs +6 -6
- package/fesm2022/quang-overlay-tooltip.mjs +8 -8
- package/fesm2022/quang-overlay-tooltip.mjs.map +1 -1
- package/fesm2022/quang-translation.mjs +6 -6
- package/loader/README.md +74 -7
- package/overlay/modal/README.md +97 -0
- package/overlay/modal/modal.component.d.ts +1 -1
- package/overlay/popover/README.md +40 -0
- package/overlay/popover/popover.component.d.ts +2 -2
- package/overlay/shared/quang-base-overlay.component.d.ts +2 -2
- package/overlay/toast/README.md +64 -0
- package/overlay/tooltip/README.md +36 -0
- package/overlay/tooltip/tooltip.component.d.ts +2 -2
- package/package.json +5 -5
- package/translation/README.md +23 -10
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { NgClass, NgTemplateOutlet } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
3
|
import { input, output, inject, DestroyRef, viewChild, effect, signal, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
4
|
import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
@@ -146,12 +146,12 @@ class QuangTableComponent {
|
|
|
146
146
|
this._tableConfigurations.set({ ...this._tableConfigurations(), headers: tableHeaders });
|
|
147
147
|
this.sortChanged.emit([sort]); // it's an array to handle multisort in the future
|
|
148
148
|
}
|
|
149
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
150
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
149
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: QuangTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
150
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: QuangTableComponent, isStandalone: true, selector: "quang-table", inputs: { clickableRow: { classPropertyName: "clickableRow", publicName: "clickableRow", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, stickyTable: { classPropertyName: "stickyTable", publicName: "stickyTable", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, tableConfigurations: { classPropertyName: "tableConfigurations", publicName: "tableConfigurations", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedRow: "selectedRow", sortChanged: "sortChanged" }, viewQueries: [{ propertyName: "_tableHeader", first: true, predicate: ["tableHeader"], descendants: true, isSignal: true }, { propertyName: "_tableHeaderElement", first: true, predicate: ["tableHeader"], descendants: true, isSignal: true }, { propertyName: "_fakeTableHeader", first: true, predicate: ["fakeTableHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n [class.sticky-table]=\"stickyTable()\"\n class=\"table-responsive\"\n>\n @if (_tableConfigurations().rows.length) {\n <div\n (scroll)=\"tableContainer.scrollLeft = tableHeaderContainer.scrollLeft\"\n #tableHeaderContainer\n class=\"table-header-container\"\n id=\"tableHeaderContainer\"\n >\n <table\n #tableHeader\n id=\"tableHeader\"\n >\n <thead>\n <tr>\n @for (header of _tableConfigurations().headers; track $index) {\n <th\n [class.sort-btn]=\"header?.sort\"\n (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n class=\"align-bottom\"\n >\n <div\n [ngClass]=\"header?.css\"\n class=\"align-self-end d-flex gap-1\"\n >\n {{ !header.renderer ? (header.text | transloco) : null }}\n <ng-container\n [ngTemplateOutlet]=\"header?.renderer ?? null\"\n [ngTemplateOutletContext]=\"{\n $implicit: header.payload,\n }\"\n ></ng-container>\n @if (header.sort?.key) {\n <div class=\"d-flex justify-content-between\">\n <ng-container\n [ngTemplateOutlet]=\"orderBtns\"\n [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n ></ng-container>\n </div>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n </table>\n </div>\n <div\n (scroll)=\"tableHeaderContainer.scrollLeft = tableContainer.scrollLeft\"\n #tableContainer\n class=\"table-container\"\n >\n <table\n class=\"table\"\n id=\"table-content\"\n >\n <thead\n #fakeTableHeader\n class=\"fake-table-header\"\n id=\"fakeTableHeader\"\n >\n <tr>\n @for (header of _tableConfigurations().headers; track $index) {\n <th\n [class.sort-btn]=\"header?.sort\"\n (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n class=\"align-bottom\"\n >\n <div\n [ngClass]=\"header?.css\"\n class=\"align-self-end d-flex gap-1\"\n >\n {{ !header.renderer ? (header.text | transloco) : null }}\n <ng-container\n [ngTemplateOutlet]=\"header?.renderer ?? null\"\n [ngTemplateOutletContext]=\"{\n $implicit: header.payload,\n }\"\n ></ng-container>\n @if (header.sort?.key) {\n <div class=\"d-flex justify-content-between\">\n <ng-container\n [ngTemplateOutlet]=\"orderBtns\"\n [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n ></ng-container>\n </div>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of _tableConfigurations().rows; track $index) {\n <tr\n [class.hover-table]=\"clickableRow()\"\n [class.selectedRow]=\"row?.rowId ? isSelected(row.rowId!) : null\"\n [ngClass]=\"row.css\"\n (click)=\"clickableRow() ? onClickRow(row) : null\"\n >\n @for (cell of row.cellData; track $index) {\n <td\n [attr.colspan]=\"cell?.fullWidth ? _tableConfigurations().headers.length : undefined\"\n [ngClass]=\"cell.css!\"\n >\n {{ !cell.renderer ? cell.text : null }}\n <ng-container\n [ngTemplateOutlet]=\"cell?.renderer ?? null\"\n [ngTemplateOutletContext]=\"{\n $implicit: cell.payload,\n }\"\n ></ng-container>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n @if (!_tableConfigurations().rows.length) {\n <h6 class=\"text-center mt-3\">\n {{ noResultsText() | transloco }}\n </h6>\n }\n</div>\n\n<ng-template\n #orderBtns\n let-order\n>\n <div\n [class.sort-asc]=\"order.sort === SortTable.ASC\"\n [class.sort-default]=\"order.sort === SortTable.DEFAULT\"\n [class.sort-desc]=\"order.sort === SortTable.DESC\"\n class=\"sort-arrows\"\n >\n <svg\n class=\"arrow-up\"\n fill=\"currentColor\"\n height=\"10\"\n stroke=\"currentColor\"\n viewBox=\"279.5 -600.5 401 201\"\n width=\"10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"m280-400 200-200 200 200H280Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n ></path>\n </svg>\n <svg\n class=\"arrow-down\"\n fill=\"currentColor\"\n height=\"10\"\n stroke=\"currentColor\"\n viewBox=\"279.5 -560.5 401 201\"\n width=\"10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M480-360 280-560h400L480-360Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n ></path>\n </svg>\n </div>\n</ng-template>\n", styles: [":host{display:block;--table-header-container-top: 0;--table-header-bg: var(--bs-body-bg);--table-header-border-color: var(--bs-border-color);--table-header-border-width: 4px;--table-row-hover-brightness: 90%;--table-row-selected-brightness: 95%}.table-responsive{overflow:initial}.table-responsive .fake-table-header{height:0;overflow:hidden;line-height:0;visibility:collapse}.table-responsive .fake-table-header th{padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important;background-color:var(--table-header-bg);border:unset}.table-responsive .table-header-container{overflow-x:hidden;z-index:1}.table-responsive .table-container{overflow-x:auto}.table-responsive table{width:100%;font-size:16px;overflow-y:auto;margin-bottom:unset}.table-responsive table thead{text-transform:uppercase}.table-responsive table thead th{padding:1rem .5rem;z-index:999;background-color:var(--table-header-bg);box-shadow:inset 0 calc(var(--table-header-border-width) * -1) 0 0 var(--table-header-border-color)}.table-responsive table tbody tr:first-child td{border-top:0}.table-responsive table tbody tr.hover-table:hover{cursor:pointer;filter:brightness(var(--table-row-hover-brightness))}.table-responsive table tbody tr.selectedRow{filter:brightness(var(--table-row-selected-brightness))}.table-responsive table tbody tr td{padding:1rem .5rem;font-weight:300;vertical-align:middle}.table-responsive table tbody tr:last-child{border-bottom:transparent}.table-responsive.sticky-table{position:relative}.table-responsive.sticky-table .table-header-container{position:sticky;top:var(--table-header-container-top, 0)}.sort-arrows{display:flex;flex-direction:column;justify-content:center}.sort-default{opacity:30%}.sort-asc .arrow-up{opacity:100%}.sort-asc .arrow-down,.sort-desc .arrow-up{display:none}.sort-desc .arrow-down{opacity:100%}.sort-btn:hover{cursor:pointer}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
151
151
|
}
|
|
152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: QuangTableComponent, decorators: [{
|
|
153
153
|
type: Component,
|
|
154
|
-
args: [{ selector: 'quang-table', imports: [TranslocoPipe,
|
|
154
|
+
args: [{ selector: 'quang-table', imports: [TranslocoPipe, NgClass, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class.sticky-table]=\"stickyTable()\"\n class=\"table-responsive\"\n>\n @if (_tableConfigurations().rows.length) {\n <div\n (scroll)=\"tableContainer.scrollLeft = tableHeaderContainer.scrollLeft\"\n #tableHeaderContainer\n class=\"table-header-container\"\n id=\"tableHeaderContainer\"\n >\n <table\n #tableHeader\n id=\"tableHeader\"\n >\n <thead>\n <tr>\n @for (header of _tableConfigurations().headers; track $index) {\n <th\n [class.sort-btn]=\"header?.sort\"\n (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n class=\"align-bottom\"\n >\n <div\n [ngClass]=\"header?.css\"\n class=\"align-self-end d-flex gap-1\"\n >\n {{ !header.renderer ? (header.text | transloco) : null }}\n <ng-container\n [ngTemplateOutlet]=\"header?.renderer ?? null\"\n [ngTemplateOutletContext]=\"{\n $implicit: header.payload,\n }\"\n ></ng-container>\n @if (header.sort?.key) {\n <div class=\"d-flex justify-content-between\">\n <ng-container\n [ngTemplateOutlet]=\"orderBtns\"\n [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n ></ng-container>\n </div>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n </table>\n </div>\n <div\n (scroll)=\"tableHeaderContainer.scrollLeft = tableContainer.scrollLeft\"\n #tableContainer\n class=\"table-container\"\n >\n <table\n class=\"table\"\n id=\"table-content\"\n >\n <thead\n #fakeTableHeader\n class=\"fake-table-header\"\n id=\"fakeTableHeader\"\n >\n <tr>\n @for (header of _tableConfigurations().headers; track $index) {\n <th\n [class.sort-btn]=\"header?.sort\"\n (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n class=\"align-bottom\"\n >\n <div\n [ngClass]=\"header?.css\"\n class=\"align-self-end d-flex gap-1\"\n >\n {{ !header.renderer ? (header.text | transloco) : null }}\n <ng-container\n [ngTemplateOutlet]=\"header?.renderer ?? null\"\n [ngTemplateOutletContext]=\"{\n $implicit: header.payload,\n }\"\n ></ng-container>\n @if (header.sort?.key) {\n <div class=\"d-flex justify-content-between\">\n <ng-container\n [ngTemplateOutlet]=\"orderBtns\"\n [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n ></ng-container>\n </div>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of _tableConfigurations().rows; track $index) {\n <tr\n [class.hover-table]=\"clickableRow()\"\n [class.selectedRow]=\"row?.rowId ? isSelected(row.rowId!) : null\"\n [ngClass]=\"row.css\"\n (click)=\"clickableRow() ? onClickRow(row) : null\"\n >\n @for (cell of row.cellData; track $index) {\n <td\n [attr.colspan]=\"cell?.fullWidth ? _tableConfigurations().headers.length : undefined\"\n [ngClass]=\"cell.css!\"\n >\n {{ !cell.renderer ? cell.text : null }}\n <ng-container\n [ngTemplateOutlet]=\"cell?.renderer ?? null\"\n [ngTemplateOutletContext]=\"{\n $implicit: cell.payload,\n }\"\n ></ng-container>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n @if (!_tableConfigurations().rows.length) {\n <h6 class=\"text-center mt-3\">\n {{ noResultsText() | transloco }}\n </h6>\n }\n</div>\n\n<ng-template\n #orderBtns\n let-order\n>\n <div\n [class.sort-asc]=\"order.sort === SortTable.ASC\"\n [class.sort-default]=\"order.sort === SortTable.DEFAULT\"\n [class.sort-desc]=\"order.sort === SortTable.DESC\"\n class=\"sort-arrows\"\n >\n <svg\n class=\"arrow-up\"\n fill=\"currentColor\"\n height=\"10\"\n stroke=\"currentColor\"\n viewBox=\"279.5 -600.5 401 201\"\n width=\"10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"m280-400 200-200 200 200H280Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n ></path>\n </svg>\n <svg\n class=\"arrow-down\"\n fill=\"currentColor\"\n height=\"10\"\n stroke=\"currentColor\"\n viewBox=\"279.5 -560.5 401 201\"\n width=\"10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M480-360 280-560h400L480-360Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n ></path>\n </svg>\n </div>\n</ng-template>\n", styles: [":host{display:block;--table-header-container-top: 0;--table-header-bg: var(--bs-body-bg);--table-header-border-color: var(--bs-border-color);--table-header-border-width: 4px;--table-row-hover-brightness: 90%;--table-row-selected-brightness: 95%}.table-responsive{overflow:initial}.table-responsive .fake-table-header{height:0;overflow:hidden;line-height:0;visibility:collapse}.table-responsive .fake-table-header th{padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important;background-color:var(--table-header-bg);border:unset}.table-responsive .table-header-container{overflow-x:hidden;z-index:1}.table-responsive .table-container{overflow-x:auto}.table-responsive table{width:100%;font-size:16px;overflow-y:auto;margin-bottom:unset}.table-responsive table thead{text-transform:uppercase}.table-responsive table thead th{padding:1rem .5rem;z-index:999;background-color:var(--table-header-bg);box-shadow:inset 0 calc(var(--table-header-border-width) * -1) 0 0 var(--table-header-border-color)}.table-responsive table tbody tr:first-child td{border-top:0}.table-responsive table tbody tr.hover-table:hover{cursor:pointer;filter:brightness(var(--table-row-hover-brightness))}.table-responsive table tbody tr.selectedRow{filter:brightness(var(--table-row-selected-brightness))}.table-responsive table tbody tr td{padding:1rem .5rem;font-weight:300;vertical-align:middle}.table-responsive table tbody tr:last-child{border-bottom:transparent}.table-responsive.sticky-table{position:relative}.table-responsive.sticky-table .table-header-container{position:sticky;top:var(--table-header-container-top, 0)}.sort-arrows{display:flex;flex-direction:column;justify-content:center}.sort-default{opacity:30%}.sort-asc .arrow-up{opacity:100%}.sort-asc .arrow-down,.sort-desc .arrow-up{display:none}.sort-desc .arrow-down{opacity:100%}.sort-btn:hover{cursor:pointer}\n"] }]
|
|
155
155
|
}] });
|
|
156
156
|
|
|
157
157
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"quang-components-table.mjs","sources":["../../../projects/quang/components/table/table.component.ts","../../../projects/quang/components/table/table.component.html","../../../projects/quang/components/table/quang-components-table.ts"],"sourcesContent":["import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common'\nimport {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n ElementRef,\n TemplateRef,\n effect,\n inject,\n input,\n output,\n signal,\n viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { ResizeObservableService } from 'quang/device'\nimport { Subscription } from 'rxjs'\n\nexport interface TableHeader {\n text?: string\n sort?: SortCol\n css?: string[]\n renderer?: TemplateRef<any>\n payload?: any\n}\n\nexport interface TableConfiguration<T> {\n headers: TableHeader[]\n rows: TableRow<T>[]\n}\n\nexport interface TableCell {\n renderer?: TemplateRef<any>\n payload?: any\n text?: string\n css?: string[]\n fullWidth?: boolean\n}\n\nexport interface TableRow<T> {\n payload?: T\n rowId?: string | number\n css?: string[]\n cellData: TableCell[]\n}\n\nexport enum SortTable {\n DEFAULT = 'DEFAULT',\n ASC = 'ASC',\n DESC = 'DESC',\n}\n\nexport interface SortCol {\n key: string\n sort: SortTable\n}\n\n@Component({\n selector: 'quang-table',\n templateUrl: './table.component.html',\n styleUrl: './table.component.scss',\n imports: [TranslocoPipe, NgIf, NgClass, NgTemplateOutlet, NgFor],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Table component for displaying data in a tabular format.\n *\n * It supports customizable column cells template and sorting rows by column headers.\n *\n * @usageNotes\n * The component must be configured using the {@link TableConfiguration} object\n */\nexport class QuangTableComponent<T> {\n clickableRow = input<boolean>(false)\n\n selectedRows = input<string[] | number[]>()\n\n stickyTable = input<boolean>(true)\n\n selectedRow = output<TableRow<T>>()\n\n sortChanged = output<SortCol[]>()\n\n public SortTable = SortTable\n\n destroyRef = inject(DestroyRef)\n\n _resizeObservableService = inject(ResizeObservableService)\n\n _tableHeader = viewChild<ElementRef>('tableHeader')\n\n _tableHeaderElement = viewChild<Element>('tableHeader')\n\n noResultsText = input<string>('quangTable.noResults')\n\n _tableHeaderEffect = effect(() => {\n if (this._tableHeader()) {\n this.fixTableHeaderWidth()\n }\n })\n\n _tableHeaderElementEffect = effect(() => {\n if (this._tableHeaderElement()) {\n this.fixTableHeaderWidth()\n }\n })\n\n _fakeTableHeader = viewChild<ElementRef>('fakeTableHeader')\n\n _fakeTableHeaderEffect = effect(() => {\n if (this._fakeTableHeader()) {\n this.fixTableHeaderWidth()\n }\n })\n\n tableConfigurations = input.required<TableConfiguration<T>>()\n\n _tableConfigurations = signal<TableConfiguration<T>>({\n headers: [],\n rows: [],\n })\n\n tableConfigurations$ = toObservable(this.tableConfigurations)\n .pipe(takeUntilDestroyed())\n .subscribe((data) => {\n const headers: TableHeader[] = []\n const rows: TableRow<T>[] = []\n for (const header of data.headers) {\n headers.push({ ...header })\n }\n for (const row of data.rows) {\n rows.push({ ...row })\n }\n this._tableConfigurations.set({\n headers,\n rows,\n })\n })\n\n effectTableConfigurations = effect(() => {\n if (this._tableConfigurations()) {\n this.fixTableHeaderWidth()\n }\n })\n\n hiddenColumnsObservable?: Subscription = undefined\n\n onClickRow(row: TableRow<T>): void {\n if (this.clickableRow()) {\n this.selectedRow.emit(row)\n }\n }\n\n isSelected(rowId: string | number): boolean {\n return !!this.selectedRows()?.some((x) => x === rowId)\n }\n\n lastWidth = -1\n\n fixTableHeaderWidth() {\n setTimeout(() => {\n const stickyColumns = this._tableHeader()?.nativeElement?.querySelectorAll('th')\n\n // Copy the column widths from our hidden Primary table header to our Sticky Table header.\n const hiddenColumns = this._fakeTableHeader()?.nativeElement?.querySelectorAll('th')\n\n if (stickyColumns?.length > 0 && hiddenColumns?.length > 0) {\n if (this.hiddenColumnsObservable) {\n this.hiddenColumnsObservable.unsubscribe()\n }\n this.hiddenColumnsObservable = this._resizeObservableService\n .widthResizeObservable(hiddenColumns[0])\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe((data) => {\n if (data !== this.lastWidth) {\n this.lastWidth = data\n this.fixTableHeaderWidth()\n }\n })\n for (let i = 0; i < hiddenColumns?.length; i++) {\n const th = hiddenColumns[i]\n // Since the Sticky Table header is expected to be an exact copy of the Primary Table, we know their indices will be the same.\n stickyColumns[i].style.minWidth = `${th.offsetWidth}px`\n stickyColumns[i].style.maxWidth = `${th.offsetWidth}px`\n }\n }\n })\n }\n\n onSortColumn(sort: SortCol): void {\n const tableHeaders: TableHeader[] = []\n for (const header of this._tableConfigurations().headers) {\n tableHeaders.push({\n ...header,\n })\n }\n tableHeaders.forEach((header) => {\n if (!header.sort?.key) return\n\n if (header.sort?.key === sort.key) {\n switch (sort.sort) {\n case SortTable.ASC:\n header.sort.sort = SortTable.DESC\n break\n case SortTable.DESC:\n header.sort.sort = SortTable.DEFAULT\n break\n case SortTable.DEFAULT:\n default:\n header.sort.sort = SortTable.ASC\n break\n }\n } else {\n header.sort = {\n ...header.sort,\n sort: SortTable.DEFAULT,\n }\n }\n })\n this._tableConfigurations.set({ ...this._tableConfigurations(), headers: tableHeaders })\n this.sortChanged.emit([sort]) // it's an array to handle multisort in the future\n }\n}\n","<div\n [class.sticky-table]=\"stickyTable()\"\n class=\"table-responsive\"\n>\n <ng-container *ngIf=\"_tableConfigurations().rows?.length\">\n <div\n (scroll)=\"tableContainer.scrollLeft = tableHeaderContainer.scrollLeft\"\n #tableHeaderContainer\n class=\"table-header-container\"\n id=\"tableHeaderContainer\"\n >\n <table\n #tableHeader\n id=\"tableHeader\"\n >\n <thead>\n <tr>\n <ng-container *ngFor=\"let header of _tableConfigurations().headers; let i = index\">\n <th\n [class.sort-btn]=\"header?.sort\"\n (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n class=\"align-bottom\"\n >\n <div\n [ngClass]=\"header?.css\"\n class=\"align-self-end d-flex gap-1\"\n >\n {{ !header.renderer ? (header.text | transloco) : null }}\n <ng-container\n [ngTemplateOutlet]=\"header?.renderer ?? null\"\n [ngTemplateOutletContext]=\"{\n $implicit: header.payload,\n }\"\n ></ng-container>\n <div\n *ngIf=\"header.sort?.key\"\n class=\"d-flex justify-content-between\"\n >\n <ng-container\n [ngTemplateOutlet]=\"orderBtns\"\n [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n ></ng-container>\n </div>\n </div>\n </th>\n </ng-container>\n </tr>\n </thead>\n </table>\n </div>\n <div\n (scroll)=\"tableHeaderContainer.scrollLeft = tableContainer.scrollLeft\"\n #tableContainer\n class=\"table-container\"\n >\n <table\n class=\"table\"\n id=\"table-content\"\n >\n <thead\n #fakeTableHeader\n class=\"fake-table-header\"\n id=\"fakeTableHeader\"\n >\n <tr>\n <ng-container *ngFor=\"let header of _tableConfigurations().headers; let i = index\">\n <th\n [class.sort-btn]=\"header?.sort\"\n (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n class=\"align-bottom\"\n >\n <div\n [ngClass]=\"header?.css\"\n class=\"align-self-end d-flex gap-1\"\n >\n {{ !header.renderer ? (header.text | transloco) : null }}\n <ng-container\n [ngTemplateOutlet]=\"header?.renderer ?? null\"\n [ngTemplateOutletContext]=\"{\n $implicit: header.payload,\n }\"\n ></ng-container>\n <div\n *ngIf=\"header.sort?.key\"\n class=\"d-flex justify-content-between\"\n >\n <ng-container\n [ngTemplateOutlet]=\"orderBtns\"\n [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n ></ng-container>\n </div>\n </div>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n <tr\n [class.hover-table]=\"clickableRow()\"\n [class.selectedRow]=\"row?.rowId ? isSelected(row.rowId!) : null\"\n [ngClass]=\"row.css\"\n (click)=\"clickableRow() ? onClickRow(row) : null\"\n *ngFor=\"let row of _tableConfigurations().rows\"\n >\n <td\n [attr.colspan]=\"cell?.fullWidth ? _tableConfigurations().headers.length : undefined\"\n [ngClass]=\"cell.css!\"\n *ngFor=\"let cell of row.cellData\"\n >\n {{ !cell.renderer ? cell.text : null }}\n <ng-container\n [ngTemplateOutlet]=\"cell?.renderer ?? null\"\n [ngTemplateOutletContext]=\"{\n $implicit: cell.payload,\n }\"\n ></ng-container>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </ng-container>\n <h6\n *ngIf=\"!_tableConfigurations().rows?.length\"\n class=\"text-center mt-3\"\n >\n {{ noResultsText() | transloco }}\n </h6>\n</div>\n\n<ng-template\n #orderBtns\n let-order\n>\n <div\n [class.sort-asc]=\"order.sort === SortTable.ASC\"\n [class.sort-default]=\"order.sort === SortTable.DEFAULT\"\n [class.sort-desc]=\"order.sort === SortTable.DESC\"\n class=\"sort-arrows\"\n >\n <svg\n class=\"arrow-up\"\n fill=\"currentColor\"\n height=\"10\"\n stroke=\"currentColor\"\n viewBox=\"279.5 -600.5 401 201\"\n width=\"10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"m280-400 200-200 200 200H280Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n ></path>\n </svg>\n <svg\n class=\"arrow-down\"\n fill=\"currentColor\"\n height=\"10\"\n stroke=\"currentColor\"\n viewBox=\"279.5 -560.5 401 201\"\n width=\"10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M480-360 280-560h400L480-360Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n ></path>\n </svg>\n </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"quang-components-table.mjs","sources":["../../../projects/quang/components/table/table.component.ts","../../../projects/quang/components/table/table.component.html","../../../projects/quang/components/table/quang-components-table.ts"],"sourcesContent":["import { NgClass, NgTemplateOutlet } from '@angular/common'\nimport {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n ElementRef,\n TemplateRef,\n effect,\n inject,\n input,\n output,\n signal,\n viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { ResizeObservableService } from 'quang/device'\nimport { Subscription } from 'rxjs'\n\nexport interface TableHeader {\n text?: string\n sort?: SortCol\n css?: string[]\n renderer?: TemplateRef<any>\n payload?: any\n}\n\nexport interface TableConfiguration<T> {\n headers: TableHeader[]\n rows: TableRow<T>[]\n}\n\nexport interface TableCell {\n renderer?: TemplateRef<any>\n payload?: any\n text?: string\n css?: string[]\n fullWidth?: boolean\n}\n\nexport interface TableRow<T> {\n payload?: T\n rowId?: string | number\n css?: string[]\n cellData: TableCell[]\n}\n\nexport enum SortTable {\n DEFAULT = 'DEFAULT',\n ASC = 'ASC',\n DESC = 'DESC',\n}\n\nexport interface SortCol {\n key: string\n sort: SortTable\n}\n\n@Component({\n selector: 'quang-table',\n templateUrl: './table.component.html',\n styleUrl: './table.component.scss',\n imports: [TranslocoPipe, NgClass, NgTemplateOutlet],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Table component for displaying data in a tabular format.\n *\n * It supports customizable column cells template and sorting rows by column headers.\n *\n * @usageNotes\n * The component must be configured using the {@link TableConfiguration} object\n */\nexport class QuangTableComponent<T> {\n clickableRow = input<boolean>(false)\n\n selectedRows = input<string[] | number[]>()\n\n stickyTable = input<boolean>(true)\n\n selectedRow = output<TableRow<T>>()\n\n sortChanged = output<SortCol[]>()\n\n public SortTable = SortTable\n\n destroyRef = inject(DestroyRef)\n\n _resizeObservableService = inject(ResizeObservableService)\n\n _tableHeader = viewChild<ElementRef>('tableHeader')\n\n _tableHeaderElement = viewChild<Element>('tableHeader')\n\n noResultsText = input<string>('quangTable.noResults')\n\n _tableHeaderEffect = effect(() => {\n if (this._tableHeader()) {\n this.fixTableHeaderWidth()\n }\n })\n\n _tableHeaderElementEffect = effect(() => {\n if (this._tableHeaderElement()) {\n this.fixTableHeaderWidth()\n }\n })\n\n _fakeTableHeader = viewChild<ElementRef>('fakeTableHeader')\n\n _fakeTableHeaderEffect = effect(() => {\n if (this._fakeTableHeader()) {\n this.fixTableHeaderWidth()\n }\n })\n\n tableConfigurations = input.required<TableConfiguration<T>>()\n\n _tableConfigurations = signal<TableConfiguration<T>>({\n headers: [],\n rows: [],\n })\n\n tableConfigurations$ = toObservable(this.tableConfigurations)\n .pipe(takeUntilDestroyed())\n .subscribe((data) => {\n const headers: TableHeader[] = []\n const rows: TableRow<T>[] = []\n for (const header of data.headers) {\n headers.push({ ...header })\n }\n for (const row of data.rows) {\n rows.push({ ...row })\n }\n this._tableConfigurations.set({\n headers,\n rows,\n })\n })\n\n effectTableConfigurations = effect(() => {\n if (this._tableConfigurations()) {\n this.fixTableHeaderWidth()\n }\n })\n\n hiddenColumnsObservable?: Subscription = undefined\n\n onClickRow(row: TableRow<T>): void {\n if (this.clickableRow()) {\n this.selectedRow.emit(row)\n }\n }\n\n isSelected(rowId: string | number): boolean {\n return !!this.selectedRows()?.some((x) => x === rowId)\n }\n\n lastWidth = -1\n\n fixTableHeaderWidth() {\n setTimeout(() => {\n const stickyColumns = this._tableHeader()?.nativeElement?.querySelectorAll('th')\n\n // Copy the column widths from our hidden Primary table header to our Sticky Table header.\n const hiddenColumns = this._fakeTableHeader()?.nativeElement?.querySelectorAll('th')\n\n if (stickyColumns?.length > 0 && hiddenColumns?.length > 0) {\n if (this.hiddenColumnsObservable) {\n this.hiddenColumnsObservable.unsubscribe()\n }\n this.hiddenColumnsObservable = this._resizeObservableService\n .widthResizeObservable(hiddenColumns[0])\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe((data) => {\n if (data !== this.lastWidth) {\n this.lastWidth = data\n this.fixTableHeaderWidth()\n }\n })\n for (let i = 0; i < hiddenColumns?.length; i++) {\n const th = hiddenColumns[i]\n // Since the Sticky Table header is expected to be an exact copy of the Primary Table, we know their indices will be the same.\n stickyColumns[i].style.minWidth = `${th.offsetWidth}px`\n stickyColumns[i].style.maxWidth = `${th.offsetWidth}px`\n }\n }\n })\n }\n\n onSortColumn(sort: SortCol): void {\n const tableHeaders: TableHeader[] = []\n for (const header of this._tableConfigurations().headers) {\n tableHeaders.push({\n ...header,\n })\n }\n tableHeaders.forEach((header) => {\n if (!header.sort?.key) return\n\n if (header.sort?.key === sort.key) {\n switch (sort.sort) {\n case SortTable.ASC:\n header.sort.sort = SortTable.DESC\n break\n case SortTable.DESC:\n header.sort.sort = SortTable.DEFAULT\n break\n case SortTable.DEFAULT:\n default:\n header.sort.sort = SortTable.ASC\n break\n }\n } else {\n header.sort = {\n ...header.sort,\n sort: SortTable.DEFAULT,\n }\n }\n })\n this._tableConfigurations.set({ ...this._tableConfigurations(), headers: tableHeaders })\n this.sortChanged.emit([sort]) // it's an array to handle multisort in the future\n }\n}\n","<div\n [class.sticky-table]=\"stickyTable()\"\n class=\"table-responsive\"\n>\n @if (_tableConfigurations().rows.length) {\n <div\n (scroll)=\"tableContainer.scrollLeft = tableHeaderContainer.scrollLeft\"\n #tableHeaderContainer\n class=\"table-header-container\"\n id=\"tableHeaderContainer\"\n >\n <table\n #tableHeader\n id=\"tableHeader\"\n >\n <thead>\n <tr>\n @for (header of _tableConfigurations().headers; track $index) {\n <th\n [class.sort-btn]=\"header?.sort\"\n (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n class=\"align-bottom\"\n >\n <div\n [ngClass]=\"header?.css\"\n class=\"align-self-end d-flex gap-1\"\n >\n {{ !header.renderer ? (header.text | transloco) : null }}\n <ng-container\n [ngTemplateOutlet]=\"header?.renderer ?? null\"\n [ngTemplateOutletContext]=\"{\n $implicit: header.payload,\n }\"\n ></ng-container>\n @if (header.sort?.key) {\n <div class=\"d-flex justify-content-between\">\n <ng-container\n [ngTemplateOutlet]=\"orderBtns\"\n [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n ></ng-container>\n </div>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n </table>\n </div>\n <div\n (scroll)=\"tableHeaderContainer.scrollLeft = tableContainer.scrollLeft\"\n #tableContainer\n class=\"table-container\"\n >\n <table\n class=\"table\"\n id=\"table-content\"\n >\n <thead\n #fakeTableHeader\n class=\"fake-table-header\"\n id=\"fakeTableHeader\"\n >\n <tr>\n @for (header of _tableConfigurations().headers; track $index) {\n <th\n [class.sort-btn]=\"header?.sort\"\n (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n class=\"align-bottom\"\n >\n <div\n [ngClass]=\"header?.css\"\n class=\"align-self-end d-flex gap-1\"\n >\n {{ !header.renderer ? (header.text | transloco) : null }}\n <ng-container\n [ngTemplateOutlet]=\"header?.renderer ?? null\"\n [ngTemplateOutletContext]=\"{\n $implicit: header.payload,\n }\"\n ></ng-container>\n @if (header.sort?.key) {\n <div class=\"d-flex justify-content-between\">\n <ng-container\n [ngTemplateOutlet]=\"orderBtns\"\n [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n ></ng-container>\n </div>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of _tableConfigurations().rows; track $index) {\n <tr\n [class.hover-table]=\"clickableRow()\"\n [class.selectedRow]=\"row?.rowId ? isSelected(row.rowId!) : null\"\n [ngClass]=\"row.css\"\n (click)=\"clickableRow() ? onClickRow(row) : null\"\n >\n @for (cell of row.cellData; track $index) {\n <td\n [attr.colspan]=\"cell?.fullWidth ? _tableConfigurations().headers.length : undefined\"\n [ngClass]=\"cell.css!\"\n >\n {{ !cell.renderer ? cell.text : null }}\n <ng-container\n [ngTemplateOutlet]=\"cell?.renderer ?? null\"\n [ngTemplateOutletContext]=\"{\n $implicit: cell.payload,\n }\"\n ></ng-container>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n @if (!_tableConfigurations().rows.length) {\n <h6 class=\"text-center mt-3\">\n {{ noResultsText() | transloco }}\n </h6>\n }\n</div>\n\n<ng-template\n #orderBtns\n let-order\n>\n <div\n [class.sort-asc]=\"order.sort === SortTable.ASC\"\n [class.sort-default]=\"order.sort === SortTable.DEFAULT\"\n [class.sort-desc]=\"order.sort === SortTable.DESC\"\n class=\"sort-arrows\"\n >\n <svg\n class=\"arrow-up\"\n fill=\"currentColor\"\n height=\"10\"\n stroke=\"currentColor\"\n viewBox=\"279.5 -600.5 401 201\"\n width=\"10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"m280-400 200-200 200 200H280Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n ></path>\n </svg>\n <svg\n class=\"arrow-down\"\n fill=\"currentColor\"\n height=\"10\"\n stroke=\"currentColor\"\n viewBox=\"279.5 -560.5 401 201\"\n width=\"10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M480-360 280-560h400L480-360Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n ></path>\n </svg>\n </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -113,7 +113,6 @@ class QuangWysiwygComponent extends QuangBaseComponent {
|
|
|
113
113
|
this._sunEditorWysiwygInstance$
|
|
114
114
|
.pipe(takeUntilDestroyed(this.destroyRef), filter((x) => !!x), take(1))
|
|
115
115
|
.subscribe((sunEditorWysiwygInstance) => {
|
|
116
|
-
console.log('ciao sunEditorWysiwygInstance', sunEditorWysiwygInstance);
|
|
117
116
|
if (sunEditorWysiwygInstance) {
|
|
118
117
|
try {
|
|
119
118
|
sunEditorWysiwygInstance.setContents(val);
|
|
@@ -202,8 +201,8 @@ class QuangWysiwygComponent extends QuangBaseComponent {
|
|
|
202
201
|
}
|
|
203
202
|
return buttonList;
|
|
204
203
|
}
|
|
205
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
206
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.
|
|
204
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: QuangWysiwygComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
205
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.9", type: QuangWysiwygComponent, isStandalone: true, selector: "quang-wysiwyg", inputs: { minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, font: { classPropertyName: "font", publicName: "font", isSignal: true, isRequired: false, transformFunction: null }, fontSize: { classPropertyName: "fontSize", publicName: "fontSize", isSignal: true, isRequired: false, transformFunction: null }, formatBlock: { classPropertyName: "formatBlock", publicName: "formatBlock", isSignal: true, isRequired: false, transformFunction: null }, paragraphStyle: { classPropertyName: "paragraphStyle", publicName: "paragraphStyle", isSignal: true, isRequired: false, transformFunction: null }, blockquote: { classPropertyName: "blockquote", publicName: "blockquote", isSignal: true, isRequired: false, transformFunction: null }, bold: { classPropertyName: "bold", publicName: "bold", isSignal: true, isRequired: false, transformFunction: null }, underline: { classPropertyName: "underline", publicName: "underline", isSignal: true, isRequired: false, transformFunction: null }, italic: { classPropertyName: "italic", publicName: "italic", isSignal: true, isRequired: false, transformFunction: null }, strike: { classPropertyName: "strike", publicName: "strike", isSignal: true, isRequired: false, transformFunction: null }, fontColor: { classPropertyName: "fontColor", publicName: "fontColor", isSignal: true, isRequired: false, transformFunction: null }, highlightColor: { classPropertyName: "highlightColor", publicName: "highlightColor", isSignal: true, isRequired: false, transformFunction: null }, textStyle: { classPropertyName: "textStyle", publicName: "textStyle", isSignal: true, isRequired: false, transformFunction: null }, removeFormat: { classPropertyName: "removeFormat", publicName: "removeFormat", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, showBlocks: { classPropertyName: "showBlocks", publicName: "showBlocks", isSignal: true, isRequired: false, transformFunction: null }, onImageUploadError: { classPropertyName: "onImageUploadError", publicName: "onImageUploadError", isSignal: true, isRequired: false, transformFunction: null }, onFileDrop: { classPropertyName: "onFileDrop", publicName: "onFileDrop", isSignal: true, isRequired: false, transformFunction: null }, wysiwygOptions: { classPropertyName: "wysiwygOptions", publicName: "wysiwygOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
207
206
|
{
|
|
208
207
|
provide: NG_VALUE_ACCESSOR,
|
|
209
208
|
useExisting: forwardRef(() => QuangWysiwygComponent),
|
|
@@ -211,7 +210,7 @@ class QuangWysiwygComponent extends QuangBaseComponent {
|
|
|
211
210
|
},
|
|
212
211
|
], viewQueries: [{ propertyName: "_inputForWysiwyg", first: true, predicate: ["inputForWysiwyg"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mb-3\">\n <label\n [htmlFor]=\"componentId()\"\n *ngIf=\"componentLabel()\"\n class=\"form-label\"\n >\n {{ componentLabel() | transloco }}\n <span [hidden]=\"!_isRequired()\">*</span>\n </label>\n <div\n [class.is-invalid]=\"_showErrors()\"\n [class.is-valid]=\"_showSuccess()\"\n class=\"input-wysiwyg-container is-invalid\"\n >\n <textarea\n [disabled]=\"_isDisabled()\"\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n [placeholder]=\"componentPlaceholder() | transloco\"\n [readOnly]=\"isReadonly()\"\n [tabIndex]=\"componentTabIndex()\"\n [value]=\"_value()\"\n #inputForWysiwyg\n class=\"form-control\"\n ></textarea>\n </div>\n <div class=\"valid-feedback\">\n {{ successMessage() | transloco }}\n </div>\n <div class=\"invalid-feedback\">\n {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n </div>\n <small\n [hidden]=\"_showSuccess() || _showErrors()\"\n *ngIf=\"helpMessage()\"\n aria-live=\"assertive\"\n class=\"form-text text-muted\"\n >\n {{ helpMessage() | transloco }}\n </small>\n</div>\n", styles: [":host{display:block}::ng-deep .se-toolbar{color:var(--bs-body-color)!important;background-color:var(--bs-body-bg)!important;z-index:unset!important}::ng-deep .se-wrapper-inner{color:var(--bs-body-color)!important;background-color:var(--bs-body-bg)!important}::ng-deep .se-btn{color:var(--bs-body-color)!important}::ng-deep .se-btn:enabled.active{color:var(--bs-primary)!important}::ng-deep .se-btn:hover{background-color:var(--bs-secondary-bg)!important}::ng-deep .se-resizing-bar{color:var(--bs-body-color)!important;background-color:var(--bs-body-bg)!important}::ng-deep .se-navigation{color:var(--bs-body-color)!important;background-color:var(--bs-body-bg)!important}::ng-deep .sun-editor input{display:none}::ng-deep .sun-editor .se-container{border-radius:var(--bs-border-radius)}::ng-deep .se-wrapper{z-index:unset!important}::ng-deep .se-wrapper textarea:disabled+.se-wrapper-wysiwyg{background-color:var(--bs-secondary-bg)}::ng-deep .se-wrapper .se-wrapper-inner{border-top:1px solid var(--bs-border-color)}::ng-deep .is-invalid .sun-editor .se-container .se-toolbar{border-bottom:1px solid var(--bs-danger)}::ng-deep .is-invalid .sun-editor .se-container .se-wrapper .se-wrapper-inner{--bs-form-bg-icon: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e\");border:1px solid var(--bs-danger);padding-right:3rem;background-position:right .75rem center,center right 2.25rem;background-size:1.5rem,calc(.75em + .375rem) calc(.75em + .375rem);background-image:var(--bs-form-bg-icon);background-repeat:no-repeat}::ng-deep .is-valid .sun-editor .se-container .se-toolbar{border-bottom:1px solid var(--bs-success)}::ng-deep .is-valid .sun-editor .se-container .se-wrapper .se-wrapper-inner{--bs-form-bg-icon: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\");border:1px solid var(--bs-success);padding-right:3rem;background-position:right .75rem center,center right 2.25rem;background-size:1.5rem,calc(.75em + .375rem) calc(.75em + .375rem);background-image:var(--bs-form-bg-icon);background-repeat:no-repeat}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
213
212
|
}
|
|
214
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: QuangWysiwygComponent, decorators: [{
|
|
215
214
|
type: Component,
|
|
216
215
|
args: [{ selector: 'quang-wysiwyg', providers: [
|
|
217
216
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"quang-components-wysiwyg.mjs","sources":["../../../projects/quang/components/wysiwyg/wysiwyg.component.ts","../../../projects/quang/components/wysiwyg/wysiwyg.component.html","../../../projects/quang/components/wysiwyg/quang-components-wysiwyg.ts"],"sourcesContent":["import { NgClass, NgIf } from '@angular/common'\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n effect,\n forwardRef,\n inject,\n input,\n signal,\n viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { AbstractControl, NG_VALUE_ACCESSOR, ValidationErrors, Validators } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { filter, take } from 'rxjs'\nimport sunEditor from 'suneditor'\nimport SunEditorCore from 'suneditor/src/lib/core'\nimport { SunEditorOptions } from 'suneditor/src/options'\nimport plugins from 'suneditor/src/plugins'\n\nimport { QuangBaseComponent } from 'quang/components/shared'\n\nexport type QuangWysiwygOptions = SunEditorOptions\n\n@Component({\n selector: 'quang-wysiwyg',\n templateUrl: './wysiwyg.component.html',\n styleUrl: './wysiwyg.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => QuangWysiwygComponent),\n multi: true,\n },\n ],\n imports: [TranslocoPipe, NgIf, NgClass],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * WYSIWYG (What You See Is What You Get) component based on {@link https://github.com/JiHong88/SunEditor}.\n *\n * This component provides a rich text editor for users to create and edit HTML content.\n * It supports a wide range of formatting options.\n *\n * @usageNotes\n * The component allows you to show or hide buttons from the WYSIWYG editor.\n * By default, all the available buttons are shown in the editor bar.\n *\n * The height of the editor can be customized by setting the `minHeight` property. By default, it is `200px`.\n */\nexport class QuangWysiwygComponent extends QuangBaseComponent<string> implements AfterViewInit {\n _inputForWysiwyg = viewChild<ElementRef>('inputForWysiwyg')\n\n minHeight = input<string | undefined>('200px')\n\n font = input<boolean>(true)\n\n fontSize = input<boolean>(true)\n\n formatBlock = input<boolean>(true)\n\n paragraphStyle = input<boolean>(true)\n\n blockquote = input<boolean>(true)\n\n bold = input<boolean>(true)\n\n underline = input<boolean>(true)\n\n italic = input<boolean>(true)\n\n strike = input<boolean>(true)\n\n fontColor = input<boolean>(true)\n\n highlightColor = input<boolean>(true)\n\n textStyle = input<boolean>(true)\n\n removeFormat = input<boolean>(true)\n\n align = input<boolean>(true)\n\n list = input<boolean>(true)\n\n table = input<boolean>(true)\n\n link = input<boolean>(true)\n\n image = input<boolean>(true)\n\n fullScreen = input<boolean>(true)\n\n showBlocks = input<boolean>(true)\n\n onImageUploadError = input<(errorMessage: any, result: any, core: any) => boolean>()\n onFileDrop = input<(e: any, cleanData: any, maxCharCount: any, core: any) => boolean>()\n\n wysiwygOptions = input<QuangWysiwygOptions | undefined>(undefined)\n\n _sunEditorWysiwygInstance = signal<SunEditorCore | undefined>(undefined)\n _sunEditorWysiwygInstance$ = toObservable(this._sunEditorWysiwygInstance)\n\n changeDetectorRef = signal(inject(ChangeDetectorRef))\n\n _generateSunEditorWysiwygEffect = effect(() => {\n try {\n const inputForWysiwyg = this._inputForWysiwyg()?.nativeElement\n if (inputForWysiwyg) {\n const sunEditorOptions: SunEditorOptions = {\n plugins,\n defaultTag: 'div',\n buttonList: this._ngControl()?.control?.enabled && !this.isReadonly() ? [this.getButtonList()] : [],\n minHeight: this.minHeight(),\n width: '100%',\n ...(this.wysiwygOptions() ?? {}),\n }\n\n let sunEditorWysiwygInstance = this._sunEditorWysiwygInstance()\n const ngControl = this._ngControl()\n\n if (sunEditorWysiwygInstance) {\n if (ngControl?.control?.enabled) {\n sunEditorWysiwygInstance.enable()\n }\n sunEditorWysiwygInstance.setOptions(sunEditorOptions)\n } else {\n sunEditorWysiwygInstance = sunEditor.create(inputForWysiwyg, sunEditorOptions)\n this._sunEditorWysiwygInstance.set(sunEditorWysiwygInstance)\n }\n\n const imageUploadError = this.onImageUploadError()\n const onFileDrop = this.onFileDrop()\n\n if (imageUploadError && sunEditorWysiwygInstance) {\n sunEditorWysiwygInstance.onImageUploadError = imageUploadError\n }\n if (onFileDrop && sunEditorWysiwygInstance) {\n sunEditorWysiwygInstance.onDrop = onFileDrop\n }\n\n this.registerEvents()\n }\n } catch (_) {\n // we usually end up here when we are in a modal and then it starts in the right way\n }\n })\n\n STRIP_HTML_REGEX = /<[^>]*>/g\n\n registerEvents(): void {\n const sunEditorInstance = this._sunEditorWysiwygInstance()\n if (sunEditorInstance) {\n sunEditorInstance.onChange = (contents) => {\n this.onChangedHandler(contents)\n this.changeDetectorRef().markForCheck()\n }\n sunEditorInstance.onBlur = () => {\n this.onBlurHandler()\n }\n if (this._isDisabled()) {\n sunEditorInstance.disable()\n }\n }\n }\n\n override writeValue(val: string): void {\n super.writeValue(val)\n this._sunEditorWysiwygInstance$\n .pipe(\n takeUntilDestroyed(this.destroyRef),\n filter((x) => !!x),\n take(1)\n )\n .subscribe((sunEditorWysiwygInstance) => {\n console.log('ciao sunEditorWysiwygInstance', sunEditorWysiwygInstance)\n if (sunEditorWysiwygInstance) {\n try {\n sunEditorWysiwygInstance.setContents(val)\n } catch (_) {\n // we usually end up here when we are in a modal and then it starts in the right way\n }\n }\n })\n }\n\n validate(control: AbstractControl): ValidationErrors | null {\n if (control.hasValidator(Validators.required) && control.value?.replace(this.STRIP_HTML_REGEX, '') === '') {\n return { required: true }\n }\n return null\n }\n\n override onChangedHandler(value: string): void {\n super.onChangedHandler(value)\n const control = this._ngControl()\n if (control?.control) {\n if (this.validate(control.control)) control.control.setErrors(this.validate(control.control))\n }\n }\n\n getButtonList(): string[] {\n const buttonList: string[] = []\n if (this.font()) {\n buttonList.push('font')\n }\n if (this.fontSize()) {\n buttonList.push('fontSize')\n }\n if (this.formatBlock()) {\n buttonList.push('formatBlock')\n }\n if (this.paragraphStyle()) {\n buttonList.push('paragraphStyle')\n }\n if (this.blockquote()) {\n buttonList.push('blockquote')\n }\n if (this.bold()) {\n buttonList.push('bold')\n }\n if (this.underline()) {\n buttonList.push('underline')\n }\n if (this.italic()) {\n buttonList.push('italic')\n }\n if (this.strike()) {\n buttonList.push('strike')\n }\n if (this.fontColor()) {\n buttonList.push('fontColor')\n }\n if (this.highlightColor()) {\n buttonList.push('hiliteColor')\n }\n if (this.textStyle()) {\n buttonList.push('textStyle')\n }\n if (this.removeFormat()) {\n buttonList.push('removeFormat')\n }\n if (this.align()) {\n buttonList.push('align')\n }\n if (this.list()) {\n buttonList.push('list')\n }\n if (this.table()) {\n buttonList.push('table')\n }\n if (this.link()) {\n buttonList.push('link')\n }\n if (this.image()) {\n buttonList.push('image')\n }\n if (this.fullScreen()) {\n buttonList.push('fullScreen')\n }\n if (this.showBlocks()) {\n buttonList.push('showBlocks')\n }\n return buttonList\n }\n}\n","<div class=\"mb-3\">\n <label\n [htmlFor]=\"componentId()\"\n *ngIf=\"componentLabel()\"\n class=\"form-label\"\n >\n {{ componentLabel() | transloco }}\n <span [hidden]=\"!_isRequired()\">*</span>\n </label>\n <div\n [class.is-invalid]=\"_showErrors()\"\n [class.is-valid]=\"_showSuccess()\"\n class=\"input-wysiwyg-container is-invalid\"\n >\n <textarea\n [disabled]=\"_isDisabled()\"\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n [placeholder]=\"componentPlaceholder() | transloco\"\n [readOnly]=\"isReadonly()\"\n [tabIndex]=\"componentTabIndex()\"\n [value]=\"_value()\"\n #inputForWysiwyg\n class=\"form-control\"\n ></textarea>\n </div>\n <div class=\"valid-feedback\">\n {{ successMessage() | transloco }}\n </div>\n <div class=\"invalid-feedback\">\n {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n </div>\n <small\n [hidden]=\"_showSuccess() || _showErrors()\"\n *ngIf=\"helpMessage()\"\n aria-live=\"assertive\"\n class=\"form-text text-muted\"\n >\n {{ helpMessage() | transloco }}\n </small>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"quang-components-wysiwyg.mjs","sources":["../../../projects/quang/components/wysiwyg/wysiwyg.component.ts","../../../projects/quang/components/wysiwyg/wysiwyg.component.html","../../../projects/quang/components/wysiwyg/quang-components-wysiwyg.ts"],"sourcesContent":["import { NgClass, NgIf } from '@angular/common'\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n effect,\n forwardRef,\n inject,\n input,\n signal,\n viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { AbstractControl, NG_VALUE_ACCESSOR, ValidationErrors, Validators } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { filter, take } from 'rxjs'\nimport sunEditor from 'suneditor'\nimport SunEditorCore from 'suneditor/src/lib/core'\nimport { SunEditorOptions } from 'suneditor/src/options'\nimport plugins from 'suneditor/src/plugins'\n\nimport { QuangBaseComponent } from 'quang/components/shared'\n\nexport type QuangWysiwygOptions = SunEditorOptions\n\n@Component({\n selector: 'quang-wysiwyg',\n templateUrl: './wysiwyg.component.html',\n styleUrl: './wysiwyg.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => QuangWysiwygComponent),\n multi: true,\n },\n ],\n imports: [TranslocoPipe, NgIf, NgClass],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * WYSIWYG (What You See Is What You Get) component based on {@link https://github.com/JiHong88/SunEditor}.\n *\n * This component provides a rich text editor for users to create and edit HTML content.\n * It supports a wide range of formatting options.\n *\n * @usageNotes\n * The component allows you to show or hide buttons from the WYSIWYG editor.\n * By default, all the available buttons are shown in the editor bar.\n *\n * The height of the editor can be customized by setting the `minHeight` property. By default, it is `200px`.\n */\nexport class QuangWysiwygComponent extends QuangBaseComponent<string> implements AfterViewInit {\n _inputForWysiwyg = viewChild<ElementRef>('inputForWysiwyg')\n\n minHeight = input<string | undefined>('200px')\n\n font = input<boolean>(true)\n\n fontSize = input<boolean>(true)\n\n formatBlock = input<boolean>(true)\n\n paragraphStyle = input<boolean>(true)\n\n blockquote = input<boolean>(true)\n\n bold = input<boolean>(true)\n\n underline = input<boolean>(true)\n\n italic = input<boolean>(true)\n\n strike = input<boolean>(true)\n\n fontColor = input<boolean>(true)\n\n highlightColor = input<boolean>(true)\n\n textStyle = input<boolean>(true)\n\n removeFormat = input<boolean>(true)\n\n align = input<boolean>(true)\n\n list = input<boolean>(true)\n\n table = input<boolean>(true)\n\n link = input<boolean>(true)\n\n image = input<boolean>(true)\n\n fullScreen = input<boolean>(true)\n\n showBlocks = input<boolean>(true)\n\n onImageUploadError = input<(errorMessage: any, result: any, core: any) => boolean>()\n onFileDrop = input<(e: any, cleanData: any, maxCharCount: any, core: any) => boolean>()\n\n wysiwygOptions = input<QuangWysiwygOptions | undefined>(undefined)\n\n _sunEditorWysiwygInstance = signal<SunEditorCore | undefined>(undefined)\n _sunEditorWysiwygInstance$ = toObservable(this._sunEditorWysiwygInstance)\n\n changeDetectorRef = signal(inject(ChangeDetectorRef))\n\n _generateSunEditorWysiwygEffect = effect(() => {\n try {\n const inputForWysiwyg = this._inputForWysiwyg()?.nativeElement\n if (inputForWysiwyg) {\n const sunEditorOptions: SunEditorOptions = {\n plugins,\n defaultTag: 'div',\n buttonList: this._ngControl()?.control?.enabled && !this.isReadonly() ? [this.getButtonList()] : [],\n minHeight: this.minHeight(),\n width: '100%',\n ...(this.wysiwygOptions() ?? {}),\n }\n\n let sunEditorWysiwygInstance = this._sunEditorWysiwygInstance()\n const ngControl = this._ngControl()\n\n if (sunEditorWysiwygInstance) {\n if (ngControl?.control?.enabled) {\n sunEditorWysiwygInstance.enable()\n }\n sunEditorWysiwygInstance.setOptions(sunEditorOptions)\n } else {\n sunEditorWysiwygInstance = sunEditor.create(inputForWysiwyg, sunEditorOptions)\n this._sunEditorWysiwygInstance.set(sunEditorWysiwygInstance)\n }\n\n const imageUploadError = this.onImageUploadError()\n const onFileDrop = this.onFileDrop()\n\n if (imageUploadError && sunEditorWysiwygInstance) {\n sunEditorWysiwygInstance.onImageUploadError = imageUploadError\n }\n if (onFileDrop && sunEditorWysiwygInstance) {\n sunEditorWysiwygInstance.onDrop = onFileDrop\n }\n\n this.registerEvents()\n }\n } catch (_) {\n // we usually end up here when we are in a modal and then it starts in the right way\n }\n })\n\n STRIP_HTML_REGEX = /<[^>]*>/g\n\n registerEvents(): void {\n const sunEditorInstance = this._sunEditorWysiwygInstance()\n if (sunEditorInstance) {\n sunEditorInstance.onChange = (contents) => {\n this.onChangedHandler(contents)\n this.changeDetectorRef().markForCheck()\n }\n sunEditorInstance.onBlur = () => {\n this.onBlurHandler()\n }\n if (this._isDisabled()) {\n sunEditorInstance.disable()\n }\n }\n }\n\n override writeValue(val: string): void {\n super.writeValue(val)\n this._sunEditorWysiwygInstance$\n .pipe(\n takeUntilDestroyed(this.destroyRef),\n filter((x) => !!x),\n take(1)\n )\n .subscribe((sunEditorWysiwygInstance) => {\n if (sunEditorWysiwygInstance) {\n try {\n sunEditorWysiwygInstance.setContents(val)\n } catch (_) {\n // we usually end up here when we are in a modal and then it starts in the right way\n }\n }\n })\n }\n\n validate(control: AbstractControl): ValidationErrors | null {\n if (control.hasValidator(Validators.required) && control.value?.replace(this.STRIP_HTML_REGEX, '') === '') {\n return { required: true }\n }\n return null\n }\n\n override onChangedHandler(value: string): void {\n super.onChangedHandler(value)\n const control = this._ngControl()\n if (control?.control) {\n if (this.validate(control.control)) control.control.setErrors(this.validate(control.control))\n }\n }\n\n getButtonList(): string[] {\n const buttonList: string[] = []\n if (this.font()) {\n buttonList.push('font')\n }\n if (this.fontSize()) {\n buttonList.push('fontSize')\n }\n if (this.formatBlock()) {\n buttonList.push('formatBlock')\n }\n if (this.paragraphStyle()) {\n buttonList.push('paragraphStyle')\n }\n if (this.blockquote()) {\n buttonList.push('blockquote')\n }\n if (this.bold()) {\n buttonList.push('bold')\n }\n if (this.underline()) {\n buttonList.push('underline')\n }\n if (this.italic()) {\n buttonList.push('italic')\n }\n if (this.strike()) {\n buttonList.push('strike')\n }\n if (this.fontColor()) {\n buttonList.push('fontColor')\n }\n if (this.highlightColor()) {\n buttonList.push('hiliteColor')\n }\n if (this.textStyle()) {\n buttonList.push('textStyle')\n }\n if (this.removeFormat()) {\n buttonList.push('removeFormat')\n }\n if (this.align()) {\n buttonList.push('align')\n }\n if (this.list()) {\n buttonList.push('list')\n }\n if (this.table()) {\n buttonList.push('table')\n }\n if (this.link()) {\n buttonList.push('link')\n }\n if (this.image()) {\n buttonList.push('image')\n }\n if (this.fullScreen()) {\n buttonList.push('fullScreen')\n }\n if (this.showBlocks()) {\n buttonList.push('showBlocks')\n }\n return buttonList\n }\n}\n","<div class=\"mb-3\">\n <label\n [htmlFor]=\"componentId()\"\n *ngIf=\"componentLabel()\"\n class=\"form-label\"\n >\n {{ componentLabel() | transloco }}\n <span [hidden]=\"!_isRequired()\">*</span>\n </label>\n <div\n [class.is-invalid]=\"_showErrors()\"\n [class.is-valid]=\"_showSuccess()\"\n class=\"input-wysiwyg-container is-invalid\"\n >\n <textarea\n [disabled]=\"_isDisabled()\"\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n [placeholder]=\"componentPlaceholder() | transloco\"\n [readOnly]=\"isReadonly()\"\n [tabIndex]=\"componentTabIndex()\"\n [value]=\"_value()\"\n #inputForWysiwyg\n class=\"form-control\"\n ></textarea>\n </div>\n <div class=\"valid-feedback\">\n {{ successMessage() | transloco }}\n </div>\n <div class=\"invalid-feedback\">\n {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n </div>\n <small\n [hidden]=\"_showSuccess() || _showErrors()\"\n *ngIf=\"helpMessage()\"\n aria-live=\"assertive\"\n class=\"form-text text-muted\"\n >\n {{ helpMessage() | transloco }}\n </small>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -24,10 +24,10 @@ class ResizeObservableService {
|
|
|
24
24
|
widthResizeObservable(elem) {
|
|
25
25
|
return this.resizeObservable(elem).pipe(map((entry) => entry.borderBoxSize[0].inlineSize), filter(Boolean));
|
|
26
26
|
}
|
|
27
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
28
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
27
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ResizeObservableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
28
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ResizeObservableService, providedIn: 'root' }); }
|
|
29
29
|
}
|
|
30
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
30
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: ResizeObservableService, decorators: [{
|
|
31
31
|
type: Injectable,
|
|
32
32
|
args: [{
|
|
33
33
|
providedIn: 'root',
|
|
@@ -18,10 +18,10 @@ class QuangLoaderService {
|
|
|
18
18
|
hide() {
|
|
19
19
|
patchState(this.loaderState, { count: this.loaderState().count - 1 });
|
|
20
20
|
}
|
|
21
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
22
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
21
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: QuangLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
22
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: QuangLoaderService, providedIn: 'root' }); }
|
|
23
23
|
}
|
|
24
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
24
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: QuangLoaderService, decorators: [{
|
|
25
25
|
type: Injectable,
|
|
26
26
|
args: [{
|
|
27
27
|
providedIn: 'root',
|
|
@@ -70,10 +70,10 @@ class QuangLoaderComponent {
|
|
|
70
70
|
this.showLoaderBuffer$ = toObservable(this.isLoading).pipe(map((isLoading) => (isLoading ? of(isLoading) : timer(this.showAtLeastFor()).pipe(map(() => isLoading)))), switchAll());
|
|
71
71
|
this.showLoader = toSignal(this.showLoaderBuffer$);
|
|
72
72
|
}
|
|
73
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
74
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
73
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: QuangLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
74
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.9", type: QuangLoaderComponent, isStandalone: true, selector: "quang-loader", inputs: { showAtLeastFor: { classPropertyName: "showAtLeastFor", publicName: "showAtLeastFor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n *ngIf=\"showLoader()\"\n class=\"loader-container\"\n>\n <ng-container *ngIf=\"!ref?.children?.length\">\n <span class=\"loader\"></span>\n </ng-container>\n <div #ref>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:block}.loader-container{position:fixed;width:100%;height:100%;display:flex;top:0;left:0;background-color:#00000080;align-items:center;justify-content:center;z-index:99999}.loader-container .loader{width:48px;height:48px;border-radius:50%;display:inline-block;position:relative;border:3px solid;border-color:rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
75
75
|
}
|
|
76
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
76
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: QuangLoaderComponent, decorators: [{
|
|
77
77
|
type: Component,
|
|
78
78
|
args: [{ selector: 'quang-loader', imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"showLoader()\"\n class=\"loader-container\"\n>\n <ng-container *ngIf=\"!ref?.children?.length\">\n <span class=\"loader\"></span>\n </ng-container>\n <div #ref>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:block}.loader-container{position:fixed;width:100%;height:100%;display:flex;top:0;left:0;background-color:#00000080;align-items:center;justify-content:center;z-index:99999}.loader-container .loader{width:48px;height:48px;border-radius:50%;display:inline-block;position:relative;border:3px solid;border-color:rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}\n"] }]
|
|
79
79
|
}] });
|
|
@@ -99,10 +99,10 @@ class QuangModalComponent {
|
|
|
99
99
|
this.overlayRef?.detach();
|
|
100
100
|
this.overlayRef?.dispose();
|
|
101
101
|
}
|
|
102
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
103
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
102
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: QuangModalComponent, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
103
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.9", type: QuangModalComponent, isStandalone: true, selector: "quang-modal", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, animationMode: { classPropertyName: "animationMode", publicName: "animationMode", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backdropClick: "backdropClick" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: "<ng-template cdkPortal>\n <div\n [ngStyle]=\"{\n '--quang-modal-panel-width': width(),\n '--quang-modal-panel-height': height(),\n '--quang-modal-panel-background': backgroundColor(),\n '--quang-modal-panel-padding': padding(),\n }\"\n class=\"dialog {{ containerClass() }} {{ animationClassEnter() }}\"\n >\n <div class=\"dialog__header\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div class=\"dialog__body\">\n <ng-content select=\"[body]\"></ng-content>\n </div>\n <div class=\"dialog__footer\">\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n </div>\n</ng-template>\n", styles: [".dialog{background-color:var(--quang-modal-panel-background, var(--bs-body-bg, initial));position:relative;display:flex;flex-direction:column;width:var(--quang-modal-panel-width);height:var(--quang-modal-panel-height);padding:var(--quang-modal-panel-padding)}.dialog__header{display:flex;flex-direction:column;width:100%}.dialog__body{flex:1;overflow:auto}.dialog__footer{display:flex;justify-content:flex-end}::ng-deep .cdk-global-scrollblock{overflow-y:auto}@keyframes left-to-right_enter{0%{transform:translate(-100%)}to{transform:translate(0)}}.left-to-right-enter-active{animation:left-to-right_enter .5s ease-in-out forwards}@keyframes right-to-left_enter{0%{transform:translate(100%)}to{transform:translate(0)}}.right-to-left-enter-active{animation:right-to-left_enter .5s ease-in-out forwards}@keyframes top-to-bottom_enter{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.top-to-bottom-enter-active{animation:top-to-bottom_enter .5s ease-in-out forwards}@keyframes bottom-to-top_enter{0%{transform:translateY(100%)}to{transform:translateY(0)}}.top-to-bottom-enter-active{animation:bottom-to-top_enter .5s ease-in-out forwards}@keyframes fade_enter{0%{opacity:0}to{opacity:1}}.fade-enter-active{animation:fade_enter .5s ease-in-out forwards}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
104
104
|
}
|
|
105
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
105
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: QuangModalComponent, decorators: [{
|
|
106
106
|
type: Component,
|
|
107
107
|
args: [{ selector: 'quang-modal', imports: [PortalModule, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template cdkPortal>\n <div\n [ngStyle]=\"{\n '--quang-modal-panel-width': width(),\n '--quang-modal-panel-height': height(),\n '--quang-modal-panel-background': backgroundColor(),\n '--quang-modal-panel-padding': padding(),\n }\"\n class=\"dialog {{ containerClass() }} {{ animationClassEnter() }}\"\n >\n <div class=\"dialog__header\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div class=\"dialog__body\">\n <ng-content select=\"[body]\"></ng-content>\n </div>\n <div class=\"dialog__footer\">\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n </div>\n</ng-template>\n", styles: [".dialog{background-color:var(--quang-modal-panel-background, var(--bs-body-bg, initial));position:relative;display:flex;flex-direction:column;width:var(--quang-modal-panel-width);height:var(--quang-modal-panel-height);padding:var(--quang-modal-panel-padding)}.dialog__header{display:flex;flex-direction:column;width:100%}.dialog__body{flex:1;overflow:auto}.dialog__footer{display:flex;justify-content:flex-end}::ng-deep .cdk-global-scrollblock{overflow-y:auto}@keyframes left-to-right_enter{0%{transform:translate(-100%)}to{transform:translate(0)}}.left-to-right-enter-active{animation:left-to-right_enter .5s ease-in-out forwards}@keyframes right-to-left_enter{0%{transform:translate(100%)}to{transform:translate(0)}}.right-to-left-enter-active{animation:right-to-left_enter .5s ease-in-out forwards}@keyframes top-to-bottom_enter{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.top-to-bottom-enter-active{animation:top-to-bottom_enter .5s ease-in-out forwards}@keyframes bottom-to-top_enter{0%{transform:translateY(100%)}to{transform:translateY(0)}}.top-to-bottom-enter-active{animation:bottom-to-top_enter .5s ease-in-out forwards}@keyframes fade_enter{0%{opacity:0}to{opacity:1}}.fade-enter-active{animation:fade_enter .5s ease-in-out forwards}\n"] }]
|
|
108
108
|
}], ctorParameters: () => [{ type: i1.Overlay }], propDecorators: { portal: [{
|
|
@@ -21,7 +21,7 @@ import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
|
21
21
|
*/
|
|
22
22
|
class QuangPopoverComponent {
|
|
23
23
|
constructor() {
|
|
24
|
-
this.
|
|
24
|
+
this.overlayContent = input(null);
|
|
25
25
|
this.positionPair = signal(null);
|
|
26
26
|
this.payload = input();
|
|
27
27
|
this.getPopoverPosition = signal('');
|
|
@@ -38,12 +38,12 @@ class QuangPopoverComponent {
|
|
|
38
38
|
}
|
|
39
39
|
});
|
|
40
40
|
}
|
|
41
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
42
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
41
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: QuangPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
42
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.9", type: QuangPopoverComponent, isStandalone: true, selector: "quang-popover", inputs: { overlayContent: { classPropertyName: "overlayContent", publicName: "overlayContent", isSignal: true, isRequired: false, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [ngClass]=\"getPopoverPosition()\"\n *ngIf=\"overlayContent()\"\n class=\"popover-container\"\n>\n <ng-container\n [ngTemplateOutlet]=\"overlayContent()\"\n [ngTemplateOutletContext]=\"{\n $implicit: payload(),\n }\"\n ></ng-container>\n</div>\n", styles: [":host{--bs-popover-border-width: 1px;--bs-popover-arrow-width: .5rem;--bs-popover-arrow-border: var(--bs-border-color, #000);--box-shadow-bg: rgba(0, 0, 0, .16)}.popover-container{box-shadow:var(--box-shadow-bg);background:var(--bs-body-bg, #fff);border:var(--bs-popover-border-width) solid var(--bs-border-color, #000);pointer-events:none;position:relative;pointer-events:all}.popover-container.center-bottom:after,.popover-container.center-bottom:before{bottom:100%;left:50%;transform:translate(-50%)}.popover-container.start-bottom:after,.popover-container.start-bottom:before{bottom:100%;left:85%;transform:translate(-50%)}.popover-container.end-bottom:after,.popover-container.end-bottom:before{bottom:100%;left:15%;transform:translate(-50%)}.popover-container.center-top:after,.popover-container.center-top:before{top:100%;left:50%;transform:translate(-50%) rotate(180deg)}.popover-container.start-top:after,.popover-container.start-top:before{top:100%;left:85%;transform:translate(-50%) rotate(180deg)}.popover-container.end-top:after,.popover-container.end-top:before{top:100%;left:15%;transform:translate(-50%) rotate(180deg)}.popover-container.end-center:after,.popover-container.end-center:before{right:100%;top:50%;transform:translateY(-50%) rotate(270deg)}.popover-container.start-center:after,.popover-container.start-center:before{left:100%;top:50%;transform:translateY(-50%) rotate(90deg)}.popover-container:after,.popover-container:before{content:\"\";display:block;position:absolute;width:0;height:0;border-style:solid}.popover-container:after{border-color:transparent transparent var(--bs-body-bg, #fff) transparent;border-width:var(--bs-popover-arrow-width)}.popover-container:before{border-color:transparent transparent var(--bs-border-color, #000) transparent;border-width:calc(var(--bs-popover-arrow-width) + 1px)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
43
43
|
}
|
|
44
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
44
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: QuangPopoverComponent, decorators: [{
|
|
45
45
|
type: Component,
|
|
46
|
-
args: [{ selector: 'quang-popover', imports: [NgTemplateOutlet, NgClass, NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [ngClass]=\"getPopoverPosition()\"\n *ngIf=\"
|
|
46
|
+
args: [{ selector: 'quang-popover', imports: [NgTemplateOutlet, NgClass, NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [ngClass]=\"getPopoverPosition()\"\n *ngIf=\"overlayContent()\"\n class=\"popover-container\"\n>\n <ng-container\n [ngTemplateOutlet]=\"overlayContent()\"\n [ngTemplateOutletContext]=\"{\n $implicit: payload(),\n }\"\n ></ng-container>\n</div>\n", styles: [":host{--bs-popover-border-width: 1px;--bs-popover-arrow-width: .5rem;--bs-popover-arrow-border: var(--bs-border-color, #000);--box-shadow-bg: rgba(0, 0, 0, .16)}.popover-container{box-shadow:var(--box-shadow-bg);background:var(--bs-body-bg, #fff);border:var(--bs-popover-border-width) solid var(--bs-border-color, #000);pointer-events:none;position:relative;pointer-events:all}.popover-container.center-bottom:after,.popover-container.center-bottom:before{bottom:100%;left:50%;transform:translate(-50%)}.popover-container.start-bottom:after,.popover-container.start-bottom:before{bottom:100%;left:85%;transform:translate(-50%)}.popover-container.end-bottom:after,.popover-container.end-bottom:before{bottom:100%;left:15%;transform:translate(-50%)}.popover-container.center-top:after,.popover-container.center-top:before{top:100%;left:50%;transform:translate(-50%) rotate(180deg)}.popover-container.start-top:after,.popover-container.start-top:before{top:100%;left:85%;transform:translate(-50%) rotate(180deg)}.popover-container.end-top:after,.popover-container.end-top:before{top:100%;left:15%;transform:translate(-50%) rotate(180deg)}.popover-container.end-center:after,.popover-container.end-center:before{right:100%;top:50%;transform:translateY(-50%) rotate(270deg)}.popover-container.start-center:after,.popover-container.start-center:before{left:100%;top:50%;transform:translateY(-50%) rotate(90deg)}.popover-container:after,.popover-container:before{content:\"\";display:block;position:absolute;width:0;height:0;border-style:solid}.popover-container:after{border-color:transparent transparent var(--bs-body-bg, #fff) transparent;border-width:var(--bs-popover-arrow-width)}.popover-container:before{border-color:transparent transparent var(--bs-border-color, #000) transparent;border-width:calc(var(--bs-popover-arrow-width) + 1px)}\n"] }]
|
|
47
47
|
}] });
|
|
48
48
|
|
|
49
49
|
class QuangPopoverDirective extends QuangBaseOverlayDirective {
|
|
@@ -52,10 +52,10 @@ class QuangPopoverDirective extends QuangBaseOverlayDirective {
|
|
|
52
52
|
this.targetComponentType = signal(QuangPopoverComponent);
|
|
53
53
|
this.content = input.required({ alias: 'quangPopover' });
|
|
54
54
|
}
|
|
55
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
56
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
55
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: QuangPopoverDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
56
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.9", type: QuangPopoverDirective, isStandalone: true, selector: "[quangPopover]", inputs: { content: { classPropertyName: "content", publicName: "quangPopover", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
57
57
|
}
|
|
58
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
58
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: QuangPopoverDirective, decorators: [{
|
|
59
59
|
type: Directive,
|
|
60
60
|
args: [{
|
|
61
61
|
selector: '[quangPopover]',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"quang-overlay-popover.mjs","sources":["../../../projects/quang/overlay/popover/popover.component.ts","../../../projects/quang/overlay/popover/popover.component.html","../../../projects/quang/overlay/popover/popover.directive.ts","../../../projects/quang/overlay/popover/quang-overlay-popover.ts"],"sourcesContent":["import { ConnectionPositionPair } from '@angular/cdk/overlay'\nimport { NgClass, NgIf, NgTemplateOutlet } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, TemplateRef, input, signal } from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\n\nimport { QuangBaseOverlayComponent } from 'quang/overlay/shared'\n\n@Component({\n selector: 'quang-popover',\n imports: [NgTemplateOutlet, NgClass, NgIf],\n templateUrl: './popover.component.html',\n styleUrl: './popover.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Popover component that can render custom content, passed from the outside as a `TemplateRef`\n * @example\n * <button\n [quangPopover]=\"popoverTest\"\n [scrollCloseThreshold]=\"undefined\"\n class=\"btn popover-test-button\"\n overlayPosition=\"top\"\n showMethod=\"click\"\n >\n {{ 'buttons.popover' | transloco }}\n <span>CLICK</span>\n </button>\n <ng-template #popoverTest> <span>test works!</span> <button type=\"button\">click!</button> </ng-template>\n */\nexport class QuangPopoverComponent implements QuangBaseOverlayComponent {\n
|
|
1
|
+
{"version":3,"file":"quang-overlay-popover.mjs","sources":["../../../projects/quang/overlay/popover/popover.component.ts","../../../projects/quang/overlay/popover/popover.component.html","../../../projects/quang/overlay/popover/popover.directive.ts","../../../projects/quang/overlay/popover/quang-overlay-popover.ts"],"sourcesContent":["import { ConnectionPositionPair } from '@angular/cdk/overlay'\nimport { NgClass, NgIf, NgTemplateOutlet } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, TemplateRef, input, signal } from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\n\nimport { QuangBaseOverlayComponent } from 'quang/overlay/shared'\n\n@Component({\n selector: 'quang-popover',\n imports: [NgTemplateOutlet, NgClass, NgIf],\n templateUrl: './popover.component.html',\n styleUrl: './popover.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Popover component that can render custom content, passed from the outside as a `TemplateRef`\n * @example\n * <button\n [quangPopover]=\"popoverTest\"\n [scrollCloseThreshold]=\"undefined\"\n class=\"btn popover-test-button\"\n overlayPosition=\"top\"\n showMethod=\"click\"\n >\n {{ 'buttons.popover' | transloco }}\n <span>CLICK</span>\n </button>\n <ng-template #popoverTest> <span>test works!</span> <button type=\"button\">click!</button> </ng-template>\n */\nexport class QuangPopoverComponent implements QuangBaseOverlayComponent {\n overlayContent = input<TemplateRef<any> | null>(null)\n\n positionPair = signal<ConnectionPositionPair | null>(null)\n\n payload = input<any>()\n\n getPopoverPosition = signal<string>('')\n\n onChangePositionPair$ = toObservable(this.positionPair)\n .pipe(takeUntilDestroyed())\n .subscribe((positionPair) => {\n const originX = positionPair?.originX\n const originY = positionPair?.originY\n if (originX && originY) {\n this.getPopoverPosition.set(`${originX}-${originY}`)\n } else {\n this.getPopoverPosition.set('')\n }\n })\n}\n","<div\n [ngClass]=\"getPopoverPosition()\"\n *ngIf=\"overlayContent()\"\n class=\"popover-container\"\n>\n <ng-container\n [ngTemplateOutlet]=\"overlayContent()\"\n [ngTemplateOutletContext]=\"{\n $implicit: payload(),\n }\"\n ></ng-container>\n</div>\n","import { ComponentType } from '@angular/cdk/portal'\nimport { Directive, TemplateRef, input, signal } from '@angular/core'\n\nimport { QuangBaseOverlayDirective } from 'quang/overlay/shared'\n\nimport { QuangPopoverComponent } from './popover.component'\n\n@Directive({\n selector: '[quangPopover]',\n})\nexport class QuangPopoverDirective extends QuangBaseOverlayDirective<QuangPopoverComponent> {\n override targetComponentType = signal<ComponentType<QuangPopoverComponent> | undefined>(QuangPopoverComponent)\n\n override content = input.required<TemplateRef<any> | null>({ alias: 'quangPopover' })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|