@sebgroup/green-angular 5.7.1 → 5.8.1
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/src/v-angular/dropdown/dropdown-list/dropdown-list.component.mjs +19 -7
- package/esm2022/src/v-angular/dropdown/dropdown.component.mjs +3 -3
- package/esm2022/src/v-angular/dropdown/typeahead/typeahead-dropdown-list/typeahead-dropdown-list.component.mjs +1 -7
- package/esm2022/src/v-angular/dropdown/typeahead/typeahead-input/typeahead-input.component.mjs +3 -3
- package/esm2022/src/v-angular/toast/toast-message.service.mjs +22 -3
- package/esm2022/src/v-angular/toast/toast.component.mjs +3 -3
- package/esm2022/src/v-angular/toast/toast.models.mjs +1 -1
- package/esm2022/v-angular/dropdown/dropdown-list/dropdown-list.component.mjs +19 -7
- package/esm2022/v-angular/dropdown/dropdown.component.mjs +3 -3
- package/esm2022/v-angular/dropdown/typeahead/typeahead-dropdown-list/typeahead-dropdown-list.component.mjs +1 -7
- package/esm2022/v-angular/dropdown/typeahead/typeahead-input/typeahead-input.component.mjs +3 -3
- package/esm2022/v-angular/toast/toast-message.service.mjs +22 -3
- package/esm2022/v-angular/toast/toast.component.mjs +3 -3
- package/esm2022/v-angular/toast/toast.models.mjs +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-dropdown.mjs +22 -16
- package/fesm2022/sebgroup-green-angular-src-v-angular-dropdown.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-toast.mjs +30 -12
- package/fesm2022/sebgroup-green-angular-src-v-angular-toast.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-v-angular.mjs +52 -28
- package/fesm2022/sebgroup-green-angular-v-angular.mjs.map +1 -1
- package/package.json +2 -2
- package/src/v-angular/dropdown/dropdown-list/dropdown-list.component.d.ts +1 -1
- package/src/v-angular/toast/toast-message.service.d.ts +3 -1
- package/src/v-angular/toast/toast.models.d.ts +6 -3
- package/v-angular/dropdown/dropdown-list/dropdown-list.component.d.ts +1 -1
- package/v-angular/toast/toast-message.service.d.ts +3 -1
- package/v-angular/toast/toast.models.d.ts +6 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sebgroup-green-angular-src-v-angular-toast.mjs","sources":["../../../../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.models.ts","../../../../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 { Injectable } 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 addMessage(\n type: 'success' | 'information' | 'error' | 'warning',\n translocoScope: string,\n titleText: string,\n bodyText?: string,\n timeout?: number,\n ): void\n addMessage(\n type: MessageType,\n translocoScope: string,\n titleText: string,\n bodyText?: string,\n timeout?: number,\n ): void {\n const newMessage: ToastMessage = {\n type,\n translocoScope,\n titleText,\n bodyText,\n timeout,\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 <div>{{ t(message.titleText) }}</div>\n <div *ngIf=\"message.bodyText\" class=\"text-body-content\">\n {{ t(message.bodyText) }}\n </div>\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","export interface ToastMessage {\n type: MessageType\n translocoScope: string\n titleText: string\n bodyText?: string\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 { 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 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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"}
|
|
@@ -3497,6 +3497,14 @@ class NggvDropdownListComponent {
|
|
|
3497
3497
|
this.updateState(option, event);
|
|
3498
3498
|
}
|
|
3499
3499
|
return false;
|
|
3500
|
+
case 'Tab': // trigger dropdown to close (for typeahead)
|
|
3501
|
+
event.preventDefault();
|
|
3502
|
+
event.stopPropagation();
|
|
3503
|
+
if (this.expanded) {
|
|
3504
|
+
this.setExpanded(false);
|
|
3505
|
+
this.closed.emit();
|
|
3506
|
+
}
|
|
3507
|
+
return false;
|
|
3500
3508
|
}
|
|
3501
3509
|
return true;
|
|
3502
3510
|
}
|
|
@@ -3522,7 +3530,7 @@ class NggvDropdownListComponent {
|
|
|
3522
3530
|
this.activeIndex = 0;
|
|
3523
3531
|
option = this._flattenedOptions[this.activeIndex];
|
|
3524
3532
|
this.state = option;
|
|
3525
|
-
this.scrollToResult(option);
|
|
3533
|
+
this.scrollToResult(option, true);
|
|
3526
3534
|
break;
|
|
3527
3535
|
case 'ArrowUp': // Move up one step to the previous option
|
|
3528
3536
|
if (this.activeIndex > 0)
|
|
@@ -3531,7 +3539,7 @@ class NggvDropdownListComponent {
|
|
|
3531
3539
|
this.activeIndex = this._flattenedOptions.length - 1;
|
|
3532
3540
|
option = this._flattenedOptions[this.activeIndex];
|
|
3533
3541
|
this.state = option;
|
|
3534
|
-
this.scrollToResult(option);
|
|
3542
|
+
this.scrollToResult(option, true);
|
|
3535
3543
|
break;
|
|
3536
3544
|
case 'ArrowDown': // Move down one step to the next option
|
|
3537
3545
|
if (this._flattenedOptions.length > this.activeIndex + 1)
|
|
@@ -3540,13 +3548,13 @@ class NggvDropdownListComponent {
|
|
|
3540
3548
|
this.activeIndex = 0;
|
|
3541
3549
|
option = this._flattenedOptions[this.activeIndex];
|
|
3542
3550
|
this.state = option;
|
|
3543
|
-
this.scrollToResult(option);
|
|
3551
|
+
this.scrollToResult(option, true);
|
|
3544
3552
|
break;
|
|
3545
3553
|
case 'End': // Move to the last options
|
|
3546
3554
|
this.activeIndex = this._flattenedOptions.length - 1;
|
|
3547
3555
|
option = this._flattenedOptions[this.activeIndex];
|
|
3548
3556
|
this.state = option;
|
|
3549
|
-
this.scrollToResult(option);
|
|
3557
|
+
this.scrollToResult(option, true);
|
|
3550
3558
|
break;
|
|
3551
3559
|
}
|
|
3552
3560
|
}
|
|
@@ -3566,7 +3574,7 @@ class NggvDropdownListComponent {
|
|
|
3566
3574
|
* Scrolls focused result into view with a specified offset.
|
|
3567
3575
|
* @param key the result index which to scroll to.
|
|
3568
3576
|
*/
|
|
3569
|
-
scrollToResult(option) {
|
|
3577
|
+
scrollToResult(option, focusElement) {
|
|
3570
3578
|
if (!this.optionRefs || !option)
|
|
3571
3579
|
return;
|
|
3572
3580
|
const optionRef = this.optionRefs.find((li) => li.nativeElement.id === this.id + '-option-' + option.key);
|
|
@@ -3580,8 +3588,12 @@ class NggvDropdownListComponent {
|
|
|
3580
3588
|
block: 'nearest',
|
|
3581
3589
|
});
|
|
3582
3590
|
delta -= window.scrollY || document.documentElement.scrollTop;
|
|
3583
|
-
if (delta)
|
|
3591
|
+
if (delta) {
|
|
3584
3592
|
window.scrollBy(0, delta > 0 ? -offset : offset);
|
|
3593
|
+
}
|
|
3594
|
+
if (focusElement) {
|
|
3595
|
+
optionRef.nativeElement.focus();
|
|
3596
|
+
}
|
|
3585
3597
|
}, 0);
|
|
3586
3598
|
}
|
|
3587
3599
|
}
|
|
@@ -3814,11 +3826,11 @@ class NggvDropdownComponent extends NggvBaseControlValueAccessorComponent$1 {
|
|
|
3814
3826
|
return !('options' in option);
|
|
3815
3827
|
}
|
|
3816
3828
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDropdownComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }, { token: i2$2.DropdownUtils }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3817
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvDropdownComponent, selector: "nggv-dropdown", inputs: { thook: "thook", placeholder: "placeholder", ariaLabel: "ariaLabel", options: "options", scrollOffset: "scrollOffset", allowControlNullishOption: "allowControlNullishOption", textToHighlight: "textToHighlight", selectOnSingleOption: "selectOnSingleOption" }, outputs: { expandedChange: "expandedChange" }, host: { listeners: { "keyup": "onKeyUp($event)" }, properties: { "attr.data-thook": "this.thook" } }, queries: [{ propertyName: "selectedContentTpl", first: true, predicate: ["selectedTpl"], descendants: true, read: TemplateRef }, { propertyName: "optionContentTpl", first: true, predicate: ["optionTpl"], descendants: true, read: TemplateRef }, { propertyName: "groupLabelTpl", first: true, predicate: ["groupLabelTpl"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n <label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-toggle'\"\n *ngIf=\"labelContentTpl || basicLabelContentTpl || label\"\n >\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n </label>\n\n <!-- DESCRIPTION -->\n <div class=\"description\" *ngIf=\"description\">{{ description }}</div>\n\n <!-- LOCKED INPUT -->\n <ng-container *ngIf=\"locked\">\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n <ng-template\n *ngTemplateOutlet=\"\n selectedContentTpl || defaultSelectedContentTpl;\n context: { $implicit: state }\n \"\n >\n </ng-template>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- INPUT -->\n <ng-container *ngIf=\"!locked\">\n <div class=\"gds-input-wrapper\">\n <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n <button\n [id]=\"id + '-toggle'\"\n [disabled]=\"disabled\"\n type=\"button\"\n class=\"nggv-field-dropdown__label toggle\"\n [class.nggv-field--error]=\"invalid\"\n aria-haspopup=\"listbox\"\n [attr.data-thook]=\"thook + '-toggle'\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-labelledby]=\"\n ariaLabel ? null : id + '-label ' + id + '-toggle'\n \"\n [attr.aria-label]=\"ariaLabel || null\"\n (click)=\"toggleDropdown()\"\n >\n <span>\n <ng-template\n *ngTemplateOutlet=\"\n selectedContentTpl || defaultSelectedContentTpl;\n context: { $implicit: state }\n \"\n >\n </ng-template>\n </span>\n </button>\n <nggv-dropdown-list\n #dropDownList\n [options]=\"options\"\n [scrollOffset]=\"scrollOffset\"\n [state]=\"state\"\n [expanded]=\"expanded\"\n [optionContentTpl]=\"optionContentTpl\"\n [groupLabelTpl]=\"groupLabelTpl\"\n [textToHighlight]=\"textToHighlight\"\n (closed)=\"setExpanded(false)\"\n (selectedValueChanged)=\"onSelectChange($event)\"\n >\n </nggv-dropdown-list>\n </div>\n <!-- ERRORS -->\n <div class=\"gds-form-item__footer error-wrapper\">\n <span\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-input'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n [solid]=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n </span>\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </div>\n <!-- CHILDREN -->\n <ng-content></ng-content>\n </div>\n </ng-container>\n\n <ng-template #defaultSelectedContentTpl let-state>\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n </ng-template>\n</ng-container>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--text-primary-color: #333;--sg-form-control-bg: #fff;--grey-000: hsl(0 0% 100%);--grey-100: hsl(0, 0%, 97%);--grey-200: hsl(0, 0%, 91%);--grey-300: hsl(0, 0%, 87%);--grey-400: hsl(0, 0%, 81%);--grey-500: hsl(0, 0%, 68%);--grey-600: hsl(0, 0%, 53%);--grey-700: hsl(0, 0%, 29%);--grey-800: hsl(0, 0%, 20%);--grey-900: hsl(0, 0%, 10%);--grey-1000: hsl(0 0% 0%);display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0;position:initial}:host label{display:block;font-weight:500;line-height:1.25rem;width:100%}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .form-info{margin-bottom:0}:host .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host .gds-form-item__labels>*{width:100%;display:block}:host .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host .gds-form-item__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host:not(:last-child){margin-bottom:unset}:host .gds-field-label--optional{font-weight:400}:host button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--grey-600);--sg-border-color: var(--grey-600);background:var(--sg-form-control-bg);color:var(--text-primary-color);min-height:2.75rem;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;max-width:100%;font-size:1rem;font-weight:400;line-height:1.125;text-align:left;width:100%}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button{min-width:100%}}:host button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button:after{margin-left:.5rem;margin-right:.5rem;border-bottom:solid 2px var(--text-primary-color);border-left:solid 2px var(--text-primary-color);content:\"\";display:block;height:.5rem;width:.5rem;position:relative;top:-.15rem;transform:translate(75%) rotate3d(0,0,1,-45deg) scaleZ(-1);transition:transform .3s ease-in;flex-shrink:0}:host button[aria-expanded=true]:after{transform:translate(75%,6px) rotate3d(0,0,1,-45deg) scale3d(-1,-1,1)}:host button:hover:after{border-color:currentColor}:host button:disabled{--background: var(--grey-500)}:host button span{width:100%;white-space:nowrap;display:block;text-overflow:ellipsis}:host button.small{font-size:.875rem}:host button:hover{background:#e7e7e7}:host button:active{background:inherit;color:inherit;border-color:inherit}:host button:disabled,:host button.disabled{--text-primary-color: var(--grey-600);background:var(--grey-300);color:var(--grey-600);cursor:not-allowed}:host button.nggv-field--error{border-bottom:2px solid #9f000a}:host .gds-form-item__footer .form-info{font-weight:500;font-size:.875rem}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{align-items:center}:host .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}\n"], dependencies: [{ 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: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: NggvDropdownListComponent, selector: "nggv-dropdown-list", inputs: ["expanded", "state", "scrollOffset", "optionContentTpl", "groupLabelTpl", "id", "thook", "options", "textToHighlight", "onlyEmitDistinctChanges"], outputs: ["selectedValueChanged", "closed"] }] }); }
|
|
3829
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvDropdownComponent, selector: "nggv-dropdown", inputs: { thook: "thook", placeholder: "placeholder", ariaLabel: "ariaLabel", options: "options", scrollOffset: "scrollOffset", allowControlNullishOption: "allowControlNullishOption", textToHighlight: "textToHighlight", selectOnSingleOption: "selectOnSingleOption" }, outputs: { expandedChange: "expandedChange" }, host: { listeners: { "keyup": "onKeyUp($event)" }, properties: { "attr.data-thook": "this.thook" } }, queries: [{ propertyName: "selectedContentTpl", first: true, predicate: ["selectedTpl"], descendants: true, read: TemplateRef }, { propertyName: "optionContentTpl", first: true, predicate: ["optionTpl"], descendants: true, read: TemplateRef }, { propertyName: "groupLabelTpl", first: true, predicate: ["groupLabelTpl"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n <label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-toggle'\"\n *ngIf=\"labelContentTpl || label\"\n >\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n </label>\n\n <!-- DESCRIPTION -->\n <div class=\"description\" *ngIf=\"description\">{{ description }}</div>\n\n <!-- LOCKED INPUT -->\n <ng-container *ngIf=\"locked\">\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n <ng-template\n *ngTemplateOutlet=\"\n selectedContentTpl || defaultSelectedContentTpl;\n context: { $implicit: state }\n \"\n >\n </ng-template>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- INPUT -->\n <ng-container *ngIf=\"!locked\">\n <div class=\"gds-input-wrapper\">\n <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n <button\n [id]=\"id + '-toggle'\"\n [disabled]=\"disabled\"\n type=\"button\"\n class=\"nggv-field-dropdown__label toggle\"\n [class.nggv-field--error]=\"invalid\"\n role=\"combobox\"\n aria-owns=\"listbox\"\n aria-haspopup=\"listbox\"\n aria-controls=\"listbox\"\n [attr.data-thook]=\"thook + '-toggle'\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-labelledby]=\"\n ariaLabel ? null : id + '-label ' + id + '-toggle'\n \"\n [attr.aria-label]=\"ariaLabel || null\"\n (click)=\"toggleDropdown()\"\n >\n <span>\n <ng-template\n *ngTemplateOutlet=\"\n selectedContentTpl || defaultSelectedContentTpl;\n context: { $implicit: state }\n \"\n >\n </ng-template>\n </span>\n </button>\n <nggv-dropdown-list\n #dropDownList\n [options]=\"options\"\n [scrollOffset]=\"scrollOffset\"\n [state]=\"state\"\n [expanded]=\"expanded\"\n [optionContentTpl]=\"optionContentTpl\"\n [groupLabelTpl]=\"groupLabelTpl\"\n [textToHighlight]=\"textToHighlight\"\n (closed)=\"setExpanded(false)\"\n (selectedValueChanged)=\"onSelectChange($event)\"\n >\n </nggv-dropdown-list>\n </div>\n <!-- ERRORS -->\n <div class=\"gds-form-item__footer error-wrapper\">\n <span\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-input'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n [solid]=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n </span>\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </div>\n <!-- CHILDREN -->\n <ng-content></ng-content>\n </div>\n </ng-container>\n\n <ng-template #defaultSelectedContentTpl let-state>\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n </ng-template>\n</ng-container>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--text-primary-color: #333;--sg-form-control-bg: #fff;--grey-000: hsl(0 0% 100%);--grey-100: hsl(0, 0%, 97%);--grey-200: hsl(0, 0%, 91%);--grey-300: hsl(0, 0%, 87%);--grey-400: hsl(0, 0%, 81%);--grey-500: hsl(0, 0%, 68%);--grey-600: hsl(0, 0%, 53%);--grey-700: hsl(0, 0%, 29%);--grey-800: hsl(0, 0%, 20%);--grey-900: hsl(0, 0%, 10%);--grey-1000: hsl(0 0% 0%);display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0;position:initial}:host label{display:block;font-weight:500;line-height:1.25rem;width:100%}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .form-info{margin-bottom:0}:host .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host .gds-form-item__labels>*{width:100%;display:block}:host .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host .gds-form-item__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host:not(:last-child){margin-bottom:unset}:host .gds-field-label--optional{font-weight:400}:host button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--grey-600);--sg-border-color: var(--grey-600);background:var(--sg-form-control-bg);color:var(--text-primary-color);min-height:2.75rem;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;max-width:100%;font-size:1rem;font-weight:400;line-height:1.125;text-align:left;width:100%}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button{min-width:100%}}:host button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button:after{margin-left:.5rem;margin-right:.5rem;border-bottom:solid 2px var(--text-primary-color);border-left:solid 2px var(--text-primary-color);content:\"\";display:block;height:.5rem;width:.5rem;position:relative;top:-.15rem;transform:translate(75%) rotate3d(0,0,1,-45deg) scaleZ(-1);transition:transform .3s ease-in;flex-shrink:0}:host button[aria-expanded=true]:after{transform:translate(75%,6px) rotate3d(0,0,1,-45deg) scale3d(-1,-1,1)}:host button:hover:after{border-color:currentColor}:host button:disabled{--background: var(--grey-500)}:host button span{width:100%;white-space:nowrap;display:block;text-overflow:ellipsis}:host button.small{font-size:.875rem}:host button:hover{background:#e7e7e7}:host button:active{background:inherit;color:inherit;border-color:inherit}:host button:disabled,:host button.disabled{--text-primary-color: var(--grey-600);background:var(--grey-300);color:var(--grey-600);cursor:not-allowed}:host button.nggv-field--error{border-bottom:2px solid #9f000a}:host .gds-form-item__footer .form-info{font-weight:500;font-size:.875rem}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{align-items:center}:host .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}\n"], dependencies: [{ 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: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: NggvDropdownListComponent, selector: "nggv-dropdown-list", inputs: ["expanded", "state", "scrollOffset", "optionContentTpl", "groupLabelTpl", "id", "thook", "options", "textToHighlight", "onlyEmitDistinctChanges"], outputs: ["selectedValueChanged", "closed"] }] }); }
|
|
3818
3830
|
}
|
|
3819
3831
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDropdownComponent, decorators: [{
|
|
3820
3832
|
type: Component,
|
|
3821
|
-
args: [{ selector: 'nggv-dropdown', template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n <label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-toggle'\"\n *ngIf=\"labelContentTpl ||
|
|
3833
|
+
args: [{ selector: 'nggv-dropdown', template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n <label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-toggle'\"\n *ngIf=\"labelContentTpl || label\"\n >\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n </label>\n\n <!-- DESCRIPTION -->\n <div class=\"description\" *ngIf=\"description\">{{ description }}</div>\n\n <!-- LOCKED INPUT -->\n <ng-container *ngIf=\"locked\">\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n <ng-template\n *ngTemplateOutlet=\"\n selectedContentTpl || defaultSelectedContentTpl;\n context: { $implicit: state }\n \"\n >\n </ng-template>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- INPUT -->\n <ng-container *ngIf=\"!locked\">\n <div class=\"gds-input-wrapper\">\n <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n <button\n [id]=\"id + '-toggle'\"\n [disabled]=\"disabled\"\n type=\"button\"\n class=\"nggv-field-dropdown__label toggle\"\n [class.nggv-field--error]=\"invalid\"\n role=\"combobox\"\n aria-owns=\"listbox\"\n aria-haspopup=\"listbox\"\n aria-controls=\"listbox\"\n [attr.data-thook]=\"thook + '-toggle'\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-labelledby]=\"\n ariaLabel ? null : id + '-label ' + id + '-toggle'\n \"\n [attr.aria-label]=\"ariaLabel || null\"\n (click)=\"toggleDropdown()\"\n >\n <span>\n <ng-template\n *ngTemplateOutlet=\"\n selectedContentTpl || defaultSelectedContentTpl;\n context: { $implicit: state }\n \"\n >\n </ng-template>\n </span>\n </button>\n <nggv-dropdown-list\n #dropDownList\n [options]=\"options\"\n [scrollOffset]=\"scrollOffset\"\n [state]=\"state\"\n [expanded]=\"expanded\"\n [optionContentTpl]=\"optionContentTpl\"\n [groupLabelTpl]=\"groupLabelTpl\"\n [textToHighlight]=\"textToHighlight\"\n (closed)=\"setExpanded(false)\"\n (selectedValueChanged)=\"onSelectChange($event)\"\n >\n </nggv-dropdown-list>\n </div>\n <!-- ERRORS -->\n <div class=\"gds-form-item__footer error-wrapper\">\n <span\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-input'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n [solid]=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n </span>\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </div>\n <!-- CHILDREN -->\n <ng-content></ng-content>\n </div>\n </ng-container>\n\n <ng-template #defaultSelectedContentTpl let-state>\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n </ng-template>\n</ng-container>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--text-primary-color: #333;--sg-form-control-bg: #fff;--grey-000: hsl(0 0% 100%);--grey-100: hsl(0, 0%, 97%);--grey-200: hsl(0, 0%, 91%);--grey-300: hsl(0, 0%, 87%);--grey-400: hsl(0, 0%, 81%);--grey-500: hsl(0, 0%, 68%);--grey-600: hsl(0, 0%, 53%);--grey-700: hsl(0, 0%, 29%);--grey-800: hsl(0, 0%, 20%);--grey-900: hsl(0, 0%, 10%);--grey-1000: hsl(0 0% 0%);display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0;position:initial}:host label{display:block;font-weight:500;line-height:1.25rem;width:100%}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .form-info{margin-bottom:0}:host .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host .gds-form-item__labels>*{width:100%;display:block}:host .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host .gds-form-item__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host:not(:last-child){margin-bottom:unset}:host .gds-field-label--optional{font-weight:400}:host button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--grey-600);--sg-border-color: var(--grey-600);background:var(--sg-form-control-bg);color:var(--text-primary-color);min-height:2.75rem;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;max-width:100%;font-size:1rem;font-weight:400;line-height:1.125;text-align:left;width:100%}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button{min-width:100%}}:host button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button:after{margin-left:.5rem;margin-right:.5rem;border-bottom:solid 2px var(--text-primary-color);border-left:solid 2px var(--text-primary-color);content:\"\";display:block;height:.5rem;width:.5rem;position:relative;top:-.15rem;transform:translate(75%) rotate3d(0,0,1,-45deg) scaleZ(-1);transition:transform .3s ease-in;flex-shrink:0}:host button[aria-expanded=true]:after{transform:translate(75%,6px) rotate3d(0,0,1,-45deg) scale3d(-1,-1,1)}:host button:hover:after{border-color:currentColor}:host button:disabled{--background: var(--grey-500)}:host button span{width:100%;white-space:nowrap;display:block;text-overflow:ellipsis}:host button.small{font-size:.875rem}:host button:hover{background:#e7e7e7}:host button:active{background:inherit;color:inherit;border-color:inherit}:host button:disabled,:host button.disabled{--text-primary-color: var(--grey-600);background:var(--grey-300);color:var(--grey-600);cursor:not-allowed}:host button.nggv-field--error{border-bottom:2px solid #9f000a}:host .gds-form-item__footer .form-info{font-weight:500;font-size:.875rem}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{align-items:center}:host .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}\n"] }]
|
|
3822
3834
|
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
3823
3835
|
type: Self
|
|
3824
3836
|
}, {
|
|
@@ -3916,12 +3928,6 @@ class NggvTypeaheadDropdownListComponent extends NggvDropdownListComponent {
|
|
|
3916
3928
|
this.setExpanded(true);
|
|
3917
3929
|
this.subscribeToOutsideClickEvent();
|
|
3918
3930
|
});
|
|
3919
|
-
this.hostComponent.nggvBlur
|
|
3920
|
-
.asObservable()
|
|
3921
|
-
.pipe(takeUntil$1(this._destroy$))
|
|
3922
|
-
.subscribe(() => {
|
|
3923
|
-
this.setExpanded(false);
|
|
3924
|
-
});
|
|
3925
3931
|
}
|
|
3926
3932
|
/**
|
|
3927
3933
|
* @internal Formats the selected option to display in the input. Interpolate the returned value
|
|
@@ -4074,11 +4080,11 @@ class NggvTypeaheadInputComponent extends NggvInputComponent$1 {
|
|
|
4074
4080
|
}
|
|
4075
4081
|
}
|
|
4076
4082
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvTypeaheadInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4077
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvTypeaheadInputComponent, selector: "nggv-typeahead-input", inputs: { hostComponent: "hostComponent", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter" }, host: { listeners: { "keyup": "onKeyUp($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n <div\n class=\"input-wrapper\"\n [ngClass]=\"{ expanded: expanded, collapsed: !expanded }\"\n [ngStyle]=\"{ 'height.px': buttonHeight }\"\n (click)=\"$event.stopPropagation()\"\n >\n <!-- INPUT FIELD -->\n <div class=\"input-group\">\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"gds-field\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [attr.email]=\"email\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [autocomplete]=\"autocomplete\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n </div>\n</ng-container>\n", styles: [":host{position:absolute;top:1px;left:0;width:calc(100% - 2.625em)}:host .input-wrapper{border:none;box-shadow:none}:host .input-wrapper.expanded{display:flex}:host .input-wrapper.expanded .input-group input.gds-field{height:calc(100% - 2px);width:100%;min-height:unset;margin-left:1px;padding-left:1rem;padding-right:1rem;border:none;box-shadow:none}:host .input-wrapper.collapsed{display:none}:host .input-wrapper .input-group{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
4083
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvTypeaheadInputComponent, selector: "nggv-typeahead-input", inputs: { hostComponent: "hostComponent", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter" }, host: { listeners: { "keyup": "onKeyUp($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n <div\n class=\"input-wrapper\"\n [ngClass]=\"{ expanded: expanded, collapsed: !expanded }\"\n [ngStyle]=\"{ 'height.px': buttonHeight }\"\n (click)=\"$event.stopPropagation()\"\n >\n <!-- INPUT FIELD -->\n <div class=\"input-group\">\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"gds-field\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [attr.email]=\"email\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [autocomplete]=\"autocomplete\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n aria-owns=\"listbox\"\n aria-haspopup=\"listbox\"\n aria-controls=\"listbox\"\n [value]=\"state\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n </div>\n</ng-container>\n", styles: [":host{position:absolute;top:1px;left:0;width:calc(100% - 2.625em)}:host .input-wrapper{border:none;box-shadow:none}:host .input-wrapper.expanded{display:flex}:host .input-wrapper.expanded .input-group input.gds-field{height:calc(100% - 2px);width:100%;min-height:unset;margin-left:1px;padding-left:1rem;padding-right:1rem;border:none;box-shadow:none}:host .input-wrapper.collapsed{display:none}:host .input-wrapper .input-group{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
4078
4084
|
}
|
|
4079
4085
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvTypeaheadInputComponent, decorators: [{
|
|
4080
4086
|
type: Component,
|
|
4081
|
-
args: [{ selector: 'nggv-typeahead-input', template: "<ng-container>\n <div\n class=\"input-wrapper\"\n [ngClass]=\"{ expanded: expanded, collapsed: !expanded }\"\n [ngStyle]=\"{ 'height.px': buttonHeight }\"\n (click)=\"$event.stopPropagation()\"\n >\n <!-- INPUT FIELD -->\n <div class=\"input-group\">\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"gds-field\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [attr.email]=\"email\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [autocomplete]=\"autocomplete\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n </div>\n</ng-container>\n", styles: [":host{position:absolute;top:1px;left:0;width:calc(100% - 2.625em)}:host .input-wrapper{border:none;box-shadow:none}:host .input-wrapper.expanded{display:flex}:host .input-wrapper.expanded .input-group input.gds-field{height:calc(100% - 2px);width:100%;min-height:unset;margin-left:1px;padding-left:1rem;padding-right:1rem;border:none;box-shadow:none}:host .input-wrapper.collapsed{display:none}:host .input-wrapper .input-group{width:100%}\n"] }]
|
|
4087
|
+
args: [{ selector: 'nggv-typeahead-input', template: "<ng-container>\n <div\n class=\"input-wrapper\"\n [ngClass]=\"{ expanded: expanded, collapsed: !expanded }\"\n [ngStyle]=\"{ 'height.px': buttonHeight }\"\n (click)=\"$event.stopPropagation()\"\n >\n <!-- INPUT FIELD -->\n <div class=\"input-group\">\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"gds-field\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [attr.email]=\"email\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [autocomplete]=\"autocomplete\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n aria-owns=\"listbox\"\n aria-haspopup=\"listbox\"\n aria-controls=\"listbox\"\n [value]=\"state\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n </div>\n</ng-container>\n", styles: [":host{position:absolute;top:1px;left:0;width:calc(100% - 2.625em)}:host .input-wrapper{border:none;box-shadow:none}:host .input-wrapper.expanded{display:flex}:host .input-wrapper.expanded .input-group input.gds-field{height:calc(100% - 2px);width:100%;min-height:unset;margin-left:1px;padding-left:1rem;padding-right:1rem;border:none;box-shadow:none}:host .input-wrapper.collapsed{display:none}:host .input-wrapper .input-group{width:100%}\n"] }]
|
|
4082
4088
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.NgControl, decorators: [{
|
|
4083
4089
|
type: Self
|
|
4084
4090
|
}, {
|
|
@@ -7213,18 +7219,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7213
7219
|
}]
|
|
7214
7220
|
}] });
|
|
7215
7221
|
|
|
7222
|
+
var MessageType;
|
|
7223
|
+
(function (MessageType) {
|
|
7224
|
+
MessageType["Success"] = "success";
|
|
7225
|
+
MessageType["Information"] = "information";
|
|
7226
|
+
MessageType["Error"] = "error";
|
|
7227
|
+
MessageType["Warning"] = "warning";
|
|
7228
|
+
})(MessageType || (MessageType = {}));
|
|
7229
|
+
|
|
7216
7230
|
class ToastMessageService {
|
|
7217
7231
|
constructor() {
|
|
7218
7232
|
this.messages = [];
|
|
7219
7233
|
this.messageSubject = new Subject();
|
|
7220
7234
|
}
|
|
7221
|
-
|
|
7235
|
+
add(message) {
|
|
7236
|
+
const { type, translocoScope, titleText, template, templateContext, bodyText, timeout, } = message;
|
|
7237
|
+
const newMessage = {
|
|
7238
|
+
type: type ? type : MessageType.Information,
|
|
7239
|
+
translocoScope,
|
|
7240
|
+
titleText: titleText ?? '',
|
|
7241
|
+
bodyText,
|
|
7242
|
+
timeout,
|
|
7243
|
+
template,
|
|
7244
|
+
templateContext,
|
|
7245
|
+
};
|
|
7246
|
+
this.removeMessage(newMessage);
|
|
7247
|
+
this.messages.push(newMessage);
|
|
7248
|
+
this.messageSubject.next([...this.messages]);
|
|
7249
|
+
this.setMessageRemoveTimeout(newMessage);
|
|
7250
|
+
}
|
|
7251
|
+
addMessage(type, translocoScope, titleText, bodyText, timeout, template, templateContext) {
|
|
7222
7252
|
const newMessage = {
|
|
7223
7253
|
type,
|
|
7224
7254
|
translocoScope,
|
|
7225
7255
|
titleText,
|
|
7226
7256
|
bodyText,
|
|
7227
7257
|
timeout,
|
|
7258
|
+
template,
|
|
7259
|
+
templateContext,
|
|
7228
7260
|
};
|
|
7229
7261
|
this.removeMessage(newMessage);
|
|
7230
7262
|
this.messages.push(newMessage);
|
|
@@ -7232,7 +7264,7 @@ class ToastMessageService {
|
|
|
7232
7264
|
this.setMessageRemoveTimeout(newMessage);
|
|
7233
7265
|
}
|
|
7234
7266
|
removeMessage(message) {
|
|
7235
|
-
const index = this.getDuplicateMessageIndex(message.titleText);
|
|
7267
|
+
const index = this.getDuplicateMessageIndex(message.titleText ?? '');
|
|
7236
7268
|
this.removeMessageByIndex(index);
|
|
7237
7269
|
}
|
|
7238
7270
|
pauseMessageTimeout(message) {
|
|
@@ -7298,7 +7330,7 @@ class ToastComponent {
|
|
|
7298
7330
|
}
|
|
7299
7331
|
}
|
|
7300
7332
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToastComponent, deps: [{ token: ToastMessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7301
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
7333
|
+
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: [
|
|
7302
7334
|
trigger('toastAnimation', [
|
|
7303
7335
|
transition(':enter', [
|
|
7304
7336
|
style({ opacity: 0, transform: 'translateY(100%)' }),
|
|
@@ -7322,19 +7354,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7322
7354
|
animate('300ms ease-out', style({ opacity: 0, transform: 'translateY(100%)' })),
|
|
7323
7355
|
]),
|
|
7324
7356
|
]),
|
|
7325
|
-
], 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 <div>{{ t(message.titleText) }}</div>\n
|
|
7357
|
+
], 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"] }]
|
|
7326
7358
|
}], ctorParameters: () => [{ type: ToastMessageService }], propDecorators: { closeButtonAriaLabel: [{
|
|
7327
7359
|
type: Input
|
|
7328
7360
|
}] } });
|
|
7329
7361
|
|
|
7330
|
-
var MessageType;
|
|
7331
|
-
(function (MessageType) {
|
|
7332
|
-
MessageType["Success"] = "success";
|
|
7333
|
-
MessageType["Information"] = "information";
|
|
7334
|
-
MessageType["Error"] = "error";
|
|
7335
|
-
MessageType["Warning"] = "warning";
|
|
7336
|
-
})(MessageType || (MessageType = {}));
|
|
7337
|
-
|
|
7338
7362
|
class NggvToastModule {
|
|
7339
7363
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7340
7364
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggvToastModule, declarations: [ToastComponent], imports: [CommonModule, TranslocoModule, NggCoreWrapperModule], exports: [ToastComponent] }); }
|