@bizy/core 21.7.2 → 21.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/bizy-core.mjs +130 -125
- package/fesm2022/bizy-core.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/variables.css +1 -0
- package/types/bizy-core.d.ts +20 -21
package/fesm2022/bizy-core.mjs
CHANGED
|
@@ -2,12 +2,12 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { inject, ChangeDetectorRef, ElementRef, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, NgModule, Pipe, Renderer2, ViewChild, ViewContainerRef, RendererFactory2, Inject, Injectable, DOCUMENT as DOCUMENT$1, NgZone, ContentChildren, Directive, ContentChild, TemplateRef, HostListener } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, DOCUMENT, registerLocaleData, DatePipe } from '@angular/common';
|
|
5
|
-
import { Subscription, Subject, debounceTime, distinctUntilChanged, BehaviorSubject, fromEvent, merge, take, throttleTime,
|
|
5
|
+
import { Subscription, Subject, debounceTime, distinctUntilChanged, BehaviorSubject, fromEvent, merge, take, throttleTime, filter as filter$1, skip, auditTime, timer } from 'rxjs';
|
|
6
6
|
import * as i3 from '@angular/cdk/dialog';
|
|
7
7
|
import { DIALOG_DATA, DialogRef, DialogModule, Dialog } from '@angular/cdk/dialog';
|
|
8
8
|
import * as i1$1 from '@angular/cdk/drag-drop';
|
|
9
9
|
import { DragDropModule } from '@angular/cdk/drag-drop';
|
|
10
|
-
import { debounceTime as debounceTime$1, map, filter, distinctUntilChanged as distinctUntilChanged$1,
|
|
10
|
+
import { debounceTime as debounceTime$1, map, filter, distinctUntilChanged as distinctUntilChanged$1, switchMap, tap, takeUntil, take as take$1 } from 'rxjs/operators';
|
|
11
11
|
import * as i1$2 from '@angular/router';
|
|
12
12
|
import { NavigationEnd, NavigationStart, Router } from '@angular/router';
|
|
13
13
|
import validator from 'validator';
|
|
@@ -11521,15 +11521,15 @@ class BizyInputComponent {
|
|
|
11521
11521
|
#ref = inject(ChangeDetectorRef);
|
|
11522
11522
|
options;
|
|
11523
11523
|
bizyInputWrapper;
|
|
11524
|
-
bizyInput;
|
|
11525
11524
|
id = `bizy-input-${Math.random()}`;
|
|
11526
11525
|
name = `bizy-input-${Math.random()}`;
|
|
11527
|
-
type = 'text';
|
|
11528
11526
|
customClass = '';
|
|
11529
11527
|
placeholder = '';
|
|
11530
11528
|
debounceTime = 250;
|
|
11531
11529
|
rows = 4;
|
|
11530
|
+
type = 'text';
|
|
11532
11531
|
maxLength = null;
|
|
11532
|
+
autofocus = false;
|
|
11533
11533
|
disabled = false;
|
|
11534
11534
|
readonly = false;
|
|
11535
11535
|
valueChange = new EventEmitter();
|
|
@@ -11539,11 +11539,26 @@ class BizyInputComponent {
|
|
|
11539
11539
|
onSelect = new EventEmitter();
|
|
11540
11540
|
onBlur = new EventEmitter();
|
|
11541
11541
|
onFocus = new EventEmitter();
|
|
11542
|
-
|
|
11543
|
-
|
|
11544
|
-
|
|
11542
|
+
onPaste = new EventEmitter();
|
|
11543
|
+
set bizyInput(inputElement) {
|
|
11544
|
+
if (inputElement) {
|
|
11545
|
+
this.#input = inputElement;
|
|
11546
|
+
this.#subscription.unsubscribe();
|
|
11547
|
+
this.#subscription = new Subscription();
|
|
11548
|
+
setTimeout(() => {
|
|
11549
|
+
if (this.type === 'currency' && this.#input.nativeElement.setValue) {
|
|
11550
|
+
this.#input.nativeElement.setValue(this._currencyValue);
|
|
11551
|
+
}
|
|
11552
|
+
this.#subscription.add(this.onChange$.pipe(debounceTime(this.debounceTime)).subscribe(value => {
|
|
11553
|
+
this.valueChange.emit(value);
|
|
11554
|
+
this.onChange.emit(value);
|
|
11555
|
+
}));
|
|
11556
|
+
this.#subscription.add(fromEvent(this.#input.nativeElement, 'focus').subscribe(this.#focus));
|
|
11557
|
+
this.#subscription.add(fromEvent(this.#input.nativeElement, 'blur').subscribe(this.#blur));
|
|
11558
|
+
this.#subscription.add(fromEvent(this.#input.nativeElement, 'paste').subscribe(this.#paste));
|
|
11559
|
+
this.setFocus(this.autofocus);
|
|
11560
|
+
}, 0);
|
|
11545
11561
|
}
|
|
11546
|
-
this.setFocus(autofocus);
|
|
11547
11562
|
}
|
|
11548
11563
|
set value(value) {
|
|
11549
11564
|
if (typeof value === 'undefined') {
|
|
@@ -11551,10 +11566,10 @@ class BizyInputComponent {
|
|
|
11551
11566
|
}
|
|
11552
11567
|
if (this.type === 'currency') {
|
|
11553
11568
|
this._currencyValue = Number(value);
|
|
11554
|
-
if (this
|
|
11555
|
-
const _value = this.
|
|
11569
|
+
if (this.#input && this.#input.nativeElement && this.#input.nativeElement.getValue) {
|
|
11570
|
+
const _value = this.#input.nativeElement.getValue();
|
|
11556
11571
|
if (_value !== this._currencyValue) {
|
|
11557
|
-
this.
|
|
11572
|
+
this.#input.nativeElement.setValue(this._currencyValue);
|
|
11558
11573
|
}
|
|
11559
11574
|
}
|
|
11560
11575
|
return;
|
|
@@ -11567,71 +11582,62 @@ class BizyInputComponent {
|
|
|
11567
11582
|
_value = null;
|
|
11568
11583
|
_currencyValue = null;
|
|
11569
11584
|
currencyOptions = 'commaDecimalCharDotSeparator';
|
|
11585
|
+
#input = null;
|
|
11570
11586
|
#subscription = new Subscription();
|
|
11571
11587
|
#optionSubscription = new Subscription();
|
|
11572
11588
|
onChange$ = new Subject();
|
|
11573
|
-
getWidth() {
|
|
11589
|
+
getWidth = () => {
|
|
11574
11590
|
return this.bizyInputWrapper && this.bizyInputWrapper.nativeElement && this.bizyInputWrapper.nativeElement.offsetWidth ? this.bizyInputWrapper.nativeElement.offsetWidth : 0;
|
|
11575
|
-
}
|
|
11576
|
-
_onchange(value) {
|
|
11591
|
+
};
|
|
11592
|
+
_onchange = (value) => {
|
|
11577
11593
|
if (this.disabled || this.readonly) {
|
|
11578
11594
|
return;
|
|
11579
11595
|
}
|
|
11580
|
-
if (this.type === 'currency' && this.
|
|
11581
|
-
this._currencyValue = this.
|
|
11596
|
+
if (this.type === 'currency' && this.#input.nativeElement.getValue) {
|
|
11597
|
+
this._currencyValue = this.#input.nativeElement.getValue();
|
|
11582
11598
|
this.onChange$.next(this._currencyValue);
|
|
11583
11599
|
return;
|
|
11584
11600
|
}
|
|
11585
11601
|
this.onChange$.next(value);
|
|
11586
|
-
}
|
|
11587
|
-
_onClick(event) {
|
|
11602
|
+
};
|
|
11603
|
+
_onClick = (event) => {
|
|
11588
11604
|
this.onSelect.emit(event);
|
|
11589
11605
|
this.onOpen();
|
|
11590
|
-
}
|
|
11591
|
-
_onEnter(event) {
|
|
11606
|
+
};
|
|
11607
|
+
_onEnter = (event) => {
|
|
11592
11608
|
if (this.disabled || this.readonly || !this.focused) {
|
|
11593
11609
|
return;
|
|
11594
11610
|
}
|
|
11595
11611
|
this.onEnter.emit(event);
|
|
11596
|
-
}
|
|
11597
|
-
|
|
11598
|
-
if (this.type === 'currency') {
|
|
11599
|
-
this.bizyInput.nativeElement.setValue(this._currencyValue);
|
|
11600
|
-
}
|
|
11601
|
-
setTimeout(() => {
|
|
11602
|
-
this.focused = false;
|
|
11603
|
-
this.touched = true;
|
|
11604
|
-
this.#ref.detectChanges();
|
|
11605
|
-
this.onBlur.emit(event);
|
|
11606
|
-
}, 250);
|
|
11607
|
-
}
|
|
11608
|
-
_onBackspace(event) {
|
|
11612
|
+
};
|
|
11613
|
+
_onBackspace = (event) => {
|
|
11609
11614
|
setTimeout(() => {
|
|
11610
11615
|
this.onBackspace.emit(event);
|
|
11611
|
-
},
|
|
11612
|
-
}
|
|
11613
|
-
|
|
11614
|
-
|
|
11615
|
-
return;
|
|
11616
|
-
}
|
|
11617
|
-
this.focused = true;
|
|
11616
|
+
}, this.debounceTime);
|
|
11617
|
+
};
|
|
11618
|
+
setTouched = (touched) => {
|
|
11619
|
+
this.touched = touched;
|
|
11618
11620
|
this.#ref.detectChanges();
|
|
11621
|
+
};
|
|
11622
|
+
#focus = (event) => {
|
|
11623
|
+
this.focused = true;
|
|
11619
11624
|
this.onFocus.emit(event);
|
|
11620
|
-
}
|
|
11621
|
-
setTouched(touched) {
|
|
11622
|
-
this.touched = touched;
|
|
11623
11625
|
this.#ref.detectChanges();
|
|
11624
|
-
}
|
|
11625
|
-
|
|
11626
|
-
if (this.type === 'currency'
|
|
11627
|
-
this.
|
|
11626
|
+
};
|
|
11627
|
+
#blur = (event) => {
|
|
11628
|
+
if (this.type === 'currency') {
|
|
11629
|
+
this.#input.nativeElement.setValue(this._currencyValue);
|
|
11628
11630
|
}
|
|
11629
|
-
this
|
|
11630
|
-
|
|
11631
|
-
|
|
11632
|
-
|
|
11633
|
-
}
|
|
11634
|
-
|
|
11631
|
+
this.focused = false;
|
|
11632
|
+
this.touched = true;
|
|
11633
|
+
this.onBlur.emit(event);
|
|
11634
|
+
this.#ref.detectChanges();
|
|
11635
|
+
};
|
|
11636
|
+
#paste = (event) => {
|
|
11637
|
+
this.onPaste.emit(event);
|
|
11638
|
+
this.#ref.detectChanges();
|
|
11639
|
+
};
|
|
11640
|
+
onOpen = () => {
|
|
11635
11641
|
if (this.disabled) {
|
|
11636
11642
|
return;
|
|
11637
11643
|
}
|
|
@@ -11649,26 +11655,22 @@ class BizyInputComponent {
|
|
|
11649
11655
|
this.#optionSubscription.unsubscribe();
|
|
11650
11656
|
}));
|
|
11651
11657
|
});
|
|
11652
|
-
}
|
|
11653
|
-
|
|
11654
|
-
|
|
11655
|
-
|
|
11656
|
-
|
|
11657
|
-
|
|
11658
|
-
|
|
11659
|
-
|
|
11660
|
-
|
|
11661
|
-
|
|
11662
|
-
|
|
11663
|
-
|
|
11664
|
-
|
|
11665
|
-
|
|
11666
|
-
|
|
11667
|
-
|
|
11668
|
-
this.#ref.detectChanges();
|
|
11669
|
-
}
|
|
11670
|
-
}));
|
|
11671
|
-
}
|
|
11658
|
+
};
|
|
11659
|
+
getNativeElement = () => this.#elementRef?.nativeElement;
|
|
11660
|
+
setFocus = (focus) => {
|
|
11661
|
+
if (!this.#input || !this.#input.nativeElement) {
|
|
11662
|
+
return;
|
|
11663
|
+
}
|
|
11664
|
+
if (focus) {
|
|
11665
|
+
this.#input.nativeElement.focus();
|
|
11666
|
+
this.focused = true;
|
|
11667
|
+
}
|
|
11668
|
+
else {
|
|
11669
|
+
this.#input.nativeElement.blur();
|
|
11670
|
+
this.focused = false;
|
|
11671
|
+
}
|
|
11672
|
+
this.#ref.detectChanges();
|
|
11673
|
+
};
|
|
11672
11674
|
close = (event, button) => {
|
|
11673
11675
|
if (button && event && event.target && event.target === button) {
|
|
11674
11676
|
return;
|
|
@@ -11680,28 +11682,22 @@ class BizyInputComponent {
|
|
|
11680
11682
|
this.#subscription.unsubscribe();
|
|
11681
11683
|
this.#optionSubscription.unsubscribe();
|
|
11682
11684
|
}
|
|
11683
|
-
getNativeElement = () => this.#elementRef?.nativeElement;
|
|
11684
11685
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11685
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: BizyInputComponent, isStandalone: true, selector: "bizy-input", inputs: { id: "id", name: "name",
|
|
11686
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: BizyInputComponent, isStandalone: true, selector: "bizy-input", inputs: { id: "id", name: "name", customClass: "customClass", placeholder: "placeholder", debounceTime: "debounceTime", rows: "rows", type: "type", maxLength: "maxLength", autofocus: "autofocus", disabled: "disabled", readonly: "readonly", value: "value" }, outputs: { valueChange: "valueChange", onChange: "onChange", onEnter: "onEnter", onBackspace: "onBackspace", onSelect: "onSelect", onBlur: "onBlur", onFocus: "onFocus", onPaste: "onPaste" }, queries: [{ propertyName: "options", predicate: BizyInputOptionComponent }], viewQueries: [{ propertyName: "bizyInputWrapper", first: true, predicate: ["bizyInputWrapper"], descendants: true }, { propertyName: "bizyInput", first: true, predicate: ["bizyInput"], descendants: true }], ngImport: i0, template: "<button\n #bizyInputWrapper\n type=\"button\"\n (click)=\"_onClick($event)\"\n (keyup)=\"_onClick($event)\"\n class=\"bizy-input {{customClass}}\"\n (focus)=\"setFocus(true)\"\n cdkOverlayOrigin\n #bizyInputTrigger=\"cdkOverlayOrigin\"\n [ngClass]=\"{'bizy-input--disabled': disabled, 'bizy-input--negative': type === 'currency' && _currencyValue < 0}\">\n\n <span class=\"bizy-input__header\">\n <ng-content select=\"[slot=header]\"></ng-content>\n </span>\n\n <span class=\"bizy-input__content\" [ngClass]=\"{'bizy-input__content--readonly': readonly}\">\n\n <span class=\"bizy-input__content__prefix\">\n <ng-content select=\"[slot=prefix]\"></ng-content>\n </span>\n\n @if (type !== 'textarea') {\n <input\n #bizyInput\n [id]=\"id\"\n class=\"bizy-input__content__input\"\n [type]=\"type === 'currency' ? 'tel' : type\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readonly\"\n [maxlength]=\"maxLength\"\n [bizyCurrencyFormat]=\"type === 'currency'\"\n [bizyCurrencyOptions]=\"currencyOptions\"\n [bizyOnlyPhoneDigits]=\"type === 'tel'\"\n (keyup.enter)=\"_onEnter($event)\"\n (keyup.backspace)=\"_onBackspace($event)\"\n [ngModel]=\"_value\"\n (ngModelChange)=\"_onchange($event)\"/>\n }\n\n @if (type === 'textarea') {\n <textarea\n #bizyInput\n [id]=\"id\"\n [rows]=\"rows\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readonly\"\n [maxlength]=\"maxLength\"\n class=\"bizy-input__content__input\"\n (keyup.enter)=\"_onEnter($event)\"\n (keyup.backspace)=\"_onBackspace($event)\"\n [ngModel]=\"_value\"\n (ngModelChange)=\"_onchange($event)\">\n </textarea>\n }\n\n <span class=\"bizy-input__content__suffix\">\n <ng-content select=\"[slot=suffix]\"></ng-content>\n </span>\n\n </span>\n\n <span class=\"bizy-input__bottom-line\" [ngClass]=\"{'bizy-input__bottom-line--visible': focused}\"></span>\n\n</button>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayMinWidth]=\"bizyInputWrapper?.offsetWidth\"\n [cdkConnectedOverlayOrigin]=\"bizyInputTrigger\"\n (overlayOutsideClick)=\"close($event, bizyInputWrapper)\"\n [cdkConnectedOverlayOpen]=\"opened\">\n\n <span class=\"bizy-input__options\">\n\n <ng-content select=\"bizy-input-option\"></ng-content>\n\n </span>\n\n</ng-template>\n\n@if (touched) {\n <span class=\"bizy-input__errors\">\n <ng-content select=\"[slot=error]\"></ng-content>\n </span>\n}\n", styles: [":host{width:var(--bizy-input-width);min-width:var(--bizy-input-min-width);max-width:var(--bizy-input-max-width);display:flex;flex-direction:column;row-gap:.3rem}:host:has(>.bizy-input__errors:not(:empty)) .bizy-input__bottom-line{background-color:var(--bizy-input-invalid-color)!important;visibility:visible!important}:host:has(>.bizy-input__errors:not(:empty)) .bizy-input__content__input{color:var(--bizy-input-invalid-color)!important}.bizy-input{width:100%;background-color:var(--bizy-input-background-color);border:none;border-top-left-radius:.3rem;border-top-right-radius:.3rem;display:flex;padding:.3rem .3rem 0;flex-direction:column;cursor:var(--bizy-input-cursor)}.bizy-input--negative,.bizy-input--negative .bizy-input__header,.bizy-input--negative .bizy-input__content,.bizy-input--negative .bizy-input__content__input{background-color:var(--bizy-input-negative-background-color)}.bizy-input--disabled{opacity:.5;pointer-events:none;cursor:not-allowed!important}.bizy-input__header{background-color:var(--bizy-input-background-color);width:100%;display:flex;align-items:center;column-gap:.5rem;padding-bottom:.1rem}.bizy-input__header:empty{display:none!important}.bizy-input__content{background-color:var(--bizy-input-background-color);width:100%;display:flex;align-items:center;column-gap:.3rem}.bizy-input__content--readonly{pointer-events:none;cursor:default!important}.bizy-input__content__prefix{display:flex;align-items:center;column-gap:.3rem}.bizy-input__content__prefix:empty{display:none!important}.bizy-input__content__suffix{display:flex;align-items:center;column-gap:.3rem}.bizy-input__content__suffix:empty{display:none!important}.bizy-input__content__input{width:100%;background-color:var(--bizy-input-background-color);color:var(--bizy-input-color);flex:1;border:none;padding-block:0;padding-inline:0;padding:0 0 .2rem;font-size:var(--bizy-input-font-size)}.bizy-input__content__input:focus{outline:none;border:none}.bizy-input__content__input::placeholder{color:var(--bizy-input-placeholder-color)}.bizy-input__content input[type=number]::-webkit-inner-spin-button,.bizy-input__content input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.bizy-input__bottom-line{width:calc(100% + .6rem);position:relative;right:.3rem;height:.1rem;visibility:hidden;pointer-events:none;background-color:var(--bizy-input-focus-color)}.bizy-input__bottom-line--visible{visibility:visible;animation-name:zoomIn;animation-duration:.2s;animation-fill-mode:both}.bizy-input__options{background-color:var(--bizy-input-background-color);display:flex;min-width:fit-content;width:100%;flex-direction:column;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014;max-height:var(--bizy-input-options-height);overflow-y:auto;overflow-x:hidden;position:relative}.bizy-input__errors:empty{display:none!important}::ng-deep .bizy-input__errors *{color:var(--bizy-input-invalid-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: BizyCurrencyFormatDirective, selector: "[bizyCurrencyFormat]", inputs: ["bizyCurrencyFormat", "bizyCurrencyOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11686
11687
|
}
|
|
11687
11688
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyInputComponent, decorators: [{
|
|
11688
11689
|
type: Component,
|
|
11689
|
-
args: [{ selector: 'bizy-input', imports: [CommonModule, FormsModule, OverlayModule, BizyCurrencyFormatDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n #bizyInputWrapper\n type=\"button\"\n (click)=\"_onClick($event)\"\n (keyup)=\"_onClick($event)\"\n class=\"bizy-input {{customClass}}\"\n (focus)=\"
|
|
11690
|
+
args: [{ selector: 'bizy-input', imports: [CommonModule, FormsModule, OverlayModule, BizyCurrencyFormatDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n #bizyInputWrapper\n type=\"button\"\n (click)=\"_onClick($event)\"\n (keyup)=\"_onClick($event)\"\n class=\"bizy-input {{customClass}}\"\n (focus)=\"setFocus(true)\"\n cdkOverlayOrigin\n #bizyInputTrigger=\"cdkOverlayOrigin\"\n [ngClass]=\"{'bizy-input--disabled': disabled, 'bizy-input--negative': type === 'currency' && _currencyValue < 0}\">\n\n <span class=\"bizy-input__header\">\n <ng-content select=\"[slot=header]\"></ng-content>\n </span>\n\n <span class=\"bizy-input__content\" [ngClass]=\"{'bizy-input__content--readonly': readonly}\">\n\n <span class=\"bizy-input__content__prefix\">\n <ng-content select=\"[slot=prefix]\"></ng-content>\n </span>\n\n @if (type !== 'textarea') {\n <input\n #bizyInput\n [id]=\"id\"\n class=\"bizy-input__content__input\"\n [type]=\"type === 'currency' ? 'tel' : type\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readonly\"\n [maxlength]=\"maxLength\"\n [bizyCurrencyFormat]=\"type === 'currency'\"\n [bizyCurrencyOptions]=\"currencyOptions\"\n [bizyOnlyPhoneDigits]=\"type === 'tel'\"\n (keyup.enter)=\"_onEnter($event)\"\n (keyup.backspace)=\"_onBackspace($event)\"\n [ngModel]=\"_value\"\n (ngModelChange)=\"_onchange($event)\"/>\n }\n\n @if (type === 'textarea') {\n <textarea\n #bizyInput\n [id]=\"id\"\n [rows]=\"rows\"\n [placeholder]=\"placeholder\"\n [readonly]=\"readonly\"\n [maxlength]=\"maxLength\"\n class=\"bizy-input__content__input\"\n (keyup.enter)=\"_onEnter($event)\"\n (keyup.backspace)=\"_onBackspace($event)\"\n [ngModel]=\"_value\"\n (ngModelChange)=\"_onchange($event)\">\n </textarea>\n }\n\n <span class=\"bizy-input__content__suffix\">\n <ng-content select=\"[slot=suffix]\"></ng-content>\n </span>\n\n </span>\n\n <span class=\"bizy-input__bottom-line\" [ngClass]=\"{'bizy-input__bottom-line--visible': focused}\"></span>\n\n</button>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayMinWidth]=\"bizyInputWrapper?.offsetWidth\"\n [cdkConnectedOverlayOrigin]=\"bizyInputTrigger\"\n (overlayOutsideClick)=\"close($event, bizyInputWrapper)\"\n [cdkConnectedOverlayOpen]=\"opened\">\n\n <span class=\"bizy-input__options\">\n\n <ng-content select=\"bizy-input-option\"></ng-content>\n\n </span>\n\n</ng-template>\n\n@if (touched) {\n <span class=\"bizy-input__errors\">\n <ng-content select=\"[slot=error]\"></ng-content>\n </span>\n}\n", styles: [":host{width:var(--bizy-input-width);min-width:var(--bizy-input-min-width);max-width:var(--bizy-input-max-width);display:flex;flex-direction:column;row-gap:.3rem}:host:has(>.bizy-input__errors:not(:empty)) .bizy-input__bottom-line{background-color:var(--bizy-input-invalid-color)!important;visibility:visible!important}:host:has(>.bizy-input__errors:not(:empty)) .bizy-input__content__input{color:var(--bizy-input-invalid-color)!important}.bizy-input{width:100%;background-color:var(--bizy-input-background-color);border:none;border-top-left-radius:.3rem;border-top-right-radius:.3rem;display:flex;padding:.3rem .3rem 0;flex-direction:column;cursor:var(--bizy-input-cursor)}.bizy-input--negative,.bizy-input--negative .bizy-input__header,.bizy-input--negative .bizy-input__content,.bizy-input--negative .bizy-input__content__input{background-color:var(--bizy-input-negative-background-color)}.bizy-input--disabled{opacity:.5;pointer-events:none;cursor:not-allowed!important}.bizy-input__header{background-color:var(--bizy-input-background-color);width:100%;display:flex;align-items:center;column-gap:.5rem;padding-bottom:.1rem}.bizy-input__header:empty{display:none!important}.bizy-input__content{background-color:var(--bizy-input-background-color);width:100%;display:flex;align-items:center;column-gap:.3rem}.bizy-input__content--readonly{pointer-events:none;cursor:default!important}.bizy-input__content__prefix{display:flex;align-items:center;column-gap:.3rem}.bizy-input__content__prefix:empty{display:none!important}.bizy-input__content__suffix{display:flex;align-items:center;column-gap:.3rem}.bizy-input__content__suffix:empty{display:none!important}.bizy-input__content__input{width:100%;background-color:var(--bizy-input-background-color);color:var(--bizy-input-color);flex:1;border:none;padding-block:0;padding-inline:0;padding:0 0 .2rem;font-size:var(--bizy-input-font-size)}.bizy-input__content__input:focus{outline:none;border:none}.bizy-input__content__input::placeholder{color:var(--bizy-input-placeholder-color)}.bizy-input__content input[type=number]::-webkit-inner-spin-button,.bizy-input__content input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.bizy-input__bottom-line{width:calc(100% + .6rem);position:relative;right:.3rem;height:.1rem;visibility:hidden;pointer-events:none;background-color:var(--bizy-input-focus-color)}.bizy-input__bottom-line--visible{visibility:visible;animation-name:zoomIn;animation-duration:.2s;animation-fill-mode:both}.bizy-input__options{background-color:var(--bizy-input-background-color);display:flex;min-width:fit-content;width:100%;flex-direction:column;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014;max-height:var(--bizy-input-options-height);overflow-y:auto;overflow-x:hidden;position:relative}.bizy-input__errors:empty{display:none!important}::ng-deep .bizy-input__errors *{color:var(--bizy-input-invalid-color)!important}\n"] }]
|
|
11690
11691
|
}], propDecorators: { options: [{
|
|
11691
11692
|
type: ContentChildren,
|
|
11692
11693
|
args: [BizyInputOptionComponent]
|
|
11693
11694
|
}], bizyInputWrapper: [{
|
|
11694
11695
|
type: ViewChild,
|
|
11695
11696
|
args: ['bizyInputWrapper']
|
|
11696
|
-
}], bizyInput: [{
|
|
11697
|
-
type: ViewChild,
|
|
11698
|
-
args: ['bizyInput']
|
|
11699
11697
|
}], id: [{
|
|
11700
11698
|
type: Input
|
|
11701
11699
|
}], name: [{
|
|
11702
11700
|
type: Input
|
|
11703
|
-
}], type: [{
|
|
11704
|
-
type: Input
|
|
11705
11701
|
}], customClass: [{
|
|
11706
11702
|
type: Input
|
|
11707
11703
|
}], placeholder: [{
|
|
@@ -11710,8 +11706,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
|
|
|
11710
11706
|
type: Input
|
|
11711
11707
|
}], rows: [{
|
|
11712
11708
|
type: Input
|
|
11709
|
+
}], type: [{
|
|
11710
|
+
type: Input
|
|
11713
11711
|
}], maxLength: [{
|
|
11714
11712
|
type: Input
|
|
11713
|
+
}], autofocus: [{
|
|
11714
|
+
type: Input
|
|
11715
11715
|
}], disabled: [{
|
|
11716
11716
|
type: Input
|
|
11717
11717
|
}], readonly: [{
|
|
@@ -11730,8 +11730,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
|
|
|
11730
11730
|
type: Output
|
|
11731
11731
|
}], onFocus: [{
|
|
11732
11732
|
type: Output
|
|
11733
|
-
}],
|
|
11734
|
-
type:
|
|
11733
|
+
}], onPaste: [{
|
|
11734
|
+
type: Output
|
|
11735
|
+
}], bizyInput: [{
|
|
11736
|
+
type: ViewChild,
|
|
11737
|
+
args: ['bizyInput']
|
|
11735
11738
|
}], value: [{
|
|
11736
11739
|
type: Input
|
|
11737
11740
|
}] } });
|
|
@@ -11895,7 +11898,7 @@ class BizyDatePickerComponent {
|
|
|
11895
11898
|
return date.getMinutes();
|
|
11896
11899
|
}
|
|
11897
11900
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11898
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: BizyDatePickerComponent, isStandalone: true, selector: "bizy-date-picker", inputs: { id: "id", disabled: "disabled", customClass: "customClass", opened: "opened", minDate: "minDate", maxDate: "maxDate", enableSeconds: "enableSeconds", date: "date", range: "range", type: "type" }, outputs: { dateChange: "dateChange", rangeChange: "rangeChange", onChange: "onChange", openedChange: "openedChange", onOpen: "onOpen", onSelect: "onSelect" }, providers: [DatePipe], viewQueries: [{ propertyName: "bizyDatePicker", first: true, predicate: ["bizyDatePicker"], descendants: true }], ngImport: i0, template: "<bizy-input\n #bizyDatePicker\n [readonly]=\"true\"\n [disabled]=\"disabled\"\n (onSelect)=\"onSelect.emit($event)\"\n [value]=\"value\"\n [id]=\"id\"\n class=\"bizy-date-picker {{customClass}}\">\n\n <svg\n slot=\"suffix\"\n id=\"bizy-date-picker-arrow\"\n class=\"bizy-date-picker__arrow\"\n [ngClass]=\"{'bizy-date-picker__arrow--opened': opened}\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 320 512\">\n <path d=\"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\"/>\n </svg>\n\n <ng-container slot=\"header\">\n <ng-content select=\"[slot=header]\"></ng-content>\n </ng-container>\n\n <ng-container slot=\"suffix\">\n <ng-content select=\"[slot=prefix]\"></ng-content>\n </ng-container>\n\n @if (touched) {\n <ng-container slot=\"error\">\n <ng-content select=\"[slot=error]\"></ng-content>\n </ng-container>\n }\n\n</bizy-input>\n", styles: [":host{font-size:1rem;width:var(--bizy-input-width);min-width:var(--bizy-input-min-width);max-width:var(--bizy-input-max-width);display:flex}.bizy-date-picker{--bizy-input-cursor: pointer}.bizy-date-picker__arrow{height:1rem;pointer-events:none;display:block;transition:transform .2s ease;fill:var(--bizy-input-color)}.bizy-date-picker__arrow--opened{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BizyInputComponent, selector: "bizy-input", inputs: ["id", "name", "
|
|
11901
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: BizyDatePickerComponent, isStandalone: true, selector: "bizy-date-picker", inputs: { id: "id", disabled: "disabled", customClass: "customClass", opened: "opened", minDate: "minDate", maxDate: "maxDate", enableSeconds: "enableSeconds", date: "date", range: "range", type: "type" }, outputs: { dateChange: "dateChange", rangeChange: "rangeChange", onChange: "onChange", openedChange: "openedChange", onOpen: "onOpen", onSelect: "onSelect" }, providers: [DatePipe], viewQueries: [{ propertyName: "bizyDatePicker", first: true, predicate: ["bizyDatePicker"], descendants: true }], ngImport: i0, template: "<bizy-input\n #bizyDatePicker\n [readonly]=\"true\"\n [disabled]=\"disabled\"\n (onSelect)=\"onSelect.emit($event)\"\n [value]=\"value\"\n [id]=\"id\"\n class=\"bizy-date-picker {{customClass}}\">\n\n <svg\n slot=\"suffix\"\n id=\"bizy-date-picker-arrow\"\n class=\"bizy-date-picker__arrow\"\n [ngClass]=\"{'bizy-date-picker__arrow--opened': opened}\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 320 512\">\n <path d=\"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\"/>\n </svg>\n\n <ng-container slot=\"header\">\n <ng-content select=\"[slot=header]\"></ng-content>\n </ng-container>\n\n <ng-container slot=\"suffix\">\n <ng-content select=\"[slot=prefix]\"></ng-content>\n </ng-container>\n\n @if (touched) {\n <ng-container slot=\"error\">\n <ng-content select=\"[slot=error]\"></ng-content>\n </ng-container>\n }\n\n</bizy-input>\n", styles: [":host{font-size:1rem;width:var(--bizy-input-width);min-width:var(--bizy-input-min-width);max-width:var(--bizy-input-max-width);display:flex}.bizy-date-picker{--bizy-input-cursor: pointer}.bizy-date-picker__arrow{height:1rem;pointer-events:none;display:block;transition:transform .2s ease;fill:var(--bizy-input-color)}.bizy-date-picker__arrow--opened{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BizyInputComponent, selector: "bizy-input", inputs: ["id", "name", "customClass", "placeholder", "debounceTime", "rows", "type", "maxLength", "autofocus", "disabled", "readonly", "value"], outputs: ["valueChange", "onChange", "onEnter", "onBackspace", "onSelect", "onBlur", "onFocus", "onPaste"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11899
11902
|
}
|
|
11900
11903
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyDatePickerComponent, decorators: [{
|
|
11901
11904
|
type: Component,
|
|
@@ -12946,7 +12949,7 @@ class BizyFilterSectionRangeOptionComponent {
|
|
|
12946
12949
|
return this.#activated.value;
|
|
12947
12950
|
};
|
|
12948
12951
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyFilterSectionRangeOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12949
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyFilterSectionRangeOptionComponent, isStandalone: true, selector: "bizy-filter-section-range-option", inputs: { id: "id", disabled: "disabled", customClass: "customClass", min: "min", max: "max", minLimit: "minLimit", maxLimit: "maxLimit" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div \n class=\"bizy-filter-section-range-option {{customClass}}\"\n [id]=\"id\">\n\n <span class=\"bizy-filter-section-range-option__inputs\">\n\n <bizy-input\n class=\"bizy-filter-section-range-option__input\"\n type=\"number\"\n [value]=\"minValue.value\"\n (onChange)=\"setMinValue($event)\">\n\n <ng-container slot=\"header\">\n <ng-content select=\"[slot=min-header]\"></ng-content>\n </ng-container>\n\n </bizy-input>\n\n <bizy-input\n class=\"bizy-filter-section-range-option__input\"\n type=\"number\"\n [value]=\"maxValue.value\"\n (onChange)=\"setMaxValue($event)\">\n\n <ng-container slot=\"header\">\n <ng-content select=\"[slot=max-header]\"></ng-content>\n </ng-container>\n\n </bizy-input>\n\n </span>\n \n</div>", styles: [":host{font-size:1rem}.bizy-filter-section-range-option{display:flex;flex-direction:column;row-gap:1rem}.bizy-filter-section-range-option__inputs{display:flex;align-items:center;column-gap:.5rem}.bizy-filter-section-range-option__input{--bizy-input-background-color: #f3f3f3 !important}\n"], dependencies: [{ kind: "component", type: BizyInputComponent, selector: "bizy-input", inputs: ["id", "name", "
|
|
12952
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyFilterSectionRangeOptionComponent, isStandalone: true, selector: "bizy-filter-section-range-option", inputs: { id: "id", disabled: "disabled", customClass: "customClass", min: "min", max: "max", minLimit: "minLimit", maxLimit: "maxLimit" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div \n class=\"bizy-filter-section-range-option {{customClass}}\"\n [id]=\"id\">\n\n <span class=\"bizy-filter-section-range-option__inputs\">\n\n <bizy-input\n class=\"bizy-filter-section-range-option__input\"\n type=\"number\"\n [value]=\"minValue.value\"\n (onChange)=\"setMinValue($event)\">\n\n <ng-container slot=\"header\">\n <ng-content select=\"[slot=min-header]\"></ng-content>\n </ng-container>\n\n </bizy-input>\n\n <bizy-input\n class=\"bizy-filter-section-range-option__input\"\n type=\"number\"\n [value]=\"maxValue.value\"\n (onChange)=\"setMaxValue($event)\">\n\n <ng-container slot=\"header\">\n <ng-content select=\"[slot=max-header]\"></ng-content>\n </ng-container>\n\n </bizy-input>\n\n </span>\n \n</div>", styles: [":host{font-size:1rem}.bizy-filter-section-range-option{display:flex;flex-direction:column;row-gap:1rem}.bizy-filter-section-range-option__inputs{display:flex;align-items:center;column-gap:.5rem}.bizy-filter-section-range-option__input{--bizy-input-background-color: #f3f3f3 !important}\n"], dependencies: [{ kind: "component", type: BizyInputComponent, selector: "bizy-input", inputs: ["id", "name", "customClass", "placeholder", "debounceTime", "rows", "type", "maxLength", "autofocus", "disabled", "readonly", "value"], outputs: ["valueChange", "onChange", "onEnter", "onBackspace", "onSelect", "onBlur", "onFocus", "onPaste"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12950
12953
|
}
|
|
12951
12954
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyFilterSectionRangeOptionComponent, decorators: [{
|
|
12952
12955
|
type: Component,
|
|
@@ -13060,7 +13063,7 @@ class BizyFilterSectionSearchOptionComponent {
|
|
|
13060
13063
|
return this.#activated.value;
|
|
13061
13064
|
};
|
|
13062
13065
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyFilterSectionSearchOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13063
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyFilterSectionSearchOptionComponent, isStandalone: true, selector: "bizy-filter-section-search-option", inputs: { id: "id", customClass: "customClass", value: "value" }, outputs: { valueChange: "valueChange", onChange: "onChange" }, ngImport: i0, template: "<bizy-input\n [id]=\"id\" \n (onChange)=\"_onChange($event)\"\n [value]=\"_value\"\n class=\"bizy-filter-section-search-option {{customClass}}\">\n\n <span slot=\"header\"></span>\n\n <ng-container slot=\"prefix\">\n <ng-content select=\"[slot=prefix]\"></ng-content>\n </ng-container>\n\n <ng-container slot=\"suffix\">\n <ng-content select=\"[slot=suffix]\"></ng-content>\n </ng-container>\n\n</bizy-input>\n", styles: [":host{font-size:1rem;width:100%}.bizy-filter-section-search-option{--bizy-input-background-color: #f3f3f3 !important}\n"], dependencies: [{ kind: "component", type: BizyInputComponent, selector: "bizy-input", inputs: ["id", "name", "
|
|
13066
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyFilterSectionSearchOptionComponent, isStandalone: true, selector: "bizy-filter-section-search-option", inputs: { id: "id", customClass: "customClass", value: "value" }, outputs: { valueChange: "valueChange", onChange: "onChange" }, ngImport: i0, template: "<bizy-input\n [id]=\"id\" \n (onChange)=\"_onChange($event)\"\n [value]=\"_value\"\n class=\"bizy-filter-section-search-option {{customClass}}\">\n\n <span slot=\"header\"></span>\n\n <ng-container slot=\"prefix\">\n <ng-content select=\"[slot=prefix]\"></ng-content>\n </ng-container>\n\n <ng-container slot=\"suffix\">\n <ng-content select=\"[slot=suffix]\"></ng-content>\n </ng-container>\n\n</bizy-input>\n", styles: [":host{font-size:1rem;width:100%}.bizy-filter-section-search-option{--bizy-input-background-color: #f3f3f3 !important}\n"], dependencies: [{ kind: "component", type: BizyInputComponent, selector: "bizy-input", inputs: ["id", "name", "customClass", "placeholder", "debounceTime", "rows", "type", "maxLength", "autofocus", "disabled", "readonly", "value"], outputs: ["valueChange", "onChange", "onEnter", "onBackspace", "onSelect", "onBlur", "onFocus", "onPaste"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13064
13067
|
}
|
|
13065
13068
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyFilterSectionSearchOptionComponent, decorators: [{
|
|
13066
13069
|
type: Component,
|
|
@@ -13695,7 +13698,7 @@ class BizySelectComponent {
|
|
|
13695
13698
|
this.#contentChildrenSubscription.unsubscribe();
|
|
13696
13699
|
}
|
|
13697
13700
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13698
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: BizySelectComponent, isStandalone: true, selector: "bizy-select", inputs: { id: "id", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", customClass: "customClass", opened: "opened" }, outputs: { openedChange: "openedChange", onSelect: "onSelect", onOpen: "onOpen" }, queries: [{ propertyName: "options", predicate: BizySelectOptionComponent }], viewQueries: [{ propertyName: "templatePortalContent", first: true, predicate: ["templatePortalContent"], descendants: true }, { propertyName: "bizyInput", first: true, predicate: ["bizyInput"], descendants: true }], ngImport: i0, template: "<bizy-input\n #bizyInput\n [readonly]=\"true\"\n [disabled]=\"disabled\"\n [id]=\"id\"\n [placeholder]=\"placeholder\"\n [value]=\"_optionValue\"\n [ngClass]=\"{'bizy-select--readonly': readonly}\"\n (onSelect)=\"_onOpen($event); bizyInput?.setTouched(true)\"\n (onEnter)=\"_onOpen($event); bizyInput?.setTouched(true)\"\n class=\"bizy-select {{customClass}}\"\n cdkOverlayOrigin\n #bizySelectTrigger=\"cdkOverlayOrigin\">\n\n @if (!readonly) {\n <svg\n slot=\"suffix\"\n id=\"bizy-select-arrow\"\n class=\"bizy-select__arrow\"\n [ngClass]=\"{'bizy-select__arrow--opened': opened}\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 320 512\">\n <path d=\"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\"/>\n </svg>\n }\n\n <ng-container slot=\"header\">\n <ng-content select=\"[slot=header]\"></ng-content>\n </ng-container>\n\n <ng-container slot=\"prefix\">\n <ng-content select=\"[slot=prefix]\"></ng-content>\n </ng-container>\n\n</bizy-input>\n\n@if (touched) {\n <span class=\"bizy-select__errors\">\n <ng-content select=\"[slot=error]\"></ng-content>\n </span>\n}\n\n<ng-template #templatePortalContent>\n <ng-content select=\"bizy-select-option\"></ng-content>\n</ng-template>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayMinWidth]=\"bizyInput.getWidth()\"\n [cdkConnectedOverlayOrigin]=\"bizySelectTrigger\"\n (overlayOutsideClick)=\"close($event, bizyInput)\"\n [cdkConnectedOverlayOpen]=\"opened\">\n\n <span class=\"bizy-select__options\">\n\n <span class=\"bizy-select__options__search\">\n <ng-content select=\"bizy-input\"></ng-content>\n </span>\n\n <ng-template [cdkPortalOutlet]=\"templatePortal\"></ng-template>\n\n </span>\n\n</ng-template>\n", styles: [":host{font-size:1rem;width:var(--bizy-select-width);min-width:var(--bizy-select-min-width);max-width:var(--bizy-select-max-width);display:flex;flex-direction:column;row-gap:.3rem;--bizy-input-focus-color: transparent}:host:has(>.bizy-select__errors:not(:empty)) ::ng-deep .bizy-input__bottom-line{background-color:var(--bizy-input-invalid-color)!important;visibility:visible!important}:host:has(>.bizy-select__errors:not(:empty)) ::ng-deep .bizy-input__content__input{color:var(--bizy-input-invalid-color)!important}.bizy-select{--bizy-input-cursor: pointer;--bizy-input-background-color: var(--bizy-select-background-color);--bizy-input-color: var(--bizy-select-color)}.bizy-select--readonly{--bizy-input-cursor: default}.bizy-select__arrow{height:var(--bizy-select-arrow-height);pointer-events:none;display:block;transition:transform .2s ease;fill:var(--bizy-select-color)}.bizy-select__arrow--opened{transform:rotate(180deg)}.bizy-select__options{background-color:var(--bizy-select-background-color);display:flex;min-width:fit-content;width:100%;flex-direction:column;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014;max-height:var(--bizy-select-height);overflow-y:auto;overflow-x:hidden;position:relative}.bizy-select__options::-webkit-scrollbar{width:.5rem;height:.5rem}.bizy-select__options::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-select-scroll-bar-color)}.bizy-select__options::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-select-scroll-bar-hover-color)}.bizy-select__options::-webkit-scrollbar-button{height:1rem}.bizy-select__options__search{position:sticky;z-index:1;top:0}::ng-deep .bizy-select__options__search{--bizy-input-width: auto;--bizy-input-background-color: #fff;--bizy-input-min-width: var(--bizy-select-min-width);--bizy-input-max-width: auto;margin-bottom:.3rem}.bizy-select__errors:empty{display:none!important}::ng-deep .bizy-select__errors *{color:var(--bizy-input-invalid-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BizyInputComponent, selector: "bizy-input", inputs: ["id", "name", "
|
|
13701
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: BizySelectComponent, isStandalone: true, selector: "bizy-select", inputs: { id: "id", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", customClass: "customClass", opened: "opened" }, outputs: { openedChange: "openedChange", onSelect: "onSelect", onOpen: "onOpen" }, queries: [{ propertyName: "options", predicate: BizySelectOptionComponent }], viewQueries: [{ propertyName: "templatePortalContent", first: true, predicate: ["templatePortalContent"], descendants: true }, { propertyName: "bizyInput", first: true, predicate: ["bizyInput"], descendants: true }], ngImport: i0, template: "<bizy-input\n #bizyInput\n [readonly]=\"true\"\n [disabled]=\"disabled\"\n [id]=\"id\"\n [placeholder]=\"placeholder\"\n [value]=\"_optionValue\"\n [ngClass]=\"{'bizy-select--readonly': readonly}\"\n (onSelect)=\"_onOpen($event); bizyInput?.setTouched(true)\"\n (onEnter)=\"_onOpen($event); bizyInput?.setTouched(true)\"\n class=\"bizy-select {{customClass}}\"\n cdkOverlayOrigin\n #bizySelectTrigger=\"cdkOverlayOrigin\">\n\n @if (!readonly) {\n <svg\n slot=\"suffix\"\n id=\"bizy-select-arrow\"\n class=\"bizy-select__arrow\"\n [ngClass]=\"{'bizy-select__arrow--opened': opened}\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 320 512\">\n <path d=\"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\"/>\n </svg>\n }\n\n <ng-container slot=\"header\">\n <ng-content select=\"[slot=header]\"></ng-content>\n </ng-container>\n\n <ng-container slot=\"prefix\">\n <ng-content select=\"[slot=prefix]\"></ng-content>\n </ng-container>\n\n</bizy-input>\n\n@if (touched) {\n <span class=\"bizy-select__errors\">\n <ng-content select=\"[slot=error]\"></ng-content>\n </span>\n}\n\n<ng-template #templatePortalContent>\n <ng-content select=\"bizy-select-option\"></ng-content>\n</ng-template>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayMinWidth]=\"bizyInput.getWidth()\"\n [cdkConnectedOverlayOrigin]=\"bizySelectTrigger\"\n (overlayOutsideClick)=\"close($event, bizyInput)\"\n [cdkConnectedOverlayOpen]=\"opened\">\n\n <span class=\"bizy-select__options\">\n\n <span class=\"bizy-select__options__search\">\n <ng-content select=\"bizy-input\"></ng-content>\n </span>\n\n <ng-template [cdkPortalOutlet]=\"templatePortal\"></ng-template>\n\n </span>\n\n</ng-template>\n", styles: [":host{font-size:1rem;width:var(--bizy-select-width);min-width:var(--bizy-select-min-width);max-width:var(--bizy-select-max-width);display:flex;flex-direction:column;row-gap:.3rem;--bizy-input-focus-color: transparent}:host:has(>.bizy-select__errors:not(:empty)) ::ng-deep .bizy-input__bottom-line{background-color:var(--bizy-input-invalid-color)!important;visibility:visible!important}:host:has(>.bizy-select__errors:not(:empty)) ::ng-deep .bizy-input__content__input{color:var(--bizy-input-invalid-color)!important}.bizy-select{--bizy-input-cursor: pointer;--bizy-input-background-color: var(--bizy-select-background-color);--bizy-input-color: var(--bizy-select-color)}.bizy-select--readonly{--bizy-input-cursor: default}.bizy-select__arrow{height:var(--bizy-select-arrow-height);pointer-events:none;display:block;transition:transform .2s ease;fill:var(--bizy-select-color)}.bizy-select__arrow--opened{transform:rotate(180deg)}.bizy-select__options{background-color:var(--bizy-select-background-color);display:flex;min-width:fit-content;width:100%;flex-direction:column;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014;max-height:var(--bizy-select-height);overflow-y:auto;overflow-x:hidden;position:relative}.bizy-select__options::-webkit-scrollbar{width:.5rem;height:.5rem}.bizy-select__options::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-select-scroll-bar-color)}.bizy-select__options::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-select-scroll-bar-hover-color)}.bizy-select__options::-webkit-scrollbar-button{height:1rem}.bizy-select__options__search{position:sticky;z-index:1;top:0}::ng-deep .bizy-select__options__search{--bizy-input-width: auto;--bizy-input-background-color: #fff;--bizy-input-min-width: var(--bizy-select-min-width);--bizy-input-max-width: auto;margin-bottom:.3rem}.bizy-select__errors:empty{display:none!important}::ng-deep .bizy-select__errors *{color:var(--bizy-input-invalid-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BizyInputComponent, selector: "bizy-input", inputs: ["id", "name", "customClass", "placeholder", "debounceTime", "rows", "type", "maxLength", "autofocus", "disabled", "readonly", "value"], outputs: ["valueChange", "onChange", "onEnter", "onBackspace", "onSelect", "onBlur", "onFocus", "onPaste"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.ɵɵCdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13699
13702
|
}
|
|
13700
13703
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizySelectComponent, decorators: [{
|
|
13701
13704
|
type: Component,
|
|
@@ -14263,41 +14266,34 @@ class BizyGridComponent {
|
|
|
14263
14266
|
items = [];
|
|
14264
14267
|
itemTemplate;
|
|
14265
14268
|
itemsPerRow = 1;
|
|
14269
|
+
getNativeElement = () => this.#elementRef?.nativeElement;
|
|
14266
14270
|
ngAfterContentInit() {
|
|
14267
|
-
|
|
14268
|
-
this
|
|
14269
|
-
}
|
|
14270
|
-
else {
|
|
14271
|
-
this.#rowScrollingMutationObserver = new MutationObserver(() => {
|
|
14272
|
-
if (!this.gridDirective) {
|
|
14273
|
-
return;
|
|
14274
|
-
}
|
|
14275
|
-
this.#initView();
|
|
14276
|
-
this.#rowScrollingMutationObserver.disconnect();
|
|
14277
|
-
this.#ref.detectChanges();
|
|
14278
|
-
});
|
|
14279
|
-
this.#rowScrollingMutationObserver.observe(this.#document.body, { childList: true, subtree: true });
|
|
14280
|
-
}
|
|
14281
|
-
}
|
|
14282
|
-
#initView = () => {
|
|
14283
|
-
this.#subscription.add(this.gridDirective.items$.subscribe(items => {
|
|
14284
|
-
if (this.items.length === 0 && items.length === 0) {
|
|
14271
|
+
this.#rowScrollingMutationObserver = new MutationObserver(() => {
|
|
14272
|
+
if (!this.gridDirective) {
|
|
14285
14273
|
return;
|
|
14286
14274
|
}
|
|
14287
|
-
this.items
|
|
14288
|
-
|
|
14289
|
-
|
|
14290
|
-
|
|
14291
|
-
|
|
14292
|
-
|
|
14293
|
-
|
|
14275
|
+
this.#subscription.add(this.gridDirective.items$.subscribe(items => {
|
|
14276
|
+
if (this.items.length === 0 && items.length === 0) {
|
|
14277
|
+
return;
|
|
14278
|
+
}
|
|
14279
|
+
this.items = items;
|
|
14280
|
+
this.#updateView();
|
|
14281
|
+
if (!this.#view) {
|
|
14282
|
+
this.#view = this.gridDirective.viewContainerRef;
|
|
14283
|
+
this.#view.createEmbeddedView(this.content);
|
|
14284
|
+
}
|
|
14285
|
+
}));
|
|
14286
|
+
this.#rowScrollingMutationObserver.disconnect();
|
|
14287
|
+
this.#ref.detectChanges();
|
|
14288
|
+
});
|
|
14289
|
+
this.#rowScrollingMutationObserver.observe(this.#document.body, { childList: true, subtree: true });
|
|
14294
14290
|
this.#resizeObserver = new ResizeObserver(() => this.notifier$.next());
|
|
14295
14291
|
const resizeRef = this.resizeRef ? this.resizeRef : this.#renderer.parentNode(this.#elementRef.nativeElement) ? this.#renderer.parentNode(this.#elementRef.nativeElement) : this.#elementRef.nativeElement;
|
|
14296
14292
|
this.#resizeObserver.observe(resizeRef);
|
|
14297
14293
|
this.#subscription.add(this.notifier$.pipe(debounceTime(50)).subscribe(() => {
|
|
14298
14294
|
this.#updateView();
|
|
14299
14295
|
}));
|
|
14300
|
-
}
|
|
14296
|
+
}
|
|
14301
14297
|
#updateView = () => {
|
|
14302
14298
|
this.itemTemplate = this.gridDirective.templateRef;
|
|
14303
14299
|
const rowWidth = this.#elementRef.nativeElement.offsetWidth || this.#elementRef.nativeElement.firstChild.offsetWidth;
|
|
@@ -14326,21 +14322,31 @@ class BizyGridComponent {
|
|
|
14326
14322
|
columnWidth = Number(columnWidthParameter.split('px')[0]);
|
|
14327
14323
|
}
|
|
14328
14324
|
columnWidth += gap;
|
|
14325
|
+
let newItemsPerRow = 0;
|
|
14329
14326
|
const count = Math.trunc(rowWidth / (columnWidth));
|
|
14330
14327
|
if (Math.round((gap * (count - 1)) + (columnWidth * count)) <= (rowWidth)) {
|
|
14331
|
-
|
|
14328
|
+
newItemsPerRow = count <= 0 ? 1 : count;
|
|
14332
14329
|
}
|
|
14333
14330
|
else {
|
|
14334
|
-
|
|
14335
|
-
}
|
|
14336
|
-
|
|
14337
|
-
|
|
14338
|
-
const
|
|
14339
|
-
|
|
14331
|
+
newItemsPerRow = (count - 1) <= 0 ? 1 : count - 1;
|
|
14332
|
+
}
|
|
14333
|
+
if (newItemsPerRow !== this.itemsPerRow || this.items.length !== (this.itemRows.length * this.itemsPerRow)) {
|
|
14334
|
+
this.itemsPerRow = newItemsPerRow;
|
|
14335
|
+
const itemRows = [];
|
|
14336
|
+
for (let i = 0; i < this.items.length; i += this.itemsPerRow) {
|
|
14337
|
+
const row = this.items.slice(i, i + this.itemsPerRow);
|
|
14338
|
+
itemRows.push(row);
|
|
14339
|
+
}
|
|
14340
|
+
this.itemRows = itemRows;
|
|
14341
|
+
this.#ref.detectChanges();
|
|
14340
14342
|
}
|
|
14341
|
-
this.itemRows = itemRows;
|
|
14342
|
-
this.#ref.detectChanges();
|
|
14343
14343
|
};
|
|
14344
|
+
trackByRow(index, row) {
|
|
14345
|
+
if (row && row.length > 0) {
|
|
14346
|
+
return row[0].id;
|
|
14347
|
+
}
|
|
14348
|
+
return index;
|
|
14349
|
+
}
|
|
14344
14350
|
scrollTo(index, behavior = 'smooth') {
|
|
14345
14351
|
this.virtualScroll.scrollToIndex(index, behavior);
|
|
14346
14352
|
}
|
|
@@ -14353,13 +14359,12 @@ class BizyGridComponent {
|
|
|
14353
14359
|
this.#resizeObserver.disconnect();
|
|
14354
14360
|
}
|
|
14355
14361
|
}
|
|
14356
|
-
getNativeElement = () => this.#elementRef?.nativeElement;
|
|
14357
14362
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14358
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: BizyGridComponent, isStandalone: true, selector: "bizy-grid", inputs: { resizeRef: "resizeRef" }, queries: [{ propertyName: "gridDirective", first: true, predicate: BizyGridForDirective, descendants: true }], viewQueries: [{ propertyName: "virtualScroll", first: true, predicate: ["cdkVirtualScroll"], descendants: true }, { propertyName: "content", first: true, predicate: ["gridScrollingContent"], descendants: true }], ngImport: i0, template: "<div class=\"bizy-grid\" [ngClass]=\"{'bizy-grid--empty': items && items.length === 0}\">\n\n <cdk-virtual-scroll-viewport\n #cdkVirtualScroll\n class=\"bizy-grid__rows\"\n [itemSize]=\"rowHeight\"\n [minBufferPx]=\"rowHeight + (rowHeight * 5)\"\n [maxBufferPx]=\"rowHeight + (rowHeight * 10)\">\n\n <ng-content></ng-content>\n\n <ng-template #gridScrollingContent>\n <ng-template\n let-item\n let-index=\"index\"\n let-first=\"first\"\n let-last=\"last\"\n let-even=\"even\"\n let-odd=\"odd\"\n cdkVirtualFor\n [cdkVirtualForOf]=\"itemRows\">\n <bizy-grid-row [rowHeight]=\"rowHeight\" [itemsPerRow]=\"itemsPerRow\">\n @for (it of item; track it.id ?? i; let i = $index) {\n <ng-template\n
|
|
14363
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: BizyGridComponent, isStandalone: true, selector: "bizy-grid", inputs: { resizeRef: "resizeRef" }, queries: [{ propertyName: "gridDirective", first: true, predicate: BizyGridForDirective, descendants: true }], viewQueries: [{ propertyName: "virtualScroll", first: true, predicate: ["cdkVirtualScroll"], descendants: true }, { propertyName: "content", first: true, predicate: ["gridScrollingContent"], descendants: true }], ngImport: i0, template: "<div class=\"bizy-grid\" [ngClass]=\"{'bizy-grid--empty': items && items.length === 0}\">\n\n <cdk-virtual-scroll-viewport\n #cdkVirtualScroll\n class=\"bizy-grid__rows\"\n [itemSize]=\"rowHeight\"\n [minBufferPx]=\"rowHeight + (rowHeight * 5)\"\n [maxBufferPx]=\"rowHeight + (rowHeight * 10)\">\n\n <ng-content></ng-content>\n\n <ng-template #gridScrollingContent>\n <ng-template\n let-item\n let-index=\"index\"\n let-first=\"first\"\n let-last=\"last\"\n let-even=\"even\"\n let-odd=\"odd\"\n cdkVirtualFor\n [cdkVirtualForOf]=\"itemRows\"\n [cdkVirtualForTrackBy]=\"trackByRow\">\n <bizy-grid-row [rowHeight]=\"rowHeight\" [itemsPerRow]=\"itemsPerRow\">\n @for (it of item; track it.id ?? i; let i = $index) {\n <ng-template\n *ngTemplateOutlet=\"itemTemplate;\n context: { \n $implicit: it,\n index: index * itemsPerRow + i,\n rowIndex: index,\n rowFirst: first,\n rowLast: last,\n rowEven: even,\n rowOdd: odd\n }\">\n </ng-template>\n }\n </bizy-grid-row>\n </ng-template>\n </ng-template>\n </cdk-virtual-scroll-viewport>\n\n</div>\n", styles: [":host{display:inline-block!important;min-height:var(--bizy-grid-min-height);max-height:var(--bizy-grid-max-height);height:var(--bizy-grid-height);width:var(--bizy-grid-width);flex:1;overflow-x:auto;overflow-y:hidden;font-size:1rem}:host:has(.bizy-grid--empty){height:0!important;min-height:0!important;max-height:0!important}.bizy-grid{width:inherit;height:inherit;min-width:fit-content;display:flex;flex-direction:column;row-gap:.3rem;overflow-x:clip;background-color:var(--bizy-grid-background-color)}.bizy-grid__rows{width:100%;display:flex;flex-direction:column;min-width:fit-content;overflow-x:hidden}::ng-deep .cdk-virtual-scrollable{height:100%;width:100%;overflow-y:auto!important;overflow-x:hidden!important;contain:inline-size!important}::ng-deep .cdk-virtual-scroll-content-wrapper{min-width:100%;max-width:100%}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar{width:.5rem;height:.5rem}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-grid-scroll-bar-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-grid-scroll-bar-hover-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-button{height:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$2.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$2.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$2.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: BizyGridRowComponent, selector: "bizy-grid-row", inputs: ["rowHeight", "itemsPerRow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14359
14364
|
}
|
|
14360
14365
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyGridComponent, decorators: [{
|
|
14361
14366
|
type: Component,
|
|
14362
|
-
args: [{ selector: 'bizy-grid', imports: [CommonModule, ScrollingModule, BizyGridRowComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bizy-grid\" [ngClass]=\"{'bizy-grid--empty': items && items.length === 0}\">\n\n <cdk-virtual-scroll-viewport\n #cdkVirtualScroll\n class=\"bizy-grid__rows\"\n [itemSize]=\"rowHeight\"\n [minBufferPx]=\"rowHeight + (rowHeight * 5)\"\n [maxBufferPx]=\"rowHeight + (rowHeight * 10)\">\n\n <ng-content></ng-content>\n\n <ng-template #gridScrollingContent>\n <ng-template\n let-item\n let-index=\"index\"\n let-first=\"first\"\n let-last=\"last\"\n let-even=\"even\"\n let-odd=\"odd\"\n cdkVirtualFor\n [cdkVirtualForOf]=\"itemRows\">\n <bizy-grid-row [rowHeight]=\"rowHeight\" [itemsPerRow]=\"itemsPerRow\">\n @for (it of item; track it.id ?? i; let i = $index) {\n <ng-template\n
|
|
14367
|
+
args: [{ selector: 'bizy-grid', imports: [CommonModule, ScrollingModule, BizyGridRowComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bizy-grid\" [ngClass]=\"{'bizy-grid--empty': items && items.length === 0}\">\n\n <cdk-virtual-scroll-viewport\n #cdkVirtualScroll\n class=\"bizy-grid__rows\"\n [itemSize]=\"rowHeight\"\n [minBufferPx]=\"rowHeight + (rowHeight * 5)\"\n [maxBufferPx]=\"rowHeight + (rowHeight * 10)\">\n\n <ng-content></ng-content>\n\n <ng-template #gridScrollingContent>\n <ng-template\n let-item\n let-index=\"index\"\n let-first=\"first\"\n let-last=\"last\"\n let-even=\"even\"\n let-odd=\"odd\"\n cdkVirtualFor\n [cdkVirtualForOf]=\"itemRows\"\n [cdkVirtualForTrackBy]=\"trackByRow\">\n <bizy-grid-row [rowHeight]=\"rowHeight\" [itemsPerRow]=\"itemsPerRow\">\n @for (it of item; track it.id ?? i; let i = $index) {\n <ng-template\n *ngTemplateOutlet=\"itemTemplate;\n context: { \n $implicit: it,\n index: index * itemsPerRow + i,\n rowIndex: index,\n rowFirst: first,\n rowLast: last,\n rowEven: even,\n rowOdd: odd\n }\">\n </ng-template>\n }\n </bizy-grid-row>\n </ng-template>\n </ng-template>\n </cdk-virtual-scroll-viewport>\n\n</div>\n", styles: [":host{display:inline-block!important;min-height:var(--bizy-grid-min-height);max-height:var(--bizy-grid-max-height);height:var(--bizy-grid-height);width:var(--bizy-grid-width);flex:1;overflow-x:auto;overflow-y:hidden;font-size:1rem}:host:has(.bizy-grid--empty){height:0!important;min-height:0!important;max-height:0!important}.bizy-grid{width:inherit;height:inherit;min-width:fit-content;display:flex;flex-direction:column;row-gap:.3rem;overflow-x:clip;background-color:var(--bizy-grid-background-color)}.bizy-grid__rows{width:100%;display:flex;flex-direction:column;min-width:fit-content;overflow-x:hidden}::ng-deep .cdk-virtual-scrollable{height:100%;width:100%;overflow-y:auto!important;overflow-x:hidden!important;contain:inline-size!important}::ng-deep .cdk-virtual-scroll-content-wrapper{min-width:100%;max-width:100%}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar{width:.5rem;height:.5rem}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-grid-scroll-bar-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-grid-scroll-bar-hover-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-button{height:1rem}\n"] }]
|
|
14363
14368
|
}], propDecorators: { virtualScroll: [{
|
|
14364
14369
|
type: ViewChild,
|
|
14365
14370
|
args: ['cdkVirtualScroll']
|