@sebgroup/green-angular 5.13.2 → 5.13.3
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/esm2022/lib/cell-table/cell-table.component.mjs +4 -4
- package/esm2022/src/lib/cell-table/cell-table.component.mjs +4 -4
- package/esm2022/src/v-angular/toast/toast.component.mjs +6 -3
- package/esm2022/v-angular/toast/toast.component.mjs +6 -3
- package/fesm2022/sebgroup-green-angular-src-lib-cell-table.mjs +3 -3
- package/fesm2022/sebgroup-green-angular-src-lib-cell-table.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-toast.mjs +5 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-toast.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-v-angular.mjs +5 -2
- package/fesm2022/sebgroup-green-angular-v-angular.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular.mjs +3 -3
- package/fesm2022/sebgroup-green-angular.mjs.map +1 -1
- package/lib/cell-table/cell-table.component.d.ts +1 -1
- package/package.json +8 -8
- package/src/lib/cell-table/cell-table.component.d.ts +1 -1
- package/src/v-angular/toast/toast.component.d.ts +1 -0
- package/v-angular/toast/toast.component.d.ts +1 -0
|
@@ -202,18 +202,18 @@ class NggCellTableComponent {
|
|
|
202
202
|
};
|
|
203
203
|
}
|
|
204
204
|
// ------- TRACKBY FOR STREAM ------------
|
|
205
|
-
|
|
205
|
+
trackByRowId(_, b) {
|
|
206
206
|
return b.rowId;
|
|
207
207
|
}
|
|
208
208
|
KeySelector(_, b) {
|
|
209
209
|
return b.tableKeySelector;
|
|
210
210
|
}
|
|
211
211
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCellTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
212
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggCellTableComponent, selector: "ngg-cell-table", inputs: { minWidth: "minWidth", overflowReverse: "overflowReverse", className: "className", headerList: "headerList", rows: "rows", clickableRows: "clickableRows", clickLabel: "clickLabel" }, outputs: { rowClicked: "rowClicked" }, viewQueries: [{ propertyName: "items", predicate: ["items"], descendants: true }], ngImport: i0, template: "<div #targetElement role=\"table\" [ngClass]=\"className\">\n <div class=\"cell-table-table d-flex flex-column\">\n <div\n *ngFor=\"let row of rows; trackBy:
|
|
212
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggCellTableComponent, selector: "ngg-cell-table", inputs: { minWidth: "minWidth", overflowReverse: "overflowReverse", className: "className", headerList: "headerList", rows: "rows", clickableRows: "clickableRows", clickLabel: "clickLabel" }, outputs: { rowClicked: "rowClicked" }, viewQueries: [{ propertyName: "items", predicate: ["items"], descendants: true }], ngImport: i0, template: "<div #targetElement role=\"table\" [ngClass]=\"className\">\n <div class=\"cell-table-table d-flex flex-column\">\n <div\n *ngFor=\"let row of rows; trackBy: trackByRowId\"\n (click)=\"handleClickRow(row)\"\n class=\"cell-table--row-wrapper\"\n role=\"rowgroup\"\n [class.is-clickable]=\"clickableRows\"\n >\n <div>\n <div #items [class.overflow-reverse]=\"overflowReverse\">\n <!-- Main header -->\n <div role=\"row\">\n <div\n nggCellTableItem\n [row]=\"mainHeader(row).value\"\n [valueType]=\"getValueTypeFromMain()\"\n [attr.valueType]=\"getValueTypeFromMain()\"\n [attr.id]=\"getTableKeySelector(row)\"\n role=\"rowheader\"\n aria-rowspan=\"3\"\n aria-colspan=\"3\"\n ></div>\n </div>\n <div role=\"row\">\n <div class=\"d-flex\">\n <!-- Sub Header -->\n <div\n nggCellTableItem\n class=\"sub-header py-0 fw-bold\"\n [row]=\"header.label\"\n [valueType]=\"getTableHeaderListValueFromNonMain(header)\"\n role=\"columnheader\"\n *ngFor=\"\n let header of headerNoneMain(headerList);\n trackBy: KeySelector\n \"\n ></div>\n </div>\n </div>\n\n <div role=\"row\">\n <!-- Sub Values -->\n <div class=\"d-flex\">\n <div\n nggCellTableItem\n class=\"sub-value py-0\"\n [row]=\"row[header.tableKeySelector]\"\n [valueType]=\"getTableHeaderListValueFromNonMain(header)\"\n [attr.valueType]=\"header.valueType\"\n role=\"cell\"\n *ngFor=\"\n let header of headerNoneMain(headerList);\n trackBy: KeySelector\n \"\n ></div>\n </div>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"clickableRows\"\n role=\"row\"\n class=\"d-grid align-items-center ms-4 me-4 cell-table--arrow-container\"\n >\n <div role=\"cell\">\n <div\n role=\"button\"\n [attr.aria-label]=\"clickLabel\"\n tabindex=\"0\"\n [attr.aria-describedby]=\"getTableKeySelector(row)\"\n (keydown.enter)=\"handleClickRow(row)\"\n >\n <svg\n data-prefix=\"far\"\n data-icon=\"chevron-right\"\n class=\"svg-inline--fa fa-chevron-right fa-w-10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 320 512\"\n >\n <path\n fill=\"currentColor\"\n d=\"M113.3 47.41l183.1 191.1c4.469 4.625 6.688 10.62 6.688 16.59s-2.219 11.97-6.688 16.59l-183.1 191.1c-9.152 9.594-24.34 9.906-33.9 .7187c-9.625-9.125-9.938-24.38-.7187-33.91l168-175.4L78.71 80.6c-9.219-9.5-8.906-24.78 .7187-33.91C88.99 37.5 104.2 37.82 113.3 47.41z\"\n ></path>\n </svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: ["[role=rowheader]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.5rem}[role=cell],[role=columnheader]{flex:1 1 0;margin-bottom:.125rem}.cell-table--row-wrapper{border-top:1px solid var(--gds-ref-pallet-base400);display:flex;padding:1rem}.cell-table--row-wrapper>div:first-child{flex:1 1 0}.cell-table--row-wrapper.is-clickable{cursor:pointer}.cell-table--row-wrapper.is-clickable:hover{background-color:var(--gds-ref-pallet-base100)}.cell-table--arrow-container{flex:0 0 auto;width:10px}.cell-table--arrow-container [tabindex=\"0\"]:focus{outline:2px solid var(--gds-ref-pallet-base800)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CellTableItemComponent, selector: "[nggCellTableItem]", inputs: ["row", "valueType", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
213
213
|
}
|
|
214
214
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCellTableComponent, decorators: [{
|
|
215
215
|
type: Component,
|
|
216
|
-
args: [{ selector: 'ngg-cell-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #targetElement role=\"table\" [ngClass]=\"className\">\n <div class=\"cell-table-table d-flex flex-column\">\n <div\n *ngFor=\"let row of rows; trackBy:
|
|
216
|
+
args: [{ selector: 'ngg-cell-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #targetElement role=\"table\" [ngClass]=\"className\">\n <div class=\"cell-table-table d-flex flex-column\">\n <div\n *ngFor=\"let row of rows; trackBy: trackByRowId\"\n (click)=\"handleClickRow(row)\"\n class=\"cell-table--row-wrapper\"\n role=\"rowgroup\"\n [class.is-clickable]=\"clickableRows\"\n >\n <div>\n <div #items [class.overflow-reverse]=\"overflowReverse\">\n <!-- Main header -->\n <div role=\"row\">\n <div\n nggCellTableItem\n [row]=\"mainHeader(row).value\"\n [valueType]=\"getValueTypeFromMain()\"\n [attr.valueType]=\"getValueTypeFromMain()\"\n [attr.id]=\"getTableKeySelector(row)\"\n role=\"rowheader\"\n aria-rowspan=\"3\"\n aria-colspan=\"3\"\n ></div>\n </div>\n <div role=\"row\">\n <div class=\"d-flex\">\n <!-- Sub Header -->\n <div\n nggCellTableItem\n class=\"sub-header py-0 fw-bold\"\n [row]=\"header.label\"\n [valueType]=\"getTableHeaderListValueFromNonMain(header)\"\n role=\"columnheader\"\n *ngFor=\"\n let header of headerNoneMain(headerList);\n trackBy: KeySelector\n \"\n ></div>\n </div>\n </div>\n\n <div role=\"row\">\n <!-- Sub Values -->\n <div class=\"d-flex\">\n <div\n nggCellTableItem\n class=\"sub-value py-0\"\n [row]=\"row[header.tableKeySelector]\"\n [valueType]=\"getTableHeaderListValueFromNonMain(header)\"\n [attr.valueType]=\"header.valueType\"\n role=\"cell\"\n *ngFor=\"\n let header of headerNoneMain(headerList);\n trackBy: KeySelector\n \"\n ></div>\n </div>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"clickableRows\"\n role=\"row\"\n class=\"d-grid align-items-center ms-4 me-4 cell-table--arrow-container\"\n >\n <div role=\"cell\">\n <div\n role=\"button\"\n [attr.aria-label]=\"clickLabel\"\n tabindex=\"0\"\n [attr.aria-describedby]=\"getTableKeySelector(row)\"\n (keydown.enter)=\"handleClickRow(row)\"\n >\n <svg\n data-prefix=\"far\"\n data-icon=\"chevron-right\"\n class=\"svg-inline--fa fa-chevron-right fa-w-10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 320 512\"\n >\n <path\n fill=\"currentColor\"\n d=\"M113.3 47.41l183.1 191.1c4.469 4.625 6.688 10.62 6.688 16.59s-2.219 11.97-6.688 16.59l-183.1 191.1c-9.152 9.594-24.34 9.906-33.9 .7187c-9.625-9.125-9.938-24.38-.7187-33.91l168-175.4L78.71 80.6c-9.219-9.5-8.906-24.78 .7187-33.91C88.99 37.5 104.2 37.82 113.3 47.41z\"\n ></path>\n </svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: ["[role=rowheader]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.5rem}[role=cell],[role=columnheader]{flex:1 1 0;margin-bottom:.125rem}.cell-table--row-wrapper{border-top:1px solid var(--gds-ref-pallet-base400);display:flex;padding:1rem}.cell-table--row-wrapper>div:first-child{flex:1 1 0}.cell-table--row-wrapper.is-clickable{cursor:pointer}.cell-table--row-wrapper.is-clickable:hover{background-color:var(--gds-ref-pallet-base100)}.cell-table--arrow-container{flex:0 0 auto;width:10px}.cell-table--arrow-container [tabindex=\"0\"]:focus{outline:2px solid var(--gds-ref-pallet-base800)}\n"] }]
|
|
217
217
|
}], propDecorators: { items: [{
|
|
218
218
|
type: ViewChildren,
|
|
219
219
|
args: ['items']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sebgroup-green-angular-src-lib-cell-table.mjs","sources":["../../../../libs/angular/src/lib/cell-table/cell-underline.directive.ts","../../../../libs/angular/src/lib/cell-table/cell-table-item.component.ts","../../../../libs/angular/src/lib/cell-table/cell-table.component.ts","../../../../libs/angular/src/lib/cell-table/cell-table.component.html","../../../../libs/angular/src/lib/cell-table/cell-table.module.ts","../../../../libs/angular/src/lib/cell-table/cell-table.types.ts","../../../../libs/angular/src/lib/cell-table/sebgroup-green-angular-src-lib-cell-table.ts"],"sourcesContent":["import {\n Directive,\n ElementRef,\n Input,\n OnChanges,\n OnInit,\n SimpleChanges,\n} from '@angular/core'\n\n@Directive({\n selector: '[nggSlidingUnderline]',\n})\nexport class SlidingUnderlineDirective implements OnInit, OnChanges {\n constructor(private element: ElementRef<HTMLElement>) {}\n\n @Input() public nggSlidingUnderline: any\n @Input() public key?: any\n @Input() public disabled?: boolean\n\n ngOnInit(): void {\n if (this.element?.nativeElement) {\n this.element.nativeElement.classList.add('slider')\n\n this.element.nativeElement.addEventListener('animationend', () => {\n this.element.nativeElement.classList.remove(\n 'left',\n 'slider-positive',\n 'slider-negative',\n )\n })\n }\n }\n\n ngOnChanges(changes: SimpleChanges) {\n if (!this.disabled) {\n if (\n changes.slidingUnderline &&\n changes.key &&\n !changes.slidingUnderline.isFirstChange() &&\n !changes?.key?.isFirstChange()\n ) {\n if (changes.key.currentValue === changes.key.previousValue) {\n this.addAnimation(\n changes.slidingUnderline.currentValue,\n changes.slidingUnderline.previousValue,\n )\n }\n } else {\n if (\n changes.slidingUnderline &&\n !changes.slidingUnderline.isFirstChange()\n ) {\n this.addAnimation(\n changes.slidingUnderline.currentValue,\n changes.slidingUnderline.previousValue,\n )\n }\n }\n }\n }\n\n addAnimation(current: any, previous: any) {\n if (current > previous)\n this.element.nativeElement.classList.add('slider-positive')\n else this.element.nativeElement.classList.add('slider-negative')\n this.element.nativeElement.classList.add('left')\n }\n}\n","import { Component, Input } from '@angular/core'\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser'\n\nimport { TableHeaderListValueType } from './cell-table.types'\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: '[nggCellTableItem]',\n template: `\n <ng-container [ngSwitch]=\"valueType\">\n <span *ngSwitchCase=\"'string'\">{{ row || '–' }}</span>\n <span *ngSwitchCase=\"'number'\">{{ (row | number) || '–' }}</span>\n <span *ngSwitchCase=\"'datetime'\">{{\n (row | date: 'HH:mm:ss') || '–'\n }}</span>\n <span *ngSwitchCase=\"'date'\">{{\n (row | date: 'YYYY-MM-dd') || '–'\n }}</span>\n <span\n *ngSwitchCase=\"'custom-html'\"\n [innerHtml]=\"transformHTML(row) || '–'\"\n ></span>\n <span *ngSwitchCase=\"'sign'\" [ngClass]=\"getSignColor(row)\">{{\n row || '–'\n }}</span>\n <span *ngSwitchCase=\"'pct'\">{{ row || '–' }}</span>\n <span *ngSwitchCase=\"'streamSign'\" [nggSlidingUnderline]=\"row\">{{\n row || '–'\n }}</span>\n <span *ngSwitchDefault>–</span>\n </ng-container>\n `,\n})\nexport class CellTableItemComponent {\n @Input() row: any\n @Input() valueType: TableHeaderListValueType = 'string'\n @Input() id = ''\n\n constructor(private sanitizer: DomSanitizer) {}\n\n getSignColor = (value: string | number) => {\n if (/[−-]/.test(String(value))) return 'text-danger'\n else if (/[1-9]/.test(String(value))) return 'text-success'\n return ''\n }\n\n transformHTML(value: string): SafeHtml {\n if (value && value.length) {\n return this.sanitizer.bypassSecurityTrustHtml(value)\n } else {\n return ''\n }\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n Output,\n QueryList,\n ViewChildren,\n} from '@angular/core'\n\nimport {\n TableHeaderListItem,\n TableHeaderListValueType,\n TableRow,\n} from './cell-table.types'\n\n@Component({\n selector: 'ngg-cell-table',\n templateUrl: './cell-table.component.html',\n styleUrls: ['./cell-table.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NggCellTableComponent {\n @ViewChildren('items') items: QueryList<ElementRef> =\n new QueryList<ElementRef>()\n\n /** Cell min-width to force same width on small screens */\n @Input() minWidth?: number\n\n /** Make the most left element wrap */\n @Input() overflowReverse = false\n\n /** Element class name */\n @Input() className?: string\n\n /** List of table headers */\n @Input() headerList: TableHeaderListItem[] = []\n\n /** List of data */\n @Input() rows: TableRow[] = []\n\n /** Make rows clickable and add arrow to the right */\n @Input() clickableRows = false\n\n /** Label for the chevron of clickable rows */\n @Input() clickLabel = 'View details'\n\n /** Callback when a row is clicked */\n @Output() rowClicked: EventEmitter<TableRow> = new EventEmitter()\n\n // ------------- EVENTS ------------------\n /**\n * handles the logic for when a row is clicked\n * @param {TableRowClickedEvent} value the TableRowClickedEvent\n */\n handleClickRow = (value: TableRow): void => {\n if (this.clickableRows) this.rowClicked.emit(value)\n }\n\n getValueTypeFromMain = (): TableHeaderListValueType => {\n const getMain = this.headerList.find((x) => x.main)\n if (getMain) return getMain.valueType || ''\n return ''\n }\n\n getTableHeaderListValueFromNonMain = (\n header: TableHeaderListItem,\n ): TableHeaderListValueType => {\n if (header.valueType) return header.valueType || ''\n return ''\n }\n\n mainHeader = (row: TableRow) => {\n const getMain = this.headerList.find((x) => x.main)\n if (row && getMain) {\n return {\n value: row[getMain.tableKeySelector],\n valueType: getMain.valueType || 'string',\n tableKeySelector: getMain.tableKeySelector,\n }\n }\n return {\n value: '-',\n valueType: 'string',\n tableKeySelector: '-',\n }\n }\n\n headerNoneMain = (headers: TableHeaderListItem[]) => {\n if (this.overflowReverse) return headers.filter((x) => !x.main).reverse()\n return headers.filter((x) => !x.main)\n }\n\n getTableKeySelector = (row: TableRow) => {\n return this.mainHeader(row).tableKeySelector + row.rowId\n }\n\n // ------- TRACKBY FOR STREAM ------------\n trackByrowId(_: any, b: TableRow) {\n return b.rowId\n }\n KeySelector(_: any, b: TableHeaderListItem) {\n return b.tableKeySelector\n }\n}\n","<div #targetElement role=\"table\" [ngClass]=\"className\">\n <div class=\"cell-table-table d-flex flex-column\">\n <div\n *ngFor=\"let row of rows; trackBy: trackByrowId\"\n (click)=\"handleClickRow(row)\"\n class=\"cell-table--row-wrapper\"\n role=\"rowgroup\"\n [class.is-clickable]=\"clickableRows\"\n >\n <div>\n <div #items [class.overflow-reverse]=\"overflowReverse\">\n <!-- Main header -->\n <div role=\"row\">\n <div\n nggCellTableItem\n [row]=\"mainHeader(row).value\"\n [valueType]=\"getValueTypeFromMain()\"\n [attr.valueType]=\"getValueTypeFromMain()\"\n [attr.id]=\"getTableKeySelector(row)\"\n role=\"rowheader\"\n aria-rowspan=\"3\"\n aria-colspan=\"3\"\n ></div>\n </div>\n <div role=\"row\">\n <div class=\"d-flex\">\n <!-- Sub Header -->\n <div\n nggCellTableItem\n class=\"sub-header py-0 fw-bold\"\n [row]=\"header.label\"\n [valueType]=\"getTableHeaderListValueFromNonMain(header)\"\n role=\"columnheader\"\n *ngFor=\"\n let header of headerNoneMain(headerList);\n trackBy: KeySelector\n \"\n ></div>\n </div>\n </div>\n\n <div role=\"row\">\n <!-- Sub Values -->\n <div class=\"d-flex\">\n <div\n nggCellTableItem\n class=\"sub-value py-0\"\n [row]=\"row[header.tableKeySelector]\"\n [valueType]=\"getTableHeaderListValueFromNonMain(header)\"\n [attr.valueType]=\"header.valueType\"\n role=\"cell\"\n *ngFor=\"\n let header of headerNoneMain(headerList);\n trackBy: KeySelector\n \"\n ></div>\n </div>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"clickableRows\"\n role=\"row\"\n class=\"d-grid align-items-center ms-4 me-4 cell-table--arrow-container\"\n >\n <div role=\"cell\">\n <div\n role=\"button\"\n [attr.aria-label]=\"clickLabel\"\n tabindex=\"0\"\n [attr.aria-describedby]=\"getTableKeySelector(row)\"\n (keydown.enter)=\"handleClickRow(row)\"\n >\n <svg\n data-prefix=\"far\"\n data-icon=\"chevron-right\"\n class=\"svg-inline--fa fa-chevron-right fa-w-10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 320 512\"\n >\n <path\n fill=\"currentColor\"\n d=\"M113.3 47.41l183.1 191.1c4.469 4.625 6.688 10.62 6.688 16.59s-2.219 11.97-6.688 16.59l-183.1 191.1c-9.152 9.594-24.34 9.906-33.9 .7187c-9.625-9.125-9.938-24.38-.7187-33.91l168-175.4L78.71 80.6c-9.219-9.5-8.906-24.78 .7187-33.91C88.99 37.5 104.2 37.82 113.3 47.41z\"\n ></path>\n </svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\n\nimport { CellTableItemComponent } from './cell-table-item.component'\nimport { NggCellTableComponent } from './cell-table.component'\nimport { SlidingUnderlineDirective } from './cell-underline.directive'\n\n@NgModule({\n imports: [CommonModule],\n exports: [NggCellTableComponent],\n declarations: [\n NggCellTableComponent,\n CellTableItemComponent,\n SlidingUnderlineDirective,\n ],\n})\nexport class NggCellTableModule {}\n","export default class Table {\n constructor(table: { data: TableRow[]; header: TableHeaderListItem[] }) {\n this.data = table.data\n this.header = table.header\n }\n data: TableRow[]\n header: TableHeaderListItem[]\n}\n\n/** The type of a data the values in a column represent */\nexport type TableHeaderListValueType =\n | 'number'\n | 'string'\n | 'date'\n | 'datetime'\n | 'bool'\n | 'custom-html'\n | 'sign'\n | 'streamSign'\n | ''\n\n/** Table Header List Item Interface */\nexport interface TableHeaderListItem<\n T extends Record<string, unknown> = Record<string, unknown>,\n> {\n /** The label displayed */\n label: string\n /** the key selector corresponding to to the TableList Item which this column is targeting */\n // tableKeySelector: keyof T;\n tableKeySelector: string\n /** the type of value: string, date or number */\n valueType?: TableHeaderListValueType\n\n /** the main field for stacked table */\n main?: boolean\n}\n\nexport interface TableRow {\n [prop: string]: any\n rowId: string | number\n}\n\n/** The information on the currently selected sort: column name, type and asc/desc */\nexport interface SortInfo<\n T extends Record<string, unknown> = { [k: string]: any },\n> {\n /** column name */\n column: keyof T\n /** is ascending (false for descending) */\n isAscending: boolean\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i3.SlidingUnderlineDirective","i1","i2.CellTableItemComponent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sebgroup-green-angular-src-lib-cell-table.mjs","sources":["../../../../libs/angular/src/lib/cell-table/cell-underline.directive.ts","../../../../libs/angular/src/lib/cell-table/cell-table-item.component.ts","../../../../libs/angular/src/lib/cell-table/cell-table.component.ts","../../../../libs/angular/src/lib/cell-table/cell-table.component.html","../../../../libs/angular/src/lib/cell-table/cell-table.module.ts","../../../../libs/angular/src/lib/cell-table/cell-table.types.ts","../../../../libs/angular/src/lib/cell-table/sebgroup-green-angular-src-lib-cell-table.ts"],"sourcesContent":["import {\n Directive,\n ElementRef,\n Input,\n OnChanges,\n OnInit,\n SimpleChanges,\n} from '@angular/core'\n\n@Directive({\n selector: '[nggSlidingUnderline]',\n})\nexport class SlidingUnderlineDirective implements OnInit, OnChanges {\n constructor(private element: ElementRef<HTMLElement>) {}\n\n @Input() public nggSlidingUnderline: any\n @Input() public key?: any\n @Input() public disabled?: boolean\n\n ngOnInit(): void {\n if (this.element?.nativeElement) {\n this.element.nativeElement.classList.add('slider')\n\n this.element.nativeElement.addEventListener('animationend', () => {\n this.element.nativeElement.classList.remove(\n 'left',\n 'slider-positive',\n 'slider-negative',\n )\n })\n }\n }\n\n ngOnChanges(changes: SimpleChanges) {\n if (!this.disabled) {\n if (\n changes.slidingUnderline &&\n changes.key &&\n !changes.slidingUnderline.isFirstChange() &&\n !changes?.key?.isFirstChange()\n ) {\n if (changes.key.currentValue === changes.key.previousValue) {\n this.addAnimation(\n changes.slidingUnderline.currentValue,\n changes.slidingUnderline.previousValue,\n )\n }\n } else {\n if (\n changes.slidingUnderline &&\n !changes.slidingUnderline.isFirstChange()\n ) {\n this.addAnimation(\n changes.slidingUnderline.currentValue,\n changes.slidingUnderline.previousValue,\n )\n }\n }\n }\n }\n\n addAnimation(current: any, previous: any) {\n if (current > previous)\n this.element.nativeElement.classList.add('slider-positive')\n else this.element.nativeElement.classList.add('slider-negative')\n this.element.nativeElement.classList.add('left')\n }\n}\n","import { Component, Input } from '@angular/core'\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser'\n\nimport { TableHeaderListValueType } from './cell-table.types'\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: '[nggCellTableItem]',\n template: `\n <ng-container [ngSwitch]=\"valueType\">\n <span *ngSwitchCase=\"'string'\">{{ row || '–' }}</span>\n <span *ngSwitchCase=\"'number'\">{{ (row | number) || '–' }}</span>\n <span *ngSwitchCase=\"'datetime'\">{{\n (row | date: 'HH:mm:ss') || '–'\n }}</span>\n <span *ngSwitchCase=\"'date'\">{{\n (row | date: 'YYYY-MM-dd') || '–'\n }}</span>\n <span\n *ngSwitchCase=\"'custom-html'\"\n [innerHtml]=\"transformHTML(row) || '–'\"\n ></span>\n <span *ngSwitchCase=\"'sign'\" [ngClass]=\"getSignColor(row)\">{{\n row || '–'\n }}</span>\n <span *ngSwitchCase=\"'pct'\">{{ row || '–' }}</span>\n <span *ngSwitchCase=\"'streamSign'\" [nggSlidingUnderline]=\"row\">{{\n row || '–'\n }}</span>\n <span *ngSwitchDefault>–</span>\n </ng-container>\n `,\n})\nexport class CellTableItemComponent {\n @Input() row: any\n @Input() valueType: TableHeaderListValueType = 'string'\n @Input() id = ''\n\n constructor(private sanitizer: DomSanitizer) {}\n\n getSignColor = (value: string | number) => {\n if (/[−-]/.test(String(value))) return 'text-danger'\n else if (/[1-9]/.test(String(value))) return 'text-success'\n return ''\n }\n\n transformHTML(value: string): SafeHtml {\n if (value && value.length) {\n return this.sanitizer.bypassSecurityTrustHtml(value)\n } else {\n return ''\n }\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n Output,\n QueryList,\n ViewChildren,\n} from '@angular/core'\n\nimport {\n TableHeaderListItem,\n TableHeaderListValueType,\n TableRow,\n} from './cell-table.types'\n\n@Component({\n selector: 'ngg-cell-table',\n templateUrl: './cell-table.component.html',\n styleUrls: ['./cell-table.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NggCellTableComponent {\n @ViewChildren('items') items: QueryList<ElementRef> =\n new QueryList<ElementRef>()\n\n /** Cell min-width to force same width on small screens */\n @Input() minWidth?: number\n\n /** Make the most left element wrap */\n @Input() overflowReverse = false\n\n /** Element class name */\n @Input() className?: string\n\n /** List of table headers */\n @Input() headerList: TableHeaderListItem[] = []\n\n /** List of data */\n @Input() rows: TableRow[] = []\n\n /** Make rows clickable and add arrow to the right */\n @Input() clickableRows = false\n\n /** Label for the chevron of clickable rows */\n @Input() clickLabel = 'View details'\n\n /** Callback when a row is clicked */\n @Output() rowClicked: EventEmitter<TableRow> = new EventEmitter()\n\n // ------------- EVENTS ------------------\n /**\n * handles the logic for when a row is clicked\n * @param {TableRowClickedEvent} value the TableRowClickedEvent\n */\n handleClickRow = (value: TableRow): void => {\n if (this.clickableRows) this.rowClicked.emit(value)\n }\n\n getValueTypeFromMain = (): TableHeaderListValueType => {\n const getMain = this.headerList.find((x) => x.main)\n if (getMain) return getMain.valueType || ''\n return ''\n }\n\n getTableHeaderListValueFromNonMain = (\n header: TableHeaderListItem,\n ): TableHeaderListValueType => {\n if (header.valueType) return header.valueType || ''\n return ''\n }\n\n mainHeader = (row: TableRow) => {\n const getMain = this.headerList.find((x) => x.main)\n if (row && getMain) {\n return {\n value: row[getMain.tableKeySelector],\n valueType: getMain.valueType || 'string',\n tableKeySelector: getMain.tableKeySelector,\n }\n }\n return {\n value: '-',\n valueType: 'string',\n tableKeySelector: '-',\n }\n }\n\n headerNoneMain = (headers: TableHeaderListItem[]) => {\n if (this.overflowReverse) return headers.filter((x) => !x.main).reverse()\n return headers.filter((x) => !x.main)\n }\n\n getTableKeySelector = (row: TableRow) => {\n return this.mainHeader(row).tableKeySelector + row.rowId\n }\n\n // ------- TRACKBY FOR STREAM ------------\n trackByRowId(_: any, b: TableRow) {\n return b.rowId\n }\n KeySelector(_: any, b: TableHeaderListItem) {\n return b.tableKeySelector\n }\n}\n","<div #targetElement role=\"table\" [ngClass]=\"className\">\n <div class=\"cell-table-table d-flex flex-column\">\n <div\n *ngFor=\"let row of rows; trackBy: trackByRowId\"\n (click)=\"handleClickRow(row)\"\n class=\"cell-table--row-wrapper\"\n role=\"rowgroup\"\n [class.is-clickable]=\"clickableRows\"\n >\n <div>\n <div #items [class.overflow-reverse]=\"overflowReverse\">\n <!-- Main header -->\n <div role=\"row\">\n <div\n nggCellTableItem\n [row]=\"mainHeader(row).value\"\n [valueType]=\"getValueTypeFromMain()\"\n [attr.valueType]=\"getValueTypeFromMain()\"\n [attr.id]=\"getTableKeySelector(row)\"\n role=\"rowheader\"\n aria-rowspan=\"3\"\n aria-colspan=\"3\"\n ></div>\n </div>\n <div role=\"row\">\n <div class=\"d-flex\">\n <!-- Sub Header -->\n <div\n nggCellTableItem\n class=\"sub-header py-0 fw-bold\"\n [row]=\"header.label\"\n [valueType]=\"getTableHeaderListValueFromNonMain(header)\"\n role=\"columnheader\"\n *ngFor=\"\n let header of headerNoneMain(headerList);\n trackBy: KeySelector\n \"\n ></div>\n </div>\n </div>\n\n <div role=\"row\">\n <!-- Sub Values -->\n <div class=\"d-flex\">\n <div\n nggCellTableItem\n class=\"sub-value py-0\"\n [row]=\"row[header.tableKeySelector]\"\n [valueType]=\"getTableHeaderListValueFromNonMain(header)\"\n [attr.valueType]=\"header.valueType\"\n role=\"cell\"\n *ngFor=\"\n let header of headerNoneMain(headerList);\n trackBy: KeySelector\n \"\n ></div>\n </div>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"clickableRows\"\n role=\"row\"\n class=\"d-grid align-items-center ms-4 me-4 cell-table--arrow-container\"\n >\n <div role=\"cell\">\n <div\n role=\"button\"\n [attr.aria-label]=\"clickLabel\"\n tabindex=\"0\"\n [attr.aria-describedby]=\"getTableKeySelector(row)\"\n (keydown.enter)=\"handleClickRow(row)\"\n >\n <svg\n data-prefix=\"far\"\n data-icon=\"chevron-right\"\n class=\"svg-inline--fa fa-chevron-right fa-w-10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 320 512\"\n >\n <path\n fill=\"currentColor\"\n d=\"M113.3 47.41l183.1 191.1c4.469 4.625 6.688 10.62 6.688 16.59s-2.219 11.97-6.688 16.59l-183.1 191.1c-9.152 9.594-24.34 9.906-33.9 .7187c-9.625-9.125-9.938-24.38-.7187-33.91l168-175.4L78.71 80.6c-9.219-9.5-8.906-24.78 .7187-33.91C88.99 37.5 104.2 37.82 113.3 47.41z\"\n ></path>\n </svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\n\nimport { CellTableItemComponent } from './cell-table-item.component'\nimport { NggCellTableComponent } from './cell-table.component'\nimport { SlidingUnderlineDirective } from './cell-underline.directive'\n\n@NgModule({\n imports: [CommonModule],\n exports: [NggCellTableComponent],\n declarations: [\n NggCellTableComponent,\n CellTableItemComponent,\n SlidingUnderlineDirective,\n ],\n})\nexport class NggCellTableModule {}\n","export default class Table {\n constructor(table: { data: TableRow[]; header: TableHeaderListItem[] }) {\n this.data = table.data\n this.header = table.header\n }\n data: TableRow[]\n header: TableHeaderListItem[]\n}\n\n/** The type of a data the values in a column represent */\nexport type TableHeaderListValueType =\n | 'number'\n | 'string'\n | 'date'\n | 'datetime'\n | 'bool'\n | 'custom-html'\n | 'sign'\n | 'streamSign'\n | ''\n\n/** Table Header List Item Interface */\nexport interface TableHeaderListItem<\n T extends Record<string, unknown> = Record<string, unknown>,\n> {\n /** The label displayed */\n label: string\n /** the key selector corresponding to to the TableList Item which this column is targeting */\n // tableKeySelector: keyof T;\n tableKeySelector: string\n /** the type of value: string, date or number */\n valueType?: TableHeaderListValueType\n\n /** the main field for stacked table */\n main?: boolean\n}\n\nexport interface TableRow {\n [prop: string]: any\n rowId: string | number\n}\n\n/** The information on the currently selected sort: column name, type and asc/desc */\nexport interface SortInfo<\n T extends Record<string, unknown> = { [k: string]: any },\n> {\n /** column name */\n column: keyof T\n /** is ascending (false for descending) */\n isAscending: boolean\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i3.SlidingUnderlineDirective","i1","i2.CellTableItemComponent"],"mappings":"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"}
|
|
@@ -115,13 +115,16 @@ class ToastComponent {
|
|
|
115
115
|
removeMessage(message) {
|
|
116
116
|
this.toastMessageService.removeMessage(message);
|
|
117
117
|
}
|
|
118
|
+
trackByMessageIndex(index, message) {
|
|
119
|
+
return index;
|
|
120
|
+
}
|
|
118
121
|
ngOnDestroy() {
|
|
119
122
|
if (this.toastMessagesSubscription) {
|
|
120
123
|
this.toastMessagesSubscription.unsubscribe();
|
|
121
124
|
}
|
|
122
125
|
}
|
|
123
126
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToastComponent, deps: [{ token: ToastMessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
124
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ToastComponent, selector: "nggv-toast", inputs: { closeButtonAriaLabel: "closeButtonAriaLabel" }, ngImport: i0, template: "<output class=\"messages-container\" aria-live=\"polite\">\n <div\n class=\"message\"\n *ngFor=\"let message of messages\"\n [ngClass]=\"message.type\"\n @toastAnimation\n (mouseenter)=\"onMouseEnter(message)\"\n (mouseleave)=\"onMouseLeave(message)\"\n >\n <div class=\"content\" *transloco=\"let t; read: message.translocoScope\">\n <div class=\"message-type-icon-wrapper\">\n <ng-container *ngIf=\"message.type === 'success'\">\n <i>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n fill=\"white\"\n ></path>\n </svg>\n </i>\n </ng-container>\n <ng-container\n *ngIf=\"message.type === 'error' || message.type === 'warning'\"\n >\n <i>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM10.8682 7.42857H13.1318C13.3777 7.42857 13.5731 7.635 13.5597 7.8805L13.2948 12.7376C13.2824 12.9649 13.0945 13.1429 12.8669 13.1429H11.1331C10.9055 13.1429 10.7176 12.9649 10.7052 12.7376L10.4402 7.8805C10.4269 7.635 10.6223 7.42857 10.8682 7.42857ZM12 17.0714C11.0927 17.0714 10.3571 16.3359 10.3571 15.4286C10.3571 14.5213 11.0927 13.7857 12 13.7857C12.9073 13.7857 13.6429 14.5213 13.6429 15.4286C13.6429 16.3359 12.9073 17.0714 12 17.0714Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n </ng-container>\n <ng-container *ngIf=\"message.type === 'information'\">\n <i>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM12 7.07143C12.8284 7.07143 13.5 7.743 13.5 8.57143C13.5 9.39986 12.8284 10.0714 12 10.0714C11.1716 10.0714 10.5 9.39986 10.5 8.57143C10.5 7.743 11.1716 7.07143 12 7.07143ZM14 16.1429C14 16.3795 13.8081 16.5714 13.5714 16.5714H10.4286C10.1919 16.5714 10 16.3795 10 16.1429V15.2857C10 15.049 10.1919 14.8571 10.4286 14.8571H10.8571V12.5714H10.4286C10.1919 12.5714 10 12.3795 10 12.1429V11.2857C10 11.049 10.1919 10.8571 10.4286 10.8571H12.7143C12.951 10.8571 13.1429 11.049 13.1429 11.2857V14.8571H13.5714C13.8081 14.8571 14 15.049 14 15.2857V16.1429Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n </ng-container>\n </div>\n <div class=\"text-content\">\n @if (message.template) {\n <ng-template\n [ngTemplateOutlet]=\"message.template\"\n [ngTemplateOutletContext]=\"{ $implicit: message.templateContext }\"\n ></ng-template>\n } @else {\n @if (message.titleText) {\n <div>{{ t(message.titleText) }}</div>\n }\n @if (message.bodyText) {\n <div class=\"text-body-content\">\n {{ t(message.bodyText) }}\n </div>\n }\n }\n </div>\n <button\n class=\"close-icon-button\"\n [ngClass]=\"{ information: message.type === 'information' }\"\n (click)=\"removeMessage(message)\"\n [attr.aria-label]=\"closeButtonAriaLabel\"\n >\n <gds-icon-cross-small\n class=\"close-icon\"\n *nggCoreElement\n ></gds-icon-cross-small>\n </button>\n </div>\n </div>\n</output>\n", styles: [":host .messages-container{position:fixed;bottom:1rem;right:1rem;z-index:9999}:host .message{position:relative;font-size:1rem;max-width:22rem;min-width:22rem;min-height:3rem;box-shadow:0 2px 6px #00000026;margin-top:1rem}:host .content{display:flex;height:100%;padding:0;justify-content:space-between}:host .text-content{margin-top:1rem;margin-bottom:1rem;width:100%}:host .text-body-content{padding-top:1.5rem}:host .message-type-icon-wrapper{padding:1rem}:host .message-type-icon-wrapper i{display:block;width:1.25rem;height:1.25rem}:host .close-icon-button{box-sizing:border-box;display:grid;place-content:center;width:2rem;height:2rem;flex-shrink:0;font-size:1rem;line-height:1.5rem;margin:.5rem;background:transparent;border:none;color:inherit;padding:0;cursor:pointer;min-height:32px}:host .close-icon-button:hover{color:#333;border-radius:100%}:host .close-icon-button:not(.information):hover{background-color:#fff}:host .close-icon-button.information:hover{background-color:#dedede}:host .success{background-color:#308800;color:#fff}:host .error{background-color:#d81a1a;color:#fff}:host .warning{background-color:#ffc500;color:#333}:host .information{background-color:#333;color:#e9e9e9}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }], animations: [
|
|
127
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ToastComponent, selector: "nggv-toast", inputs: { closeButtonAriaLabel: "closeButtonAriaLabel" }, ngImport: i0, template: "<output class=\"messages-container\" aria-live=\"polite\">\n <div\n class=\"message\"\n *ngFor=\"let message of messages; trackBy: trackByMessageIndex\"\n [ngClass]=\"message.type\"\n @toastAnimation\n (mouseenter)=\"onMouseEnter(message)\"\n (mouseleave)=\"onMouseLeave(message)\"\n >\n <div class=\"content\" *transloco=\"let t; read: message.translocoScope\">\n <div class=\"message-type-icon-wrapper\">\n <ng-container *ngIf=\"message.type === 'success'\">\n <i>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n fill=\"white\"\n ></path>\n </svg>\n </i>\n </ng-container>\n <ng-container\n *ngIf=\"message.type === 'error' || message.type === 'warning'\"\n >\n <i>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM10.8682 7.42857H13.1318C13.3777 7.42857 13.5731 7.635 13.5597 7.8805L13.2948 12.7376C13.2824 12.9649 13.0945 13.1429 12.8669 13.1429H11.1331C10.9055 13.1429 10.7176 12.9649 10.7052 12.7376L10.4402 7.8805C10.4269 7.635 10.6223 7.42857 10.8682 7.42857ZM12 17.0714C11.0927 17.0714 10.3571 16.3359 10.3571 15.4286C10.3571 14.5213 11.0927 13.7857 12 13.7857C12.9073 13.7857 13.6429 14.5213 13.6429 15.4286C13.6429 16.3359 12.9073 17.0714 12 17.0714Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n </ng-container>\n <ng-container *ngIf=\"message.type === 'information'\">\n <i>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM12 7.07143C12.8284 7.07143 13.5 7.743 13.5 8.57143C13.5 9.39986 12.8284 10.0714 12 10.0714C11.1716 10.0714 10.5 9.39986 10.5 8.57143C10.5 7.743 11.1716 7.07143 12 7.07143ZM14 16.1429C14 16.3795 13.8081 16.5714 13.5714 16.5714H10.4286C10.1919 16.5714 10 16.3795 10 16.1429V15.2857C10 15.049 10.1919 14.8571 10.4286 14.8571H10.8571V12.5714H10.4286C10.1919 12.5714 10 12.3795 10 12.1429V11.2857C10 11.049 10.1919 10.8571 10.4286 10.8571H12.7143C12.951 10.8571 13.1429 11.049 13.1429 11.2857V14.8571H13.5714C13.8081 14.8571 14 15.049 14 15.2857V16.1429Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n </ng-container>\n </div>\n <div class=\"text-content\">\n @if (message.template) {\n <ng-template\n [ngTemplateOutlet]=\"message.template\"\n [ngTemplateOutletContext]=\"{ $implicit: message.templateContext }\"\n ></ng-template>\n } @else {\n @if (message.titleText) {\n <div>{{ t(message.titleText) }}</div>\n }\n @if (message.bodyText) {\n <div class=\"text-body-content\">\n {{ t(message.bodyText) }}\n </div>\n }\n }\n </div>\n <button\n class=\"close-icon-button\"\n [ngClass]=\"{ information: message.type === 'information' }\"\n (click)=\"removeMessage(message)\"\n [attr.aria-label]=\"closeButtonAriaLabel\"\n >\n <gds-icon-cross-small\n class=\"close-icon\"\n *nggCoreElement\n ></gds-icon-cross-small>\n </button>\n </div>\n </div>\n</output>\n", styles: [":host .messages-container{position:fixed;bottom:1rem;right:1rem;z-index:9999}:host .message{position:relative;font-size:1rem;max-width:22rem;min-width:22rem;min-height:3rem;box-shadow:0 2px 6px #00000026;margin-top:1rem}:host .content{display:flex;height:100%;padding:0;justify-content:space-between}:host .text-content{margin-top:1rem;margin-bottom:1rem;width:100%}:host .text-body-content{padding-top:1.5rem}:host .message-type-icon-wrapper{padding:1rem}:host .message-type-icon-wrapper i{display:block;width:1.25rem;height:1.25rem}:host .close-icon-button{box-sizing:border-box;display:grid;place-content:center;width:2rem;height:2rem;flex-shrink:0;font-size:1rem;line-height:1.5rem;margin:.5rem;background:transparent;border:none;color:inherit;padding:0;cursor:pointer;min-height:32px}:host .close-icon-button:hover{color:#333;border-radius:100%}:host .close-icon-button:not(.information):hover{background-color:#fff}:host .close-icon-button.information:hover{background-color:#dedede}:host .success{background-color:#308800;color:#fff}:host .error{background-color:#d81a1a;color:#fff}:host .warning{background-color:#ffc500;color:#333}:host .information{background-color:#333;color:#e9e9e9}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }], animations: [
|
|
125
128
|
trigger('toastAnimation', [
|
|
126
129
|
transition(':enter', [
|
|
127
130
|
style({ opacity: 0, transform: 'translateY(100%)' }),
|
|
@@ -145,7 +148,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
145
148
|
animate('300ms ease-out', style({ opacity: 0, transform: 'translateY(100%)' })),
|
|
146
149
|
]),
|
|
147
150
|
]),
|
|
148
|
-
], template: "<output class=\"messages-container\" aria-live=\"polite\">\n <div\n class=\"message\"\n *ngFor=\"let message of messages\"\n [ngClass]=\"message.type\"\n @toastAnimation\n (mouseenter)=\"onMouseEnter(message)\"\n (mouseleave)=\"onMouseLeave(message)\"\n >\n <div class=\"content\" *transloco=\"let t; read: message.translocoScope\">\n <div class=\"message-type-icon-wrapper\">\n <ng-container *ngIf=\"message.type === 'success'\">\n <i>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n fill=\"white\"\n ></path>\n </svg>\n </i>\n </ng-container>\n <ng-container\n *ngIf=\"message.type === 'error' || message.type === 'warning'\"\n >\n <i>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM10.8682 7.42857H13.1318C13.3777 7.42857 13.5731 7.635 13.5597 7.8805L13.2948 12.7376C13.2824 12.9649 13.0945 13.1429 12.8669 13.1429H11.1331C10.9055 13.1429 10.7176 12.9649 10.7052 12.7376L10.4402 7.8805C10.4269 7.635 10.6223 7.42857 10.8682 7.42857ZM12 17.0714C11.0927 17.0714 10.3571 16.3359 10.3571 15.4286C10.3571 14.5213 11.0927 13.7857 12 13.7857C12.9073 13.7857 13.6429 14.5213 13.6429 15.4286C13.6429 16.3359 12.9073 17.0714 12 17.0714Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n </ng-container>\n <ng-container *ngIf=\"message.type === 'information'\">\n <i>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM12 7.07143C12.8284 7.07143 13.5 7.743 13.5 8.57143C13.5 9.39986 12.8284 10.0714 12 10.0714C11.1716 10.0714 10.5 9.39986 10.5 8.57143C10.5 7.743 11.1716 7.07143 12 7.07143ZM14 16.1429C14 16.3795 13.8081 16.5714 13.5714 16.5714H10.4286C10.1919 16.5714 10 16.3795 10 16.1429V15.2857C10 15.049 10.1919 14.8571 10.4286 14.8571H10.8571V12.5714H10.4286C10.1919 12.5714 10 12.3795 10 12.1429V11.2857C10 11.049 10.1919 10.8571 10.4286 10.8571H12.7143C12.951 10.8571 13.1429 11.049 13.1429 11.2857V14.8571H13.5714C13.8081 14.8571 14 15.049 14 15.2857V16.1429Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n </ng-container>\n </div>\n <div class=\"text-content\">\n @if (message.template) {\n <ng-template\n [ngTemplateOutlet]=\"message.template\"\n [ngTemplateOutletContext]=\"{ $implicit: message.templateContext }\"\n ></ng-template>\n } @else {\n @if (message.titleText) {\n <div>{{ t(message.titleText) }}</div>\n }\n @if (message.bodyText) {\n <div class=\"text-body-content\">\n {{ t(message.bodyText) }}\n </div>\n }\n }\n </div>\n <button\n class=\"close-icon-button\"\n [ngClass]=\"{ information: message.type === 'information' }\"\n (click)=\"removeMessage(message)\"\n [attr.aria-label]=\"closeButtonAriaLabel\"\n >\n <gds-icon-cross-small\n class=\"close-icon\"\n *nggCoreElement\n ></gds-icon-cross-small>\n </button>\n </div>\n </div>\n</output>\n", styles: [":host .messages-container{position:fixed;bottom:1rem;right:1rem;z-index:9999}:host .message{position:relative;font-size:1rem;max-width:22rem;min-width:22rem;min-height:3rem;box-shadow:0 2px 6px #00000026;margin-top:1rem}:host .content{display:flex;height:100%;padding:0;justify-content:space-between}:host .text-content{margin-top:1rem;margin-bottom:1rem;width:100%}:host .text-body-content{padding-top:1.5rem}:host .message-type-icon-wrapper{padding:1rem}:host .message-type-icon-wrapper i{display:block;width:1.25rem;height:1.25rem}:host .close-icon-button{box-sizing:border-box;display:grid;place-content:center;width:2rem;height:2rem;flex-shrink:0;font-size:1rem;line-height:1.5rem;margin:.5rem;background:transparent;border:none;color:inherit;padding:0;cursor:pointer;min-height:32px}:host .close-icon-button:hover{color:#333;border-radius:100%}:host .close-icon-button:not(.information):hover{background-color:#fff}:host .close-icon-button.information:hover{background-color:#dedede}:host .success{background-color:#308800;color:#fff}:host .error{background-color:#d81a1a;color:#fff}:host .warning{background-color:#ffc500;color:#333}:host .information{background-color:#333;color:#e9e9e9}\n"] }]
|
|
151
|
+
], template: "<output class=\"messages-container\" aria-live=\"polite\">\n <div\n class=\"message\"\n *ngFor=\"let message of messages; trackBy: trackByMessageIndex\"\n [ngClass]=\"message.type\"\n @toastAnimation\n (mouseenter)=\"onMouseEnter(message)\"\n (mouseleave)=\"onMouseLeave(message)\"\n >\n <div class=\"content\" *transloco=\"let t; read: message.translocoScope\">\n <div class=\"message-type-icon-wrapper\">\n <ng-container *ngIf=\"message.type === 'success'\">\n <i>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n fill=\"white\"\n ></path>\n </svg>\n </i>\n </ng-container>\n <ng-container\n *ngIf=\"message.type === 'error' || message.type === 'warning'\"\n >\n <i>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM10.8682 7.42857H13.1318C13.3777 7.42857 13.5731 7.635 13.5597 7.8805L13.2948 12.7376C13.2824 12.9649 13.0945 13.1429 12.8669 13.1429H11.1331C10.9055 13.1429 10.7176 12.9649 10.7052 12.7376L10.4402 7.8805C10.4269 7.635 10.6223 7.42857 10.8682 7.42857ZM12 17.0714C11.0927 17.0714 10.3571 16.3359 10.3571 15.4286C10.3571 14.5213 11.0927 13.7857 12 13.7857C12.9073 13.7857 13.6429 14.5213 13.6429 15.4286C13.6429 16.3359 12.9073 17.0714 12 17.0714Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n </ng-container>\n <ng-container *ngIf=\"message.type === 'information'\">\n <i>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM12 7.07143C12.8284 7.07143 13.5 7.743 13.5 8.57143C13.5 9.39986 12.8284 10.0714 12 10.0714C11.1716 10.0714 10.5 9.39986 10.5 8.57143C10.5 7.743 11.1716 7.07143 12 7.07143ZM14 16.1429C14 16.3795 13.8081 16.5714 13.5714 16.5714H10.4286C10.1919 16.5714 10 16.3795 10 16.1429V15.2857C10 15.049 10.1919 14.8571 10.4286 14.8571H10.8571V12.5714H10.4286C10.1919 12.5714 10 12.3795 10 12.1429V11.2857C10 11.049 10.1919 10.8571 10.4286 10.8571H12.7143C12.951 10.8571 13.1429 11.049 13.1429 11.2857V14.8571H13.5714C13.8081 14.8571 14 15.049 14 15.2857V16.1429Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n </ng-container>\n </div>\n <div class=\"text-content\">\n @if (message.template) {\n <ng-template\n [ngTemplateOutlet]=\"message.template\"\n [ngTemplateOutletContext]=\"{ $implicit: message.templateContext }\"\n ></ng-template>\n } @else {\n @if (message.titleText) {\n <div>{{ t(message.titleText) }}</div>\n }\n @if (message.bodyText) {\n <div class=\"text-body-content\">\n {{ t(message.bodyText) }}\n </div>\n }\n }\n </div>\n <button\n class=\"close-icon-button\"\n [ngClass]=\"{ information: message.type === 'information' }\"\n (click)=\"removeMessage(message)\"\n [attr.aria-label]=\"closeButtonAriaLabel\"\n >\n <gds-icon-cross-small\n class=\"close-icon\"\n *nggCoreElement\n ></gds-icon-cross-small>\n </button>\n </div>\n </div>\n</output>\n", styles: [":host .messages-container{position:fixed;bottom:1rem;right:1rem;z-index:9999}:host .message{position:relative;font-size:1rem;max-width:22rem;min-width:22rem;min-height:3rem;box-shadow:0 2px 6px #00000026;margin-top:1rem}:host .content{display:flex;height:100%;padding:0;justify-content:space-between}:host .text-content{margin-top:1rem;margin-bottom:1rem;width:100%}:host .text-body-content{padding-top:1.5rem}:host .message-type-icon-wrapper{padding:1rem}:host .message-type-icon-wrapper i{display:block;width:1.25rem;height:1.25rem}:host .close-icon-button{box-sizing:border-box;display:grid;place-content:center;width:2rem;height:2rem;flex-shrink:0;font-size:1rem;line-height:1.5rem;margin:.5rem;background:transparent;border:none;color:inherit;padding:0;cursor:pointer;min-height:32px}:host .close-icon-button:hover{color:#333;border-radius:100%}:host .close-icon-button:not(.information):hover{background-color:#fff}:host .close-icon-button.information:hover{background-color:#dedede}:host .success{background-color:#308800;color:#fff}:host .error{background-color:#d81a1a;color:#fff}:host .warning{background-color:#ffc500;color:#333}:host .information{background-color:#333;color:#e9e9e9}\n"] }]
|
|
149
152
|
}], ctorParameters: () => [{ type: ToastMessageService }], propDecorators: { closeButtonAriaLabel: [{
|
|
150
153
|
type: Input
|
|
151
154
|
}] } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sebgroup-green-angular-src-v-angular-toast.mjs","sources":["../../../../libs/angular/src/v-angular/toast/toast.models.ts","../../../../libs/angular/src/v-angular/toast/toast-message.service.ts","../../../../libs/angular/src/v-angular/toast/toast.component.ts","../../../../libs/angular/src/v-angular/toast/toast.component.html","../../../../libs/angular/src/v-angular/toast/toast.module.ts","../../../../libs/angular/src/v-angular/toast/index.ts","../../../../libs/angular/src/v-angular/toast/sebgroup-green-angular-src-v-angular-toast.ts"],"sourcesContent":["import { TemplateRef } from '@angular/core'\n\nexport interface ToastMessage {\n type: MessageType | 'success' | 'information' | 'error' | 'warning'\n translocoScope?: string\n titleText?: string\n bodyText?: string\n template?: TemplateRef<any>\n templateContext?: any\n timeout?: number\n timeoutId?: number\n timeoutStartTime?: number\n}\n\nexport enum MessageType {\n Success = 'success',\n Information = 'information',\n Error = 'error',\n Warning = 'warning',\n}\n","import { Injectable, TemplateRef } from '@angular/core'\nimport { Observable, Subject } from 'rxjs'\n\nimport { MessageType, ToastMessage } from './toast.models'\n\n@Injectable({\n providedIn: 'root',\n})\nexport class ToastMessageService {\n private messages: ToastMessage[] = []\n private messageSubject = new Subject<ToastMessage[]>()\n\n add(message: ToastMessage): void {\n const {\n type,\n translocoScope,\n titleText,\n template,\n templateContext,\n bodyText,\n timeout,\n } = message\n const newMessage: ToastMessage = {\n type: type ? type : MessageType.Information,\n translocoScope,\n titleText: titleText ?? '',\n bodyText,\n timeout,\n template,\n templateContext,\n }\n\n this.removeMessage(newMessage)\n this.messages.push(newMessage)\n this.messageSubject.next([...this.messages])\n this.setMessageRemoveTimeout(newMessage)\n }\n\n addMessage(\n type: 'success' | 'information' | 'error' | 'warning',\n translocoScope: string,\n titleText: string,\n bodyText?: string,\n timeout?: number,\n template?: TemplateRef<any>,\n templateContext?: any,\n ): void\n addMessage(\n type: MessageType,\n translocoScope: string,\n titleText: string,\n bodyText?: string,\n timeout?: number,\n template?: TemplateRef<any>,\n templateContext?: any,\n ): void {\n const newMessage: ToastMessage = {\n type,\n translocoScope,\n titleText,\n bodyText,\n timeout,\n template,\n templateContext,\n }\n\n this.removeMessage(newMessage)\n this.messages.push(newMessage)\n this.messageSubject.next([...this.messages])\n this.setMessageRemoveTimeout(newMessage)\n }\n\n removeMessage(message: ToastMessage): void {\n const index = this.getDuplicateMessageIndex(message.titleText ?? '')\n this.removeMessageByIndex(index)\n }\n\n pauseMessageTimeout(message: ToastMessage): void {\n if (message.timeoutStartTime && message.timeout) {\n const remainingTime =\n message.timeoutStartTime - Date.now() + message.timeout * 1000\n\n message.timeout = remainingTime / 1000\n window.clearTimeout(message.timeoutId)\n }\n }\n\n resumeMessageTimeout(message: ToastMessage): void {\n this.setMessageRemoveTimeout(message)\n }\n\n getMessages(): Observable<ToastMessage[]> {\n return this.messageSubject.asObservable()\n }\n\n private getDuplicateMessageIndex(newMessageText: string): number {\n return this.messages.findIndex(\n (message) => message.titleText === newMessageText,\n )\n }\n\n private removeMessageByIndex(id: number): void {\n if (id !== -1) {\n this.messages.splice(id, 1)\n this.messageSubject.next([...this.messages])\n }\n }\n\n private setMessageRemoveTimeout(newMessage: ToastMessage): void {\n if (newMessage.timeout) {\n newMessage.timeoutId = window.setTimeout(\n () => this.removeMessage(newMessage),\n newMessage.timeout * 1000,\n )\n newMessage.timeoutStartTime = Date.now()\n }\n }\n}\n","import { animate, style, transition, trigger } from '@angular/animations'\nimport { Component, Input, OnDestroy, OnInit } from '@angular/core'\nimport { Subscription } from 'rxjs'\n\nimport { ToastMessageService } from './toast-message.service'\nimport { ToastMessage } from './toast.models'\n\nimport '@sebgroup/green-core/components/icon/icons/cross-small.js'\n\n@Component({\n selector: 'nggv-toast',\n templateUrl: './toast.component.html',\n styleUrls: ['./toast.component.scss'],\n animations: [\n trigger('toastAnimation', [\n transition(':enter', [\n style({ opacity: 0, transform: 'translateY(100%)' }),\n animate(\n '300ms ease-in',\n style({ opacity: 1, transform: 'translateY(0)' }),\n ),\n ]),\n transition(':leave', [\n animate(\n '300ms ease-out',\n style({ opacity: 0, transform: 'translateY(100%)' }),\n ),\n ]),\n ]),\n ],\n})\nexport class ToastComponent implements OnInit, OnDestroy {\n @Input() closeButtonAriaLabel?: string\n\n private toastMessagesSubscription!: Subscription\n\n messages: ToastMessage[] = []\n\n constructor(private toastMessageService: ToastMessageService) {}\n\n ngOnInit() {\n this.toastMessagesSubscription = this.toastMessageService\n .getMessages()\n .subscribe((messages) => (this.messages = messages))\n }\n\n onMouseEnter(message: ToastMessage) {\n this.toastMessageService.pauseMessageTimeout(message)\n }\n\n onMouseLeave(message: ToastMessage) {\n this.toastMessageService.resumeMessageTimeout(message)\n }\n\n removeMessage(message: ToastMessage) {\n this.toastMessageService.removeMessage(message)\n }\n\n ngOnDestroy(): void {\n if (this.toastMessagesSubscription) {\n this.toastMessagesSubscription.unsubscribe()\n }\n }\n}\n","<output class=\"messages-container\" aria-live=\"polite\">\n <div\n class=\"message\"\n *ngFor=\"let message of messages\"\n [ngClass]=\"message.type\"\n @toastAnimation\n (mouseenter)=\"onMouseEnter(message)\"\n (mouseleave)=\"onMouseLeave(message)\"\n >\n <div class=\"content\" *transloco=\"let t; read: message.translocoScope\">\n <div class=\"message-type-icon-wrapper\">\n <ng-container *ngIf=\"message.type === 'success'\">\n <i>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n fill=\"white\"\n ></path>\n </svg>\n </i>\n </ng-container>\n <ng-container\n *ngIf=\"message.type === 'error' || message.type === 'warning'\"\n >\n <i>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM10.8682 7.42857H13.1318C13.3777 7.42857 13.5731 7.635 13.5597 7.8805L13.2948 12.7376C13.2824 12.9649 13.0945 13.1429 12.8669 13.1429H11.1331C10.9055 13.1429 10.7176 12.9649 10.7052 12.7376L10.4402 7.8805C10.4269 7.635 10.6223 7.42857 10.8682 7.42857ZM12 17.0714C11.0927 17.0714 10.3571 16.3359 10.3571 15.4286C10.3571 14.5213 11.0927 13.7857 12 13.7857C12.9073 13.7857 13.6429 14.5213 13.6429 15.4286C13.6429 16.3359 12.9073 17.0714 12 17.0714Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n </ng-container>\n <ng-container *ngIf=\"message.type === 'information'\">\n <i>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM12 7.07143C12.8284 7.07143 13.5 7.743 13.5 8.57143C13.5 9.39986 12.8284 10.0714 12 10.0714C11.1716 10.0714 10.5 9.39986 10.5 8.57143C10.5 7.743 11.1716 7.07143 12 7.07143ZM14 16.1429C14 16.3795 13.8081 16.5714 13.5714 16.5714H10.4286C10.1919 16.5714 10 16.3795 10 16.1429V15.2857C10 15.049 10.1919 14.8571 10.4286 14.8571H10.8571V12.5714H10.4286C10.1919 12.5714 10 12.3795 10 12.1429V11.2857C10 11.049 10.1919 10.8571 10.4286 10.8571H12.7143C12.951 10.8571 13.1429 11.049 13.1429 11.2857V14.8571H13.5714C13.8081 14.8571 14 15.049 14 15.2857V16.1429Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n </ng-container>\n </div>\n <div class=\"text-content\">\n @if (message.template) {\n <ng-template\n [ngTemplateOutlet]=\"message.template\"\n [ngTemplateOutletContext]=\"{ $implicit: message.templateContext }\"\n ></ng-template>\n } @else {\n @if (message.titleText) {\n <div>{{ t(message.titleText) }}</div>\n }\n @if (message.bodyText) {\n <div class=\"text-body-content\">\n {{ t(message.bodyText) }}\n </div>\n }\n }\n </div>\n <button\n class=\"close-icon-button\"\n [ngClass]=\"{ information: message.type === 'information' }\"\n (click)=\"removeMessage(message)\"\n [attr.aria-label]=\"closeButtonAriaLabel\"\n >\n <gds-icon-cross-small\n class=\"close-icon\"\n *nggCoreElement\n ></gds-icon-cross-small>\n </button>\n </div>\n </div>\n</output>\n","import { CommonModule } from '@angular/common'\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'\nimport { TranslocoModule } from '@jsverse/transloco'\n\nimport { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared'\nimport { ToastComponent } from './toast.component'\n\n@NgModule({\n declarations: [ToastComponent],\n imports: [CommonModule, TranslocoModule, NggCoreWrapperModule],\n exports: [ToastComponent],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class NggvToastModule {}\n","/*\n * Public API Surface of toast\n */\n\nexport * from './toast-message.service'\nexport * from './toast.component'\nexport * from './toast.models'\nexport * from './toast.module'\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.ToastMessageService"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sebgroup-green-angular-src-v-angular-toast.mjs","sources":["../../../../libs/angular/src/v-angular/toast/toast.models.ts","../../../../libs/angular/src/v-angular/toast/toast-message.service.ts","../../../../libs/angular/src/v-angular/toast/toast.component.ts","../../../../libs/angular/src/v-angular/toast/toast.component.html","../../../../libs/angular/src/v-angular/toast/toast.module.ts","../../../../libs/angular/src/v-angular/toast/index.ts","../../../../libs/angular/src/v-angular/toast/sebgroup-green-angular-src-v-angular-toast.ts"],"sourcesContent":["import { TemplateRef } from '@angular/core'\n\nexport interface ToastMessage {\n type: MessageType | 'success' | 'information' | 'error' | 'warning'\n translocoScope?: string\n titleText?: string\n bodyText?: string\n template?: TemplateRef<any>\n templateContext?: any\n timeout?: number\n timeoutId?: number\n timeoutStartTime?: number\n}\n\nexport enum MessageType {\n Success = 'success',\n Information = 'information',\n Error = 'error',\n Warning = 'warning',\n}\n","import { Injectable, TemplateRef } from '@angular/core'\nimport { Observable, Subject } from 'rxjs'\n\nimport { MessageType, ToastMessage } from './toast.models'\n\n@Injectable({\n providedIn: 'root',\n})\nexport class ToastMessageService {\n private messages: ToastMessage[] = []\n private messageSubject = new Subject<ToastMessage[]>()\n\n add(message: ToastMessage): void {\n const {\n type,\n translocoScope,\n titleText,\n template,\n templateContext,\n bodyText,\n timeout,\n } = message\n const newMessage: ToastMessage = {\n type: type ? type : MessageType.Information,\n translocoScope,\n titleText: titleText ?? '',\n bodyText,\n timeout,\n template,\n templateContext,\n }\n\n this.removeMessage(newMessage)\n this.messages.push(newMessage)\n this.messageSubject.next([...this.messages])\n this.setMessageRemoveTimeout(newMessage)\n }\n\n addMessage(\n type: 'success' | 'information' | 'error' | 'warning',\n translocoScope: string,\n titleText: string,\n bodyText?: string,\n timeout?: number,\n template?: TemplateRef<any>,\n templateContext?: any,\n ): void\n addMessage(\n type: MessageType,\n translocoScope: string,\n titleText: string,\n bodyText?: string,\n timeout?: number,\n template?: TemplateRef<any>,\n templateContext?: any,\n ): void {\n const newMessage: ToastMessage = {\n type,\n translocoScope,\n titleText,\n bodyText,\n timeout,\n template,\n templateContext,\n }\n\n this.removeMessage(newMessage)\n this.messages.push(newMessage)\n this.messageSubject.next([...this.messages])\n this.setMessageRemoveTimeout(newMessage)\n }\n\n removeMessage(message: ToastMessage): void {\n const index = this.getDuplicateMessageIndex(message.titleText ?? '')\n this.removeMessageByIndex(index)\n }\n\n pauseMessageTimeout(message: ToastMessage): void {\n if (message.timeoutStartTime && message.timeout) {\n const remainingTime =\n message.timeoutStartTime - Date.now() + message.timeout * 1000\n\n message.timeout = remainingTime / 1000\n window.clearTimeout(message.timeoutId)\n }\n }\n\n resumeMessageTimeout(message: ToastMessage): void {\n this.setMessageRemoveTimeout(message)\n }\n\n getMessages(): Observable<ToastMessage[]> {\n return this.messageSubject.asObservable()\n }\n\n private getDuplicateMessageIndex(newMessageText: string): number {\n return this.messages.findIndex(\n (message) => message.titleText === newMessageText,\n )\n }\n\n private removeMessageByIndex(id: number): void {\n if (id !== -1) {\n this.messages.splice(id, 1)\n this.messageSubject.next([...this.messages])\n }\n }\n\n private setMessageRemoveTimeout(newMessage: ToastMessage): void {\n if (newMessage.timeout) {\n newMessage.timeoutId = window.setTimeout(\n () => this.removeMessage(newMessage),\n newMessage.timeout * 1000,\n )\n newMessage.timeoutStartTime = Date.now()\n }\n }\n}\n","import { animate, style, transition, trigger } from '@angular/animations'\nimport { Component, Input, OnDestroy, OnInit } from '@angular/core'\nimport { Subscription } from 'rxjs'\n\nimport { ToastMessageService } from './toast-message.service'\nimport { ToastMessage } from './toast.models'\n\nimport '@sebgroup/green-core/components/icon/icons/cross-small.js'\n\n@Component({\n selector: 'nggv-toast',\n templateUrl: './toast.component.html',\n styleUrls: ['./toast.component.scss'],\n animations: [\n trigger('toastAnimation', [\n transition(':enter', [\n style({ opacity: 0, transform: 'translateY(100%)' }),\n animate(\n '300ms ease-in',\n style({ opacity: 1, transform: 'translateY(0)' }),\n ),\n ]),\n transition(':leave', [\n animate(\n '300ms ease-out',\n style({ opacity: 0, transform: 'translateY(100%)' }),\n ),\n ]),\n ]),\n ],\n})\nexport class ToastComponent implements OnInit, OnDestroy {\n @Input() closeButtonAriaLabel?: string\n\n private toastMessagesSubscription!: Subscription\n\n messages: ToastMessage[] = []\n\n constructor(private toastMessageService: ToastMessageService) {}\n\n ngOnInit() {\n this.toastMessagesSubscription = this.toastMessageService\n .getMessages()\n .subscribe((messages) => (this.messages = messages))\n }\n\n onMouseEnter(message: ToastMessage) {\n this.toastMessageService.pauseMessageTimeout(message)\n }\n\n onMouseLeave(message: ToastMessage) {\n this.toastMessageService.resumeMessageTimeout(message)\n }\n\n removeMessage(message: ToastMessage) {\n this.toastMessageService.removeMessage(message)\n }\n\n trackByMessageIndex(index: number, message: ToastMessage): number {\n return index;\n }\n\n ngOnDestroy(): void {\n if (this.toastMessagesSubscription) {\n this.toastMessagesSubscription.unsubscribe()\n }\n }\n}\n","<output class=\"messages-container\" aria-live=\"polite\">\n <div\n class=\"message\"\n *ngFor=\"let message of messages; trackBy: trackByMessageIndex\"\n [ngClass]=\"message.type\"\n @toastAnimation\n (mouseenter)=\"onMouseEnter(message)\"\n (mouseleave)=\"onMouseLeave(message)\"\n >\n <div class=\"content\" *transloco=\"let t; read: message.translocoScope\">\n <div class=\"message-type-icon-wrapper\">\n <ng-container *ngIf=\"message.type === 'success'\">\n <i>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n fill=\"white\"\n ></path>\n </svg>\n </i>\n </ng-container>\n <ng-container\n *ngIf=\"message.type === 'error' || message.type === 'warning'\"\n >\n <i>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM10.8682 7.42857H13.1318C13.3777 7.42857 13.5731 7.635 13.5597 7.8805L13.2948 12.7376C13.2824 12.9649 13.0945 13.1429 12.8669 13.1429H11.1331C10.9055 13.1429 10.7176 12.9649 10.7052 12.7376L10.4402 7.8805C10.4269 7.635 10.6223 7.42857 10.8682 7.42857ZM12 17.0714C11.0927 17.0714 10.3571 16.3359 10.3571 15.4286C10.3571 14.5213 11.0927 13.7857 12 13.7857C12.9073 13.7857 13.6429 14.5213 13.6429 15.4286C13.6429 16.3359 12.9073 17.0714 12 17.0714Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n </ng-container>\n <ng-container *ngIf=\"message.type === 'information'\">\n <i>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM12 7.07143C12.8284 7.07143 13.5 7.743 13.5 8.57143C13.5 9.39986 12.8284 10.0714 12 10.0714C11.1716 10.0714 10.5 9.39986 10.5 8.57143C10.5 7.743 11.1716 7.07143 12 7.07143ZM14 16.1429C14 16.3795 13.8081 16.5714 13.5714 16.5714H10.4286C10.1919 16.5714 10 16.3795 10 16.1429V15.2857C10 15.049 10.1919 14.8571 10.4286 14.8571H10.8571V12.5714H10.4286C10.1919 12.5714 10 12.3795 10 12.1429V11.2857C10 11.049 10.1919 10.8571 10.4286 10.8571H12.7143C12.951 10.8571 13.1429 11.049 13.1429 11.2857V14.8571H13.5714C13.8081 14.8571 14 15.049 14 15.2857V16.1429Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n </ng-container>\n </div>\n <div class=\"text-content\">\n @if (message.template) {\n <ng-template\n [ngTemplateOutlet]=\"message.template\"\n [ngTemplateOutletContext]=\"{ $implicit: message.templateContext }\"\n ></ng-template>\n } @else {\n @if (message.titleText) {\n <div>{{ t(message.titleText) }}</div>\n }\n @if (message.bodyText) {\n <div class=\"text-body-content\">\n {{ t(message.bodyText) }}\n </div>\n }\n }\n </div>\n <button\n class=\"close-icon-button\"\n [ngClass]=\"{ information: message.type === 'information' }\"\n (click)=\"removeMessage(message)\"\n [attr.aria-label]=\"closeButtonAriaLabel\"\n >\n <gds-icon-cross-small\n class=\"close-icon\"\n *nggCoreElement\n ></gds-icon-cross-small>\n </button>\n </div>\n </div>\n</output>\n","import { CommonModule } from '@angular/common'\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'\nimport { TranslocoModule } from '@jsverse/transloco'\n\nimport { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared'\nimport { ToastComponent } from './toast.component'\n\n@NgModule({\n declarations: [ToastComponent],\n imports: [CommonModule, TranslocoModule, NggCoreWrapperModule],\n exports: [ToastComponent],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class NggvToastModule {}\n","/*\n * Public API Surface of toast\n */\n\nexport * from './toast-message.service'\nexport * from './toast.component'\nexport * from './toast.models'\nexport * from './toast.module'\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.ToastMessageService"],"mappings":"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"}
|
|
@@ -7422,13 +7422,16 @@ class ToastComponent {
|
|
|
7422
7422
|
removeMessage(message) {
|
|
7423
7423
|
this.toastMessageService.removeMessage(message);
|
|
7424
7424
|
}
|
|
7425
|
+
trackByMessageIndex(index, message) {
|
|
7426
|
+
return index;
|
|
7427
|
+
}
|
|
7425
7428
|
ngOnDestroy() {
|
|
7426
7429
|
if (this.toastMessagesSubscription) {
|
|
7427
7430
|
this.toastMessagesSubscription.unsubscribe();
|
|
7428
7431
|
}
|
|
7429
7432
|
}
|
|
7430
7433
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToastComponent, deps: [{ token: ToastMessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7431
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ToastComponent, selector: "nggv-toast", inputs: { closeButtonAriaLabel: "closeButtonAriaLabel" }, ngImport: i0, template: "<output class=\"messages-container\" aria-live=\"polite\">\n <div\n class=\"message\"\n *ngFor=\"let message of messages\"\n [ngClass]=\"message.type\"\n @toastAnimation\n (mouseenter)=\"onMouseEnter(message)\"\n (mouseleave)=\"onMouseLeave(message)\"\n >\n <div class=\"content\" *transloco=\"let t; read: message.translocoScope\">\n <div class=\"message-type-icon-wrapper\">\n <ng-container *ngIf=\"message.type === 'success'\">\n <i>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n fill=\"white\"\n ></path>\n </svg>\n </i>\n </ng-container>\n <ng-container\n *ngIf=\"message.type === 'error' || message.type === 'warning'\"\n >\n <i>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM10.8682 7.42857H13.1318C13.3777 7.42857 13.5731 7.635 13.5597 7.8805L13.2948 12.7376C13.2824 12.9649 13.0945 13.1429 12.8669 13.1429H11.1331C10.9055 13.1429 10.7176 12.9649 10.7052 12.7376L10.4402 7.8805C10.4269 7.635 10.6223 7.42857 10.8682 7.42857ZM12 17.0714C11.0927 17.0714 10.3571 16.3359 10.3571 15.4286C10.3571 14.5213 11.0927 13.7857 12 13.7857C12.9073 13.7857 13.6429 14.5213 13.6429 15.4286C13.6429 16.3359 12.9073 17.0714 12 17.0714Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n </ng-container>\n <ng-container *ngIf=\"message.type === 'information'\">\n <i>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM12 7.07143C12.8284 7.07143 13.5 7.743 13.5 8.57143C13.5 9.39986 12.8284 10.0714 12 10.0714C11.1716 10.0714 10.5 9.39986 10.5 8.57143C10.5 7.743 11.1716 7.07143 12 7.07143ZM14 16.1429C14 16.3795 13.8081 16.5714 13.5714 16.5714H10.4286C10.1919 16.5714 10 16.3795 10 16.1429V15.2857C10 15.049 10.1919 14.8571 10.4286 14.8571H10.8571V12.5714H10.4286C10.1919 12.5714 10 12.3795 10 12.1429V11.2857C10 11.049 10.1919 10.8571 10.4286 10.8571H12.7143C12.951 10.8571 13.1429 11.049 13.1429 11.2857V14.8571H13.5714C13.8081 14.8571 14 15.049 14 15.2857V16.1429Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n </ng-container>\n </div>\n <div class=\"text-content\">\n @if (message.template) {\n <ng-template\n [ngTemplateOutlet]=\"message.template\"\n [ngTemplateOutletContext]=\"{ $implicit: message.templateContext }\"\n ></ng-template>\n } @else {\n @if (message.titleText) {\n <div>{{ t(message.titleText) }}</div>\n }\n @if (message.bodyText) {\n <div class=\"text-body-content\">\n {{ t(message.bodyText) }}\n </div>\n }\n }\n </div>\n <button\n class=\"close-icon-button\"\n [ngClass]=\"{ information: message.type === 'information' }\"\n (click)=\"removeMessage(message)\"\n [attr.aria-label]=\"closeButtonAriaLabel\"\n >\n <gds-icon-cross-small\n class=\"close-icon\"\n *nggCoreElement\n ></gds-icon-cross-small>\n </button>\n </div>\n </div>\n</output>\n", styles: [":host .messages-container{position:fixed;bottom:1rem;right:1rem;z-index:9999}:host .message{position:relative;font-size:1rem;max-width:22rem;min-width:22rem;min-height:3rem;box-shadow:0 2px 6px #00000026;margin-top:1rem}:host .content{display:flex;height:100%;padding:0;justify-content:space-between}:host .text-content{margin-top:1rem;margin-bottom:1rem;width:100%}:host .text-body-content{padding-top:1.5rem}:host .message-type-icon-wrapper{padding:1rem}:host .message-type-icon-wrapper i{display:block;width:1.25rem;height:1.25rem}:host .close-icon-button{box-sizing:border-box;display:grid;place-content:center;width:2rem;height:2rem;flex-shrink:0;font-size:1rem;line-height:1.5rem;margin:.5rem;background:transparent;border:none;color:inherit;padding:0;cursor:pointer;min-height:32px}:host .close-icon-button:hover{color:#333;border-radius:100%}:host .close-icon-button:not(.information):hover{background-color:#fff}:host .close-icon-button.information:hover{background-color:#dedede}:host .success{background-color:#308800;color:#fff}:host .error{background-color:#d81a1a;color:#fff}:host .warning{background-color:#ffc500;color:#333}:host .information{background-color:#333;color:#e9e9e9}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }], animations: [
|
|
7434
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ToastComponent, selector: "nggv-toast", inputs: { closeButtonAriaLabel: "closeButtonAriaLabel" }, ngImport: i0, template: "<output class=\"messages-container\" aria-live=\"polite\">\n <div\n class=\"message\"\n *ngFor=\"let message of messages; trackBy: trackByMessageIndex\"\n [ngClass]=\"message.type\"\n @toastAnimation\n (mouseenter)=\"onMouseEnter(message)\"\n (mouseleave)=\"onMouseLeave(message)\"\n >\n <div class=\"content\" *transloco=\"let t; read: message.translocoScope\">\n <div class=\"message-type-icon-wrapper\">\n <ng-container *ngIf=\"message.type === 'success'\">\n <i>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n fill=\"white\"\n ></path>\n </svg>\n </i>\n </ng-container>\n <ng-container\n *ngIf=\"message.type === 'error' || message.type === 'warning'\"\n >\n <i>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM10.8682 7.42857H13.1318C13.3777 7.42857 13.5731 7.635 13.5597 7.8805L13.2948 12.7376C13.2824 12.9649 13.0945 13.1429 12.8669 13.1429H11.1331C10.9055 13.1429 10.7176 12.9649 10.7052 12.7376L10.4402 7.8805C10.4269 7.635 10.6223 7.42857 10.8682 7.42857ZM12 17.0714C11.0927 17.0714 10.3571 16.3359 10.3571 15.4286C10.3571 14.5213 11.0927 13.7857 12 13.7857C12.9073 13.7857 13.6429 14.5213 13.6429 15.4286C13.6429 16.3359 12.9073 17.0714 12 17.0714Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n </ng-container>\n <ng-container *ngIf=\"message.type === 'information'\">\n <i>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM12 7.07143C12.8284 7.07143 13.5 7.743 13.5 8.57143C13.5 9.39986 12.8284 10.0714 12 10.0714C11.1716 10.0714 10.5 9.39986 10.5 8.57143C10.5 7.743 11.1716 7.07143 12 7.07143ZM14 16.1429C14 16.3795 13.8081 16.5714 13.5714 16.5714H10.4286C10.1919 16.5714 10 16.3795 10 16.1429V15.2857C10 15.049 10.1919 14.8571 10.4286 14.8571H10.8571V12.5714H10.4286C10.1919 12.5714 10 12.3795 10 12.1429V11.2857C10 11.049 10.1919 10.8571 10.4286 10.8571H12.7143C12.951 10.8571 13.1429 11.049 13.1429 11.2857V14.8571H13.5714C13.8081 14.8571 14 15.049 14 15.2857V16.1429Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n </ng-container>\n </div>\n <div class=\"text-content\">\n @if (message.template) {\n <ng-template\n [ngTemplateOutlet]=\"message.template\"\n [ngTemplateOutletContext]=\"{ $implicit: message.templateContext }\"\n ></ng-template>\n } @else {\n @if (message.titleText) {\n <div>{{ t(message.titleText) }}</div>\n }\n @if (message.bodyText) {\n <div class=\"text-body-content\">\n {{ t(message.bodyText) }}\n </div>\n }\n }\n </div>\n <button\n class=\"close-icon-button\"\n [ngClass]=\"{ information: message.type === 'information' }\"\n (click)=\"removeMessage(message)\"\n [attr.aria-label]=\"closeButtonAriaLabel\"\n >\n <gds-icon-cross-small\n class=\"close-icon\"\n *nggCoreElement\n ></gds-icon-cross-small>\n </button>\n </div>\n </div>\n</output>\n", styles: [":host .messages-container{position:fixed;bottom:1rem;right:1rem;z-index:9999}:host .message{position:relative;font-size:1rem;max-width:22rem;min-width:22rem;min-height:3rem;box-shadow:0 2px 6px #00000026;margin-top:1rem}:host .content{display:flex;height:100%;padding:0;justify-content:space-between}:host .text-content{margin-top:1rem;margin-bottom:1rem;width:100%}:host .text-body-content{padding-top:1.5rem}:host .message-type-icon-wrapper{padding:1rem}:host .message-type-icon-wrapper i{display:block;width:1.25rem;height:1.25rem}:host .close-icon-button{box-sizing:border-box;display:grid;place-content:center;width:2rem;height:2rem;flex-shrink:0;font-size:1rem;line-height:1.5rem;margin:.5rem;background:transparent;border:none;color:inherit;padding:0;cursor:pointer;min-height:32px}:host .close-icon-button:hover{color:#333;border-radius:100%}:host .close-icon-button:not(.information):hover{background-color:#fff}:host .close-icon-button.information:hover{background-color:#dedede}:host .success{background-color:#308800;color:#fff}:host .error{background-color:#d81a1a;color:#fff}:host .warning{background-color:#ffc500;color:#333}:host .information{background-color:#333;color:#e9e9e9}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }], animations: [
|
|
7432
7435
|
trigger('toastAnimation', [
|
|
7433
7436
|
transition(':enter', [
|
|
7434
7437
|
style({ opacity: 0, transform: 'translateY(100%)' }),
|
|
@@ -7452,7 +7455,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7452
7455
|
animate('300ms ease-out', style({ opacity: 0, transform: 'translateY(100%)' })),
|
|
7453
7456
|
]),
|
|
7454
7457
|
]),
|
|
7455
|
-
], template: "<output class=\"messages-container\" aria-live=\"polite\">\n <div\n class=\"message\"\n *ngFor=\"let message of messages\"\n [ngClass]=\"message.type\"\n @toastAnimation\n (mouseenter)=\"onMouseEnter(message)\"\n (mouseleave)=\"onMouseLeave(message)\"\n >\n <div class=\"content\" *transloco=\"let t; read: message.translocoScope\">\n <div class=\"message-type-icon-wrapper\">\n <ng-container *ngIf=\"message.type === 'success'\">\n <i>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n fill=\"white\"\n ></path>\n </svg>\n </i>\n </ng-container>\n <ng-container\n *ngIf=\"message.type === 'error' || message.type === 'warning'\"\n >\n <i>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM10.8682 7.42857H13.1318C13.3777 7.42857 13.5731 7.635 13.5597 7.8805L13.2948 12.7376C13.2824 12.9649 13.0945 13.1429 12.8669 13.1429H11.1331C10.9055 13.1429 10.7176 12.9649 10.7052 12.7376L10.4402 7.8805C10.4269 7.635 10.6223 7.42857 10.8682 7.42857ZM12 17.0714C11.0927 17.0714 10.3571 16.3359 10.3571 15.4286C10.3571 14.5213 11.0927 13.7857 12 13.7857C12.9073 13.7857 13.6429 14.5213 13.6429 15.4286C13.6429 16.3359 12.9073 17.0714 12 17.0714Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n </ng-container>\n <ng-container *ngIf=\"message.type === 'information'\">\n <i>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM12 7.07143C12.8284 7.07143 13.5 7.743 13.5 8.57143C13.5 9.39986 12.8284 10.0714 12 10.0714C11.1716 10.0714 10.5 9.39986 10.5 8.57143C10.5 7.743 11.1716 7.07143 12 7.07143ZM14 16.1429C14 16.3795 13.8081 16.5714 13.5714 16.5714H10.4286C10.1919 16.5714 10 16.3795 10 16.1429V15.2857C10 15.049 10.1919 14.8571 10.4286 14.8571H10.8571V12.5714H10.4286C10.1919 12.5714 10 12.3795 10 12.1429V11.2857C10 11.049 10.1919 10.8571 10.4286 10.8571H12.7143C12.951 10.8571 13.1429 11.049 13.1429 11.2857V14.8571H13.5714C13.8081 14.8571 14 15.049 14 15.2857V16.1429Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n </ng-container>\n </div>\n <div class=\"text-content\">\n @if (message.template) {\n <ng-template\n [ngTemplateOutlet]=\"message.template\"\n [ngTemplateOutletContext]=\"{ $implicit: message.templateContext }\"\n ></ng-template>\n } @else {\n @if (message.titleText) {\n <div>{{ t(message.titleText) }}</div>\n }\n @if (message.bodyText) {\n <div class=\"text-body-content\">\n {{ t(message.bodyText) }}\n </div>\n }\n }\n </div>\n <button\n class=\"close-icon-button\"\n [ngClass]=\"{ information: message.type === 'information' }\"\n (click)=\"removeMessage(message)\"\n [attr.aria-label]=\"closeButtonAriaLabel\"\n >\n <gds-icon-cross-small\n class=\"close-icon\"\n *nggCoreElement\n ></gds-icon-cross-small>\n </button>\n </div>\n </div>\n</output>\n", styles: [":host .messages-container{position:fixed;bottom:1rem;right:1rem;z-index:9999}:host .message{position:relative;font-size:1rem;max-width:22rem;min-width:22rem;min-height:3rem;box-shadow:0 2px 6px #00000026;margin-top:1rem}:host .content{display:flex;height:100%;padding:0;justify-content:space-between}:host .text-content{margin-top:1rem;margin-bottom:1rem;width:100%}:host .text-body-content{padding-top:1.5rem}:host .message-type-icon-wrapper{padding:1rem}:host .message-type-icon-wrapper i{display:block;width:1.25rem;height:1.25rem}:host .close-icon-button{box-sizing:border-box;display:grid;place-content:center;width:2rem;height:2rem;flex-shrink:0;font-size:1rem;line-height:1.5rem;margin:.5rem;background:transparent;border:none;color:inherit;padding:0;cursor:pointer;min-height:32px}:host .close-icon-button:hover{color:#333;border-radius:100%}:host .close-icon-button:not(.information):hover{background-color:#fff}:host .close-icon-button.information:hover{background-color:#dedede}:host .success{background-color:#308800;color:#fff}:host .error{background-color:#d81a1a;color:#fff}:host .warning{background-color:#ffc500;color:#333}:host .information{background-color:#333;color:#e9e9e9}\n"] }]
|
|
7458
|
+
], template: "<output class=\"messages-container\" aria-live=\"polite\">\n <div\n class=\"message\"\n *ngFor=\"let message of messages; trackBy: trackByMessageIndex\"\n [ngClass]=\"message.type\"\n @toastAnimation\n (mouseenter)=\"onMouseEnter(message)\"\n (mouseleave)=\"onMouseLeave(message)\"\n >\n <div class=\"content\" *transloco=\"let t; read: message.translocoScope\">\n <div class=\"message-type-icon-wrapper\">\n <ng-container *ngIf=\"message.type === 'success'\">\n <i>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n fill=\"white\"\n ></path>\n </svg>\n </i>\n </ng-container>\n <ng-container\n *ngIf=\"message.type === 'error' || message.type === 'warning'\"\n >\n <i>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM10.8682 7.42857H13.1318C13.3777 7.42857 13.5731 7.635 13.5597 7.8805L13.2948 12.7376C13.2824 12.9649 13.0945 13.1429 12.8669 13.1429H11.1331C10.9055 13.1429 10.7176 12.9649 10.7052 12.7376L10.4402 7.8805C10.4269 7.635 10.6223 7.42857 10.8682 7.42857ZM12 17.0714C11.0927 17.0714 10.3571 16.3359 10.3571 15.4286C10.3571 14.5213 11.0927 13.7857 12 13.7857C12.9073 13.7857 13.6429 14.5213 13.6429 15.4286C13.6429 16.3359 12.9073 17.0714 12 17.0714Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n </ng-container>\n <ng-container *ngIf=\"message.type === 'information'\">\n <i>\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM12 7.07143C12.8284 7.07143 13.5 7.743 13.5 8.57143C13.5 9.39986 12.8284 10.0714 12 10.0714C11.1716 10.0714 10.5 9.39986 10.5 8.57143C10.5 7.743 11.1716 7.07143 12 7.07143ZM14 16.1429C14 16.3795 13.8081 16.5714 13.5714 16.5714H10.4286C10.1919 16.5714 10 16.3795 10 16.1429V15.2857C10 15.049 10.1919 14.8571 10.4286 14.8571H10.8571V12.5714H10.4286C10.1919 12.5714 10 12.3795 10 12.1429V11.2857C10 11.049 10.1919 10.8571 10.4286 10.8571H12.7143C12.951 10.8571 13.1429 11.049 13.1429 11.2857V14.8571H13.5714C13.8081 14.8571 14 15.049 14 15.2857V16.1429Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n </ng-container>\n </div>\n <div class=\"text-content\">\n @if (message.template) {\n <ng-template\n [ngTemplateOutlet]=\"message.template\"\n [ngTemplateOutletContext]=\"{ $implicit: message.templateContext }\"\n ></ng-template>\n } @else {\n @if (message.titleText) {\n <div>{{ t(message.titleText) }}</div>\n }\n @if (message.bodyText) {\n <div class=\"text-body-content\">\n {{ t(message.bodyText) }}\n </div>\n }\n }\n </div>\n <button\n class=\"close-icon-button\"\n [ngClass]=\"{ information: message.type === 'information' }\"\n (click)=\"removeMessage(message)\"\n [attr.aria-label]=\"closeButtonAriaLabel\"\n >\n <gds-icon-cross-small\n class=\"close-icon\"\n *nggCoreElement\n ></gds-icon-cross-small>\n </button>\n </div>\n </div>\n</output>\n", styles: [":host .messages-container{position:fixed;bottom:1rem;right:1rem;z-index:9999}:host .message{position:relative;font-size:1rem;max-width:22rem;min-width:22rem;min-height:3rem;box-shadow:0 2px 6px #00000026;margin-top:1rem}:host .content{display:flex;height:100%;padding:0;justify-content:space-between}:host .text-content{margin-top:1rem;margin-bottom:1rem;width:100%}:host .text-body-content{padding-top:1.5rem}:host .message-type-icon-wrapper{padding:1rem}:host .message-type-icon-wrapper i{display:block;width:1.25rem;height:1.25rem}:host .close-icon-button{box-sizing:border-box;display:grid;place-content:center;width:2rem;height:2rem;flex-shrink:0;font-size:1rem;line-height:1.5rem;margin:.5rem;background:transparent;border:none;color:inherit;padding:0;cursor:pointer;min-height:32px}:host .close-icon-button:hover{color:#333;border-radius:100%}:host .close-icon-button:not(.information):hover{background-color:#fff}:host .close-icon-button.information:hover{background-color:#dedede}:host .success{background-color:#308800;color:#fff}:host .error{background-color:#d81a1a;color:#fff}:host .warning{background-color:#ffc500;color:#333}:host .information{background-color:#333;color:#e9e9e9}\n"] }]
|
|
7456
7459
|
}], ctorParameters: () => [{ type: ToastMessageService }], propDecorators: { closeButtonAriaLabel: [{
|
|
7457
7460
|
type: Input
|
|
7458
7461
|
}] } });
|