@stemy/ngx-utils 19.9.43 → 19.9.44
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
|
}
|
|
@@ -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: [{
|