UNPKG

@koalarx/ui

Version:

Koala UI is a modern and accessible component library designed to speed up interface development in Angular projects. With simple integration and clear documentation, you can easily build robust and visually appealing applications.

1 lines 13.4 kB
{"version":3,"file":"koalarx-ui-shared-components-snackbar.mjs","sources":["../../projects/koala-ui/shared/components/snackbar/snackbar.ts","../../projects/koala-ui/shared/components/snackbar/snackbar-ref.ts","../../projects/koala-ui/shared/components/snackbar/snackbar-content.ts","../../projects/koala-ui/shared/components/snackbar/snackbar-content.html","../../projects/koala-ui/shared/components/snackbar/koalarx-ui-shared-components-snackbar.ts"],"sourcesContent":["import {\n ApplicationRef,\n createComponent,\n EnvironmentInjector,\n inject,\n Injectable,\n InjectionToken,\n Injector,\n inputBinding,\n} from '@angular/core';\nimport { randomString } from '@koalarx/utils/KlString';\nimport { SnackbarContent } from './snackbar-content';\nimport { SNACKBAR_REF_TOKEN, SnackbarRef } from './snackbar-ref';\n\nexport const SNACKBAR_CONFIG = new InjectionToken('SnackbarConfig');\nexport const SNACKBAR_APP_REF = new InjectionToken('SnackbarAppRef');\n\nexport type SnackbarType = 'info' | 'success' | 'warning' | 'error';\n\nexport interface SnackbarConfig {\n type: SnackbarType;\n message: string;\n timeout?: number;\n}\n\n@Injectable({ providedIn: 'root' })\nexport class Snackbar {\n private readonly appRef = inject(ApplicationRef);\n private readonly injector = inject(EnvironmentInjector);\n\n private generateElementId() {\n let elementId: string;\n\n do {\n elementId = randomString(50, {\n numbers: false,\n lowercase: true,\n uppercase: true,\n specialCharacters: false,\n });\n } while (document.getElementById(elementId));\n\n return elementId;\n }\n\n success(message: string, timeout = 5000) {\n this.open({\n type: 'success',\n message,\n timeout,\n });\n }\n\n warning(message: string, timeout = 5000) {\n this.open({\n type: 'warning',\n message,\n timeout,\n });\n }\n\n error(message: string, timeout = 5000) {\n this.open({\n type: 'error',\n message,\n timeout,\n });\n }\n\n info(message: string, timeout = 5000) {\n this.open({\n type: 'info',\n message,\n timeout,\n });\n }\n\n open(config: SnackbarConfig) {\n const main = document.querySelector<HTMLElement>(\n 'kl-snackbar-container div'\n );\n\n if (main) {\n const elementId = this.generateElementId();\n const container = main.appendChild(document.createElement('div'));\n container.id = elementId;\n container.classList.add('flex', 'item-center', 'justify-end');\n\n const componentRef = createComponent(SnackbarContent, {\n environmentInjector: this.injector,\n hostElement: container,\n elementInjector: Injector.create({\n providers: [\n { provide: SNACKBAR_CONFIG, useValue: config },\n { provide: SNACKBAR_APP_REF, useValue: this.appRef },\n {\n provide: SNACKBAR_REF_TOKEN,\n useValue: () => componentRef,\n },\n {\n provide: SnackbarRef,\n deps: [SNACKBAR_CONFIG, SNACKBAR_APP_REF, SNACKBAR_REF_TOKEN],\n },\n ],\n }),\n bindings: [\n inputBinding('type', () => config.type),\n inputBinding('message', () => config.message),\n inputBinding('timeout', () => config.timeout ?? 0),\n ],\n });\n\n this.appRef.attachView(componentRef.hostView);\n\n componentRef.changeDetectorRef.detectChanges();\n }\n }\n}\n","import {\n ApplicationRef,\n ComponentRef,\n inject,\n Injectable,\n InjectionToken,\n} from '@angular/core';\nimport { SNACKBAR_APP_REF } from './snackbar';\nimport { SnackbarContent } from './snackbar-content';\n\nexport const SNACKBAR_REF_TOKEN = new InjectionToken('SnackbarRefToken');\n\n@Injectable()\nexport class SnackbarRef {\n private readonly appRef = inject<ApplicationRef>(SNACKBAR_APP_REF);\n private readonly componentRef =\n inject<() => ComponentRef<SnackbarContent>>(SNACKBAR_REF_TOKEN);\n\n dismiss() {\n this.componentRef().destroy();\n this.appRef.detachView(this.componentRef().hostView);\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n effect,\n ElementRef,\n inject,\n input,\n OnInit,\n signal,\n viewChild,\n} from '@angular/core';\nimport { SnackbarType } from './snackbar';\nimport { SnackbarRef } from './snackbar-ref';\nimport { interval } from 'rxjs/internal/observable/interval';\nimport { startWith } from 'rxjs/internal/operators/startWith';\nimport { map } from 'rxjs/internal/operators/map';\n\n@Component({\n selector: 'kl-snackbar-content',\n templateUrl: './snackbar-content.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SnackbarContent implements OnInit {\n private readonly alertContentRef =\n viewChild<ElementRef<HTMLDivElement>>('alertContent');\n private readonly alertIconRef =\n viewChild<ElementRef<HTMLElement>>('alertIcon');\n private readonly snackbarRef = inject(SnackbarRef);\n\n type = input.required<SnackbarType>();\n message = input.required<string>();\n timeout = input<number>(0);\n timePast = signal(0);\n\n constructor() {\n effect(() => this.addAlertClass());\n effect(() => this.addIconClass());\n }\n\n private addAlertClass() {\n const alertContent = this.alertContentRef()?.nativeElement;\n\n if (alertContent) {\n let className = `alert-${this.type()}`;\n\n switch (this.type()) {\n case 'info':\n className = 'alert-info';\n break;\n case 'success':\n className = 'alert-success';\n break;\n case 'warning':\n className = 'alert-warning';\n break;\n case 'error':\n className = 'alert-error';\n break;\n }\n\n alertContent.classList.add(className);\n }\n }\n\n private addIconClass() {\n const alertIcon = this.alertIconRef()?.nativeElement;\n\n if (alertIcon) {\n let className = '';\n\n switch (this.type()) {\n case 'info':\n className = 'fa-circle-info';\n break;\n case 'success':\n className = 'fa-circle-check';\n break;\n case 'warning':\n className = 'fa-triangle-exclamation';\n break;\n case 'error':\n className = 'fa-circle-xmark';\n break;\n }\n\n alertIcon.classList.add(className);\n }\n }\n\n ngOnInit(): void {\n const timeout = this.timeout();\n\n if (timeout > 0) {\n const timePastInterval = interval(1000)\n .pipe(\n startWith(0),\n map(() => this.timePast.update((past) => past + 1000)),\n map(() => this.timePast())\n )\n .subscribe((timePast) => {\n if (timePast > timeout) {\n timePastInterval?.unsubscribe();\n this.dismiss();\n }\n });\n }\n }\n\n dismiss() {\n this.snackbarRef.dismiss();\n }\n}\n","<div role=\"alert\" #alertContent class=\"relative alert dark:alert-soft w-full lg:max-w-1/4 rounded-sm text-sm py-3 border-neutral-600\">\n <i #alertIcon class=\"h-4 w-4 shrink-0 stroke-current text-base fa-solid\"></i>\n <span [innerHTML]=\"message()\"></span>\n <div>\n <button class=\"btn btn-xs btn-outline\" (click)=\"dismiss()\">OK</button>\n </div>\n @if (timePast() > 0) {\n <progress class=\"absolute left-0 bottom-0 progress w-full opacity-20\"\n [value]=\"timePast()\"\n [max]=\"timeout()\">\n </progress>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}