npm - cmat - Versions diffs - 0.0.48 → 0.0.49 - Mend

cmat 0.0.48 → 0.0.49

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.

Files changed (108) hide show

package/fesm2022/cmat-components-opt-input.mjs CHANGED Viewed

@@ -415,10 +415,10 @@ class CmatOtpInputComponent {
             this.onInputChange.next(val);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CmatOtpInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: CmatOtpInputComponent, isStandalone: true, selector: "cmat-otp-input", inputs: { id: "id", config: "config", placeholder: "placeholder", value: "value", required: "required", disabled: "disabled" }, outputs: { onBlur: "onBlur", onInputChange: "onInputChange" }, host: { properties: { "attr.id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: CmatOtpInputComponent }], exportAs: ["cmatOtpInput"], usesOnChanges: true, ngImport: i0, template: "@if(otpForm.controls){\r\n<div class=\"cmat-otp-input-wrapper wrapper {{config.containerClass}}\" id=\"c_{{componentKey}}\"\r\n    [attr.tabindex]=\"disabled ? -1 : 0\" [ngStyle]=\"config.containerStyles\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut()\">\r\n    <div class=\"n-o-c\">\r\n        @for (item of controlKeys; track $index) {\r\n        <input #inp class=\"cmat-otp-input {{config.inputClass}}\" autocomplete=\"one-time-code\" [pattern]=\"config.allowNumbersOnly ? '\\\\d*' : ''\"\r\n            [type]=\"inputType\" [placeholder]=\"config.placeholder || ''\"\r\n            [ngStyle]=\"config.inputStyles\" [id]=\"getBoxId($index)\"\r\n            [ngClass]=\"{'error-input': (config.showError && errorState)}\"\r\n            [formControl]=\"getFormControl(item)\" (paste)=\"handlePaste($event)\" (keyup)=\"onKeyUp($event,$index)\"\r\n            (input)=\"onInput($event,$index)\" (keydown)=\"onKeyDown($event,$index)\">\r\n        @if(config.separator && !$last){\r\n        {{config.separator}}\r\n        }\r\n        }\r\n    </div>\r\n</div>\r\n}", styles: [".cmat-otp-input{width:50px;height:50px;border-radius:4px;border:solid 1px;border-color:rgba(var(--cmat-text-hint-rgb),.5);text-align:center;font-size:32px}.cmat-otp-input:focus{background-color:var(--cmat-divider);border:solid 2px var(--cmat-primary)}.cmat-otp-input-wrapper .cmat-otp-input{margin:0 .51rem}.cmat-otp-input-wrapper .cmat-otp-input:first-child{margin-left:0}.cmat-otp-input-wrapper .cmat-otp-input:last-child{margin-right:0}.n-o-c{display:flex;align-items:center}.error-input{border-color:var(--cmat-warn)}@media screen and (max-width: 767px){.cmat-otp-input{width:40px;font-size:24px;height:40px}}@media screen and (max-width: 420px){.cmat-otp-input{width:30px;font-size:18px;height:30px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatOtpInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: CmatOtpInputComponent, isStandalone: true, selector: "cmat-otp-input", inputs: { id: "id", config: "config", placeholder: "placeholder", value: "value", required: "required", disabled: "disabled" }, outputs: { onBlur: "onBlur", onInputChange: "onInputChange" }, host: { properties: { "attr.id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: CmatOtpInputComponent }], exportAs: ["cmatOtpInput"], usesOnChanges: true, ngImport: i0, template: "@if(otpForm.controls){\r\n<div class=\"cmat-otp-input-wrapper wrapper {{config.containerClass}}\" id=\"c_{{componentKey}}\"\r\n    [attr.tabindex]=\"disabled ? -1 : 0\" [ngStyle]=\"config.containerStyles\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut()\">\r\n    <div class=\"n-o-c\">\r\n        @for (item of controlKeys; track $index) {\r\n        <input #inp class=\"cmat-otp-input {{config.inputClass}}\" autocomplete=\"one-time-code\" [pattern]=\"config.allowNumbersOnly ? '\\\\d*' : ''\"\r\n            [type]=\"inputType\" [placeholder]=\"config.placeholder || ''\"\r\n            [ngStyle]=\"config.inputStyles\" [id]=\"getBoxId($index)\"\r\n            [ngClass]=\"{'error-input': (config.showError && errorState)}\"\r\n            [formControl]=\"getFormControl(item)\" (paste)=\"handlePaste($event)\" (keyup)=\"onKeyUp($event,$index)\"\r\n            (input)=\"onInput($event,$index)\" (keydown)=\"onKeyDown($event,$index)\">\r\n        @if(config.separator && !$last){\r\n        {{config.separator}}\r\n        }\r\n        }\r\n    </div>\r\n</div>\r\n}", styles: [".cmat-otp-input{width:50px;height:50px;border-radius:4px;border:solid 1px;border-color:rgba(var(--cmat-text-hint-rgb),.5);text-align:center;font-size:32px}.cmat-otp-input:focus{background-color:var(--cmat-divider);border:solid 2px var(--cmat-primary)}.cmat-otp-input-wrapper .cmat-otp-input{margin:0 .51rem}.cmat-otp-input-wrapper .cmat-otp-input:first-child{margin-left:0}.cmat-otp-input-wrapper .cmat-otp-input:last-child{margin-right:0}.n-o-c{display:flex;align-items:center}.error-input{border-color:var(--cmat-warn)}@media screen and (max-width: 767px){.cmat-otp-input{width:40px;font-size:24px;height:40px}}@media screen and (max-width: 420px){.cmat-otp-input{width:30px;font-size:18px;height:30px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CmatOtpInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatOtpInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-otp-input', exportAs: 'cmatOtpInput', imports: [CommonModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: CmatOtpInputComponent }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if(otpForm.controls){\r\n<div class=\"cmat-otp-input-wrapper wrapper {{config.containerClass}}\" id=\"c_{{componentKey}}\"\r\n    [attr.tabindex]=\"disabled ? -1 : 0\" [ngStyle]=\"config.containerStyles\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut()\">\r\n    <div class=\"n-o-c\">\r\n        @for (item of controlKeys; track $index) {\r\n        <input #inp class=\"cmat-otp-input {{config.inputClass}}\" autocomplete=\"one-time-code\" [pattern]=\"config.allowNumbersOnly ? '\\\\d*' : ''\"\r\n            [type]=\"inputType\" [placeholder]=\"config.placeholder || ''\"\r\n            [ngStyle]=\"config.inputStyles\" [id]=\"getBoxId($index)\"\r\n            [ngClass]=\"{'error-input': (config.showError && errorState)}\"\r\n            [formControl]=\"getFormControl(item)\" (paste)=\"handlePaste($event)\" (keyup)=\"onKeyUp($event,$index)\"\r\n            (input)=\"onInput($event,$index)\" (keydown)=\"onKeyDown($event,$index)\">\r\n        @if(config.separator && !$last){\r\n        {{config.separator}}\r\n        }\r\n        }\r\n    </div>\r\n</div>\r\n}", styles: [".cmat-otp-input{width:50px;height:50px;border-radius:4px;border:solid 1px;border-color:rgba(var(--cmat-text-hint-rgb),.5);text-align:center;font-size:32px}.cmat-otp-input:focus{background-color:var(--cmat-divider);border:solid 2px var(--cmat-primary)}.cmat-otp-input-wrapper .cmat-otp-input{margin:0 .51rem}.cmat-otp-input-wrapper .cmat-otp-input:first-child{margin-left:0}.cmat-otp-input-wrapper .cmat-otp-input:last-child{margin-right:0}.n-o-c{display:flex;align-items:center}.error-input{border-color:var(--cmat-warn)}@media screen and (max-width: 767px){.cmat-otp-input{width:40px;font-size:24px;height:40px}}@media screen and (max-width: 420px){.cmat-otp-input{width:30px;font-size:18px;height:30px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{

package/fesm2022/cmat-components-opt-input.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cmat-components-opt-input.mjs","sources":["../../../projects/cmat/components/opt-input/utils/keyboard-util.ts","../../../projects/cmat/components/opt-input/utils/object-util.ts","../../../projects/cmat/components/opt-input/otp-input.component.ts","../../../projects/cmat/components/opt-input/otp-input.component.html","../../../projects/cmat/components/opt-input/cmat-components-opt-input.ts"],"sourcesContent":["export class KeyboardUtil {\r\n static ifTab(event: KeyboardEvent): boolean {\r\n return this.ifKey(event, 'Tab');\r\n }\r\n static ifDelete(event: KeyboardEvent): boolean {\r\n return this.ifKey(event, 'Delete;Del');\r\n }\r\n static ifBackspace(event: KeyboardEvent): boolean {\r\n return this.ifKey(event, 'Backspace');\r\n }\r\n static ifRightArrow(event: KeyboardEvent): boolean {\r\n return this.ifKey(event, 'ArrowRight;Right')\r\n }\r\n static ifLeftArrow(event: KeyboardEvent): boolean {\r\n return this.ifKey(event, 'ArrowLeft;Left')\r\n }\r\n static ifSpacebar(event: KeyboardEvent): boolean {\r\n return this.ifKey(event, 'Spacebar; ')//don't remove the space after ; as this will check for space key\r\n }\r\n static ifKey(event: KeyboardEvent, keys: string): boolean {\r\n let keysToCheck = keys.split(';');\r\n return keysToCheck.some(k => k === event.key);\r\n }\r\n}\r\n","export class ObjectUtil{\r\n static keys(obj:any):string[]{\r\n if(!obj) return [];\r\n return Object.keys(obj);\r\n }\r\n}\r\n","/* eslint-disable @angular-eslint/no-output-on-prefix /\r\n/ eslint-disable @typescript-eslint/member-ordering /\r\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\r\nimport { CommonModule } from '@angular/common';\r\nimport { Component, Input, Output, AfterViewInit, OnDestroy, OnChanges, SimpleChanges, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, DOCUMENT, inject } from '@angular/core';\r\nimport { FormControl, ReactiveFormsModule, ControlValueAccessor, FormBuilder, UntypedFormGroup, NgControl } from '@angular/forms';\r\nimport { MatFormFieldControl } from '@angular/material/form-field';\r\nimport { isNil } from 'lodash';\r\nimport { Subject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { OptInputConfig } from './models/config';\r\nimport { KeyboardUtil } from './utils/keyboard-util';\r\nimport { ObjectUtil } from './utils/object-util';\r\n\r\nlet NEXT_ID = 0;\r\n\r\n@Component({\r\n selector: 'cmat-otp-input',\r\n templateUrl: './otp-input.component.html',\r\n styleUrls: ['./otp-input.component.scss'],\r\n exportAs: 'cmatOtpInput',\r\n imports: [CommonModule, ReactiveFormsModule],\r\n providers: [{ provide: MatFormFieldControl, useExisting: CmatOtpInputComponent }],\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class CmatOtpInputComponent implements MatFormFieldControl<any>, AfterViewInit, OnDestroy, OnChanges, ControlValueAccessor {\r\n @HostBinding('attr.id')\r\n @Input()\r\n public id = `cmat-otp-input-${NEXT_ID++}`;\r\n\r\n @Output() onBlur = new Subject<void>();\r\n @Output() onInputChange = new Subject<string \| null>();\r\n @Input() config: OptInputConfig = { length: 4 };\r\n\r\n otpForm: UntypedFormGroup;\r\n currentVal: string \| null;\r\n\r\n componentKey = Math.random()\r\n .toString(36)\r\n .substring(2) + new Date().getTime().toString(36);\r\n\r\n readonly stateChanges: Subject<void> = new Subject<void>();\r\n focused: boolean = false;\r\n\r\n ngControl = inject(NgControl, { optional: true, self: true })!;\r\n private _document = inject<Document>(DOCUMENT);\r\n private _formBuilder = inject(FormBuilder);\r\n private _unsubscribeAll: Subject<void> = new Subject<void>();\r\n private _activeFocusCount = 0;\r\n\r\n constructor() {\r\n this.otpForm = this._formBuilder.group({});\r\n\r\n if (this.ngControl != null) {\r\n this.ngControl.valueAccessor = this;\r\n }\r\n }\r\n\r\n get inputType(): string {\r\n return this.config?.isPasswordInput\r\n ? 'password'\r\n : this.config?.allowNumbersOnly\r\n ? 'tel'\r\n : 'text';\r\n }\r\n get controlKeys(): string[] { return ObjectUtil.keys(this.otpForm?.controls) };\r\n\r\n get errorState(): boolean {\r\n if (this.ngControl == null)\r\n return false;\r\n\r\n return (this.ngControl.invalid && ((this.ngControl.dirty ?? false) \|\| this.ngControl.touched)) ?? false;\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes.config) {\r\n if (this.config.length !== ((this.otpForm?.controls as any).length ?? 0)) {\r\n this.otpForm = this._formBuilder.group({});\r\n for (let index = 0; index < this.config.length; index++) {\r\n this.otpForm.addControl(this._getControlName(index), new FormControl());\r\n }\r\n this.otpForm.valueChanges.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {\r\n ObjectUtil.keys(this.otpForm.controls).forEach((k) => {\r\n var val = this.otpForm.controls[k].value;\r\n if (val && val.length > 1) {\r\n if (val.length >= this.config.length) {\r\n this.setValue(val);\r\n } else {\r\n this._rebuildValue();\r\n }\r\n }\r\n });\r\n });\r\n }\r\n }\r\n }\r\n\r\n setDisabledState(isDisabled: boolean): void {\r\n if (this.otpForm) {\r\n if (isDisabled) {\r\n this.otpForm.disable({ emitEvent: false });\r\n } else {\r\n this.otpForm.enable({ emitEvent: false });\r\n }\r\n }\r\n }\r\n writeValue(value: string): void {\r\n this.currentVal = value \|\| null;\r\n if (this.otpForm && this.currentVal) {\r\n this.setValue(this.currentVal);\r\n }\r\n }\r\n\r\n registerOnChange(fn: any): void {\r\n this._onModelChange = fn;\r\n }\r\n\r\n registerOnTouched(fn: any): void {\r\n this._onTouchedChange = fn;\r\n }\r\n\r\n onFocusIn(): void {\r\n this._onTouchedChange();\r\n this._activeFocusCount++;\r\n\r\n if (!this.focused) {\r\n this.focused = true;\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n onFocusOut(): void {\r\n setTimeout(() => {\r\n this._activeFocusCount--;\r\n if (this._activeFocusCount === 0) {\r\n this.focused = false;\r\n this._onTouchedChange();\r\n this.onBlur.next();\r\n this.stateChanges.next();\r\n }\r\n }, 0);\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n if (!this.config.disableAutoFocus) {\r\n const containerItem = this._document.getElementById(`c_${this.componentKey}`);\r\n if (containerItem) {\r\n const ele: any = containerItem.getElementsByClassName('cmat-otp-input')[0];\r\n if (ele?.focus) {\r\n ele.focus();\r\n }\r\n }\r\n }\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.stateChanges.complete();\r\n this._unsubscribeAll.next(void 0);\r\n this._unsubscribeAll.complete();\r\n }\r\n\r\n\r\n @Input()\r\n get placeholder(): string {\r\n return this._placeholder;\r\n }\r\n set placeholder(value: string) {\r\n this._placeholder = value;\r\n this.stateChanges.next();\r\n }\r\n private _placeholder: string = '';\r\n\r\n @Input()\r\n get value(): any {\r\n return this._value;\r\n }\r\n set value(value: any) {\r\n if (value !== this.value) {\r\n this._value = value;\r\n\r\n this.stateChanges.next();\r\n\r\n this._onModelChange(value);\r\n }\r\n }\r\n protected _value: any;\r\n\r\n get empty(): boolean {\r\n return !this._value;\r\n }\r\n\r\n get shouldLabelFloat(): boolean {\r\n return this.focused \|\| !this.empty;\r\n }\r\n\r\n @Input()\r\n get required(): boolean { return this._required; }\r\n set required(value: any) {\r\n this._required = coerceBooleanProperty(value);\r\n this.stateChanges.next();\r\n }\r\n protected _required = false;\r\n\r\n @Input()\r\n get disabled(): boolean {\r\n if (!isNil(this.ngControl?.disabled)) {\r\n return this.ngControl.disabled;\r\n }\r\n return this._disabled;\r\n }\r\n set disabled(value: BooleanInput) {\r\n this._disabled = coerceBooleanProperty(value);\r\n\r\n this.setDisabledState(this._disabled);\r\n\r\n if (this.focused) {\r\n this.focused = false;\r\n this.stateChanges.next();\r\n }\r\n }\r\n protected _disabled = false;\r\n\r\n setDescribedByIds(ids: string[]): void {\r\n const containerItem = this._document.getElementById(`c_${this.componentKey}`);\r\n\r\n if (containerItem) {\r\n if (ids.length) {\r\n containerItem.setAttribute('aria-describedby', ids.join(' '));\r\n } else {\r\n containerItem.removeAttribute('aria-describedby');\r\n }\r\n }\r\n }\r\n\r\n onContainerClick(): void {\r\n const containerItem = this._document.getElementById(`c_${this.componentKey}`);\r\n\r\n if (!this.focused && containerItem) {\r\n containerItem.focus();\r\n }\r\n }\r\n\r\n onKeyDown($event: any, inputIdx: number): any {\r\n const prevInputId = this.getBoxId(inputIdx - 1);\r\n const currentInputId = this.getBoxId(inputIdx);\r\n const nextInputId = this.getBoxId(inputIdx + 1);\r\n if (KeyboardUtil.ifSpacebar($event)) {\r\n $event.preventDefault();\r\n return false;\r\n }\r\n if (KeyboardUtil.ifBackspace($event)) {\r\n if (!$event.target.value) {\r\n this._clearInput(prevInputId, inputIdx - 1);\r\n this._setSelected(prevInputId);\r\n } else {\r\n this._clearInput(currentInputId, inputIdx);\r\n }\r\n this._rebuildValue();\r\n return;\r\n }\r\n if (KeyboardUtil.ifDelete($event)) {\r\n if (!$event.target.value) {\r\n this._clearInput(prevInputId, inputIdx - 1);\r\n this._setSelected(prevInputId);\r\n } else {\r\n this._clearInput(currentInputId, inputIdx);\r\n }\r\n this._rebuildValue();\r\n return;\r\n }\r\n if (this.ifValidKeyCode($event)) {\r\n $event.target.value = $event.key;\r\n let ctrlName = this._getControlName(inputIdx);\r\n this.otpForm.controls[ctrlName]?.setValue($event.key);\r\n $event.preventDefault();\r\n this._setSelected(nextInputId);\r\n this._rebuildValue();\r\n }\r\n }\r\n onInput($event: any, inputIdx: number): void {\r\n let newVal = this.currentVal ? `${this.currentVal}${$event.target.value}` : $event.target.value;\r\n if (this.config.allowNumbersOnly && !this.validateNumber(newVal)) {\r\n $event.target.value = null;\r\n $event.stopPropagation();\r\n $event.preventDefault();\r\n this._clearInput(null, inputIdx);\r\n }\r\n }\r\n\r\n\r\n onKeyUp($event: any, inputIdx: number): void {\r\n if (KeyboardUtil.ifTab($event)) {\r\n inputIdx -= 1;\r\n }\r\n const nextInputId = this.getBoxId(inputIdx + 1);\r\n const prevInputId = this.getBoxId(inputIdx - 1);\r\n if (KeyboardUtil.ifRightArrow($event)) {\r\n $event.preventDefault();\r\n this._setSelected(nextInputId);\r\n return;\r\n }\r\n if (KeyboardUtil.ifLeftArrow($event)) {\r\n $event.preventDefault();\r\n this._setSelected(prevInputId);\r\n return;\r\n }\r\n\r\n if (!$event.target.value) {\r\n return;\r\n }\r\n }\r\n\r\n validateNumber(val: string): boolean \| string {\r\n return val && /^[0-9]+$/.test(val);\r\n }\r\n\r\n getBoxId(idx: string \| number): string {\r\n return `otp_${idx}_${this.componentKey}`;\r\n }\r\n\r\n focusTo(eleId: string): void {\r\n const ele: any = this._document.getElementById(eleId);\r\n if (ele) {\r\n ele.focus();\r\n }\r\n }\r\n\r\n setValue(value: any): void {\r\n if (this.config.allowNumbersOnly && isNaN(value)) {\r\n return;\r\n }\r\n this.otpForm.reset();\r\n if (!value) {\r\n this._rebuildValue();\r\n return;\r\n }\r\n value = value.toString().replace(/\\s/g, ''); // remove whitespace\r\n Array.from(value).forEach((c, idx) => {\r\n if (this.otpForm.get(this._getControlName(idx))) {\r\n this.otpForm.get(this._getControlName(idx))!.setValue(c);\r\n }\r\n });\r\n if (!this.config.disableAutoFocus) {\r\n setTimeout(() => {\r\n const containerItem = this._document.getElementById(`c_${this.componentKey}`);\r\n var indexOfElementToFocus = value.length < this.config.length ? value.length : (this.config.length - 1);\r\n let ele: any = containerItem!.getElementsByClassName('cmat-otp-input')[indexOfElementToFocus];\r\n if (ele?.focus) {\r\n setTimeout(() => {\r\n ele.focus();\r\n }, 1);\r\n }\r\n }, 0);\r\n\r\n }\r\n this._rebuildValue();\r\n }\r\n\r\n handlePaste(e: any): void {\r\n // Get pasted data via clipboard API\r\n let clipboardData = e.clipboardData ?? (window as any)['clipboardData'];\r\n if (clipboardData) {\r\n var pastedData = clipboardData.getData('Text');\r\n }\r\n e.stopPropagation();\r\n e.preventDefault();\r\n if (!pastedData \|\| (this.config.allowNumbersOnly && !this.validateNumber(pastedData))) {\r\n return;\r\n }\r\n this.setValue(pastedData);\r\n }\r\n\r\n getFormControl(key: string): FormControl {\r\n return this.otpForm.controls[key] as FormControl;\r\n }\r\n\r\n // eslint-disable-next-line @typescript-eslint/no-empty-function\r\n private _onModelChange: (value: any) => void = () => { };\r\n // eslint-disable-next-line @typescript-eslint/no-empty-function\r\n private _onTouchedChange: () => any = () => { };\r\n\r\n private _getControlName(idx: number): string {\r\n return `ctrl_${idx}`;\r\n }\r\n\r\n private _clearInput(eleId: string \| null, inputIdx: number): void {\r\n let ctrlName = this._getControlName(inputIdx);\r\n this.otpForm.controls[ctrlName]?.setValue(null);\r\n if (eleId) {\r\n const ele = this._document.getElementById(eleId);\r\n if (ele && ele instanceof HTMLInputElement) {\r\n ele.value = '';\r\n }\r\n }\r\n }\r\n\r\n private _setSelected(eleId: string): void {\r\n this.focusTo(eleId);\r\n const ele: any = this._document.getElementById(eleId);\r\n if (ele?.setSelectionRange) {\r\n setTimeout(() => {\r\n ele.setSelectionRange(0, 1);\r\n }, 0);\r\n }\r\n }\r\n\r\n private ifValidKeyCode(event: any): boolean \| string {\r\n const inp = event.key;\r\n if (this.config?.allowNumbersOnly) {\r\n return this.validateNumber(inp);\r\n }\r\n const isMobile = /iPhone\|iPad\|iPod\|Android/i.test(navigator.userAgent);\r\n return isMobile \|\|\r\n (/^[a-zA-Z0-9%_\\-@#$!]$/.test(inp) && inp.length == 1);\r\n }\r\n\r\n\r\n private _rebuildValue(): void {\r\n let val: string \| null = null;\r\n ObjectUtil.keys(this.otpForm.controls).forEach((k) => {\r\n let ctrlVal = this.otpForm.controls[k].value;\r\n if (ctrlVal) {\r\n let isLengthExceed = ctrlVal.length > 1;\r\n let isCaseTransformEnabled = !this.config.allowNumbersOnly && this.config.letterCase && (this.config.letterCase.toLocaleLowerCase() == 'upper' \|\| this.config.letterCase.toLocaleLowerCase() == 'lower');\r\n ctrlVal = ctrlVal[0];\r\n let transformedVal = isCaseTransformEnabled ? this.config.letterCase?.toLocaleLowerCase() == 'upper' ? ctrlVal.toUpperCase() : ctrlVal.toLowerCase() : ctrlVal;\r\n if (isCaseTransformEnabled && transformedVal == ctrlVal) {\r\n isCaseTransformEnabled = false;\r\n } else {\r\n ctrlVal = transformedVal;\r\n }\r\n if (val == null) {\r\n val = ctrlVal;\r\n } else {\r\n val += ctrlVal;\r\n }\r\n if (isLengthExceed \|\| isCaseTransformEnabled) {\r\n this.otpForm.controls[k].setValue(ctrlVal);\r\n }\r\n }\r\n });\r\n if (this.currentVal != val) {\r\n this.currentVal = val;\r\n this._onModelChange(val);\r\n\r\n this.onInputChange.next(val);\r\n }\r\n }\r\n}\r\n\r\n","@if(otpForm.controls){\r\n<div class=\"cmat-otp-input-wrapper wrapper {{config.containerClass}}\" id=\"c_{{componentKey}}\"\r\n [attr.tabindex]=\"disabled ? -1 : 0\" [ngStyle]=\"config.containerStyles\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut()\">\r\n <div class=\"n-o-c\">\r\n @for (item of controlKeys; track $index) {\r\n <input #inp class=\"cmat-otp-input {{config.inputClass}}\" autocomplete=\"one-time-code\" [pattern]=\"config.allowNumbersOnly ? '\\\\d' : ''\"\r\n [type]=\"inputType\" [placeholder]=\"config.placeholder \|\| ''\"\r\n [ngStyle]=\"config.inputStyles\" [id]=\"getBoxId($index)\"\r\n [ngClass]=\"{'error-input': (config.showError && errorState)}\"\r\n [formControl]=\"getFormControl(item)\" (paste)=\"handlePaste($event)\" (keyup)=\"onKeyUp($event,$index)\"\r\n (input)=\"onInput($event,$index)\" (keydown)=\"onKeyDown($event,$index)\">\r\n @if(config.separator && !$last){\r\n {{config.separator}}\r\n }\r\n }\r\n </div>\r\n</div>\r\n}","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"cmat-components-opt-input.mjs","sources":["../../../projects/cmat/components/opt-input/utils/keyboard-util.ts","../../../projects/cmat/components/opt-input/utils/object-util.ts","../../../projects/cmat/components/opt-input/otp-input.component.ts","../../../projects/cmat/components/opt-input/otp-input.component.html","../../../projects/cmat/components/opt-input/cmat-components-opt-input.ts"],"sourcesContent":["export class KeyboardUtil {\r\n static ifTab(event: KeyboardEvent): boolean {\r\n return this.ifKey(event, 'Tab');\r\n }\r\n static ifDelete(event: KeyboardEvent): boolean {\r\n return this.ifKey(event, 'Delete;Del');\r\n }\r\n static ifBackspace(event: KeyboardEvent): boolean {\r\n return this.ifKey(event, 'Backspace');\r\n }\r\n static ifRightArrow(event: KeyboardEvent): boolean {\r\n return this.ifKey(event, 'ArrowRight;Right')\r\n }\r\n static ifLeftArrow(event: KeyboardEvent): boolean {\r\n return this.ifKey(event, 'ArrowLeft;Left')\r\n }\r\n static ifSpacebar(event: KeyboardEvent): boolean {\r\n return this.ifKey(event, 'Spacebar; ')//don't remove the space after ; as this will check for space key\r\n }\r\n static ifKey(event: KeyboardEvent, keys: string): boolean {\r\n let keysToCheck = keys.split(';');\r\n return keysToCheck.some(k => k === event.key);\r\n }\r\n}\r\n","export class ObjectUtil{\r\n static keys(obj:any):string[]{\r\n if(!obj) return [];\r\n return Object.keys(obj);\r\n }\r\n}\r\n","/* eslint-disable @angular-eslint/no-output-on-prefix /\r\n/ eslint-disable @typescript-eslint/member-ordering /\r\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\r\nimport { CommonModule } from '@angular/common';\r\nimport { Component, Input, Output, AfterViewInit, OnDestroy, OnChanges, SimpleChanges, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, DOCUMENT, inject } from '@angular/core';\r\nimport { FormControl, ReactiveFormsModule, ControlValueAccessor, FormBuilder, UntypedFormGroup, NgControl } from '@angular/forms';\r\nimport { MatFormFieldControl } from '@angular/material/form-field';\r\nimport { isNil } from 'lodash';\r\nimport { Subject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\nimport { OptInputConfig } from './models/config';\r\nimport { KeyboardUtil } from './utils/keyboard-util';\r\nimport { ObjectUtil } from './utils/object-util';\r\n\r\nlet NEXT_ID = 0;\r\n\r\n@Component({\r\n selector: 'cmat-otp-input',\r\n templateUrl: './otp-input.component.html',\r\n styleUrls: ['./otp-input.component.scss'],\r\n exportAs: 'cmatOtpInput',\r\n imports: [CommonModule, ReactiveFormsModule],\r\n providers: [{ provide: MatFormFieldControl, useExisting: CmatOtpInputComponent }],\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class CmatOtpInputComponent implements MatFormFieldControl<any>, AfterViewInit, OnDestroy, OnChanges, ControlValueAccessor {\r\n @HostBinding('attr.id')\r\n @Input()\r\n public id = `cmat-otp-input-${NEXT_ID++}`;\r\n\r\n @Output() onBlur = new Subject<void>();\r\n @Output() onInputChange = new Subject<string \| null>();\r\n @Input() config: OptInputConfig = { length: 4 };\r\n\r\n otpForm: UntypedFormGroup;\r\n currentVal: string \| null;\r\n\r\n componentKey = Math.random()\r\n .toString(36)\r\n .substring(2) + new Date().getTime().toString(36);\r\n\r\n readonly stateChanges: Subject<void> = new Subject<void>();\r\n focused: boolean = false;\r\n\r\n ngControl = inject(NgControl, { optional: true, self: true })!;\r\n private _document = inject<Document>(DOCUMENT);\r\n private _formBuilder = inject(FormBuilder);\r\n private _unsubscribeAll: Subject<void> = new Subject<void>();\r\n private _activeFocusCount = 0;\r\n\r\n constructor() {\r\n this.otpForm = this._formBuilder.group({});\r\n\r\n if (this.ngControl != null) {\r\n this.ngControl.valueAccessor = this;\r\n }\r\n }\r\n\r\n get inputType(): string {\r\n return this.config?.isPasswordInput\r\n ? 'password'\r\n : this.config?.allowNumbersOnly\r\n ? 'tel'\r\n : 'text';\r\n }\r\n get controlKeys(): string[] { return ObjectUtil.keys(this.otpForm?.controls) };\r\n\r\n get errorState(): boolean {\r\n if (this.ngControl == null)\r\n return false;\r\n\r\n return (this.ngControl.invalid && ((this.ngControl.dirty ?? false) \|\| this.ngControl.touched)) ?? false;\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes.config) {\r\n if (this.config.length !== ((this.otpForm?.controls as any).length ?? 0)) {\r\n this.otpForm = this._formBuilder.group({});\r\n for (let index = 0; index < this.config.length; index++) {\r\n this.otpForm.addControl(this._getControlName(index), new FormControl());\r\n }\r\n this.otpForm.valueChanges.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {\r\n ObjectUtil.keys(this.otpForm.controls).forEach((k) => {\r\n var val = this.otpForm.controls[k].value;\r\n if (val && val.length > 1) {\r\n if (val.length >= this.config.length) {\r\n this.setValue(val);\r\n } else {\r\n this._rebuildValue();\r\n }\r\n }\r\n });\r\n });\r\n }\r\n }\r\n }\r\n\r\n setDisabledState(isDisabled: boolean): void {\r\n if (this.otpForm) {\r\n if (isDisabled) {\r\n this.otpForm.disable({ emitEvent: false });\r\n } else {\r\n this.otpForm.enable({ emitEvent: false });\r\n }\r\n }\r\n }\r\n writeValue(value: string): void {\r\n this.currentVal = value \|\| null;\r\n if (this.otpForm && this.currentVal) {\r\n this.setValue(this.currentVal);\r\n }\r\n }\r\n\r\n registerOnChange(fn: any): void {\r\n this._onModelChange = fn;\r\n }\r\n\r\n registerOnTouched(fn: any): void {\r\n this._onTouchedChange = fn;\r\n }\r\n\r\n onFocusIn(): void {\r\n this._onTouchedChange();\r\n this._activeFocusCount++;\r\n\r\n if (!this.focused) {\r\n this.focused = true;\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n onFocusOut(): void {\r\n setTimeout(() => {\r\n this._activeFocusCount--;\r\n if (this._activeFocusCount === 0) {\r\n this.focused = false;\r\n this._onTouchedChange();\r\n this.onBlur.next();\r\n this.stateChanges.next();\r\n }\r\n }, 0);\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n if (!this.config.disableAutoFocus) {\r\n const containerItem = this._document.getElementById(`c_${this.componentKey}`);\r\n if (containerItem) {\r\n const ele: any = containerItem.getElementsByClassName('cmat-otp-input')[0];\r\n if (ele?.focus) {\r\n ele.focus();\r\n }\r\n }\r\n }\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.stateChanges.complete();\r\n this._unsubscribeAll.next(void 0);\r\n this._unsubscribeAll.complete();\r\n }\r\n\r\n\r\n @Input()\r\n get placeholder(): string {\r\n return this._placeholder;\r\n }\r\n set placeholder(value: string) {\r\n this._placeholder = value;\r\n this.stateChanges.next();\r\n }\r\n private _placeholder: string = '';\r\n\r\n @Input()\r\n get value(): any {\r\n return this._value;\r\n }\r\n set value(value: any) {\r\n if (value !== this.value) {\r\n this._value = value;\r\n\r\n this.stateChanges.next();\r\n\r\n this._onModelChange(value);\r\n }\r\n }\r\n protected _value: any;\r\n\r\n get empty(): boolean {\r\n return !this._value;\r\n }\r\n\r\n get shouldLabelFloat(): boolean {\r\n return this.focused \|\| !this.empty;\r\n }\r\n\r\n @Input()\r\n get required(): boolean { return this._required; }\r\n set required(value: any) {\r\n this._required = coerceBooleanProperty(value);\r\n this.stateChanges.next();\r\n }\r\n protected _required = false;\r\n\r\n @Input()\r\n get disabled(): boolean {\r\n if (!isNil(this.ngControl?.disabled)) {\r\n return this.ngControl.disabled;\r\n }\r\n return this._disabled;\r\n }\r\n set disabled(value: BooleanInput) {\r\n this._disabled = coerceBooleanProperty(value);\r\n\r\n this.setDisabledState(this._disabled);\r\n\r\n if (this.focused) {\r\n this.focused = false;\r\n this.stateChanges.next();\r\n }\r\n }\r\n protected _disabled = false;\r\n\r\n setDescribedByIds(ids: string[]): void {\r\n const containerItem = this._document.getElementById(`c_${this.componentKey}`);\r\n\r\n if (containerItem) {\r\n if (ids.length) {\r\n containerItem.setAttribute('aria-describedby', ids.join(' '));\r\n } else {\r\n containerItem.removeAttribute('aria-describedby');\r\n }\r\n }\r\n }\r\n\r\n onContainerClick(): void {\r\n const containerItem = this._document.getElementById(`c_${this.componentKey}`);\r\n\r\n if (!this.focused && containerItem) {\r\n containerItem.focus();\r\n }\r\n }\r\n\r\n onKeyDown($event: any, inputIdx: number): any {\r\n const prevInputId = this.getBoxId(inputIdx - 1);\r\n const currentInputId = this.getBoxId(inputIdx);\r\n const nextInputId = this.getBoxId(inputIdx + 1);\r\n if (KeyboardUtil.ifSpacebar($event)) {\r\n $event.preventDefault();\r\n return false;\r\n }\r\n if (KeyboardUtil.ifBackspace($event)) {\r\n if (!$event.target.value) {\r\n this._clearInput(prevInputId, inputIdx - 1);\r\n this._setSelected(prevInputId);\r\n } else {\r\n this._clearInput(currentInputId, inputIdx);\r\n }\r\n this._rebuildValue();\r\n return;\r\n }\r\n if (KeyboardUtil.ifDelete($event)) {\r\n if (!$event.target.value) {\r\n this._clearInput(prevInputId, inputIdx - 1);\r\n this._setSelected(prevInputId);\r\n } else {\r\n this._clearInput(currentInputId, inputIdx);\r\n }\r\n this._rebuildValue();\r\n return;\r\n }\r\n if (this.ifValidKeyCode($event)) {\r\n $event.target.value = $event.key;\r\n let ctrlName = this._getControlName(inputIdx);\r\n this.otpForm.controls[ctrlName]?.setValue($event.key);\r\n $event.preventDefault();\r\n this._setSelected(nextInputId);\r\n this._rebuildValue();\r\n }\r\n }\r\n onInput($event: any, inputIdx: number): void {\r\n let newVal = this.currentVal ? `${this.currentVal}${$event.target.value}` : $event.target.value;\r\n if (this.config.allowNumbersOnly && !this.validateNumber(newVal)) {\r\n $event.target.value = null;\r\n $event.stopPropagation();\r\n $event.preventDefault();\r\n this._clearInput(null, inputIdx);\r\n }\r\n }\r\n\r\n\r\n onKeyUp($event: any, inputIdx: number): void {\r\n if (KeyboardUtil.ifTab($event)) {\r\n inputIdx -= 1;\r\n }\r\n const nextInputId = this.getBoxId(inputIdx + 1);\r\n const prevInputId = this.getBoxId(inputIdx - 1);\r\n if (KeyboardUtil.ifRightArrow($event)) {\r\n $event.preventDefault();\r\n this._setSelected(nextInputId);\r\n return;\r\n }\r\n if (KeyboardUtil.ifLeftArrow($event)) {\r\n $event.preventDefault();\r\n this._setSelected(prevInputId);\r\n return;\r\n }\r\n\r\n if (!$event.target.value) {\r\n return;\r\n }\r\n }\r\n\r\n validateNumber(val: string): boolean \| string {\r\n return val && /^[0-9]+$/.test(val);\r\n }\r\n\r\n getBoxId(idx: string \| number): string {\r\n return `otp_${idx}_${this.componentKey}`;\r\n }\r\n\r\n focusTo(eleId: string): void {\r\n const ele: any = this._document.getElementById(eleId);\r\n if (ele) {\r\n ele.focus();\r\n }\r\n }\r\n\r\n setValue(value: any): void {\r\n if (this.config.allowNumbersOnly && isNaN(value)) {\r\n return;\r\n }\r\n this.otpForm.reset();\r\n if (!value) {\r\n this._rebuildValue();\r\n return;\r\n }\r\n value = value.toString().replace(/\\s/g, ''); // remove whitespace\r\n Array.from(value).forEach((c, idx) => {\r\n if (this.otpForm.get(this._getControlName(idx))) {\r\n this.otpForm.get(this._getControlName(idx))!.setValue(c);\r\n }\r\n });\r\n if (!this.config.disableAutoFocus) {\r\n setTimeout(() => {\r\n const containerItem = this._document.getElementById(`c_${this.componentKey}`);\r\n var indexOfElementToFocus = value.length < this.config.length ? value.length : (this.config.length - 1);\r\n let ele: any = containerItem!.getElementsByClassName('cmat-otp-input')[indexOfElementToFocus];\r\n if (ele?.focus) {\r\n setTimeout(() => {\r\n ele.focus();\r\n }, 1);\r\n }\r\n }, 0);\r\n\r\n }\r\n this._rebuildValue();\r\n }\r\n\r\n handlePaste(e: any): void {\r\n // Get pasted data via clipboard API\r\n let clipboardData = e.clipboardData ?? (window as any)['clipboardData'];\r\n if (clipboardData) {\r\n var pastedData = clipboardData.getData('Text');\r\n }\r\n e.stopPropagation();\r\n e.preventDefault();\r\n if (!pastedData \|\| (this.config.allowNumbersOnly && !this.validateNumber(pastedData))) {\r\n return;\r\n }\r\n this.setValue(pastedData);\r\n }\r\n\r\n getFormControl(key: string): FormControl {\r\n return this.otpForm.controls[key] as FormControl;\r\n }\r\n\r\n // eslint-disable-next-line @typescript-eslint/no-empty-function\r\n private _onModelChange: (value: any) => void = () => { };\r\n // eslint-disable-next-line @typescript-eslint/no-empty-function\r\n private _onTouchedChange: () => any = () => { };\r\n\r\n private _getControlName(idx: number): string {\r\n return `ctrl_${idx}`;\r\n }\r\n\r\n private _clearInput(eleId: string \| null, inputIdx: number): void {\r\n let ctrlName = this._getControlName(inputIdx);\r\n this.otpForm.controls[ctrlName]?.setValue(null);\r\n if (eleId) {\r\n const ele = this._document.getElementById(eleId);\r\n if (ele && ele instanceof HTMLInputElement) {\r\n ele.value = '';\r\n }\r\n }\r\n }\r\n\r\n private _setSelected(eleId: string): void {\r\n this.focusTo(eleId);\r\n const ele: any = this._document.getElementById(eleId);\r\n if (ele?.setSelectionRange) {\r\n setTimeout(() => {\r\n ele.setSelectionRange(0, 1);\r\n }, 0);\r\n }\r\n }\r\n\r\n private ifValidKeyCode(event: any): boolean \| string {\r\n const inp = event.key;\r\n if (this.config?.allowNumbersOnly) {\r\n return this.validateNumber(inp);\r\n }\r\n const isMobile = /iPhone\|iPad\|iPod\|Android/i.test(navigator.userAgent);\r\n return isMobile \|\|\r\n (/^[a-zA-Z0-9%_\\-@#$!]$/.test(inp) && inp.length == 1);\r\n }\r\n\r\n\r\n private _rebuildValue(): void {\r\n let val: string \| null = null;\r\n ObjectUtil.keys(this.otpForm.controls).forEach((k) => {\r\n let ctrlVal = this.otpForm.controls[k].value;\r\n if (ctrlVal) {\r\n let isLengthExceed = ctrlVal.length > 1;\r\n let isCaseTransformEnabled = !this.config.allowNumbersOnly && this.config.letterCase && (this.config.letterCase.toLocaleLowerCase() == 'upper' \|\| this.config.letterCase.toLocaleLowerCase() == 'lower');\r\n ctrlVal = ctrlVal[0];\r\n let transformedVal = isCaseTransformEnabled ? this.config.letterCase?.toLocaleLowerCase() == 'upper' ? ctrlVal.toUpperCase() : ctrlVal.toLowerCase() : ctrlVal;\r\n if (isCaseTransformEnabled && transformedVal == ctrlVal) {\r\n isCaseTransformEnabled = false;\r\n } else {\r\n ctrlVal = transformedVal;\r\n }\r\n if (val == null) {\r\n val = ctrlVal;\r\n } else {\r\n val += ctrlVal;\r\n }\r\n if (isLengthExceed \|\| isCaseTransformEnabled) {\r\n this.otpForm.controls[k].setValue(ctrlVal);\r\n }\r\n }\r\n });\r\n if (this.currentVal != val) {\r\n this.currentVal = val;\r\n this._onModelChange(val);\r\n\r\n this.onInputChange.next(val);\r\n }\r\n }\r\n}\r\n\r\n","@if(otpForm.controls){\r\n<div class=\"cmat-otp-input-wrapper wrapper {{config.containerClass}}\" id=\"c_{{componentKey}}\"\r\n [attr.tabindex]=\"disabled ? -1 : 0\" [ngStyle]=\"config.containerStyles\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut()\">\r\n <div class=\"n-o-c\">\r\n @for (item of controlKeys; track $index) {\r\n <input #inp class=\"cmat-otp-input {{config.inputClass}}\" autocomplete=\"one-time-code\" [pattern]=\"config.allowNumbersOnly ? '\\\\d' : ''\"\r\n [type]=\"inputType\" [placeholder]=\"config.placeholder \|\| ''\"\r\n [ngStyle]=\"config.inputStyles\" [id]=\"getBoxId($index)\"\r\n [ngClass]=\"{'error-input': (config.showError && errorState)}\"\r\n [formControl]=\"getFormControl(item)\" (paste)=\"handlePaste($event)\" (keyup)=\"onKeyUp($event,$index)\"\r\n (input)=\"onInput($event,$index)\" (keydown)=\"onKeyDown($event,$index)\">\r\n @if(config.separator && !$last){\r\n {{config.separator}}\r\n }\r\n }\r\n </div>\r\n</div>\r\n}","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/cmat-components-org-chart.mjs CHANGED Viewed

@@ -26,10 +26,10 @@ class CmatChartNodeComponent {
             this.containerClass = `cmat-org-connector-${this.direction} `;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CmatChartNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: CmatChartNodeComponent, isStandalone: true, selector: "cmat-org-chart-node", inputs: { node: "node", hasParent: "hasParent", enableControlHeight: "enableControlHeight", direction: "direction", detailsBtnTitle: "detailsBtnTitle" }, outputs: { detailsBtnClick: "detailsBtnClick" }, exportAs: ["cmatOrgChartNode"], usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n@if(hasParent){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\" [style.height]=\"connectorToParentHeight\"></div>\r\n}\r\n<div class=\"cmat-org-box cmat-org-border cmat-org-background\" [ngClass]=\"node.cssClass\">\r\n    @if(node.image!==''){\r\n    <div class=\"cmat-org-image\" [style]=\"{ 'background-image': 'url(\\'' + node.image + '\\')' }\"\r\n        [style.border-color]=\"node.color\"></div>\r\n    }@else {\r\n    <div class=\"text-center\">\r\n        <mat-icon class=\"icon-size-16\" [svgIcon]=\"'heroicons_outline:user-circle'\">\r\n        </mat-icon>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"cmat-org-container\">\r\n        <div class=\"cmat-org-title\" [innerHTML]=\"node.title\" [style.color]=\"node.color\"></div>\r\n        <div class=\"cmat-org-name\" [innerHTML]=\"node.name\"></div>\r\n        \r\n        @if(node.showDetail){\r\n        <div class=\"button-container\">\r\n            <button matButton=\"filled\" class=\"cmat-org-btn cmat-org-btn-details\" color=\"primary\"\r\n                (click)=\"detailsBtnClick.emit(node)\">\r\n                {{ detailsBtnTitle }}\r\n            </button>\r\n        </div>\r\n        }\r\n    </div>\r\n</div>\r\n@if(node.children.length){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\"></div>\r\n}", styles: ["cmat-org-chart-node{display:flex;align-items:center}.cmat-org-box{width:16em;height:16em;box-sizing:border-box;overflow:overlay;position:relative}.cmat-org-container{display:flex;flex-direction:column;align-items:center}.cmat-org-title,.cmat-org-name,.button-container{flex:1}.cmat-org-title{margin-top:.5em}.cmat-org-name{margin:.3em 0}.button-container{display:flex;flex-direction:row;justify-content:center;align-items:center;position:absolute;bottom:1em;width:100%}.cmat-org-image{background-repeat:round;width:4em;height:4em;background-color:transparent!important;border-radius:50%;padding:.25em;border:3px solid var(--cmat-text-hint);margin:4px auto auto}.cmat-org-title{font-size:1.1rem;font-weight:700;text-align:center}.cmat-org-name{text-align:center;margin-bottom:8px!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatChartNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: CmatChartNodeComponent, isStandalone: true, selector: "cmat-org-chart-node", inputs: { node: "node", hasParent: "hasParent", enableControlHeight: "enableControlHeight", direction: "direction", detailsBtnTitle: "detailsBtnTitle" }, outputs: { detailsBtnClick: "detailsBtnClick" }, exportAs: ["cmatOrgChartNode"], usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n@if(hasParent){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\" [style.height]=\"connectorToParentHeight\"></div>\r\n}\r\n<div class=\"cmat-org-box cmat-org-border cmat-org-background\" [ngClass]=\"node.cssClass\">\r\n    @if(node.image!==''){\r\n    <div class=\"cmat-org-image\" [style]=\"{ 'background-image': 'url(\\'' + node.image + '\\')' }\"\r\n        [style.border-color]=\"node.color\"></div>\r\n    }@else {\r\n    <div class=\"text-center\">\r\n        <mat-icon class=\"icon-size-16\" [svgIcon]=\"'heroicons_outline:user-circle'\">\r\n        </mat-icon>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"cmat-org-container\">\r\n        <div class=\"cmat-org-title\" [innerHTML]=\"node.title\" [style.color]=\"node.color\"></div>\r\n        <div class=\"cmat-org-name\" [innerHTML]=\"node.name\"></div>\r\n        \r\n        @if(node.showDetail){\r\n        <div class=\"button-container\">\r\n            <button matButton=\"filled\" class=\"cmat-org-btn cmat-org-btn-details\" color=\"primary\"\r\n                (click)=\"detailsBtnClick.emit(node)\">\r\n                {{ detailsBtnTitle }}\r\n            </button>\r\n        </div>\r\n        }\r\n    </div>\r\n</div>\r\n@if(node.children.length){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\"></div>\r\n}", styles: ["cmat-org-chart-node{display:flex;align-items:center}.cmat-org-box{width:16em;height:16em;box-sizing:border-box;overflow:overlay;position:relative}.cmat-org-container{display:flex;flex-direction:column;align-items:center}.cmat-org-title,.cmat-org-name,.button-container{flex:1}.cmat-org-title{margin-top:.5em}.cmat-org-name{margin:.3em 0}.button-container{display:flex;flex-direction:row;justify-content:center;align-items:center;position:absolute;bottom:1em;width:100%}.cmat-org-image{background-repeat:round;width:4em;height:4em;background-color:transparent!important;border-radius:50%;padding:.25em;border:3px solid var(--cmat-text-hint);margin:4px auto auto}.cmat-org-title{font-size:1.1rem;font-weight:700;text-align:center}.cmat-org-name{text-align:center;margin-bottom:8px!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CmatChartNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatChartNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-org-chart-node', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatOrgChartNode', imports: [NgClass, MatIconModule, MatButtonModule], template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n@if(hasParent){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\" [style.height]=\"connectorToParentHeight\"></div>\r\n}\r\n<div class=\"cmat-org-box cmat-org-border cmat-org-background\" [ngClass]=\"node.cssClass\">\r\n    @if(node.image!==''){\r\n    <div class=\"cmat-org-image\" [style]=\"{ 'background-image': 'url(\\'' + node.image + '\\')' }\"\r\n        [style.border-color]=\"node.color\"></div>\r\n    }@else {\r\n    <div class=\"text-center\">\r\n        <mat-icon class=\"icon-size-16\" [svgIcon]=\"'heroicons_outline:user-circle'\">\r\n        </mat-icon>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"cmat-org-container\">\r\n        <div class=\"cmat-org-title\" [innerHTML]=\"node.title\" [style.color]=\"node.color\"></div>\r\n        <div class=\"cmat-org-name\" [innerHTML]=\"node.name\"></div>\r\n        \r\n        @if(node.showDetail){\r\n        <div class=\"button-container\">\r\n            <button matButton=\"filled\" class=\"cmat-org-btn cmat-org-btn-details\" color=\"primary\"\r\n                (click)=\"detailsBtnClick.emit(node)\">\r\n                {{ detailsBtnTitle }}\r\n            </button>\r\n        </div>\r\n        }\r\n    </div>\r\n</div>\r\n@if(node.children.length){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\"></div>\r\n}", styles: ["cmat-org-chart-node{display:flex;align-items:center}.cmat-org-box{width:16em;height:16em;box-sizing:border-box;overflow:overlay;position:relative}.cmat-org-container{display:flex;flex-direction:column;align-items:center}.cmat-org-title,.cmat-org-name,.button-container{flex:1}.cmat-org-title{margin-top:.5em}.cmat-org-name{margin:.3em 0}.button-container{display:flex;flex-direction:row;justify-content:center;align-items:center;position:absolute;bottom:1em;width:100%}.cmat-org-image{background-repeat:round;width:4em;height:4em;background-color:transparent!important;border-radius:50%;padding:.25em;border:3px solid var(--cmat-text-hint);margin:4px auto auto}.cmat-org-title{font-size:1.1rem;font-weight:700;text-align:center}.cmat-org-name{text-align:center;margin-bottom:8px!important}\n"] }]
         }], propDecorators: { node: [{
@@ -63,10 +63,10 @@ class CmatChartDesignerComponent {
             this.chartNodeClass = `cmat-org-${this.direction}`;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CmatChartDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: CmatChartDesignerComponent, isStandalone: true, selector: "cmat-org-chart-designer", inputs: { node: "node", hasParent: "hasParent", enableControlHeight: "enableControlHeight", direction: "direction", detailsBtnTitle: "detailsBtnTitle" }, outputs: { detailsBtnClick: "detailsBtnClick" }, host: { properties: { "style.flex-direction": "this.hostClass", "style.width": "this.hostWidthClass" } }, exportAs: ["cmatOrgChartDesigner"], usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<cmat-org-chart-node [class]=\"chartNodeClass\" [node]=\"node\" [hasParent]=\"hasParent\"\r\n    [enableControlHeight]=\"enableControlHeight\" [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\"\r\n    (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n</cmat-org-chart-node>\r\n\r\n<div class=\"cmat-org-reports-{{ direction }} cmat-org-reports\">\r\n    @for (childNode of node.children; track $index) {\r\n    <div class=\"cmat-org-org-container cmat-org-org-container-{{ direction }}\">\r\n        <div class=\"cmat-org-connector-container cmat-org-connector-container-{{ direction }}\">\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$first ? 'transparent' : ''\"></div>\r\n            <div class=\"cmat-org-border\"></div>\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$last ? 'transparent' : ''\"></div>\r\n        </div>\r\n        <cmat-org-chart-designer [node]=\"childNode\" [hasParent]=\"true\" [enableControlHeight]=\"enableControlHeight\"\r\n            [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n        </cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n</div>", styles: ["cmat-org-chart-designer{display:flex;align-items:center;flex:1}.cmat-org-vertical{flex-direction:column}.cmat-org-org-container{display:flex}.cmat-org-org-container-vertical{flex-direction:column}.cmat-org-connector{flex:1}.cmat-org-connector-container{display:flex}.cmat-org-connector-container-horizontal{flex-direction:column}.cmat-org-reports{display:flex;flex:1}.cmat-org-reports-horizontal{flex-direction:column}.cmat-org-reports-vertical{width:100%}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatChartDesignerComponent), selector: "cmat-org-chart-designer", inputs: ["node", "hasParent", "enableControlHeight", "direction", "detailsBtnTitle"], outputs: ["detailsBtnClick"], exportAs: ["cmatOrgChartDesigner"] }, { kind: "component", type: i0.forwardRef(() => CmatChartNodeComponent), selector: "cmat-org-chart-node", inputs: ["node", "hasParent", "enableControlHeight", "direction", "detailsBtnTitle"], outputs: ["detailsBtnClick"], exportAs: ["cmatOrgChartNode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatChartDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: CmatChartDesignerComponent, isStandalone: true, selector: "cmat-org-chart-designer", inputs: { node: "node", hasParent: "hasParent", enableControlHeight: "enableControlHeight", direction: "direction", detailsBtnTitle: "detailsBtnTitle" }, outputs: { detailsBtnClick: "detailsBtnClick" }, host: { properties: { "style.flex-direction": "this.hostClass", "style.width": "this.hostWidthClass" } }, exportAs: ["cmatOrgChartDesigner"], usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<cmat-org-chart-node [class]=\"chartNodeClass\" [node]=\"node\" [hasParent]=\"hasParent\"\r\n    [enableControlHeight]=\"enableControlHeight\" [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\"\r\n    (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n</cmat-org-chart-node>\r\n\r\n<div class=\"cmat-org-reports-{{ direction }} cmat-org-reports\">\r\n    @for (childNode of node.children; track $index) {\r\n    <div class=\"cmat-org-org-container cmat-org-org-container-{{ direction }}\">\r\n        <div class=\"cmat-org-connector-container cmat-org-connector-container-{{ direction }}\">\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$first ? 'transparent' : ''\"></div>\r\n            <div class=\"cmat-org-border\"></div>\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$last ? 'transparent' : ''\"></div>\r\n        </div>\r\n        <cmat-org-chart-designer [node]=\"childNode\" [hasParent]=\"true\" [enableControlHeight]=\"enableControlHeight\"\r\n            [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n        </cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n</div>", styles: ["cmat-org-chart-designer{display:flex;align-items:center;flex:1}.cmat-org-vertical{flex-direction:column}.cmat-org-org-container{display:flex}.cmat-org-org-container-vertical{flex-direction:column}.cmat-org-connector{flex:1}.cmat-org-connector-container{display:flex}.cmat-org-connector-container-horizontal{flex-direction:column}.cmat-org-reports{display:flex;flex:1}.cmat-org-reports-horizontal{flex-direction:column}.cmat-org-reports-vertical{width:100%}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => CmatChartDesignerComponent), selector: "cmat-org-chart-designer", inputs: ["node", "hasParent", "enableControlHeight", "direction", "detailsBtnTitle"], outputs: ["detailsBtnClick"], exportAs: ["cmatOrgChartDesigner"] }, { kind: "component", type: i0.forwardRef(() => CmatChartNodeComponent), selector: "cmat-org-chart-node", inputs: ["node", "hasParent", "enableControlHeight", "direction", "detailsBtnTitle"], outputs: ["detailsBtnClick"], exportAs: ["cmatOrgChartNode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CmatChartDesignerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatChartDesignerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-org-chart-designer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatOrgChartDesigner', imports: [CmatChartNodeComponent, forwardRef(() => CmatChartDesignerComponent)], template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<cmat-org-chart-node [class]=\"chartNodeClass\" [node]=\"node\" [hasParent]=\"hasParent\"\r\n    [enableControlHeight]=\"enableControlHeight\" [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\"\r\n    (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n</cmat-org-chart-node>\r\n\r\n<div class=\"cmat-org-reports-{{ direction }} cmat-org-reports\">\r\n    @for (childNode of node.children; track $index) {\r\n    <div class=\"cmat-org-org-container cmat-org-org-container-{{ direction }}\">\r\n        <div class=\"cmat-org-connector-container cmat-org-connector-container-{{ direction }}\">\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$first ? 'transparent' : ''\"></div>\r\n            <div class=\"cmat-org-border\"></div>\r\n            <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$last ? 'transparent' : ''\"></div>\r\n        </div>\r\n        <cmat-org-chart-designer [node]=\"childNode\" [hasParent]=\"true\" [enableControlHeight]=\"enableControlHeight\"\r\n            [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n        </cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n</div>", styles: ["cmat-org-chart-designer{display:flex;align-items:center;flex:1}.cmat-org-vertical{flex-direction:column}.cmat-org-org-container{display:flex}.cmat-org-org-container-vertical{flex-direction:column}.cmat-org-connector{flex:1}.cmat-org-connector-container{display:flex}.cmat-org-connector-container-horizontal{flex-direction:column}.cmat-org-reports{display:flex;flex:1}.cmat-org-reports-horizontal{flex-direction:column}.cmat-org-reports-vertical{width:100%}\n"] }]
         }], propDecorators: { node: [{
@@ -96,10 +96,10 @@ class CmatOrgChartComponent {
         this.detailsBtnTitle = '查看详细';
         this.detailsBtnClick = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CmatOrgChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: CmatOrgChartComponent, isStandalone: true, selector: "cmat-org-chart", inputs: { nodes: "nodes", enableControlHeight: "enableControlHeight", direction: "direction", detailsBtnTitle: "detailsBtnTitle" }, outputs: { detailsBtnClick: "detailsBtnClick" }, exportAs: ["cmatOrgChart"], ngImport: i0, template: "<div class=\"cmat-org\">\r\n    @for (node of nodes; track $index) {\r\n    <div class=\"cmat-org-self-{{ direction }}\">\r\n        <cmat-org-chart-designer [node]=\"node\" [direction]=\"direction\" [enableControlHeight]=\"enableControlHeight\"\r\n            [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\"></cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n</div>", styles: [".cmat-org-horizontal{padding:1em 0}.cmat-org-vertical{padding:0 1em}.cmat-org-border{border:.1em solid var(--cmat-divider);box-sizing:border-box}.cmat-org-box{padding:.5em 1em;border-radius:.2em;box-shadow:0 2px 8px #00000059}.cmat-org-connector-horizontal{width:1em!important;height:0!important}.cmat-org-connector-vertical{width:0!important;height:1em!important}.cmat-org .cmat-org-self-vertical{margin-bottom:2%}\n"], dependencies: [{ kind: "component", type: CmatChartDesignerComponent, selector: "cmat-org-chart-designer", inputs: ["node", "hasParent", "enableControlHeight", "direction", "detailsBtnTitle"], outputs: ["detailsBtnClick"], exportAs: ["cmatOrgChartDesigner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatOrgChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: CmatOrgChartComponent, isStandalone: true, selector: "cmat-org-chart", inputs: { nodes: "nodes", enableControlHeight: "enableControlHeight", direction: "direction", detailsBtnTitle: "detailsBtnTitle" }, outputs: { detailsBtnClick: "detailsBtnClick" }, exportAs: ["cmatOrgChart"], ngImport: i0, template: "<div class=\"cmat-org\">\r\n    @for (node of nodes; track $index) {\r\n    <div class=\"cmat-org-self-{{ direction }}\">\r\n        <cmat-org-chart-designer [node]=\"node\" [direction]=\"direction\" [enableControlHeight]=\"enableControlHeight\"\r\n            [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\"></cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n</div>", styles: [".cmat-org-horizontal{padding:1em 0}.cmat-org-vertical{padding:0 1em}.cmat-org-border{border:.1em solid var(--cmat-divider);box-sizing:border-box}.cmat-org-box{padding:.5em 1em;border-radius:.2em;box-shadow:0 2px 8px #00000059}.cmat-org-connector-horizontal{width:1em!important;height:0!important}.cmat-org-connector-vertical{width:0!important;height:1em!important}.cmat-org .cmat-org-self-vertical{margin-bottom:2%}\n"], dependencies: [{ kind: "component", type: CmatChartDesignerComponent, selector: "cmat-org-chart-designer", inputs: ["node", "hasParent", "enableControlHeight", "direction", "detailsBtnTitle"], outputs: ["detailsBtnClick"], exportAs: ["cmatOrgChartDesigner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CmatOrgChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatOrgChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-org-chart', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatOrgChart', imports: [CmatChartDesignerComponent], template: "<div class=\"cmat-org\">\r\n    @for (node of nodes; track $index) {\r\n    <div class=\"cmat-org-self-{{ direction }}\">\r\n        <cmat-org-chart-designer [node]=\"node\" [direction]=\"direction\" [enableControlHeight]=\"enableControlHeight\"\r\n            [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\"></cmat-org-chart-designer>\r\n    </div>\r\n    }\r\n</div>", styles: [".cmat-org-horizontal{padding:1em 0}.cmat-org-vertical{padding:0 1em}.cmat-org-border{border:.1em solid var(--cmat-divider);box-sizing:border-box}.cmat-org-box{padding:.5em 1em;border-radius:.2em;box-shadow:0 2px 8px #00000059}.cmat-org-connector-horizontal{width:1em!important;height:0!important}.cmat-org-connector-vertical{width:0!important;height:1em!important}.cmat-org .cmat-org-self-vertical{margin-bottom:2%}\n"] }]
         }], propDecorators: { nodes: [{

package/fesm2022/cmat-components-org-chart.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cmat-components-org-chart.mjs","sources":["../../../projects/cmat/components/org-chart/node/chart-node.component.ts","../../../projects/cmat/components/org-chart/node/chart-node.component.html","../../../projects/cmat/components/org-chart/designer/chart-designer.component.ts","../../../projects/cmat/components/org-chart/designer/chart-designer.component.html","../../../projects/cmat/components/org-chart/org-chart.component.ts","../../../projects/cmat/components/org-chart/org-chart.component.html","../../../projects/cmat/components/org-chart/node/node.type.ts","../../../projects/cmat/components/org-chart/cmat-components-org-chart.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { INode } from './node.type';\r\n\r\n@Component({\r\n selector: 'cmat-org-chart-node',\r\n templateUrl: './chart-node.component.html',\r\n styleUrls: ['./chart-node.component.scss'],\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n exportAs: 'cmatOrgChartNode',\r\n imports: [NgClass, MatIconModule, MatButtonModule]\r\n})\r\nexport class CmatChartNodeComponent implements OnChanges {\r\n @Input() node: INode;\r\n @Input() hasParent: boolean;\r\n @Input() enableControlHeight: boolean;\r\n @Input() direction: 'vertical' \| 'horizontal' = 'vertical';\r\n @Input() detailsBtnTitle: string;\r\n\r\n @Output() detailsBtnClick = new EventEmitter<INode>();\r\n\r\n containerClass: string;\r\n connectorToParentHeight = '1em';\r\n maxHeightEm = 19.2;\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes.enableControlHeight) {\r\n if (this.enableControlHeight && this.node.heightFactor) {\r\n let newHeight = this.node.heightFactor * this.maxHeightEm;\r\n if (this.node.heightFactor >= 2) newHeight -= this.node.heightFactor - 1;\r\n this.connectorToParentHeight = `${newHeight}em`;\r\n }\r\n }\r\n\r\n if (changes.direction) {\r\n this.containerClass = `cmat-org-connector-${this.direction} `;\r\n }\r\n }\r\n}\r\n","<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n@if(hasParent){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\" [style.height]=\"connectorToParentHeight\"></div>\r\n}\r\n<div class=\"cmat-org-box cmat-org-border cmat-org-background\" [ngClass]=\"node.cssClass\">\r\n @if(node.image!==''){\r\n <div class=\"cmat-org-image\" [style]=\"{ 'background-image': 'url(\\'' + node.image + '\\')' }\"\r\n [style.border-color]=\"node.color\"></div>\r\n }@else {\r\n <div class=\"text-center\">\r\n <mat-icon class=\"icon-size-16\" [svgIcon]=\"'heroicons_outline:user-circle'\">\r\n </mat-icon>\r\n </div>\r\n }\r\n\r\n <div class=\"cmat-org-container\">\r\n <div class=\"cmat-org-title\" [innerHTML]=\"node.title\" [style.color]=\"node.color\"></div>\r\n <div class=\"cmat-org-name\" [innerHTML]=\"node.name\"></div>\r\n \r\n @if(node.showDetail){\r\n <div class=\"button-container\">\r\n <button matButton=\"filled\" class=\"cmat-org-btn cmat-org-btn-details\" color=\"primary\"\r\n (click)=\"detailsBtnClick.emit(node)\">\r\n {{ detailsBtnTitle }}\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n@if(node.children.length){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\"></div>\r\n}","import { ChangeDetectionStrategy, Component, EventEmitter, forwardRef, HostBinding, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';\r\nimport { CmatChartNodeComponent } from '../node/chart-node.component';\r\nimport { INode } from '../node/node.type';\r\n\r\n@Component({\r\n selector: 'cmat-org-chart-designer',\r\n templateUrl: './chart-designer.component.html',\r\n styleUrls: ['./chart-designer.component.scss'],\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n exportAs: 'cmatOrgChartDesigner',\r\n imports: [CmatChartNodeComponent, forwardRef(() => CmatChartDesignerComponent)]\r\n})\r\nexport class CmatChartDesignerComponent implements OnChanges {\r\n @Input() node: INode;\r\n @Input() hasParent = false;\r\n @Input() enableControlHeight: boolean;\r\n @Input() direction: 'vertical' \| 'horizontal' = 'vertical';\r\n @Input() detailsBtnTitle: string;\r\n\r\n @Output() detailsBtnClick = new EventEmitter<INode>();\r\n\r\n chartNodeClass: string;\r\n\r\n\r\n @HostBinding('style.flex-direction')\r\n get hostClass(): string {\r\n return this.direction === 'vertical' ? 'column' : '';\r\n }\r\n\r\n @HostBinding('style.width')\r\n get hostWidthClass(): string {\r\n return this.direction === 'vertical' ? 'fit-content' : '';\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes.direction) {\r\n this.chartNodeClass = `cmat-org-${this.direction}`;\r\n }\r\n }\r\n\r\n}\r\n","<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<cmat-org-chart-node [class]=\"chartNodeClass\" [node]=\"node\" [hasParent]=\"hasParent\"\r\n [enableControlHeight]=\"enableControlHeight\" [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\"\r\n (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n</cmat-org-chart-node>\r\n\r\n<div class=\"cmat-org-reports-{{ direction }} cmat-org-reports\">\r\n @for (childNode of node.children; track $index) {\r\n <div class=\"cmat-org-org-container cmat-org-org-container-{{ direction }}\">\r\n <div class=\"cmat-org-connector-container cmat-org-connector-container-{{ direction }}\">\r\n <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$first ? 'transparent' : ''\"></div>\r\n <div class=\"cmat-org-border\"></div>\r\n <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$last ? 'transparent' : ''\"></div>\r\n </div>\r\n <cmat-org-chart-designer [node]=\"childNode\" [hasParent]=\"true\" [enableControlHeight]=\"enableControlHeight\"\r\n [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n </cmat-org-chart-designer>\r\n </div>\r\n }\r\n</div>","import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\r\nimport { CmatChartDesignerComponent } from './designer/chart-designer.component';\r\nimport { INode } from './node/node.type';\r\n\r\n\r\n@Component({\r\n selector: 'cmat-org-chart',\r\n templateUrl: './org-chart.component.html',\r\n styleUrls: ['./org-chart.component.scss'],\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n exportAs: 'cmatOrgChart',\r\n imports: [CmatChartDesignerComponent]\r\n})\r\nexport class CmatOrgChartComponent {\r\n @Input() nodes: INode[];\r\n @Input() enableControlHeight:boolean = false;\r\n @Input() direction: 'vertical' \| 'horizontal' = 'vertical';\r\n @Input() detailsBtnTitle = '查看详细';\r\n\r\n @Output() detailsBtnClick = new EventEmitter<INode>();\r\n}\r\n","<div class=\"cmat-org\">\r\n @for (node of nodes; track $index) {\r\n <div class=\"cmat-org-self-{{ direction }}\">\r\n <cmat-org-chart-designer [node]=\"node\" [direction]=\"direction\" [enableControlHeight]=\"enableControlHeight\"\r\n [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\"></cmat-org-chart-designer>\r\n </div>\r\n }\r\n</div>","export interface INode {\r\n name: string;\r\n cssClass: string;\r\n image: string;\r\n title?: string;\r\n color?: string;\r\n showDetail: boolean;\r\n children: INode[];\r\n heightFactor?: number;\r\n}\r\n\r\nexport class ChartNode implements INode {\r\n name: string;\r\n cssClass: string;\r\n image: string;\r\n title?: string;\r\n color?: string;\r\n showDetail: boolean;\r\n children: ChartNode[];\r\n heightFactor?: number;\r\n parent?: ChartNode;\r\n\r\n constructor(structure: string[], parent?: ChartNode) {\r\n this.parent = parent;\r\n const [name, ...reports] = structure;\r\n this.name = name.split('(')[0].trim();\r\n const titleMatch = /\$([^)]+)\$/.exec(name);\r\n this.title = titleMatch?.[1].trim();\r\n\r\n this.children = reports.map(r => r.substring(1))\r\n .reduce((previous, current) => {\r\n if (!current.startsWith(' ')) {\r\n previous.push([]);\r\n }\r\n\r\n previous[previous.length - 1].push(current);\r\n return previous;\r\n }, [] as string[][])\r\n .map(r => new ChartNode(r, this)) ?? [];\r\n }\r\n}\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"cmat-components-org-chart.mjs","sources":["../../../projects/cmat/components/org-chart/node/chart-node.component.ts","../../../projects/cmat/components/org-chart/node/chart-node.component.html","../../../projects/cmat/components/org-chart/designer/chart-designer.component.ts","../../../projects/cmat/components/org-chart/designer/chart-designer.component.html","../../../projects/cmat/components/org-chart/org-chart.component.ts","../../../projects/cmat/components/org-chart/org-chart.component.html","../../../projects/cmat/components/org-chart/node/node.type.ts","../../../projects/cmat/components/org-chart/cmat-components-org-chart.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { INode } from './node.type';\r\n\r\n@Component({\r\n selector: 'cmat-org-chart-node',\r\n templateUrl: './chart-node.component.html',\r\n styleUrls: ['./chart-node.component.scss'],\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n exportAs: 'cmatOrgChartNode',\r\n imports: [NgClass, MatIconModule, MatButtonModule]\r\n})\r\nexport class CmatChartNodeComponent implements OnChanges {\r\n @Input() node: INode;\r\n @Input() hasParent: boolean;\r\n @Input() enableControlHeight: boolean;\r\n @Input() direction: 'vertical' \| 'horizontal' = 'vertical';\r\n @Input() detailsBtnTitle: string;\r\n\r\n @Output() detailsBtnClick = new EventEmitter<INode>();\r\n\r\n containerClass: string;\r\n connectorToParentHeight = '1em';\r\n maxHeightEm = 19.2;\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes.enableControlHeight) {\r\n if (this.enableControlHeight && this.node.heightFactor) {\r\n let newHeight = this.node.heightFactor * this.maxHeightEm;\r\n if (this.node.heightFactor >= 2) newHeight -= this.node.heightFactor - 1;\r\n this.connectorToParentHeight = `${newHeight}em`;\r\n }\r\n }\r\n\r\n if (changes.direction) {\r\n this.containerClass = `cmat-org-connector-${this.direction} `;\r\n }\r\n }\r\n}\r\n","<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n@if(hasParent){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\" [style.height]=\"connectorToParentHeight\"></div>\r\n}\r\n<div class=\"cmat-org-box cmat-org-border cmat-org-background\" [ngClass]=\"node.cssClass\">\r\n @if(node.image!==''){\r\n <div class=\"cmat-org-image\" [style]=\"{ 'background-image': 'url(\\'' + node.image + '\\')' }\"\r\n [style.border-color]=\"node.color\"></div>\r\n }@else {\r\n <div class=\"text-center\">\r\n <mat-icon class=\"icon-size-16\" [svgIcon]=\"'heroicons_outline:user-circle'\">\r\n </mat-icon>\r\n </div>\r\n }\r\n\r\n <div class=\"cmat-org-container\">\r\n <div class=\"cmat-org-title\" [innerHTML]=\"node.title\" [style.color]=\"node.color\"></div>\r\n <div class=\"cmat-org-name\" [innerHTML]=\"node.name\"></div>\r\n \r\n @if(node.showDetail){\r\n <div class=\"button-container\">\r\n <button matButton=\"filled\" class=\"cmat-org-btn cmat-org-btn-details\" color=\"primary\"\r\n (click)=\"detailsBtnClick.emit(node)\">\r\n {{ detailsBtnTitle }}\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n@if(node.children.length){\r\n<div class=\"cmat-org-border\" [ngClass]=\"containerClass\"></div>\r\n}","import { ChangeDetectionStrategy, Component, EventEmitter, forwardRef, HostBinding, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';\r\nimport { CmatChartNodeComponent } from '../node/chart-node.component';\r\nimport { INode } from '../node/node.type';\r\n\r\n@Component({\r\n selector: 'cmat-org-chart-designer',\r\n templateUrl: './chart-designer.component.html',\r\n styleUrls: ['./chart-designer.component.scss'],\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n exportAs: 'cmatOrgChartDesigner',\r\n imports: [CmatChartNodeComponent, forwardRef(() => CmatChartDesignerComponent)]\r\n})\r\nexport class CmatChartDesignerComponent implements OnChanges {\r\n @Input() node: INode;\r\n @Input() hasParent = false;\r\n @Input() enableControlHeight: boolean;\r\n @Input() direction: 'vertical' \| 'horizontal' = 'vertical';\r\n @Input() detailsBtnTitle: string;\r\n\r\n @Output() detailsBtnClick = new EventEmitter<INode>();\r\n\r\n chartNodeClass: string;\r\n\r\n\r\n @HostBinding('style.flex-direction')\r\n get hostClass(): string {\r\n return this.direction === 'vertical' ? 'column' : '';\r\n }\r\n\r\n @HostBinding('style.width')\r\n get hostWidthClass(): string {\r\n return this.direction === 'vertical' ? 'fit-content' : '';\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes.direction) {\r\n this.chartNodeClass = `cmat-org-${this.direction}`;\r\n }\r\n }\r\n\r\n}\r\n","<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<cmat-org-chart-node [class]=\"chartNodeClass\" [node]=\"node\" [hasParent]=\"hasParent\"\r\n [enableControlHeight]=\"enableControlHeight\" [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\"\r\n (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n</cmat-org-chart-node>\r\n\r\n<div class=\"cmat-org-reports-{{ direction }} cmat-org-reports\">\r\n @for (childNode of node.children; track $index) {\r\n <div class=\"cmat-org-org-container cmat-org-org-container-{{ direction }}\">\r\n <div class=\"cmat-org-connector-container cmat-org-connector-container-{{ direction }}\">\r\n <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$first ? 'transparent' : ''\"></div>\r\n <div class=\"cmat-org-border\"></div>\r\n <div class=\"cmat-org-connector cmat-org-border\" [style.border-color]=\"$last ? 'transparent' : ''\"></div>\r\n </div>\r\n <cmat-org-chart-designer [node]=\"childNode\" [hasParent]=\"true\" [enableControlHeight]=\"enableControlHeight\"\r\n [direction]=\"direction\" [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\">\r\n </cmat-org-chart-designer>\r\n </div>\r\n }\r\n</div>","import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\r\nimport { CmatChartDesignerComponent } from './designer/chart-designer.component';\r\nimport { INode } from './node/node.type';\r\n\r\n\r\n@Component({\r\n selector: 'cmat-org-chart',\r\n templateUrl: './org-chart.component.html',\r\n styleUrls: ['./org-chart.component.scss'],\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n exportAs: 'cmatOrgChart',\r\n imports: [CmatChartDesignerComponent]\r\n})\r\nexport class CmatOrgChartComponent {\r\n @Input() nodes: INode[];\r\n @Input() enableControlHeight:boolean = false;\r\n @Input() direction: 'vertical' \| 'horizontal' = 'vertical';\r\n @Input() detailsBtnTitle = '查看详细';\r\n\r\n @Output() detailsBtnClick = new EventEmitter<INode>();\r\n}\r\n","<div class=\"cmat-org\">\r\n @for (node of nodes; track $index) {\r\n <div class=\"cmat-org-self-{{ direction }}\">\r\n <cmat-org-chart-designer [node]=\"node\" [direction]=\"direction\" [enableControlHeight]=\"enableControlHeight\"\r\n [detailsBtnTitle]=\"detailsBtnTitle\" (detailsBtnClick)=\"detailsBtnClick.emit($event)\"></cmat-org-chart-designer>\r\n </div>\r\n }\r\n</div>","export interface INode {\r\n name: string;\r\n cssClass: string;\r\n image: string;\r\n title?: string;\r\n color?: string;\r\n showDetail: boolean;\r\n children: INode[];\r\n heightFactor?: number;\r\n}\r\n\r\nexport class ChartNode implements INode {\r\n name: string;\r\n cssClass: string;\r\n image: string;\r\n title?: string;\r\n color?: string;\r\n showDetail: boolean;\r\n children: ChartNode[];\r\n heightFactor?: number;\r\n parent?: ChartNode;\r\n\r\n constructor(structure: string[], parent?: ChartNode) {\r\n this.parent = parent;\r\n const [name, ...reports] = structure;\r\n this.name = name.split('(')[0].trim();\r\n const titleMatch = /\$([^)]+)\$/.exec(name);\r\n this.title = titleMatch?.[1].trim();\r\n\r\n this.children = reports.map(r => r.substring(1))\r\n .reduce((previous, current) => {\r\n if (!current.startsWith(' ')) {\r\n previous.push([]);\r\n }\r\n\r\n previous[previous.length - 1].push(current);\r\n return previous;\r\n }, [] as string[][])\r\n .map(r => new ChartNode(r, this)) ?? [];\r\n }\r\n}\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;MAea,sBAAsB,CAAA;AATnC,IAAA,WAAA,GAAA;QAaa,IAAA,CAAA,SAAS,GAA8B,UAAU;AAGhD,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,YAAY,EAAS;QAGrD,IAAA,CAAA,uBAAuB,GAAG,KAAK;QAC/B,IAAA,CAAA,WAAW,GAAG,IAAI;AAerB,IAAA;AAbG,IAAA,WAAW,CAAC,OAAsB,EAAA;AAC9B,QAAA,IAAI,OAAO,CAAC,mBAAmB,EAAE;YAC7B,IAAI,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;gBACpD,IAAI,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW;AACzD,gBAAA,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC;oBAAE,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC;AACxE,gBAAA,IAAI,CAAC,uBAAuB,GAAG,CAAA,EAAG,SAAS,IAAI;YACnD;QACJ;AAEA,QAAA,IAAI,OAAO,CAAC,SAAS,EAAE;YACnB,IAAI,CAAC,cAAc,GAAG,CAAA,mBAAA,EAAsB,IAAI,CAAC,SAAS,GAAG;QACjE;IACJ;8GAzBS,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,+UCfnC,m2CA+BC,EAAA,MAAA,EAAA,CAAA,yxBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDlBa,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,mLAAE,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,iOAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAExC,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBATlC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,qBAAqB,iBAGhB,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,kBAAkB,WACnB,CAAC,OAAO,EAAE,aAAa,EAAE,eAAe,CAAC,EAAA,QAAA,EAAA,m2CAAA,EAAA,MAAA,EAAA,CAAA,yxBAAA,CAAA,EAAA;;sBAGjD;;sBACA;;sBACA;;sBACA;;sBACA;;sBAEA;;;METQ,0BAA0B,CAAA;AATvC,IAAA,WAAA,GAAA;QAWa,IAAA,CAAA,SAAS,GAAG,KAAK;QAEjB,IAAA,CAAA,SAAS,GAA8B,UAAU;AAGhD,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,YAAY,EAAS;AAqBxD,IAAA;AAhBG,IAAA,IACI,SAAS,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,SAAS,KAAK,UAAU,GAAG,QAAQ,GAAG,EAAE;IACxD;AAEA,IAAA,IACI,cAAc,GAAA;AACd,QAAA,OAAO,IAAI,CAAC,SAAS,KAAK,UAAU,GAAG,aAAa,GAAG,EAAE;IAC7D;AAEA,IAAA,WAAW,CAAC,OAAsB,EAAA;AAC9B,QAAA,IAAI,OAAO,CAAC,SAAS,EAAE;YACnB,IAAI,CAAC,cAAc,GAAG,CAAA,SAAA,EAAY,IAAI,CAAC,SAAS,EAAE;QACtD;IACJ;8GA1BS,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA1B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,SAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,SAAA,EAAA,WAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,sBAAA,EAAA,gBAAA,EAAA,aAAA,EAAA,qBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,sBAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECbvC,4yCAmBM,EAAA,MAAA,EAAA,CAAA,4cAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,CAAA,MDNO,0BAA0B,iPAFzB,sBAAsB,CAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,iBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAEvB,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBATtC,SAAS;+BACI,yBAAyB,EAAA,aAAA,EAGpB,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,sBAAsB,WACvB,CAAC,sBAAsB,EAAE,UAAU,CAAC,MAAK,0BAA2B,CAAC,CAAC,EAAA,QAAA,EAAA,4yCAAA,EAAA,MAAA,EAAA,CAAA,4cAAA,CAAA,EAAA;;sBAG9E;;sBACA;;sBACA;;sBACA;;sBACA;;sBAEA;;sBAKA,WAAW;uBAAC,sBAAsB;;sBAKlC,WAAW;uBAAC,aAAa;;;MEhBjB,qBAAqB,CAAA;AATlC,IAAA,WAAA,GAAA;QAWa,IAAA,CAAA,mBAAmB,GAAW,KAAK;QACnC,IAAA,CAAA,SAAS,GAA8B,UAAU;QACjD,IAAA,CAAA,eAAe,GAAG,MAAM;AAEvB,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,YAAY,EAAS;AACxD,IAAA;8GAPY,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,SAAA,EAAA,WAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdlC,2ZAOM,EAAA,MAAA,EAAA,CAAA,maAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDKQ,0BAA0B,EAAA,QAAA,EAAA,yBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,iBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,sBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAE3B,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBATjC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,aAAA,EAGX,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,cAAc,EAAA,OAAA,EACf,CAAC,0BAA0B,CAAC,EAAA,QAAA,EAAA,2ZAAA,EAAA,MAAA,EAAA,CAAA,maAAA,CAAA,EAAA;;sBAGpC;;sBACA;;sBACA;;sBACA;;sBAEA;;;METQ,SAAS,CAAA;IAWlB,WAAA,CAAY,SAAmB,EAAE,MAAkB,EAAA;AAC/C,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM;QACpB,MAAM,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,GAAG,SAAS;AACpC,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE;QACrC,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE;AAEnC,QAAA,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;AAC1C,aAAA,MAAM,CAAC,CAAC,QAAQ,EAAE,OAAO,KAAI;YAC1B,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;AAC1B,gBAAA,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YACrB;AAEA,YAAA,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;AAC3C,YAAA,OAAO,QAAQ;QACnB,CAAC,EAAE,EAAgB;AAClB,aAAA,GAAG,CAAC,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,IAAI,EAAE;IAC/C;AACH;;ACxCD;;AAEG;;;;"}

package/fesm2022/cmat-components-pagination.mjs CHANGED Viewed

@@ -92,10 +92,10 @@ class CmatPaginationService {
         }
         return target;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CmatPaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CmatPaginationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatPaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatPaginationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CmatPaginationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatPaginationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -271,10 +271,10 @@ class CmatPaginationDirective {
             return i;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CmatPaginationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: CmatPaginationDirective, isStandalone: true, selector: "pagination-template,[pagination-template]", inputs: { id: "id", maxSize: "maxSize" }, outputs: { pageChange: "pageChange", pageBoundsCorrection: "pageBoundsCorrection", perPageCountChange: "perPageCountChange" }, exportAs: ["paginationApi"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatPaginationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.5", type: CmatPaginationDirective, isStandalone: true, selector: "pagination-template,[pagination-template]", inputs: { id: "id", maxSize: "maxSize" }, outputs: { pageChange: "pageChange", pageBoundsCorrection: "pageBoundsCorrection", perPageCountChange: "perPageCountChange" }, exportAs: ["paginationApi"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CmatPaginationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatPaginationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'pagination-template,[pagination-template]',
@@ -319,10 +319,10 @@ class CmatPaginationComponent {
             this._changeDetectorRef.markForCheck();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CmatPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: CmatPaginationComponent, isStandalone: true, selector: "cmat-pagination", inputs: { id: "id", maxSize: "maxSize", itemsPerPages: "itemsPerPages", initPerPage: "initPerPage", autoHide: "autoHide" }, outputs: { pageChange: "pageChange", pageBoundsCorrection: "pageBoundsCorrection", perPageCountChange: "perPageCountChange" }, exportAs: ["cmatPagination"], ngImport: i0, template: "<pagination-template #p=\"paginationApi\" class=\"w-full px-4 py-2 flex\" [id]=\"id\"\r\n  [maxSize]=\"isScreenSmall&&maxSize>5?5:maxSize\" (pageChange)=\"pageChange.emit($event)\"\r\n  (pageBoundsCorrection)=\"pageBoundsCorrection.emit($event)\" (perPageCountChange)=\"perPageCountChange.emit($event)\">\r\n  <div class=\"hidden md:flex flex-auto items-center\">\r\n    <span>\u603B\u8BA1:{{p.getTotalItems()}}</span>\r\n  </div>\r\n  <nav role=\"navigation\" class=\"flex min-h-12 w-full md:w-0\">\r\n    @if (!(autoHide && p.pages.length <= 1)) {\r\n      <ul\r\n        class=\"flex flex-row items-center justify-center md:justify-end w-full\">\r\n        <li>\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===1\"\r\n            (click)=\"p.goFirstPage()\">\r\n            <mat-icon svgIcon=\"mat_outline:first_page\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li class=\"pr-4\">\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===1\"\r\n            (click)=\"p.previous()\">\r\n            <mat-icon svgIcon=\"mat_outline:navigate_before\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <div class=\"flex flex-row gap-4\">\r\n          @for (page of p.pages; track $index) {\r\n            <li class=\"flex text-xl lg:text-2xl\">\r\n              @if (p.getCurrent() !== page.value) {\r\n                <a tabindex=\"0\" role=\"presentation\"\r\n                  class=\"cursor-pointer text-gray-400 hover:text-current\" (click)=\"p.setCurrent(page.value)\">\r\n                  <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\r\n                </a>\r\n              }\r\n              @if (p.getCurrent() === page.value) {\r\n                <span class=\"text-current\">\r\n                  <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\r\n                </span>\r\n              }\r\n            </li>\r\n          }\r\n        </div>        \r\n        <li class=\"pl-4\">\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===p.getLastPage()\"\r\n            (click)=\"p.next()\">\r\n            <mat-icon svgIcon=\"mat_outline:navigate_next\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li>\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===p.getLastPage()\"\r\n            (click)=\"p.goLastPage()\">\r\n            <mat-icon svgIcon=\"mat_outline:last_page\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li class=\"hidden md:block px-2\">\r\n          <mat-form-field [ngStyle]=\"{'width':((p.getLastPage()?.toString()?.length||0)*8+64)+'px'}\">\r\n            <input #current matInput type=\"text\" cmatDigitOnly class=\"text-end\"\r\n              [value]=\"p.getCurrent()\" [autocomplete]=\"'off'\" [min]=\"0\" [max]=\"p.getLastPage()||0\"\r\n              (keyup.enter)=\"p.setCurrent(current.value)\">\r\n              <span matSuffix>/<div class=\"pl-1\">{{p.getLastPage()}}</div></span>\r\n            </mat-form-field>\r\n          </li>\r\n          <li class=\"hidden md:block\">\r\n            <mat-form-field class=\"w-24\">\r\n              <mat-select #pageCount name=\"pageCount\" [value]=\"initPerPage\"\r\n                (selectionChange)=\"p.setItemsPerPage(pageCount.value)\">\r\n                @for (perPage of itemsPerPages; track perPage) {\r\n                  <mat-option [value]=\"perPage\">\r\n                    {{perPage}}\r\n                  </mat-option>\r\n                }\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </li>\r\n        </ul>\r\n      }\r\n    </nav>\r\n  </pagination-template>", dependencies: [{ kind: "directive", type: CmatPaginationDirective, selector: "pagination-template,[pagination-template]", inputs: ["id", "maxSize"], outputs: ["pageChange", "pageBoundsCorrection", "perPageCountChange"], exportAs: ["paginationApi"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CmatDigitOnlyDirective, selector: "[cmatDigitOnly]", inputs: ["decimal", "decimalSeparator", "allowNegatives", "allowPaste", "negativeSign", "min", "max", "pattern"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: CmatPaginationComponent, isStandalone: true, selector: "cmat-pagination", inputs: { id: "id", maxSize: "maxSize", itemsPerPages: "itemsPerPages", initPerPage: "initPerPage", autoHide: "autoHide" }, outputs: { pageChange: "pageChange", pageBoundsCorrection: "pageBoundsCorrection", perPageCountChange: "perPageCountChange" }, exportAs: ["cmatPagination"], ngImport: i0, template: "<pagination-template #p=\"paginationApi\" class=\"w-full px-4 py-2 flex\" [id]=\"id\"\r\n  [maxSize]=\"isScreenSmall&&maxSize>5?5:maxSize\" (pageChange)=\"pageChange.emit($event)\"\r\n  (pageBoundsCorrection)=\"pageBoundsCorrection.emit($event)\" (perPageCountChange)=\"perPageCountChange.emit($event)\">\r\n  <div class=\"hidden md:flex flex-auto items-center\">\r\n    <span>\u603B\u8BA1:{{p.getTotalItems()}}</span>\r\n  </div>\r\n  <nav role=\"navigation\" class=\"flex min-h-12 w-full md:w-0\">\r\n    @if (!(autoHide && p.pages.length <= 1)) {\r\n      <ul\r\n        class=\"flex flex-row items-center justify-center md:justify-end w-full\">\r\n        <li>\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===1\"\r\n            (click)=\"p.goFirstPage()\">\r\n            <mat-icon svgIcon=\"mat_outline:first_page\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li class=\"pr-4\">\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===1\"\r\n            (click)=\"p.previous()\">\r\n            <mat-icon svgIcon=\"mat_outline:navigate_before\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <div class=\"flex flex-row gap-4\">\r\n          @for (page of p.pages; track $index) {\r\n            <li class=\"flex text-xl lg:text-2xl\">\r\n              @if (p.getCurrent() !== page.value) {\r\n                <a tabindex=\"0\" role=\"presentation\"\r\n                  class=\"cursor-pointer text-gray-400 hover:text-current\" (click)=\"p.setCurrent(page.value)\">\r\n                  <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\r\n                </a>\r\n              }\r\n              @if (p.getCurrent() === page.value) {\r\n                <span class=\"text-current\">\r\n                  <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\r\n                </span>\r\n              }\r\n            </li>\r\n          }\r\n        </div>        \r\n        <li class=\"pl-4\">\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===p.getLastPage()\"\r\n            (click)=\"p.next()\">\r\n            <mat-icon svgIcon=\"mat_outline:navigate_next\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li>\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===p.getLastPage()\"\r\n            (click)=\"p.goLastPage()\">\r\n            <mat-icon svgIcon=\"mat_outline:last_page\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li class=\"hidden md:block px-2\">\r\n          <mat-form-field [ngStyle]=\"{'width':((p.getLastPage()?.toString()?.length||0)*8+64)+'px'}\">\r\n            <input #current matInput type=\"text\" cmatDigitOnly class=\"text-end\"\r\n              [value]=\"p.getCurrent()\" [autocomplete]=\"'off'\" [min]=\"0\" [max]=\"p.getLastPage()||0\"\r\n              (keyup.enter)=\"p.setCurrent(current.value)\">\r\n              <span matSuffix>/<div class=\"pl-1\">{{p.getLastPage()}}</div></span>\r\n            </mat-form-field>\r\n          </li>\r\n          <li class=\"hidden md:block\">\r\n            <mat-form-field class=\"w-24\">\r\n              <mat-select #pageCount name=\"pageCount\" [value]=\"initPerPage\"\r\n                (selectionChange)=\"p.setItemsPerPage(pageCount.value)\">\r\n                @for (perPage of itemsPerPages; track perPage) {\r\n                  <mat-option [value]=\"perPage\">\r\n                    {{perPage}}\r\n                  </mat-option>\r\n                }\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </li>\r\n        </ul>\r\n      }\r\n    </nav>\r\n  </pagination-template>", dependencies: [{ kind: "directive", type: CmatPaginationDirective, selector: "pagination-template,[pagination-template]", inputs: ["id", "maxSize"], outputs: ["pageChange", "pageBoundsCorrection", "perPageCountChange"], exportAs: ["paginationApi"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CmatDigitOnlyDirective, selector: "[cmatDigitOnly]", inputs: ["decimal", "decimalSeparator", "allowNegatives", "allowPaste", "negativeSign", "min", "max", "pattern"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CmatPaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatPaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-pagination', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'cmatPagination', imports: [CmatPaginationDirective, MatIconModule, NgStyle, MatFormFieldModule, MatInputModule, CmatDigitOnlyDirective, MatSelectModule, DecimalPipe, MatButtonModule], template: "<pagination-template #p=\"paginationApi\" class=\"w-full px-4 py-2 flex\" [id]=\"id\"\r\n  [maxSize]=\"isScreenSmall&&maxSize>5?5:maxSize\" (pageChange)=\"pageChange.emit($event)\"\r\n  (pageBoundsCorrection)=\"pageBoundsCorrection.emit($event)\" (perPageCountChange)=\"perPageCountChange.emit($event)\">\r\n  <div class=\"hidden md:flex flex-auto items-center\">\r\n    <span>\u603B\u8BA1:{{p.getTotalItems()}}</span>\r\n  </div>\r\n  <nav role=\"navigation\" class=\"flex min-h-12 w-full md:w-0\">\r\n    @if (!(autoHide && p.pages.length <= 1)) {\r\n      <ul\r\n        class=\"flex flex-row items-center justify-center md:justify-end w-full\">\r\n        <li>\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===1\"\r\n            (click)=\"p.goFirstPage()\">\r\n            <mat-icon svgIcon=\"mat_outline:first_page\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li class=\"pr-4\">\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===1\"\r\n            (click)=\"p.previous()\">\r\n            <mat-icon svgIcon=\"mat_outline:navigate_before\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <div class=\"flex flex-row gap-4\">\r\n          @for (page of p.pages; track $index) {\r\n            <li class=\"flex text-xl lg:text-2xl\">\r\n              @if (p.getCurrent() !== page.value) {\r\n                <a tabindex=\"0\" role=\"presentation\"\r\n                  class=\"cursor-pointer text-gray-400 hover:text-current\" (click)=\"p.setCurrent(page.value)\">\r\n                  <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\r\n                </a>\r\n              }\r\n              @if (p.getCurrent() === page.value) {\r\n                <span class=\"text-current\">\r\n                  <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\r\n                </span>\r\n              }\r\n            </li>\r\n          }\r\n        </div>        \r\n        <li class=\"pl-4\">\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===p.getLastPage()\"\r\n            (click)=\"p.next()\">\r\n            <mat-icon svgIcon=\"mat_outline:navigate_next\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li>\r\n          <button type=\"button\" class=\"flex items-center\" matIconButton  [disabled]=\"p.getCurrent()===p.getLastPage()\"\r\n            (click)=\"p.goLastPage()\">\r\n            <mat-icon svgIcon=\"mat_outline:last_page\"></mat-icon>\r\n          </button>\r\n        </li>\r\n        <li class=\"hidden md:block px-2\">\r\n          <mat-form-field [ngStyle]=\"{'width':((p.getLastPage()?.toString()?.length||0)*8+64)+'px'}\">\r\n            <input #current matInput type=\"text\" cmatDigitOnly class=\"text-end\"\r\n              [value]=\"p.getCurrent()\" [autocomplete]=\"'off'\" [min]=\"0\" [max]=\"p.getLastPage()||0\"\r\n              (keyup.enter)=\"p.setCurrent(current.value)\">\r\n              <span matSuffix>/<div class=\"pl-1\">{{p.getLastPage()}}</div></span>\r\n            </mat-form-field>\r\n          </li>\r\n          <li class=\"hidden md:block\">\r\n            <mat-form-field class=\"w-24\">\r\n              <mat-select #pageCount name=\"pageCount\" [value]=\"initPerPage\"\r\n                (selectionChange)=\"p.setItemsPerPage(pageCount.value)\">\r\n                @for (perPage of itemsPerPages; track perPage) {\r\n                  <mat-option [value]=\"perPage\">\r\n                    {{perPage}}\r\n                  </mat-option>\r\n                }\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </li>\r\n        </ul>\r\n      }\r\n    </nav>\r\n  </pagination-template>" }]
         }], propDecorators: { pageChange: [{
@@ -427,10 +427,10 @@ class CmatPaginatePipe {
         }
         return state.slice.every((element, index) => element === collection[start + index]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CmatPaginatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: CmatPaginatePipe, isStandalone: true, name: "paginate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatPaginatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: CmatPaginatePipe, isStandalone: true, name: "paginate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CmatPaginatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatPaginatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'paginate',