@webilix/ngx-helper-m3/fesm2022/webilix-ngx-helper-m3.mjs.map

Helper library for Angular and Material 3

{"version":3,"file":"webilix-ngx-helper-m3.mjs","sources":["../../../ngx-helper-m3/src/lib/ngx-helper.config.ts","../../../ngx-helper-m3/src/lib/components/box/ngx-helper-box.interface.ts","../../../ngx-helper-m3/src/lib/components/box/ngx-helper-box.component.ts","../../../ngx-helper-m3/src/lib/components/box/ngx-helper-box.component.html","../../../ngx-helper-m3/src/lib/pipes/bank-card.pipe.ts","../../../ngx-helper-m3/src/lib/pipes/date.pipe.ts","../../../ngx-helper-m3/src/lib/pipes/duration.pipe.ts","../../../ngx-helper-m3/src/lib/pipes/file-size.pipe.ts","../../../ngx-helper-m3/src/lib/pipes/mobile.pipe.ts","../../../ngx-helper-m3/src/lib/pipes/number.pipe.ts","../../../ngx-helper-m3/src/lib/pipes/period.pipe.ts","../../../ngx-helper-m3/src/lib/pipes/price.pipe.ts","../../../ngx-helper-m3/src/lib/pipes/volume.pipe.ts","../../../ngx-helper-m3/src/lib/pipes/weight.pipe.ts","../../../ngx-helper-m3/src/lib/components/value/ngx-helper-value.pipe.ts","../../../ngx-helper-m3/src/lib/components/component.service.ts","../../../ngx-helper-m3/src/lib/components/card/ngx-helper-card.component.ts","../../../ngx-helper-m3/src/lib/components/card/ngx-helper-card.component.html","../../../ngx-helper-m3/src/lib/components/loader/ngx-helper-loader.component.ts","../../../ngx-helper-m3/src/lib/components/loader/ngx-helper-loader.component.html","../../../ngx-helper-m3/src/lib/components/page-group/ngx-helper-page-group.interface.ts","../../../ngx-helper-m3/src/lib/components/page-group/ngx-helper-page-group.component.ts","../../../ngx-helper-m3/src/lib/components/page-group/ngx-helper-page-group.component.html","../../../ngx-helper-m3/src/lib/components/progress/ngx-helper-progress.component.ts","../../../ngx-helper-m3/src/lib/components/progress/ngx-helper-progress.component.html","../../../ngx-helper-m3/src/lib/components/section/ngx-helper-section.component.ts","../../../ngx-helper-m3/src/lib/components/section/ngx-helper-section.component.html","../../../ngx-helper-m3/src/lib/components/section/column/ngx-helper-section-column.component.ts","../../../ngx-helper-m3/src/lib/components/section/column/ngx-helper-section-column.component.html","../../../ngx-helper-m3/src/lib/components/value/box/ngx-helper-value-box.component.ts","../../../ngx-helper-m3/src/lib/components/value/box/ngx-helper-value-box.component.html","../../../ngx-helper-m3/src/lib/components/value/list/ngx-helper-value-list.component.ts","../../../ngx-helper-m3/src/lib/components/value/list/ngx-helper-value-list.component.html","../../../ngx-helper-m3/src/lib/confirm/dialog/confirm-dialog.component.ts","../../../ngx-helper-m3/src/lib/confirm/dialog/confirm-dialog.component.html","../../../ngx-helper-m3/src/lib/confirm/bottom-sheet/confirm-bottom-sheet.component.ts","../../../ngx-helper-m3/src/lib/confirm/bottom-sheet/confirm-bottom-sheet.component.html","../../../ngx-helper-m3/src/lib/confirm/confirm.service.ts","../../../ngx-helper-m3/src/lib/container/container.interface.ts","../../../ngx-helper-m3/src/lib/container/dialog/container-dialog.component.ts","../../../ngx-helper-m3/src/lib/container/dialog/container-dialog.component.html","../../../ngx-helper-m3/src/lib/container/bottom-sheet/container-bottom-sheet.component.ts","../../../ngx-helper-m3/src/lib/container/bottom-sheet/container-bottom-sheet.component.html","../../../ngx-helper-m3/src/lib/container/container.service.ts","../../../ngx-helper-m3/src/lib/coordinates/get/get.component.ts","../../../ngx-helper-m3/src/lib/coordinates/get/get.component.html","../../../ngx-helper-m3/src/lib/coordinates/show/show.component.ts","../../../ngx-helper-m3/src/lib/coordinates/show/show.component.html","../../../ngx-helper-m3/src/lib/coordinates/ngx-helper-coordinates.service.ts","../../../ngx-helper-m3/src/lib/http/download/download.component.ts","../../../ngx-helper-m3/src/lib/http/download/download.component.html","../../../ngx-helper-m3/src/lib/http/pdf/pdf.component.ts","../../../ngx-helper-m3/src/lib/http/pdf/pdf.component.html","../../../ngx-helper-m3/src/lib/http/upload/upload.component.ts","../../../ngx-helper-m3/src/lib/http/upload/upload.component.html","../../../ngx-helper-m3/src/lib/pipes/multi-line.pipe.ts","../../../ngx-helper-m3/src/lib/toast/toast/toast.component.ts","../../../ngx-helper-m3/src/lib/toast/toast/toast.component.html","../../../ngx-helper-m3/src/lib/toast/ngx-helper-toast.service.ts","../../../ngx-helper-m3/src/lib/http/ngx-helper-http.service.ts","../../../ngx-helper-m3/src/lib/image/image/image.component.ts","../../../ngx-helper-m3/src/lib/image/image/image.component.html","../../../ngx-helper-m3/src/lib/image/gallery/gallery.component.ts","../../../ngx-helper-m3/src/lib/image/gallery/gallery.component.html","../../../ngx-helper-m3/src/lib/image/ngx-helper-image.service.ts","../../../ngx-helper-m3/src/lib/route/get/get.component.ts","../../../ngx-helper-m3/src/lib/route/get/get.component.html","../../../ngx-helper-m3/src/lib/route/show/show.component.ts","../../../ngx-helper-m3/src/lib/route/show/show.component.html","../../../ngx-helper-m3/src/lib/route/ngx-helper-route.service.ts","../../../ngx-helper-m3/src/lib/directives/ngx-helper-mobile-view.directive.ts","../../../ngx-helper-m3/src/lib/directives/ngx-helper-show-in.directive.ts","../../../ngx-helper-m3/src/lib/directives/ngx-helper-sticky.directive.ts","../../../ngx-helper-m3/src/lib/pipes/safe.pipe.ts","../../../ngx-helper-m3/src/public-api.ts","../../../ngx-helper-m3/src/webilix-ngx-helper-m3.ts"],"sourcesContent":["import { EnvironmentProviders, InjectionToken, makeEnvironmentProviders, Provider } from '@angular/core';\n\nexport interface INgxHelperConfig {\n    readonly mobileWidth: number;\n\n    // PAGE GROUP\n    readonly pageGroupSidebarWidth: string;\n\n    // TOAST\n    readonly toastTimeout: number;\n    readonly toastXPosition: 'LEFT' | 'CENTER' | 'RIGHT';\n    readonly toastAllowDuplicates: boolean;\n    readonly toastResetDuplicates: boolean;\n    readonly toastProgressAnimation: 'DECREASE' | 'INCREASE';\n\n    // STICKY\n    readonly stickyView: {\n        readonly top?: string | { readonly desktopView: string; readonly mobileView: string };\n        readonly bottom?: string | { readonly desktopView: string; readonly mobileView: string };\n    };\n}\n\nexport const NGX_HELPER_CONFIG = new InjectionToken<Partial<INgxHelperConfig>>('NGX-HELPER-CONFIG');\n\nexport const provideNgxHelperConfig = (config: Partial<INgxHelperConfig>): EnvironmentProviders => {\n    const providers: Provider[] = [{ provide: NGX_HELPER_CONFIG, useValue: config }];\n\n    return makeEnvironmentProviders(providers);\n};\n","import { InjectionToken } from '@angular/core';\n\nexport const NGX_HELPER_BOX_DATA: InjectionToken<any> = new InjectionToken('NGX-HELPER-BOX-DATA');\n","import { Component, HostBinding, Injector, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';\nimport { NgComponentOutlet } from '@angular/common';\nimport { ComponentType } from '@angular/cdk/portal';\n\nimport { NGX_HELPER_BOX_DATA } from './ngx-helper-box.interface';\n\n@Component({\n    selector: 'ngx-helper-box',\n    imports: [NgComponentOutlet],\n    templateUrl: './ngx-helper-box.component.html',\n    styleUrl: './ngx-helper-box.component.scss',\n})\nexport class NgxHelperBoxComponent implements OnInit, OnChanges {\n    @HostBinding('className') protected className: string = 'ngx-helper-m3-box';\n    @HostBinding('style.padding') protected paddingCSS!: string;\n\n    @Input({ required: false }) component?: ComponentType<any>;\n    @Input({ required: false }) data?: any;\n    @Input({ required: false }) padding: string = '1rem';\n    @Input({ required: false }) hideShadow: boolean = false;\n\n    public injector!: Injector;\n\n    ngOnInit(): void {\n        this.setInjector();\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        this.setInjector();\n    }\n\n    setInjector(): void {\n        this.paddingCSS = this.padding;\n        this.className = `ngx-helper-m3-box${this.hideShadow ? ' hide-shadow' : ''}`;\n        if (!this.component) return;\n\n        this.injector = Injector.create({\n            providers: [{ provide: NGX_HELPER_BOX_DATA, useValue: this.data }],\n        });\n    }\n}\n","@if (component) {\n<span *ngComponentOutlet=\"component; injector: injector\"></span>\n} @else {\n<ng-content></ng-content>\n}\n","import { Pipe, PipeTransform } from '@angular/core';\n\nimport { Helper } from '@webilix/helper-library';\n\n@Pipe({ name: 'ngxHelperBankCard' })\nexport class NgxHelperBankCardPipe implements PipeTransform {\n    transform(value?: string | null, options?: { view?: 'CARD' | 'BANK'; join?: string }): string {\n        if (value === undefined || value === null || !Helper.IS.string(value) || value === '') return '';\n\n        switch (options?.view) {\n            case 'BANK':\n                return Helper.BANK.findCard(value)?.title || '';\n            default:\n                return Helper.STRING.getBankCardView(value, options?.join || '-');\n        }\n    }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\n\nimport { Helper } from '@webilix/helper-library';\nimport { JalaliDateTime } from '@webilix/jalali-date-time';\n\nimport { DateFormats } from '../pipe.types';\n\n@Pipe({ name: 'ngxHelperDate' })\nexport class NgxHelperDatePipe implements PipeTransform {\n    transform(value?: Date | null, options?: { format?: DateFormats; timezone?: string }): string;\n    transform(value?: number | null, options?: { format?: DateFormats; timezone?: string }): string;\n    transform(value?: any, options?: { format?: DateFormats; timezone?: string }): string {\n        if (value === undefined || value === null || (!Helper.IS.date(value) && !Helper.IS.number(value))) return '';\n\n        const date: Date = typeof value === 'number' ? new Date(value) : value;\n        const jalali = JalaliDateTime();\n        const timezone: string =\n            options?.timezone && jalali.timezones().includes(options?.timezone) ? options?.timezone : 'Asia/Tehran';\n\n        switch (options?.format || 'DATE') {\n            case 'FULL':\n                return jalali.toFullText(date, { format: 'W، d N Y H:I', timezone });\n\n            case 'SHORT':\n                return jalali.toFullText(date, { format: 'Y/M/D', timezone });\n\n            case 'DATE':\n                return jalali.toFullText(date, { format: 'W، d N Y', timezone });\n\n            case 'TIME':\n                return jalali.toFullText(date, { format: 'H:I', timezone });\n\n            case 'WEEK':\n                const { from, to } = jalali.periodWeek(1, date, timezone);\n                return Helper.DATE.jalaliPeriod(from, to, timezone);\n\n            case 'MONTH':\n                return jalali.toFullText(date, { format: 'N Y', timezone });\n\n            case 'YEAR':\n                return jalali.toFullText(date, { format: 'Y', timezone });\n\n            default:\n                return jalali.toFullText(date, { format: options?.format, timezone });\n        }\n    }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\n\nimport { Helper } from '@webilix/helper-library';\n\nimport { DurationFormats } from '../pipe.types';\n\n@Pipe({ name: 'ngxHelperDuration' })\nexport class NgxHelperDurationPipe implements PipeTransform {\n    transform(value?: number | null, options?: { format?: DurationFormats; english?: boolean }): string;\n    transform(value?: Date | null, options?: { format?: DurationFormats; english?: boolean }): string;\n    transform(value?: { from: Date } | null, options?: { format?: DurationFormats; english?: boolean }): string;\n    transform(value?: { to: Date } | null, options?: { format?: DurationFormats; english?: boolean }): string;\n    transform(value?: { from: Date; to: Date } | null, options?: { format?: DurationFormats; english?: boolean }): string;\n    transform(value?: any, options?: { format?: DurationFormats; english?: boolean }): string {\n        if (value === undefined || value === null) return '';\n\n        let seconds: number = 0;\n        if (Helper.IS.number(value)) seconds = Math.abs(value);\n        else if (Helper.IS.date(value)) seconds = Math.floor(Math.abs(new Date().getTime() - value.getTime()) / 1000);\n        else if (Helper.IS.object(value)) {\n            const from: Date = 'from' in value ? value.from : new Date();\n            const to: Date = 'to' in value ? value.to : new Date();\n            seconds = Math.floor(Math.abs(from.getTime() - to.getTime()) / 1000);\n        }\n\n        const days: number = Math.floor(seconds / (24 * 60 * 60));\n        seconds -= days * (24 * 60 * 60);\n        const hours: number = Math.floor(seconds / (60 * 60));\n        seconds -= hours * (60 * 60);\n        const minutes: number = Math.floor(seconds / 60);\n        seconds -= minutes * 60;\n\n        const hasDays: boolean = days !== 0;\n        const time: string = [hours, minutes, seconds].map((v) => v.toString().padStart(2, '0')).join(':');\n\n        switch (options?.format || 'TEXT') {\n            case 'TEXT':\n                const hasTime: boolean = !!hours || !!minutes || !!seconds;\n                const day: string = hasDays\n                    ? Helper.NUMBER.format(days, 'EN') + (!!options?.english ? (days === 1 ? ' day' : ' days') : ' روز')\n                    : '';\n                const join = hasDays && hasTime ? (!!options?.english ? ', ' : ' و ') : '';\n                return (day + join + (!hasDays || hasTime ? time : '')).trim();\n\n            case 'FULL':\n                return (hasDays ? '(' + Helper.NUMBER.format(days, 'EN') + ') ' : '') + time;\n\n            case 'DAY':\n                return Helper.NUMBER.format(days + (hours !== 0 || minutes !== 0 ? 1 : 0), !!options?.english ? 'EN' : 'FA');\n\n            case 'HOUR':\n                return Helper.NUMBER.format(days * 24 + hours + (minutes !== 0 ? 1 : 0), !!options?.english ? 'EN' : 'FA');\n\n            case 'MINUTE':\n                return Helper.NUMBER.format(days * 24 * 60 + hours * 60 + minutes, !!options?.english ? 'EN' : 'FA');\n\n            case 'SECOND':\n                return Helper.NUMBER.format(\n                    days * 24 * 3600 + hours * 3600 + minutes * 60 + seconds,\n                    !!options?.english ? 'EN' : 'FA',\n                );\n        }\n    }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\n\nimport { Helper } from '@webilix/helper-library';\n\n@Pipe({ name: 'ngxHelperFileSize' })\nexport class NgxHelperFileSizePipe implements PipeTransform {\n    transform(value?: number | null, options?: { english?: boolean }): string {\n        if (value === undefined || value === null || !Helper.IS.number(value)) return '';\n\n        return Helper.NUMBER.toFileSize(value, !!options?.english ? 'EN' : 'FA');\n    }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\n\nimport { Helper } from '@webilix/helper-library';\n\n@Pipe({ name: 'ngxHelperMobile' })\nexport class NgxHelperMobilePipe implements PipeTransform {\n    transform(value?: string | null, options?: { join?: string }): string {\n        if (value === undefined || value === null || !Helper.IS.string(value) || value === '') return '';\n\n        return Helper.STRING.getMobileView(value, options?.join || '-');\n    }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\n\nimport { Helper } from '@webilix/helper-library';\n\n@Pipe({ name: 'ngxHelperNumber' })\nexport class NgxHelperNumberPipe implements PipeTransform {\n    transform(value?: number | null, options?: { fractionDigits?: number; english?: boolean }): string {\n        if (value === undefined || value === null || !Helper.IS.number(value)) return '';\n\n        value = options?.fractionDigits ? +value.toFixed(options?.fractionDigits) : value;\n        return Helper.NUMBER.format(value, options?.english ? 'EN' : 'FA');\n    }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\n\nimport { Helper } from '@webilix/helper-library';\n\n@Pipe({ name: 'ngxHelperPeriod' })\nexport class NgxHelperPeriodPipe implements PipeTransform {\n    transform(value?: Date | null, options?: { timezone?: string }): string;\n    transform(value?: { from: Date } | null, options?: { timezone?: string }): string;\n    transform(value?: { to: Date } | null, options?: { timezone?: string }): string;\n    transform(value?: { from: Date; to: Date } | null, options?: { timezone?: string }): string;\n    transform(value?: any, options?: { timezone?: string }): string {\n        if (value === undefined || value === null) return '';\n\n        const from: Date = Helper.IS.date(value) ? value : 'from' in value ? value.from : new Date();\n        const to: Date = Helper.IS.date(value) ? new Date() : 'to' in value ? value.to : new Date();\n\n        return Helper.DATE.jalaliPeriod(from, to, options?.timezone || '');\n    }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\n\nimport { Helper } from '@webilix/helper-library';\n\n@Pipe({ name: 'ngxHelperPrice' })\nexport class NgxHelperPricePipe implements PipeTransform {\n    transform(value?: number | null, options?: { currency?: string; short?: boolean; english?: boolean }): string {\n        if (value === undefined || value === null || !Helper.IS.number(value) || value < 0) return '';\n\n        const getPrice = (...titles: [string, string][]): string => {\n            if (value === undefined || value === null) return '';\n\n            const price: string = Helper.NUMBER.format(+value.toFixed(2), !!options?.english ? 'EN' : 'FA');\n            const unit: string = titles[options?.short ? 0 : 1][options?.english ? 0 : 1];\n            const currency: string = options?.currency ? ' ' + options?.currency : '';\n\n            return `${price} ${unit}${currency}`;\n        };\n\n        if (value < 1000) return getPrice(['', ''], ['', '']);\n\n        value /= 1000;\n        if (value < 1000) return getPrice(['T', 'ه'], ['Thousand', 'هزار']);\n\n        value /= 1000;\n        if (value < 1000) return getPrice(['M', 'م'], ['Million', 'میلیون']);\n\n        value /= 1000;\n        return getPrice(['B', 'د'], ['Billion', 'میلیارد']);\n    }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\n\nimport { Helper } from '@webilix/helper-library';\n\n@Pipe({ name: 'ngxHelperVolume' })\nexport class NgxHelperVolumePipe implements PipeTransform {\n    transform(value?: number | null, options?: { short?: boolean; english?: boolean }): string {\n        if (value === undefined || value === null || !Helper.IS.number(value) || value < 0) return '';\n\n        const getVolume = (...titles: [string, string][]): string => {\n            if (value === undefined || value === null) return '';\n\n            const volume: string = Helper.NUMBER.format(+value.toFixed(2), options?.english ? 'EN' : 'FA');\n            const shortIndex: number = options?.short ? 0 : 1;\n            const titleIndex: number = options?.english ? 0 : 1;\n            return `${volume} ${titles[shortIndex][titleIndex]}`;\n        };\n\n        if (value === 0) return getVolume(['', ''], ['', '']);\n\n        if (value < 1000) return getVolume(['ML', 'م'], ['Milliliter', 'میلی لیتر']);\n\n        value /= 1000;\n        return getVolume(['L', 'ل'], ['Liter', 'لیتر']);\n    }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\n\nimport { Helper } from '@webilix/helper-library';\n\n@Pipe({ name: 'ngxHelperWeight' })\nexport class NgxHelperWeightPipe implements PipeTransform {\n    transform(value?: number | null, options?: { short?: boolean; english?: boolean }): string {\n        if (value === undefined || value === null || !Helper.IS.number(value) || value < 0) return '';\n\n        const getWeight = (...titles: [string, string][]): string => {\n            if (value === undefined || value === null) return '';\n\n            const weight: string = Helper.NUMBER.format(+value.toFixed(2), options?.english ? 'EN' : 'FA');\n            const shortIndex: number = options?.short ? 0 : 1;\n            const titleIndex: number = options?.english ? 0 : 1;\n            return `${weight} ${titles[shortIndex][titleIndex]}`;\n        };\n\n        if (value === 0) return getWeight(['', ''], ['', '']);\n\n        if (value < 1000) return getWeight(['G', 'گ'], ['Gram', 'گرم']);\n\n        value /= 1000;\n        if (value < 1000) return getWeight(['K', 'ک'], ['Kilogram', 'کیلو']);\n\n        value /= 1000;\n        if (value < 1000) return getWeight(['T', 'ت'], ['Tonne', 'تن']);\n\n        value /= 1000;\n        if (value < 1000) return getWeight(['KT', 'ه'], ['Kilotonne', 'هزار تن']);\n\n        value /= 1000;\n        return getWeight(['MT', 'م'], ['Milliontonne', 'میلیون تن']);\n    }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\n\nimport { Helper } from '@webilix/helper-library';\n\nimport { NgxHelperBankCardPipe } from '../../pipes/bank-card.pipe';\nimport { NgxHelperDatePipe } from '../../pipes/date.pipe';\nimport { NgxHelperDurationPipe } from '../../pipes/duration.pipe';\nimport { NgxHelperFileSizePipe } from '../../pipes/file-size.pipe';\nimport { NgxHelperMobilePipe } from '../../pipes/mobile.pipe';\nimport { NgxHelperNumberPipe } from '../../pipes/number.pipe';\nimport { NgxHelperPeriodPipe } from '../../pipes/period.pipe';\nimport { NgxHelperPricePipe } from '../../pipes/price.pipe';\nimport { NgxHelperVolumePipe } from '../../pipes/volume.pipe';\nimport { NgxHelperWeightPipe } from '../../pipes/weight.pipe';\n\nimport { NgxHelperValue } from './ngx-helper-value.interface';\n\n@Pipe({ name: 'ngxHelperValue' })\nexport class NgxHelperValuePipe implements PipeTransform {\n    transform(value?: NgxHelperValue, options?: { emptyText?: string }): string {\n        const emptyText = options?.emptyText || '';\n        if (value === undefined || Helper.IS.empty(value)) return emptyText;\n\n        switch (value.type) {\n            case 'BANK-CARD':\n                return new NgxHelperBankCardPipe().transform(value.value, value) || emptyText;\n\n            case 'DATE':\n                return new NgxHelperDatePipe().transform(value.value as any, value) || emptyText;\n\n            case 'DURATION':\n                return new NgxHelperDurationPipe().transform(value.value as any, value) || emptyText;\n\n            case 'FILE-SIZE':\n                return new NgxHelperFileSizePipe().transform(value.value as any, value) || emptyText;\n\n            case 'MOBILE':\n                return new NgxHelperMobilePipe().transform(value.value as any, value) || emptyText;\n\n            case 'NUMBER':\n                return new NgxHelperNumberPipe().transform(value.value as any, value) || emptyText;\n\n            case 'PERIOD':\n                return new NgxHelperPeriodPipe().transform(value.value as any, value) || emptyText;\n\n            case 'PRICE':\n                return new NgxHelperPricePipe().transform(value.value as any, value) || emptyText;\n\n            case 'STRING':\n                return Helper.IS.string(value.value) ? (value.value as any) : emptyText;\n\n            case 'VOLUME':\n                return new NgxHelperVolumePipe().transform(value.value as any, value) || emptyText;\n\n            case 'WEIGHT':\n                return new NgxHelperWeightPipe().transform(value.value as any, value) || emptyText;\n        }\n    }\n}\n","import { Injectable } from '@angular/core';\n\nimport { INgxHelperConfig } from '../ngx-helper.config';\n\nimport { INgxHelperValue, NgxHelperValue } from './value/ngx-helper-value.interface';\nimport { NgxHelperValuePipe } from './value/ngx-helper-value.pipe';\n\nexport interface IComponentConfig {\n    readonly mobileWidth: number;\n    readonly pageGroupSidebarWidth: string;\n    readonly stickyView?: {\n        readonly top?: { readonly desktopView: string; readonly mobileView: string };\n        readonly bottom?: { readonly desktopView: string; readonly mobileView: string };\n    };\n}\n\nexport interface IValueComponentData {\n    readonly title: string;\n    readonly value: string;\n    readonly color?: string;\n    readonly action?: () => string[] | void;\n    readonly copyToClipboard?: boolean;\n    readonly ltr?: boolean;\n    readonly english?: boolean;\n}\n\n@Injectable()\nexport class ComponentService {\n    getComponentConfig(config?: Partial<INgxHelperConfig>): IComponentConfig {\n        const getStickyView = (\n            config: string | { desktopView: string; mobileView: string },\n        ): { desktopView: string; mobileView: string } => {\n            return {\n                desktopView: typeof config === 'string' ? config : config.desktopView,\n                mobileView: typeof config === 'string' ? config : config.mobileView,\n            };\n        };\n\n        return {\n            mobileWidth: config?.mobileWidth || 600,\n            pageGroupSidebarWidth: config?.pageGroupSidebarWidth || '200px',\n            stickyView: config?.stickyView\n                ? {\n                      top: config.stickyView.top ? getStickyView(config.stickyView.top) : undefined,\n                      bottom: config.stickyView.bottom ? getStickyView(config.stickyView.bottom) : undefined,\n                  }\n                : undefined,\n        };\n    }\n\n    private isRTL(value: NgxHelperValue): boolean {\n        switch (value.type) {\n            case 'BANK-CARD':\n            case 'MOBILE':\n            case 'NUMBER':\n                return true;\n\n            case 'DURATION':\n                return value.format === 'FULL';\n        }\n\n        return false;\n    }\n\n    getValueData(values: INgxHelperValue[]): IValueComponentData[] {\n        const pipeTransform = new NgxHelperValuePipe().transform;\n        const ltrValues: NgxHelperValue['type'][] = ['BANK-CARD', 'MOBILE', 'NUMBER'];\n\n        return values.map((item) => {\n            const value = item.value;\n            return value === undefined\n                ? { title: item.title, value: '' }\n                : typeof value === 'string'\n                ? { title: item.title, value: value.trim(), color: item.color }\n                : {\n                      title: item.title,\n                      value: pipeTransform(value),\n                      color: item.color,\n                      action: item.action,\n                      copyToClipboard: item.copyToClipboard,\n                      ltr: this.isRTL(value),\n                      english: 'english' in value && !!value.english,\n                  };\n        });\n    }\n}\n","import { Component, HostBinding, Inject, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';\nimport { NgClass } from '@angular/common';\n\nimport { MatButton } from '@angular/material/button';\nimport { MatDivider } from '@angular/material/divider';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\n\nimport { INgxHelperConfig, NGX_HELPER_CONFIG } from '../../ngx-helper.config';\n\nimport { ComponentService, IComponentConfig } from '../component.service';\n\nimport { INgxHelperCardOption, NgxHelperCardAction } from './ngx-helper-card.interface';\n\ntype Button =\n    | { type: 'BUTTON'; title: string; icon: string; action: () => void; color?: string; showIcon?: boolean }\n    | {\n          type: 'MENU';\n          title: string;\n          icon: string;\n          color?: string;\n          showIcon?: boolean;\n          buttons: ('DIVIDER' | { title: string; icon: string; action: () => void; color?: string })[];\n      };\n\n@Component({\n    selector: 'ngx-helper-card',\n    host: { '(window:resize)': 'onResize()' },\n    imports: [NgClass, MatButton, MatDivider, MatIcon, MatMenuModule],\n    providers: [ComponentService],\n    templateUrl: './ngx-helper-card.component.html',\n    styleUrl: './ngx-helper-card.component.scss',\n})\nexport class NgxHelperCardComponent implements OnInit, OnChanges {\n    @HostBinding('className') protected className: string = 'ngx-helper-m3-card';\n\n    @Input({ required: true }) title!: string;\n    @Input({ required: false }) subTitle?: string;\n    @Input({ required: false }) icon?: string;\n    @Input({ required: false }) actions: NgxHelperCardAction[] = [];\n    @Input({ required: false }) option?: INgxHelperCardOption;\n    @Input({ required: false }) padding: string = '1rem';\n    @Input({ required: false }) backgroundColor?: string;\n    @Input({ required: false }) hasShadow: boolean = false;\n\n    public isMobile: boolean = false;\n    public buttons: Button[] = [];\n    private componentConfig!: IComponentConfig;\n\n    public optionId?: string;\n    public optionTitle?: string;\n    public optionItems: ('DIVIDER' | { readonly id: string; readonly title: string })[] = [];\n\n    constructor(\n        private readonly componentService: ComponentService,\n        @Optional() @Inject(NGX_HELPER_CONFIG) private readonly config?: Partial<INgxHelperConfig>,\n    ) {}\n\n    ngOnInit(): void {\n        this.componentConfig = this.componentService.getComponentConfig(this.config);\n        this.onResize();\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        this.className = `ngx-helper-m3-card${this.hasShadow ? ' has-shadow' : ''}`;\n\n        this.buttons = this.actions.map((action) => {\n            return 'buttons' in action ? { type: 'MENU', ...action } : { type: 'BUTTON', ...action };\n        });\n\n        this.optionId = undefined;\n        this.optionItems = [];\n\n        if (this.option) {\n            this.option.items.forEach((item) => {\n                if (item === 'DIVIDER') {\n                    if (this.optionItems.length !== 0 && this.optionItems[this.optionItems.length - 1] !== 'DIVIDER')\n                        this.optionItems.push('DIVIDER');\n                } else this.optionItems.push(item);\n            });\n            while (this.optionItems[this.optionItems.length - 1] === 'DIVIDER')\n                this.optionItems.splice(this.optionItems.length - 1);\n\n            const ids: string[] = this.option.items.map((item) => (item === 'DIVIDER' ? '' : item.id));\n            this.optionId = this.option.id && ids.includes(this.option.id) ? this.option.id : undefined;\n            this.setOption(this.optionId || '', true);\n        }\n    }\n\n    onResize(): void {\n        this.isMobile = window.innerWidth <= this.componentConfig.mobileWidth;\n    }\n\n    setOption(id: string, firstCheck?: boolean): void {\n        if (!this.option || this.optionItems.length === 0) return;\n\n        const ids: string[] = this.optionItems.filter((item) => item !== 'DIVIDER').map((item) => item.id);\n        this.optionId = id && ids.includes(id) ? id : ids[0];\n        this.optionTitle = this.optionItems\n            .filter((item) => item !== 'DIVIDER')\n            .find((item) => item.id === this.optionId)?.title;\n\n        if (!firstCheck) this.option.action(this.optionId);\n    }\n}\n","<div class=\"card-header\" [class.has-sub-title]=\"subTitle\">\n    <!-- ICON -->\n    @if (icon) { <mat-icon>{{ icon }}</mat-icon> }\n\n    <!-- TITLE -->\n    <div class=\"content\">\n        <div class=\"title\">{{ title }}</div>\n        <!-- SUB TITLE -->\n        @if (subTitle) {\n        <div class=\"sub-title\">{{ subTitle }}</div>\n        }\n    </div>\n\n    <!-- BUTTONS -->\n    @if (buttons.length > 0) {\n    <div class=\"buttons\" [ngClass]=\"isMobile ? 'mobile-view' : ''\">\n        @for (item of buttons; track $index) {\n        <!-- TYPE -->\n        @switch (item.type) {\n\n        <!-- BUTTON -->\n        @case('BUTTON') {\n        <button mat-button type=\"button\" [style.color]=\"item.color\" (click)=\"item.action()\">\n            @if (!isMobile) {\n            <div class=\"title\">{{ item.title }}</div>\n            }\n            <!-- ICON -->\n            @if (isMobile || item.showIcon) {\n            <mat-icon>{{ item.icon }}</mat-icon>\n            }\n        </button>\n        }\n\n        <!-- MENU -->\n        @case('MENU') {\n        <button mat-button type=\"button\" [style.color]=\"item.color\" [matMenuTriggerFor]=\"actionMenu\">\n            @if (!isMobile) {\n            <div class=\"title\">{{ item.title }}</div>\n            }\n            <!-- ICON -->\n            @if (isMobile || item.showIcon) {\n            <mat-icon>{{ item.icon }}</mat-icon>\n            }\n        </button>\n        <mat-menu #actionMenu=\"matMenu\" class=\"ngx-helper-card-action-menu\" [xPosition]=\"'before'\">\n            @for (menu of item.buttons; track $index) {\n            <!-- DIVIDER -->\n            @if (menu === 'DIVIDER') { <mat-divider></mat-divider> }\n            <!-- BUTTON -->\n            @else {\n            <button mat-menu-item type=\"button\" (click)=\"menu.action()\" [style.color]=\"menu.color\">\n                <div class=\"title\">{{ menu.title }}</div>\n                <mat-icon [style.color]=\"menu.color\">{{ menu.icon }}</mat-icon>\n            </button>\n            } }\n        </mat-menu>\n        } } }\n    </div>\n    }\n\n    <!-- OPTION -->\n    @if (option && optionItems.length > 0) {\n    <div class=\"option\" [ngClass]=\"isMobile ? 'mobile-view' : ''\">\n        <button mat-button type=\"button\" [matMenuTriggerFor]=\"optionMenu\">\n            @if (!isMobile) {\n            <div class=\"title\">{{ optionTitle }}</div>\n            }\n            <mat-icon [class.mobile-view]=\"isMobile\">{{ option.icon }}</mat-icon>\n        </button>\n        <mat-menu #optionMenu=\"matMenu\" class=\"ngx-helper-card-action-option\" [xPosition]=\"'before'\">\n            @for (item of optionItems; track $index) {\n            <!-- DIVIDER -->\n            @if (item === 'DIVIDER') { <mat-divider></mat-divider> }\n            <!-- BUTTON -->\n            @else {\n            <button mat-menu-item type=\"button\" [disabled]=\"optionId === item.id\" (click)=\"setOption(item.id)\">\n                <div class=\"title\">{{ item.title }}</div>\n                <mat-icon [style.opacity]=\"optionId === item.id ? 1 : 0\">done_all</mat-icon>\n            </button>\n            } }\n        </mat-menu>\n    </div>\n    }\n</div>\n\n<div class=\"card-content\" [style.padding]=\"padding\" [style.background-color]=\"backgroundColor\">\n    <ng-content></ng-content>\n</div>\n","import { Component, HostBinding, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';\n\n@Component({\n    selector: 'ngx-helper-loader',\n    imports: [],\n    templateUrl: './ngx-helper-loader.component.html',\n    styleUrl: './ngx-helper-loader.component.scss',\n})\nexport class NgxHelperLoaderComponent implements OnInit, OnChanges {\n    @HostBinding('style.--loader-size') public loaderSize!: string;\n    @HostBinding('style.--loader-color') public loaderColor!: string;\n\n    @Input({ required: false }) public mode: 'SPINNER' | 'DOTS-SPINNER' | 'WHEEL-SPINNER' = 'SPINNER';\n    @Input({ required: false }) public size!: number;\n    @Input({ required: false }) public color!: string;\n    @Input({ required: false }) public padding?: string;\n    @Input({ required: false }) public margin?: string;\n\n    ngOnInit(): void {\n        this.init();\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        this.init();\n    }\n\n    init(): void {\n        this.loaderSize = `${this.size || 25}px`;\n        this.loaderColor = this.color || `var(--secondary)`;\n    }\n}\n","<div [style.padding]=\"padding || '0'\">\n    <div [class]=\"mode.toLowerCase()\" [style.margin]=\"margin || '0px'\"></div>\n</div>\n","import { InjectionToken } from '@angular/core';\nimport { ComponentType } from '@angular/cdk/portal';\n\ninterface IPage {\n    readonly title: string;\n    readonly icon: string;\n    readonly component: ComponentType<any>;\n}\n\nexport interface INgxHelperPageGroup {\n    readonly route?: string[];\n    readonly header?: ComponentType<any>;\n    readonly pages: { [key: string]: IPage };\n\n    // SETTING\n    readonly sidebarWidth?: string;\n    readonly showMenu?: boolean;\n}\n\nexport interface INgxHelperPageGroupItem {\n    readonly index: number;\n    readonly id: string;\n    readonly title: string;\n    readonly icon: string;\n}\n\nexport const NGX_HELPER_PAGE_GROUP_ITEM: InjectionToken<INgxHelperPageGroupItem> = new InjectionToken(\n    'NGX-HELPER-PAGE-GROUP-ITEM',\n);\nexport const NGX_HELPER_PAGE_GROUP_DATA: InjectionToken<any> = new InjectionToken('NGX-HELPER-PAGE-GROUP-DATA');\nexport const NGX_HELPER_PAGE_GROUP_DATA_CHANGE: InjectionToken<(data: any) => void> = new InjectionToken(\n    'NGX-HELPER-PAGE-GROUP-DATA-CHANGE',\n);\n","import {\n    Component,\n    EventEmitter,\n    HostBinding,\n    Inject,\n    Injector,\n    Input,\n    OnChanges,\n    OnInit,\n    Optional,\n    Output,\n    SimpleChanges,\n} from '@angular/core';\nimport { NgComponentOutlet } from '@angular/common';\nimport { ActivatedRoute, Router } from '@angular/router';\n\nimport { MatButton, MatIconButton } from '@angular/material/button';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\n\nimport { Helper } from '@webilix/helper-library';\n\nimport { INgxHelperConfig, NGX_HELPER_CONFIG } from '../../ngx-helper.config';\n\nimport { ComponentService, IComponentConfig } from '../component.service';\n\nimport {\n    INgxHelperPageGroup,\n    INgxHelperPageGroupItem,\n    NGX_HELPER_PAGE_GROUP_DATA,\n    NGX_HELPER_PAGE_GROUP_DATA_CHANGE,\n    NGX_HELPER_PAGE_GROUP_ITEM,\n} from './ngx-helper-page-group.interface';\n\n@Component({\n    selector: 'ngx-helper-page-group',\n    host: { '(window:resize)': 'onResize()' },\n    imports: [NgComponentOutlet, MatButton, MatIcon, MatMenuModule],\n    providers: [ComponentService],\n    templateUrl: './ngx-helper-page-group.component.html',\n    styleUrl: './ngx-helper-page-group.component.scss',\n})\nexport class NgxHelperPageGroupComponent implements OnInit, OnChanges {\n    @HostBinding('className') protected className: string = 'ngx-helper-m3-page-group';\n    @HostBinding('style.display') public display: string = 'none';\n\n    @Input({ required: true }) pageGroup!: INgxHelperPageGroup;\n    @Input({ required: false }) pageId!: string;\n    @Input({ required: false }) data?: any;\n    @Output() pageChanged: EventEmitter<INgxHelperPageGroupItem> = new EventEmitter<INgxHelperPageGroupItem>();\n    @Output() dataChanged: EventEmitter<any> = new EventEmitter<any>();\n\n    public isMobile: boolean = false;\n    public pages: string[] = [];\n    public injector!: Injector;\n\n    public sidebarWidth!: string;\n    public componentConfig!: IComponentConfig;\n\n    constructor(\n        private readonly activatedRoute: ActivatedRoute,\n        private readonly router: Router,\n        private readonly componentService: ComponentService,\n        @Optional() @Inject(NGX_HELPER_CONFIG) private readonly config?: Partial<INgxHelperConfig>,\n    ) {}\n\n    ngOnInit(): void {\n        this.pages = Object.keys(this.pageGroup.pages);\n        this.display = this.pages.length === 0 ? 'none' : 'flex';\n        if (this.pages.length === 0) return;\n\n        this.componentConfig = this.componentService.getComponentConfig(this.config);\n        this.sidebarWidth = this.pageGroup.sidebarWidth || this.componentConfig.pageGroupSidebarWidth;\n\n        if (!this.pageGroup.pages[this.pageId]) this.pageId = this.pages[0];\n\n        const queryParams: { [key: string]: any } = { ...this.activatedRoute.snapshot.queryParams };\n        if (!!this.pageGroup.route && Helper.IS.string(queryParams['ngx-helper-page-group'])) {\n            const id: string = queryParams['ngx-helper-page-group'];\n            if (this.pageId !== id && this.pages.includes(id)) {\n                this.pageId = id;\n                this.triggerPageChanged();\n            }\n        }\n\n        this.onResize();\n        this.setInjector();\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        this.setInjector();\n    }\n\n    onResize(): void {\n        this.isMobile = window.innerWidth <= this.componentConfig.mobileWidth;\n        this.className = `ngx-helper-m3-page-group${this.isMobile ? ' mobile-view' : ''}`;\n    }\n\n    setInjector(): void {\n        if (this.pages.length === 0) return;\n\n        const item: INgxHelperPageGroupItem = {\n            index: this.pages.findIndex((page) => page === this.pageId),\n            id: this.pageId,\n            title: this.pageGroup.pages[this.pageId].title,\n            icon: this.pageGroup.pages[this.pageId].icon,\n        };\n\n        this.injector = Injector.create({\n            providers: [\n                { provide: NGX_HELPER_PAGE_GROUP_ITEM, useValue: item },\n                { provide: NGX_HELPER_PAGE_GROUP_DATA, useValue: this.data },\n                { provide: NGX_HELPER_PAGE_GROUP_DATA_CHANGE, useValue: (data: any) => this.dataChanged.next(data) },\n            ],\n        });\n    }\n\n    setPage(id: string): void {\n        if (this.pages.length === 0 || this.pageId == id) return;\n\n        const page = this.pageGroup.pages[id];\n        const index: number = this.pages.findIndex((p) => p === id);\n        if (!page || index === -1) return;\n\n        this.pageId = id;\n        this.triggerPageChanged();\n        this.setInjector();\n\n        if (this.pageGroup.route) {\n            const queryParams: { [key: string]: any } = { ...this.activatedRoute.snapshot.queryParams };\n            queryParams['ngx-helper-page-group'] = this.pageId;\n            this.router.navigate(this.pageGroup.route, { queryParams });\n        }\n    }\n\n    triggerPageChanged(): void {\n        const item: INgxHelperPageGroupItem = {\n            index: this.pages.findIndex((page) => page === this.pageId),\n            id: this.pageId,\n            title: this.pageGroup.pages[this.pageId].title,\n            icon: this.pageGroup.pages[this.pageId].icon,\n        };\n        this.pageChanged.next(item);\n    }\n}\n","@if (pages.length > 0) {\n<!-- DESKTOP VIEW -->\n@if (!isMobile) {\n<div\n    class=\"page-group-aside\"\n    [style.width]=\"sidebarWidth\"\n    [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n    [style.top]=\"componentConfig.stickyView?.top?.desktopView || undefined\"\n>\n    @for (item of pages; track $index) {\n    <div\n        class=\"page\"\n        [class.active]=\"pageId === item\"\n        [style.cursor]=\"pageId === item ? 'default' : 'pointer'\"\n        (click)=\"setPage(item)\"\n    >\n        <!-- ICON -->\n        <mat-icon>{{ pageGroup.pages[item].icon }}</mat-icon>\n        <div class=\"title\">{{ pageGroup.pages[item].title }}</div>\n        <!-- CURRENT PAGE -->\n        @if (pageId === item) { <mat-icon>keyboard_double_arrow_left</mat-icon> }\n    </div>\n    }\n</div>\n}\n\n<!-- MOBILE VIEW -->\n@if (isMobile) {\n\n<!-- MOBILE LIST VIEW -->\n@if (pageGroup.showMenu === false || (pages.length <= 5 && !pageGroup.showMenu)) {\n<div\n    class=\"page-group-nav\"\n    [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n    [style.top]=\"componentConfig.stickyView?.top?.mobileView || undefined\"\n>\n    @for (item of pages; track $index) {\n    <div\n        class=\"page\"\n        [class.active]=\"pageId === item\"\n        [style.cursor]=\"pageId === item ? 'default' : 'pointer'\"\n        (click)=\"setPage(item)\"\n    >\n        <mat-icon>{{ pageGroup.pages[item].icon }}</mat-icon>\n        @if (pageId === item) {\n        <div class=\"title\">{{ pageGroup.pages[item].title }}</div>\n        }\n    </div>\n    }\n</div>\n}\n\n<!-- MOBILE MENU VIEW -->\n@else {\n<div\n    class=\"page-group-menu\"\n    [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n    [style.top]=\"componentConfig.stickyView?.top?.mobileView || undefined\"\n>\n    <mat-icon class=\"page\">{{ pageGroup.pages[pageId].icon }}</mat-icon>\n    <div class=\"title\">{{ pageGroup.pages[pageId].title }}</div>\n    <button mat-button type=\"button\" [matMenuTriggerFor]=\"pageMenu\" class=\"menu\">\n        <mat-icon>more_vert</mat-icon>\n    </button>\n    <mat-menu #pageMenu=\"matMenu\" class=\"ngx-helper-page-group-menu\" [xPosition]=\"'before'\">\n        @for (item of pages; track $index) {\n        <button mat-menu-item type=\"button\" (click)=\"setPage(item)\" [disabled]=\"item === pageId\">\n            <div class=\"title\">{{ pageGroup.pages[item].title }}</div>\n            <mat-icon>{{ pageGroup.pages[item].icon }}</mat-icon>\n        </button>\n        }\n    </mat-menu>\n</div>\n}\n\n<div\n    class=\"page-group-spacer\"\n    [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n    [style.top]=\"\n        'calc(' +\n        (componentConfig.stickyView?.top?.mobileView || undefined) +\n        ' + var(--ngx-helper-m3-page-group-toolbar-height))'\n    \"\n></div>\n}\n\n<div class=\"page-group-content\">\n    <!-- HEADER -->\n    @if (pageGroup.header) {\n    <div\n        class=\"header\"\n        [style.position]=\"componentConfig.stickyView?.top ? 'sticky' : 'static'\"\n        [style.top]=\"\n            (isMobile\n                ? 'calc(' +\n                  (componentConfig.stickyView?.top?.mobileView || undefined) +\n                  ' + var(--ngx-helper-m3-page-group-toolbar-height) + 1rem)'\n                : componentConfig.stickyView?.top?.desktopView) || undefined\n        \"\n    >\n        <span *ngComponentOutlet=\"pageGroup.header; injector: injector\"></span>\n        <div class=\"spacer\"></div>\n    </div>\n    }\n    <span *ngComponentOutlet=\"pageGroup.pages[pageId].component; injector: injector\"></span>\n</div>\n}\n","import { Component, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';\n\n@Component({\n    selector: 'ngx-helper-progress',\n    imports: [],\n    templateUrl: './ngx-helper-progress.component.html',\n    styleUrl: './ngx-helper-progress.component.scss',\n})\nexport class NgxHelperProgressComponent implements OnChanges {\n    @HostBinding('className') protected className: string = 'ngx-helper-m3-progress';\n    @HostBinding('style.border-radius') protected borderRadiusCSS!: string;\n    @HostBinding('style.background-color') protected backgroundColorCSS!: string;\n\n    @Input({ required: true }) value!: number | { done: number; total: number };\n    @Input({ required: false }) align: 'LR' | 'RL' | 'TB' | 'BT' = 'LR';\n    @Input({ required: false }) borderRadius: string = '0px';\n    @Input({ required: false }) progressColor: string = 'var(--surface-container)';\n    @Input({ required: false }) backgroundColor?: string;\n\n    public size!: string;\n    public direction!: 'H' | 'V';\n\n    ngOnChanges(changes: SimpleChanges): void {\n        this.className = `ngx-helper-m3-progress ${this.align}`;\n        this.borderRadiusCSS = this.borderRadius;\n        this.backgroundColorCSS = this.backgroundColor || 'transparent';\n\n        let value: number =\n            this.value === undefined\n                ? 0\n                : typeof this.value === 'number'\n                ? this.value\n                : (this.value.done / this.value.total) * 100;\n        if (isNaN(value) || value < 0) value = 0;\n        else if (value > 100) value = 100;\n        this.size = `${value.toFixed(2)}%`;\n        this.direction = this.align === 'LR' || this.align === 'RL' ? 'H' : 'V';\n    }\n}\n","<div\n    class=\"progress\"\n    [style.border-radius]=\"borderRadius\"\n    [style.background-color]=\"progressColor\"\n    [style.width]=\"direction === 'H' ? size : '100%'\"\n    [style.height]=\"direction === 'V' ? size : '100%'\"\n></div>\n<div class=\"content\"><ng-content></ng-content></div>\n","import { Component, HostBinding, Inject, Input, OnInit, Optional } from '@angular/core';\n\nimport { INgxHelperConfig, NGX_HELPER_CONFIG } from '../../ngx-helper.config';\n\nimport { ComponentService, IComponentConfig } from '../component.service';\n\n@Component({\n    selector: 'ngx-helper-section',\n    host: { '(window:resize)': 'onResize()' },\n    imports: [],\n    providers: [ComponentService],\n    templateUrl: './ngx-helper-section.component.html',\n    styleUrl: './ngx-helper-section.component.scss',\n})\nexport class NgxHelperSectionComponent implements OnInit {\n    @HostBinding('style.--section-gap') protected gap!: string;\n\n    @Input({ required: false }) gapSize?: string;\n\n    private componentConfig!: IComponentConfig;\n    public isMobile: boolean = false;\n\n    constructor(\n        private readonly componentService: ComponentService,\n        @Optional() @Inject(NGX_HELPER_CONFIG) private readonly config?: Partial<INgxHelperConfig>,\n    ) {}\n\n    ngOnInit(): void {\n        this.componentConfig = this.componentService.getComponentConfig(this.config);\n        this.gap = this.gapSize || '1rem';\n\n        this.onResize();\n    }\n\n    onResize(): void {\n        this.isMobile = window.innerWidth <= this.componentConfig.mobileWidth;\n    }\n}\n","<div class=\"section-columns\" [class.section-columns-mobile]=\"isMobile\">\n    <ng-content></ng-content>\n</div>\n","import { Component, HostBinding, inject, Inject, Input, OnChanges, OnInit, Optional, SimpleChanges } from '@angular/core';\n\nimport { INgxHelperConfig, NGX_HELPER_CONFIG } from '../../../ngx-helper.config';\n\nimport { ComponentService, IComponentConfig } from '../../component.service';\n\n@Component({\n    selector: 'ngx-helper-section-column',\n    host: { '(window:resize)': 'onResize()' },\n    imports: [],\n    templateUrl: './ngx-helper-section-column.component.html',\n    styleUrl: './ngx-helper-section-column.component.scss',\n})\nexport class NgxHelperSectionColumnComponent implements OnInit, OnChanges {\n    @HostBinding('style.flex') flexStyle: string = '1';\n    @HostBinding('style.width') widthStyle: string = '*';\n\n    @HostBinding('style.position') stickyPosition!: string;\n    @HostBinding('style.zInde') stickyZIndex!: string;\n