@stemy/ngx-utils 19.9.43 → 19.9.45
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.
|
@@ -7570,8 +7570,9 @@ class DropdownDirective {
|
|
|
7570
7570
|
return;
|
|
7571
7571
|
this.hide();
|
|
7572
7572
|
}
|
|
7573
|
-
constructor(element) {
|
|
7573
|
+
constructor(element, rootElem) {
|
|
7574
7574
|
this.element = element;
|
|
7575
|
+
this.rootElem = rootElem;
|
|
7575
7576
|
this.opened = false;
|
|
7576
7577
|
this.disabled = false;
|
|
7577
7578
|
this.closeInside = true;
|
|
@@ -7597,7 +7598,7 @@ class DropdownDirective {
|
|
|
7597
7598
|
parents.push(this.nativeElement);
|
|
7598
7599
|
}
|
|
7599
7600
|
// If one of the parents contains the target then we clicked inside
|
|
7600
|
-
if (
|
|
7601
|
+
if (this.rootElem?.contains(target) === false || parents.some(child => child.contains(target)))
|
|
7601
7602
|
return;
|
|
7602
7603
|
}
|
|
7603
7604
|
setTimeout(() => this.hide(), event.type == "touchend" ? 250 : 100);
|
|
@@ -7667,7 +7668,7 @@ class DropdownDirective {
|
|
|
7667
7668
|
}, 10);
|
|
7668
7669
|
return true;
|
|
7669
7670
|
}
|
|
7670
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DropdownDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7671
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DropdownDirective, deps: [{ token: i0.ElementRef }, { token: ROOT_ELEMENT, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7671
7672
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.22", type: DropdownDirective, isStandalone: false, selector: "[dd],[drop-down]", inputs: { closeInside: "closeInside", attachTo: "attachTo", boundary: "boundary", placement: "placement", autoPlacement: "autoPlacement", mobileViewUnder: "mobileViewUnder", fixed: "fixed", keyboardHandler: "keyboardHandler", isDisabled: "isDisabled" }, outputs: { onShown: "onShown", onHidden: "onHidden", onKeyboard: "onKeyboard" }, host: { listeners: { "keydown.enter": "show($event)", "keydown.space": "show($event)" }, properties: { "class.open": "this.isOpened", "class.disabled": "this.getDisabled" } }, exportAs: ["dropdown"], ngImport: i0 }); }
|
|
7672
7673
|
}
|
|
7673
7674
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DropdownDirective, decorators: [{
|
|
@@ -7677,7 +7678,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImpo
|
|
|
7677
7678
|
selector: "[dd],[drop-down]",
|
|
7678
7679
|
exportAs: "dropdown"
|
|
7679
7680
|
}]
|
|
7680
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }
|
|
7681
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: HTMLElement, decorators: [{
|
|
7682
|
+
type: Optional
|
|
7683
|
+
}, {
|
|
7684
|
+
type: Inject,
|
|
7685
|
+
args: [ROOT_ELEMENT]
|
|
7686
|
+
}] }], propDecorators: { closeInside: [{
|
|
7681
7687
|
type: Input
|
|
7682
7688
|
}], attachTo: [{
|
|
7683
7689
|
type: Input
|
|
@@ -7796,6 +7802,7 @@ class DropdownContentDirective {
|
|
|
7796
7802
|
zIndex: `var(--dd-z-index, 100)`
|
|
7797
7803
|
});
|
|
7798
7804
|
const refRect = ref.getBoundingClientRect();
|
|
7805
|
+
const parentRect = this.attachTo.getBoundingClientRect();
|
|
7799
7806
|
const contentRect = content.getBoundingClientRect();
|
|
7800
7807
|
const lastPlacement = this.lastPlacement;
|
|
7801
7808
|
const newPlacement = `dropdown-placement-${placement}`;
|
|
@@ -7825,6 +7832,7 @@ class DropdownContentDirective {
|
|
|
7825
7832
|
}
|
|
7826
7833
|
rectProps.forEach(prop => {
|
|
7827
7834
|
content.style.setProperty(`--toggle-${prop}`, `${refRect[prop]}px`);
|
|
7835
|
+
content.style.setProperty(`--parent-${prop}`, `${parentRect[prop]}px`);
|
|
7828
7836
|
ref.style.setProperty(`--content-${prop}`, `${contentRect[prop]}px`);
|
|
7829
7837
|
});
|
|
7830
7838
|
this.lastPlacement = newPlacement;
|
|
@@ -7893,7 +7901,9 @@ class DropdownContentDirective {
|
|
|
7893
7901
|
wrapper.classList.add("dropdown-content-wrap");
|
|
7894
7902
|
wrapper.style.margin = "0";
|
|
7895
7903
|
wrapper.style.padding = "0";
|
|
7896
|
-
wrapper.style.
|
|
7904
|
+
wrapper.style.borderWidth = "0";
|
|
7905
|
+
wrapper.style.overflow = "visible";
|
|
7906
|
+
wrapper.style.background = "none";
|
|
7897
7907
|
wrapper.showPopover();
|
|
7898
7908
|
return [wrapper, arrow];
|
|
7899
7909
|
}
|
|
@@ -9099,13 +9109,13 @@ class DatePickerComponent extends CalendarInputs {
|
|
|
9099
9109
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
9100
9110
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: DatePickerComponent, isStandalone: false, selector: "date-picker", providers: [
|
|
9101
9111
|
{ provide: NG_VALUE_ACCESSOR, useExisting: DatePickerComponent, multi: true }
|
|
9102
|
-
], viewQueries: [{ propertyName: "pickerDropdown", first: true, predicate: ["pickerDropdown"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let id = testId();\r\n<div class=\"date-picker\"\r\n drop-down\r\n [closeInside]=\"false\"\r\n [autoPlacement]=\"autoPlacement\"\r\n [ngClass]=\"{disabled: disabled()}\"\r\n #pickerDropdown=\"dropdown\">\r\n <input class=\"date-picker-input\"\r\n [attr.data-testid]=\"id\"\r\n [type]=\"strict() ? 'date' : 'text'\"\r\n [value]=\"inputValue()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur($event)\"/>\r\n <div class=\"date-picker-buttons\">\r\n @if (value()) {\r\n <btn [attr.data-testid]=\"id + '-clear'\"\r\n type=\"transparent\"\r\n icon=\"close\" (click)=\"clear()\"></btn>\r\n }\r\n <btn [attr.data-testid]=\"id + '-open-picker'\"\r\n type=\"transparent\"\r\n icon=\"calendar-days\" dropdownToggle></btn>\r\n </div>\r\n <div *dropdownContent>\r\n <calendar [testId]=\"id + '-picker'\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [disabledDates]=\"disabledDates()\"\r\n [disabledDays]=\"disabledDays()\"\r\n [disabled]=\"disabled()\"\r\n [strict]=\"strict()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"onPickerChange($event)\"></calendar>\r\n </div>\r\n</div>\r\n", styles: [".date-picker{--date-picker-border-size: var(--border-size, 1px);--date-picker-border-radius: var(--border-radius, 5px);--date-picker-bg-color: var(--bg-color, #ffffff);--date-picker-border-color: var(--border-color, #ced4da);--date-picker-highlight-color: var(--highlight-color, var(--primary-color, #888888));--date-picker-highlight-text-color: var(--highlight-text-color, #ffffff);--date-picker-text-color: var(--text-color, #151515);--date-picker-text-size: var(--text-size, 16px);--date-picker-padding-vertical: 6px;--date-picker-padding-horizontal: 12px;--date-picker-padding: var(--date-picker-padding-vertical) var(--date-picker-padding-horizontal);--date-picker-btn-padding: 12px;--date-picker-btn-gap: calc(var(--date-picker-btn-padding) / 2);--date-picker-btn-color: white;--date-picker-btn-valid-color: rgba(200, 255, 200, .7);--date-picker-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--date-picker-text-size);padding:var(--date-picker-padding);background:var(--date-picker-bg-color);color:var(--date-picker-text-color);border:var(--date-picker-border-size) solid var(--date-picker-border-color);border-radius:var(--date-picker-border-radius)}.date-picker *{box-sizing:border-box}.date-picker .date-picker-input{background:var(--date-picker-bg-color);font-size:var(--date-picker-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.date-picker .date-picker-input::-webkit-calendar-picker-indicator{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-input::-webkit-clear-button{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-input::-webkit-inner-spin-button{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-buttons{display:flex;justify-content:flex-end;position:absolute;aspect-ratio:2/1;top:0;bottom:0;right:0}.date-picker.disabled{opacity:.75}.date-picker.disabled .chips-button{padding-right:var(--date-picker-btn-padding)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "attachTo", "boundary", "placement", "autoPlacement", "mobileViewUnder", "fixed", "keyboardHandler", "isDisabled"], outputs: ["onShown", "onHidden", "onKeyboard"], exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[dropdownContent]", exportAs: ["dropdown-content"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[dropdownToggle]", inputs: ["beforeOpen", "switch"], exportAs: ["dropdown-toggle"] }, { kind: "component", type: BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "path", "type", "size"] }, { kind: "component", type: CalendarComponent, selector: "calendar" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
9112
|
+
], viewQueries: [{ propertyName: "pickerDropdown", first: true, predicate: ["pickerDropdown"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let id = testId();\r\n<div class=\"date-picker\"\r\n drop-down\r\n [closeInside]=\"false\"\r\n [autoPlacement]=\"autoPlacement\"\r\n [ngClass]=\"{disabled: disabled()}\"\r\n #pickerDropdown=\"dropdown\">\r\n <input class=\"date-picker-input\"\r\n [attr.data-testid]=\"id\"\r\n [type]=\"strict() ? 'date' : 'text'\"\r\n [value]=\"inputValue()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur($event)\"/>\r\n <div class=\"date-picker-buttons\">\r\n @if (value()) {\r\n <btn [attr.data-testid]=\"id + '-clear'\"\r\n type=\"transparent\"\r\n icon=\"close\" (click)=\"clear()\"></btn>\r\n }\r\n <btn [attr.data-testid]=\"id + '-open-picker'\"\r\n type=\"transparent\"\r\n icon=\"calendar-days\" dropdownToggle></btn>\r\n </div>\r\n <div *dropdownContent>\r\n <calendar [testId]=\"id + '-picker'\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [disabledDates]=\"disabledDates()\"\r\n [disabledDays]=\"disabledDays()\"\r\n [disabled]=\"disabled()\"\r\n [strict]=\"strict()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"onPickerChange($event)\"></calendar>\r\n </div>\r\n</div>\r\n", styles: [".date-picker{--date-picker-border-size: var(--border-size, 1px);--date-picker-border-radius: var(--border-radius, 5px);--date-picker-bg-color: var(--bg-color, #ffffff);--date-picker-border-color: var(--border-color, #ced4da);--date-picker-highlight-color: var(--highlight-color, var(--primary-color, #888888));--date-picker-highlight-text-color: var(--highlight-text-color, #ffffff);--date-picker-text-color: var(--text-color, #151515);--date-picker-text-size: var(--text-size, 16px);--date-picker-padding-vertical: 6px;--date-picker-padding-horizontal: 12px;--date-picker-padding: var(--date-picker-padding-vertical) var(--date-picker-padding-horizontal);--date-picker-btn-padding: 12px;--date-picker-btn-gap: calc(var(--date-picker-btn-padding) / 2);--date-picker-btn-color: white;--date-picker-btn-valid-color: rgba(200, 255, 200, .7);--date-picker-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--date-picker-text-size);padding:var(--date-picker-padding);background:var(--date-picker-bg-color);color:var(--date-picker-text-color);border:var(--date-picker-border-size) solid var(--date-picker-border-color);border-radius:var(--date-picker-border-radius)}.date-picker *{box-sizing:border-box}.date-picker .date-picker-input{background:var(--date-picker-bg-color);font-size:var(--date-picker-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.date-picker .date-picker-input::-webkit-calendar-picker-indicator{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-input::-webkit-clear-button{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-input::-webkit-inner-spin-button{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-buttons{display:flex;justify-content:flex-end;position:absolute;aspect-ratio:2/1;top:0;bottom:0;right:0;overflow:hidden}.date-picker .date-picker-buttons>btn{max-width:50%}.date-picker.disabled{opacity:.75}.date-picker.disabled .chips-button{padding-right:var(--date-picker-btn-padding)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "attachTo", "boundary", "placement", "autoPlacement", "mobileViewUnder", "fixed", "keyboardHandler", "isDisabled"], outputs: ["onShown", "onHidden", "onKeyboard"], exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[dropdownContent]", exportAs: ["dropdown-content"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[dropdownToggle]", inputs: ["beforeOpen", "switch"], exportAs: ["dropdown-toggle"] }, { kind: "component", type: BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "path", "type", "size"] }, { kind: "component", type: CalendarComponent, selector: "calendar" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
9103
9113
|
}
|
|
9104
9114
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
9105
9115
|
type: Component,
|
|
9106
9116
|
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "date-picker", providers: [
|
|
9107
9117
|
{ provide: NG_VALUE_ACCESSOR, useExisting: DatePickerComponent, multi: true }
|
|
9108
|
-
], template: "@let id = testId();\r\n<div class=\"date-picker\"\r\n drop-down\r\n [closeInside]=\"false\"\r\n [autoPlacement]=\"autoPlacement\"\r\n [ngClass]=\"{disabled: disabled()}\"\r\n #pickerDropdown=\"dropdown\">\r\n <input class=\"date-picker-input\"\r\n [attr.data-testid]=\"id\"\r\n [type]=\"strict() ? 'date' : 'text'\"\r\n [value]=\"inputValue()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur($event)\"/>\r\n <div class=\"date-picker-buttons\">\r\n @if (value()) {\r\n <btn [attr.data-testid]=\"id + '-clear'\"\r\n type=\"transparent\"\r\n icon=\"close\" (click)=\"clear()\"></btn>\r\n }\r\n <btn [attr.data-testid]=\"id + '-open-picker'\"\r\n type=\"transparent\"\r\n icon=\"calendar-days\" dropdownToggle></btn>\r\n </div>\r\n <div *dropdownContent>\r\n <calendar [testId]=\"id + '-picker'\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [disabledDates]=\"disabledDates()\"\r\n [disabledDays]=\"disabledDays()\"\r\n [disabled]=\"disabled()\"\r\n [strict]=\"strict()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"onPickerChange($event)\"></calendar>\r\n </div>\r\n</div>\r\n", styles: [".date-picker{--date-picker-border-size: var(--border-size, 1px);--date-picker-border-radius: var(--border-radius, 5px);--date-picker-bg-color: var(--bg-color, #ffffff);--date-picker-border-color: var(--border-color, #ced4da);--date-picker-highlight-color: var(--highlight-color, var(--primary-color, #888888));--date-picker-highlight-text-color: var(--highlight-text-color, #ffffff);--date-picker-text-color: var(--text-color, #151515);--date-picker-text-size: var(--text-size, 16px);--date-picker-padding-vertical: 6px;--date-picker-padding-horizontal: 12px;--date-picker-padding: var(--date-picker-padding-vertical) var(--date-picker-padding-horizontal);--date-picker-btn-padding: 12px;--date-picker-btn-gap: calc(var(--date-picker-btn-padding) / 2);--date-picker-btn-color: white;--date-picker-btn-valid-color: rgba(200, 255, 200, .7);--date-picker-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--date-picker-text-size);padding:var(--date-picker-padding);background:var(--date-picker-bg-color);color:var(--date-picker-text-color);border:var(--date-picker-border-size) solid var(--date-picker-border-color);border-radius:var(--date-picker-border-radius)}.date-picker *{box-sizing:border-box}.date-picker .date-picker-input{background:var(--date-picker-bg-color);font-size:var(--date-picker-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.date-picker .date-picker-input::-webkit-calendar-picker-indicator{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-input::-webkit-clear-button{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-input::-webkit-inner-spin-button{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-buttons{display:flex;justify-content:flex-end;position:absolute;aspect-ratio:2/1;top:0;bottom:0;right:0}.date-picker.disabled{opacity:.75}.date-picker.disabled .chips-button{padding-right:var(--date-picker-btn-padding)}\n"] }]
|
|
9118
|
+
], template: "@let id = testId();\r\n<div class=\"date-picker\"\r\n drop-down\r\n [closeInside]=\"false\"\r\n [autoPlacement]=\"autoPlacement\"\r\n [ngClass]=\"{disabled: disabled()}\"\r\n #pickerDropdown=\"dropdown\">\r\n <input class=\"date-picker-input\"\r\n [attr.data-testid]=\"id\"\r\n [type]=\"strict() ? 'date' : 'text'\"\r\n [value]=\"inputValue()\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur($event)\"/>\r\n <div class=\"date-picker-buttons\">\r\n @if (value()) {\r\n <btn [attr.data-testid]=\"id + '-clear'\"\r\n type=\"transparent\"\r\n icon=\"close\" (click)=\"clear()\"></btn>\r\n }\r\n <btn [attr.data-testid]=\"id + '-open-picker'\"\r\n type=\"transparent\"\r\n icon=\"calendar-days\" dropdownToggle></btn>\r\n </div>\r\n <div *dropdownContent>\r\n <calendar [testId]=\"id + '-picker'\"\r\n [min]=\"min()\"\r\n [max]=\"max()\"\r\n [disabledDates]=\"disabledDates()\"\r\n [disabledDays]=\"disabledDays()\"\r\n [disabled]=\"disabled()\"\r\n [strict]=\"strict()\"\r\n [value]=\"value()\"\r\n (valueChange)=\"onPickerChange($event)\"></calendar>\r\n </div>\r\n</div>\r\n", styles: [".date-picker{--date-picker-border-size: var(--border-size, 1px);--date-picker-border-radius: var(--border-radius, 5px);--date-picker-bg-color: var(--bg-color, #ffffff);--date-picker-border-color: var(--border-color, #ced4da);--date-picker-highlight-color: var(--highlight-color, var(--primary-color, #888888));--date-picker-highlight-text-color: var(--highlight-text-color, #ffffff);--date-picker-text-color: var(--text-color, #151515);--date-picker-text-size: var(--text-size, 16px);--date-picker-padding-vertical: 6px;--date-picker-padding-horizontal: 12px;--date-picker-padding: var(--date-picker-padding-vertical) var(--date-picker-padding-horizontal);--date-picker-btn-padding: 12px;--date-picker-btn-gap: calc(var(--date-picker-btn-padding) / 2);--date-picker-btn-color: white;--date-picker-btn-valid-color: rgba(200, 255, 200, .7);--date-picker-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--date-picker-text-size);padding:var(--date-picker-padding);background:var(--date-picker-bg-color);color:var(--date-picker-text-color);border:var(--date-picker-border-size) solid var(--date-picker-border-color);border-radius:var(--date-picker-border-radius)}.date-picker *{box-sizing:border-box}.date-picker .date-picker-input{background:var(--date-picker-bg-color);font-size:var(--date-picker-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.date-picker .date-picker-input::-webkit-calendar-picker-indicator{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-input::-webkit-clear-button{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-input::-webkit-inner-spin-button{display:none!important;-webkit-appearance:none!important}.date-picker .date-picker-buttons{display:flex;justify-content:flex-end;position:absolute;aspect-ratio:2/1;top:0;bottom:0;right:0;overflow:hidden}.date-picker .date-picker-buttons>btn{max-width:50%}.date-picker.disabled{opacity:.75}.date-picker.disabled .chips-button{padding-right:var(--date-picker-btn-padding)}\n"] }]
|
|
9109
9119
|
}] });
|
|
9110
9120
|
|
|
9111
9121
|
class DropListComponent {
|
|
@@ -9260,11 +9270,11 @@ class DropdownBoxComponent {
|
|
|
9260
9270
|
this.makeAutoPlacementOpts();
|
|
9261
9271
|
}
|
|
9262
9272
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DropdownBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9263
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: DropdownBoxComponent, isStandalone: false, selector: "dropdown-box", inputs: { closeInside: "closeInside", attachTo: "attachTo", placement: "placement", crossAxis: "crossAxis", alignment: "alignment", autoAlignment: "autoAlignment", allowedPlacements: "allowedPlacements", componentClass: "componentClass" }, viewQueries: [{ propertyName: "content", first: true, predicate: DropdownContentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div dd class=\"dropdown-box\"\n [ngClass]=\"componentClass\"\n [closeInside]=\"closeInside\"\n [attachTo]=\"attachTo\"\n [placement]=\"placement\"\n [autoPlacement]=\"autoPlacement\">\n <div class=\"dropdown-box-toggle\" dropdownToggle>\n <a class=\"dropdown-box-toggle-link\">\n <ng-content select=\"[toggle-content]\"></ng-content>\n </a>\n </div>\n <div class=\"dropdown-box-content\" [ngClass]=\"componentClass + '-content-wrapper'\" *dropdownContent>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".dropdown-box{--dd-border-size: var(--border-size, 1px);--dd-border-radius: 5px;--dd-top-border-radius: var(--dd-border-radius) var(--dd-border-radius) 0 0;--dd-bottom-border-radius: 0 0 var(--dd-border-radius) var(--dd-border-radius);--dd-bg-color: var(--bg-color, #ffffff);--dd-border-color: var(--border-color, #ced4da);--dd-highlight-color: var(--highlight-color, var(--primary-color, #888888));--dd-highlight-text-color: var(--highlight-text-color, #ffffff);--dd-text-color: var(--text-color, #151515);--dd-arrow-size: var(--arrow-size, 6px);--dd-arrow-space: calc(var(--dd-arrow-size) * .5 + 1px);--dd-arrow-color: currentColor;--dd-arrow-rotation: 90;position:relative;z-index:2;display:inline-block;width:var(--content-width, 0);min-width:fit-content}.dropdown-box *{box-sizing:border-box}.dropdown-box a,.dropdown-box span{white-space:nowrap}.dropdown-box.table-sort-dropdown{display:none}.dropdown-box.table-sort-dropdown .table-toggle:hover,.dropdown-box li:hover,.dropdown-box li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box.open{--dd-arrow-rotation: -90}.dropdown-box.open .dropdown-box-toggle{border-radius:var(--dd-top-border-radius)}.dropdown-box-toggle{min-width:fit-content;background:var(--dd-bg-color);color:var(--dd-text-color);cursor:pointer;border:var(--dd-border-size) solid var(--dd-border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;outline:none}.dropdown-box-toggle .toggle-placeholder{color:#495057}.dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:calc(2 * var(--dd-arrow-size));padding-right:5px;min-width:fit-content;position:relative;display:block}.dropdown-box-toggle a.dropdown-box-toggle-link:after{content:\"\";position:absolute;left:calc(100% + var(--dd-arrow-size));top:calc(50% - var(--dd-arrow-size));border-top:var(--dd-arrow-size) solid transparent;border-bottom:var(--dd-arrow-size) solid transparent;border-left:var(--dd-arrow-size) solid var(--dd-arrow-color);transform:rotate(calc(var(--dd-arrow-rotation) * 1deg));transition:.2s ease}.dropdown-box-content{position:relative;z-index:1;min-width:var(--toggle-width, 0)}.dropdown-box-content *{box-sizing:border-box}.dropdown-box-content ul{margin:-1px 0 0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);z-index:1;background:var(--dd-bg-color);
|
|
9273
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: DropdownBoxComponent, isStandalone: false, selector: "dropdown-box", inputs: { closeInside: "closeInside", attachTo: "attachTo", placement: "placement", crossAxis: "crossAxis", alignment: "alignment", autoAlignment: "autoAlignment", allowedPlacements: "allowedPlacements", componentClass: "componentClass" }, viewQueries: [{ propertyName: "content", first: true, predicate: DropdownContentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div dd class=\"dropdown-box\"\n [ngClass]=\"componentClass\"\n [closeInside]=\"closeInside\"\n [attachTo]=\"attachTo\"\n [placement]=\"placement\"\n [autoPlacement]=\"autoPlacement\">\n <div class=\"dropdown-box-toggle\" dropdownToggle>\n <a class=\"dropdown-box-toggle-link\">\n <ng-content select=\"[toggle-content]\"></ng-content>\n </a>\n </div>\n <div class=\"dropdown-box-content\" [ngClass]=\"componentClass + '-content-wrapper'\" *dropdownContent>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".dropdown-box{--dd-border-size: var(--border-size, 1px);--dd-border-radius: 5px;--dd-top-border-radius: var(--dd-border-radius) var(--dd-border-radius) 0 0;--dd-bottom-border-radius: 0 0 var(--dd-border-radius) var(--dd-border-radius);--dd-bg-color: var(--bg-color, #ffffff);--dd-border-color: var(--border-color, #ced4da);--dd-highlight-color: var(--highlight-color, var(--primary-color, #888888));--dd-highlight-text-color: var(--highlight-text-color, #ffffff);--dd-text-color: var(--text-color, #151515);--dd-arrow-size: var(--arrow-size, 6px);--dd-arrow-space: calc(var(--dd-arrow-size) * .5 + 1px);--dd-arrow-color: currentColor;--dd-arrow-rotation: 90;position:relative;z-index:2;display:inline-block;width:var(--content-width, 0);min-width:fit-content}.dropdown-box *{box-sizing:border-box}.dropdown-box a,.dropdown-box span{white-space:nowrap}.dropdown-box.table-sort-dropdown{display:none}.dropdown-box.table-sort-dropdown .table-toggle:hover,.dropdown-box li:hover,.dropdown-box li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box.open{--dd-arrow-rotation: -90}.dropdown-box.open .dropdown-box-toggle{border-radius:var(--dd-top-border-radius)}.dropdown-box-toggle{min-width:fit-content;background:var(--dd-bg-color);color:var(--dd-text-color);cursor:pointer;border:var(--dd-border-size) solid var(--dd-border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;outline:none}.dropdown-box-toggle .toggle-placeholder{color:#495057}.dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:calc(2 * var(--dd-arrow-size));padding-right:5px;min-width:fit-content;position:relative;display:block}.dropdown-box-toggle a.dropdown-box-toggle-link:after{content:\"\";position:absolute;left:calc(100% + var(--dd-arrow-size));top:calc(50% - var(--dd-arrow-size));border-top:var(--dd-arrow-size) solid transparent;border-bottom:var(--dd-arrow-size) solid transparent;border-left:var(--dd-arrow-size) solid var(--dd-arrow-color);transform:rotate(calc(var(--dd-arrow-rotation) * 1deg));transition:.2s ease}.dropdown-box-content{position:relative;z-index:1;min-width:var(--toggle-width, 0)}.dropdown-box-content *{box-sizing:border-box}.dropdown-box-content ul{margin:-1px 0 0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);z-index:1;background:var(--dd-bg-color);overflow:hidden;min-width:fit-content}.dropdown-box-content li{color:var(--dd-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none}.dropdown-box-content li a{color:var(--dd-text-color);text-decoration:none;display:flex;gap:5px}.dropdown-box-content li:hover,.dropdown-box-content li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box-content li:hover a,.dropdown-box-content li.active a{color:var(--dd-highlight-text-color)}.dropdown-placement-top.open .dropdown-box-toggle{border-radius:var(--dd-bottom-border-radius)}.dropdown-placement-top .dropdown-box-content ul{margin-top:0;margin-bottom:-1px}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DropdownDirective, selector: "[dd],[drop-down]", inputs: ["closeInside", "attachTo", "boundary", "placement", "autoPlacement", "mobileViewUnder", "fixed", "keyboardHandler", "isDisabled"], outputs: ["onShown", "onHidden", "onKeyboard"], exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[dropdownContent]", exportAs: ["dropdown-content"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[dropdownToggle]", inputs: ["beforeOpen", "switch"], exportAs: ["dropdown-toggle"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
9264
9274
|
}
|
|
9265
9275
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DropdownBoxComponent, decorators: [{
|
|
9266
9276
|
type: Component,
|
|
9267
|
-
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dropdown-box", template: "<div dd class=\"dropdown-box\"\n [ngClass]=\"componentClass\"\n [closeInside]=\"closeInside\"\n [attachTo]=\"attachTo\"\n [placement]=\"placement\"\n [autoPlacement]=\"autoPlacement\">\n <div class=\"dropdown-box-toggle\" dropdownToggle>\n <a class=\"dropdown-box-toggle-link\">\n <ng-content select=\"[toggle-content]\"></ng-content>\n </a>\n </div>\n <div class=\"dropdown-box-content\" [ngClass]=\"componentClass + '-content-wrapper'\" *dropdownContent>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".dropdown-box{--dd-border-size: var(--border-size, 1px);--dd-border-radius: 5px;--dd-top-border-radius: var(--dd-border-radius) var(--dd-border-radius) 0 0;--dd-bottom-border-radius: 0 0 var(--dd-border-radius) var(--dd-border-radius);--dd-bg-color: var(--bg-color, #ffffff);--dd-border-color: var(--border-color, #ced4da);--dd-highlight-color: var(--highlight-color, var(--primary-color, #888888));--dd-highlight-text-color: var(--highlight-text-color, #ffffff);--dd-text-color: var(--text-color, #151515);--dd-arrow-size: var(--arrow-size, 6px);--dd-arrow-space: calc(var(--dd-arrow-size) * .5 + 1px);--dd-arrow-color: currentColor;--dd-arrow-rotation: 90;position:relative;z-index:2;display:inline-block;width:var(--content-width, 0);min-width:fit-content}.dropdown-box *{box-sizing:border-box}.dropdown-box a,.dropdown-box span{white-space:nowrap}.dropdown-box.table-sort-dropdown{display:none}.dropdown-box.table-sort-dropdown .table-toggle:hover,.dropdown-box li:hover,.dropdown-box li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box.open{--dd-arrow-rotation: -90}.dropdown-box.open .dropdown-box-toggle{border-radius:var(--dd-top-border-radius)}.dropdown-box-toggle{min-width:fit-content;background:var(--dd-bg-color);color:var(--dd-text-color);cursor:pointer;border:var(--dd-border-size) solid var(--dd-border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;outline:none}.dropdown-box-toggle .toggle-placeholder{color:#495057}.dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:calc(2 * var(--dd-arrow-size));padding-right:5px;min-width:fit-content;position:relative;display:block}.dropdown-box-toggle a.dropdown-box-toggle-link:after{content:\"\";position:absolute;left:calc(100% + var(--dd-arrow-size));top:calc(50% - var(--dd-arrow-size));border-top:var(--dd-arrow-size) solid transparent;border-bottom:var(--dd-arrow-size) solid transparent;border-left:var(--dd-arrow-size) solid var(--dd-arrow-color);transform:rotate(calc(var(--dd-arrow-rotation) * 1deg));transition:.2s ease}.dropdown-box-content{position:relative;z-index:1;min-width:var(--toggle-width, 0)}.dropdown-box-content *{box-sizing:border-box}.dropdown-box-content ul{margin:-1px 0 0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);z-index:1;background:var(--dd-bg-color);
|
|
9277
|
+
args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "dropdown-box", template: "<div dd class=\"dropdown-box\"\n [ngClass]=\"componentClass\"\n [closeInside]=\"closeInside\"\n [attachTo]=\"attachTo\"\n [placement]=\"placement\"\n [autoPlacement]=\"autoPlacement\">\n <div class=\"dropdown-box-toggle\" dropdownToggle>\n <a class=\"dropdown-box-toggle-link\">\n <ng-content select=\"[toggle-content]\"></ng-content>\n </a>\n </div>\n <div class=\"dropdown-box-content\" [ngClass]=\"componentClass + '-content-wrapper'\" *dropdownContent>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".dropdown-box{--dd-border-size: var(--border-size, 1px);--dd-border-radius: 5px;--dd-top-border-radius: var(--dd-border-radius) var(--dd-border-radius) 0 0;--dd-bottom-border-radius: 0 0 var(--dd-border-radius) var(--dd-border-radius);--dd-bg-color: var(--bg-color, #ffffff);--dd-border-color: var(--border-color, #ced4da);--dd-highlight-color: var(--highlight-color, var(--primary-color, #888888));--dd-highlight-text-color: var(--highlight-text-color, #ffffff);--dd-text-color: var(--text-color, #151515);--dd-arrow-size: var(--arrow-size, 6px);--dd-arrow-space: calc(var(--dd-arrow-size) * .5 + 1px);--dd-arrow-color: currentColor;--dd-arrow-rotation: 90;position:relative;z-index:2;display:inline-block;width:var(--content-width, 0);min-width:fit-content}.dropdown-box *{box-sizing:border-box}.dropdown-box a,.dropdown-box span{white-space:nowrap}.dropdown-box.table-sort-dropdown{display:none}.dropdown-box.table-sort-dropdown .table-toggle:hover,.dropdown-box li:hover,.dropdown-box li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box.open{--dd-arrow-rotation: -90}.dropdown-box.open .dropdown-box-toggle{border-radius:var(--dd-top-border-radius)}.dropdown-box-toggle{min-width:fit-content;background:var(--dd-bg-color);color:var(--dd-text-color);cursor:pointer;border:var(--dd-border-size) solid var(--dd-border-color);border-radius:5px;padding:6px 12px;-webkit-user-select:none;user-select:none;font-weight:400;outline:none}.dropdown-box-toggle .toggle-placeholder{color:#495057}.dropdown-box-toggle a.dropdown-box-toggle-link{margin-right:calc(2 * var(--dd-arrow-size));padding-right:5px;min-width:fit-content;position:relative;display:block}.dropdown-box-toggle a.dropdown-box-toggle-link:after{content:\"\";position:absolute;left:calc(100% + var(--dd-arrow-size));top:calc(50% - var(--dd-arrow-size));border-top:var(--dd-arrow-size) solid transparent;border-bottom:var(--dd-arrow-size) solid transparent;border-left:var(--dd-arrow-size) solid var(--dd-arrow-color);transform:rotate(calc(var(--dd-arrow-rotation) * 1deg));transition:.2s ease}.dropdown-box-content{position:relative;z-index:1;min-width:var(--toggle-width, 0)}.dropdown-box-content *{box-sizing:border-box}.dropdown-box-content ul{margin:-1px 0 0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);z-index:1;background:var(--dd-bg-color);overflow:hidden;min-width:fit-content}.dropdown-box-content li{color:var(--dd-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;padding:6px 12px;-webkit-user-select:none;user-select:none}.dropdown-box-content li a{color:var(--dd-text-color);text-decoration:none;display:flex;gap:5px}.dropdown-box-content li:hover,.dropdown-box-content li.active{background-color:var(--dd-highlight-color);color:var(--dd-highlight-text-color)}.dropdown-box-content li:hover a,.dropdown-box-content li.active a{color:var(--dd-highlight-text-color)}.dropdown-placement-top.open .dropdown-box-toggle{border-radius:var(--dd-bottom-border-radius)}.dropdown-placement-top .dropdown-box-content ul{margin-top:0;margin-bottom:-1px}\n"] }]
|
|
9268
9278
|
}], ctorParameters: () => [], propDecorators: { closeInside: [{
|
|
9269
9279
|
type: Input
|
|
9270
9280
|
}], attachTo: [{
|