ngx-kit 8.1.0 → 8.3.0

package/fesm2022/ngx-kit-core.mjs

@@ -267,7 +267,7 @@ class RangeSliderComponent {
                 useExisting: forwardRef(() => RangeSliderComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true, static: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true }], ngImport: i0, template: "<div class=\"slider-container\">\n  <ng-content></ng-content>\n  <div\n    #slider\n    class=\"slider\"\n    [class.add-range-cursor]=\"addNewRangeOnClick\"\n    [ngStyle]=\"{ '--ngx-slider-bg': background }\"\n    [class.bg-transparent]=\"isBgTransparent\"\n    (mousedown)=\"addnewRangeOnSliderClick($event)\"\n    (touchstart)=\"addnewRangeOnSliderClick($event)\">\n    @for (item of values; track $index; let i = $index) {\n      <div\n        class=\"thumb\"\n        [class.is-active]=\"selectedIndex == i\"\n        #thumb\n        [style.left.px]=\"item.x\"\n        [style.background]=\"item.color\"\n        [title]=\"item.value\"\n        (mousedown)=\"dragStart($event, i)\"\n        (touchstart)=\"dragStart($event, i)\"></div>\n    }\n  </div>\n</div>\n\n<!-- {{ selectedIndex }}\n<pre dir=\"ltr\" style=\"text-align: left\">{{ values | json }}</pre> -->\n", styles: [".slider-container{max-width:100%;padding:1px 0}.slider-container .slider{position:relative;box-shadow:inset #00000013 0 0 0 1px;border-radius:10px;height:12px;width:100%;background:var(--ngx-slider-bg, rgb(140, 51, 250));margin:10px 0}.slider-container .slider.bg-transparent{background:transparent}.slider-container .slider.bg-transparent:before,.slider-container .slider.bg-transparent:after{position:absolute;inset:1px;border-radius:9px}.slider-container .slider.bg-transparent:before{content:\" \";background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.slider-container .slider.bg-transparent:after{content:\" \";background:var(--ngx-slider-bg)}.slider-container .slider.add-range-cursor{cursor:copy}.slider-container .thumb{box-shadow:#00000026 0 0 0 1px,#0000000d 0 10px 10px -5px,inset #fff 0 0 0 6px;height:var(--ngx-thumb-size, 30px);width:var(--ngx-thumb-size, 30px);display:block;border-radius:100%;top:calc(6px - var(--ngx-thumb-size, 30px) / 2);position:absolute;cursor:grab;z-index:100}.slider-container .thumb.is-active{outline:1px rgb(89,0,255) solid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true, static: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true }], ngImport: i0, template: "<div class=\"slider-container\">\n  <ng-content></ng-content>\n  <div\n    #slider\n    class=\"slider\"\n    [class.add-range-cursor]=\"addNewRangeOnClick\"\n    [ngStyle]=\"{ '--ngx-slider-bg': background }\"\n    [class.bg-transparent]=\"isBgTransparent\"\n    (mousedown)=\"addnewRangeOnSliderClick($event)\"\n    (touchstart)=\"addnewRangeOnSliderClick($event)\">\n    @for (item of values; track $index; let i = $index) {\n      <div\n        class=\"thumb\"\n        [class.is-active]=\"selectedIndex == i\"\n        #thumb\n        [style.left.px]=\"item.x\"\n        [style.background]=\"item.color\"\n        [title]=\"item.value\"\n        (mousedown)=\"dragStart($event, i)\"\n        (touchstart)=\"dragStart($event, i)\"></div>\n    }\n  </div>\n</div>\n\n<!-- {{ selectedIndex }}\n<pre dir=\"ltr\" style=\"text-align: left\">{{ values | json }}</pre> -->\n", styles: [".slider-container{max-width:100%;padding:1px 0}.slider-container .slider{position:relative;box-shadow:inset #00000013 0 0 0 1px;border-radius:10px;height:12px;width:100%;background:var(--ngx-slider-bg, rgb(140, 51, 250));margin:10px 0}.slider-container .slider.bg-transparent{background:transparent}.slider-container .slider.bg-transparent:before,.slider-container .slider.bg-transparent:after{position:absolute;inset:1px;border-radius:9px}.slider-container .slider.bg-transparent:before{content:\" \";background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.slider-container .slider.bg-transparent:after{content:\" \";background:var(--ngx-slider-bg)}.slider-container .slider.add-range-cursor{cursor:copy}.slider-container .thumb{box-shadow:#00000026 0 0 0 1px,#0000000d 0 10px 10px -5px,inset #fff 0 0 0 6px;height:var(--ngx-thumb-size, 30px);width:var(--ngx-thumb-size, 30px);display:block;border-radius:100%;top:calc(6px - var(--ngx-thumb-size, 30px) / 2);position:absolute;cursor:grab;z-index:100}.slider-container .thumb.is-active{outline:1px #5900ff solid;box-shadow:#00000026 0 0 0 1px,#0000000d 0 10px 10px -5px,inset #5900ff 0 0 0 6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RangeSliderComponent, decorators: [{
             type: Component,
@@ -282,7 +282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                             useExisting: forwardRef(() => RangeSliderComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"slider-container\">\n  <ng-content></ng-content>\n  <div\n    #slider\n    class=\"slider\"\n    [class.add-range-cursor]=\"addNewRangeOnClick\"\n    [ngStyle]=\"{ '--ngx-slider-bg': background }\"\n    [class.bg-transparent]=\"isBgTransparent\"\n    (mousedown)=\"addnewRangeOnSliderClick($event)\"\n    (touchstart)=\"addnewRangeOnSliderClick($event)\">\n    @for (item of values; track $index; let i = $index) {\n      <div\n        class=\"thumb\"\n        [class.is-active]=\"selectedIndex == i\"\n        #thumb\n        [style.left.px]=\"item.x\"\n        [style.background]=\"item.color\"\n        [title]=\"item.value\"\n        (mousedown)=\"dragStart($event, i)\"\n        (touchstart)=\"dragStart($event, i)\"></div>\n    }\n  </div>\n</div>\n\n<!-- {{ selectedIndex }}\n<pre dir=\"ltr\" style=\"text-align: left\">{{ values | json }}</pre> -->\n", styles: [".slider-container{max-width:100%;padding:1px 0}.slider-container .slider{position:relative;box-shadow:inset #00000013 0 0 0 1px;border-radius:10px;height:12px;width:100%;background:var(--ngx-slider-bg, rgb(140, 51, 250));margin:10px 0}.slider-container .slider.bg-transparent{background:transparent}.slider-container .slider.bg-transparent:before,.slider-container .slider.bg-transparent:after{position:absolute;inset:1px;border-radius:9px}.slider-container .slider.bg-transparent:before{content:\" \";background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.slider-container .slider.bg-transparent:after{content:\" \";background:var(--ngx-slider-bg)}.slider-container .slider.add-range-cursor{cursor:copy}.slider-container .thumb{box-shadow:#00000026 0 0 0 1px,#0000000d 0 10px 10px -5px,inset #fff 0 0 0 6px;height:var(--ngx-thumb-size, 30px);width:var(--ngx-thumb-size, 30px);display:block;border-radius:100%;top:calc(6px - var(--ngx-thumb-size, 30px) / 2);position:absolute;cursor:grab;z-index:100}.slider-container .thumb.is-active{outline:1px rgb(89,0,255) solid}\n"] }]
+                    ], template: "<div class=\"slider-container\">\n  <ng-content></ng-content>\n  <div\n    #slider\n    class=\"slider\"\n    [class.add-range-cursor]=\"addNewRangeOnClick\"\n    [ngStyle]=\"{ '--ngx-slider-bg': background }\"\n    [class.bg-transparent]=\"isBgTransparent\"\n    (mousedown)=\"addnewRangeOnSliderClick($event)\"\n    (touchstart)=\"addnewRangeOnSliderClick($event)\">\n    @for (item of values; track $index; let i = $index) {\n      <div\n        class=\"thumb\"\n        [class.is-active]=\"selectedIndex == i\"\n        #thumb\n        [style.left.px]=\"item.x\"\n        [style.background]=\"item.color\"\n        [title]=\"item.value\"\n        (mousedown)=\"dragStart($event, i)\"\n        (touchstart)=\"dragStart($event, i)\"></div>\n    }\n  </div>\n</div>\n\n<!-- {{ selectedIndex }}\n<pre dir=\"ltr\" style=\"text-align: left\">{{ values | json }}</pre> -->\n", styles: [".slider-container{max-width:100%;padding:1px 0}.slider-container .slider{position:relative;box-shadow:inset #00000013 0 0 0 1px;border-radius:10px;height:12px;width:100%;background:var(--ngx-slider-bg, rgb(140, 51, 250));margin:10px 0}.slider-container .slider.bg-transparent{background:transparent}.slider-container .slider.bg-transparent:before,.slider-container .slider.bg-transparent:after{position:absolute;inset:1px;border-radius:9px}.slider-container .slider.bg-transparent:before{content:\" \";background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.slider-container .slider.bg-transparent:after{content:\" \";background:var(--ngx-slider-bg)}.slider-container .slider.add-range-cursor{cursor:copy}.slider-container .thumb{box-shadow:#00000026 0 0 0 1px,#0000000d 0 10px 10px -5px,inset #fff 0 0 0 6px;height:var(--ngx-thumb-size, 30px);width:var(--ngx-thumb-size, 30px);display:block;border-radius:100%;top:calc(6px - var(--ngx-thumb-size, 30px) / 2);position:absolute;cursor:grab;z-index:100}.slider-container .thumb.is-active{outline:1px #5900ff solid;box-shadow:#00000026 0 0 0 1px,#0000000d 0 10px 10px -5px,inset #5900ff 0 0 0 6px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { step: [{
                 type: Input
             }], min: [{
@@ -1435,8 +1435,8 @@ class OverlayService {
         element.style.overflow = 'auto';
         element.style.transformOrigin = 'left top';
         element.style.background = 'none';
-        element.style.boxShadow = '0 0 20px light-dark(#79797955, #020202bd)';
-        element.style.borderRadius = 'var(--ngx-dialog-corner-radius,1rem)';
+        element.style.boxShadow = '0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4)';
+        element.style.borderRadius = 'var(--ngx-dialog-corner-radius,8px)';
         this.addClasses(element, options.panelClass);
         return element;
     }