@stemy/ngx-utils 19.4.4 → 19.4.5
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.
|
@@ -5861,6 +5861,7 @@ class DropdownDirective {
|
|
|
5861
5861
|
this.attachTo = null;
|
|
5862
5862
|
this.boundary = "clippingAncestors";
|
|
5863
5863
|
this.mobileViewUnder = 0;
|
|
5864
|
+
this.fixed = false;
|
|
5864
5865
|
this.keyboardHandler = true;
|
|
5865
5866
|
this.onShown = new EventEmitter();
|
|
5866
5867
|
this.onHidden = new EventEmitter();
|
|
@@ -5949,7 +5950,7 @@ class DropdownDirective {
|
|
|
5949
5950
|
return true;
|
|
5950
5951
|
}
|
|
5951
5952
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5952
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DropdownDirective, isStandalone: false, selector: "[dd],[drop-down]", inputs: { closeInside: "closeInside", attachTo: "attachTo", boundary: "boundary", placement: "placement", autoPlacement: "autoPlacement", mobileViewUnder: "mobileViewUnder", 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 }); }
|
|
5953
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", 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 }); }
|
|
5953
5954
|
}
|
|
5954
5955
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownDirective, decorators: [{
|
|
5955
5956
|
type: Directive,
|
|
@@ -5970,6 +5971,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
5970
5971
|
type: Input
|
|
5971
5972
|
}], mobileViewUnder: [{
|
|
5972
5973
|
type: Input
|
|
5974
|
+
}], fixed: [{
|
|
5975
|
+
type: Input
|
|
5973
5976
|
}], keyboardHandler: [{
|
|
5974
5977
|
type: Input
|
|
5975
5978
|
}], onShown: [{
|
|
@@ -6020,6 +6023,7 @@ class DropdownContentDirective {
|
|
|
6020
6023
|
if (this.dropdown.contentElement)
|
|
6021
6024
|
return;
|
|
6022
6025
|
const mobileWidth = this.dropdown.mobileViewUnder || 0;
|
|
6026
|
+
const fixed = this.dropdown.fixed || false;
|
|
6023
6027
|
const ref = this.dropdown.nativeElement;
|
|
6024
6028
|
const [content, arrowEl] = this.createWrapper();
|
|
6025
6029
|
this.dropdown.contentElement = content;
|
|
@@ -6034,7 +6038,7 @@ class DropdownContentDirective {
|
|
|
6034
6038
|
middleware.push(arrow({ element: arrowEl }));
|
|
6035
6039
|
const compute = async () => {
|
|
6036
6040
|
const isMobileView = window.innerWidth <= mobileWidth;
|
|
6037
|
-
if (isMobileView) {
|
|
6041
|
+
if (isMobileView || fixed) {
|
|
6038
6042
|
return {
|
|
6039
6043
|
styles: {
|
|
6040
6044
|
left: "0px", top: "0px", right: "0px", bottom: "0px",
|
|
@@ -6085,13 +6089,21 @@ class DropdownContentDirective {
|
|
|
6085
6089
|
ref.classList.add(newPlacement);
|
|
6086
6090
|
content.classList.add(newPlacement);
|
|
6087
6091
|
}
|
|
6088
|
-
if (isMobileView) {
|
|
6092
|
+
if (isMobileView || fixed) {
|
|
6093
|
+
if (!isMobileView) {
|
|
6094
|
+
content.classList.add(`dropdown-content-fixed`);
|
|
6095
|
+
content.classList.remove(`dropdown-content-mobile`);
|
|
6096
|
+
}
|
|
6097
|
+
else {
|
|
6098
|
+
content.classList.add(`dropdown-content-mobile`);
|
|
6099
|
+
content.classList.remove(`dropdown-content-fixed`);
|
|
6100
|
+
}
|
|
6089
6101
|
content.classList.remove(`dropdown-content-desktop`);
|
|
6090
|
-
content.classList.add(`dropdown-content-mobile`);
|
|
6091
6102
|
}
|
|
6092
6103
|
else {
|
|
6093
6104
|
content.classList.add(`dropdown-content-desktop`);
|
|
6094
6105
|
content.classList.remove(`dropdown-content-mobile`);
|
|
6106
|
+
content.classList.remove(`dropdown-content-fixed`);
|
|
6095
6107
|
}
|
|
6096
6108
|
rectProps.forEach(prop => {
|
|
6097
6109
|
content.style.setProperty(`--toggle-${prop}`, `${refRect[prop]}px`);
|
|
@@ -6475,7 +6487,7 @@ class DropdownBoxComponent {
|
|
|
6475
6487
|
this.makeAutoPlacementOpts();
|
|
6476
6488
|
}
|
|
6477
6489
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6478
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", 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;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);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:0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);border-top-width:0;z-index:1;background:var(--dd-bg-color);border-radius:var(--dd-bottom-border-radius);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:hover,.dropdown-box-content li.active{background-color:var(--dd-highlight-color);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{border-top-width:var(--dd-border-size);border-bottom-width:0;border-radius:var(--dd-top-border-radius)}\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", "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 }); }
|
|
6490
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", 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;font-size:var(--table-input-font-size, 15px);line-height:var(--table-input-line-height, 18px);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:0;padding:0;list-style:none;border:var(--dd-border-size) solid var(--dd-border-color);border-top-width:0;z-index:1;background:var(--dd-bg-color);border-radius:var(--dd-bottom-border-radius);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:hover,.dropdown-box-content li.active{background-color:var(--dd-highlight-color);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{border-top-width:var(--dd-border-size);border-bottom-width:0;border-radius:var(--dd-top-border-radius)}\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 }); }
|
|
6479
6491
|
}
|
|
6480
6492
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DropdownBoxComponent, decorators: [{
|
|
6481
6493
|
type: Component,
|