ngx-kit 9.1.0 → 9.2.0

package/fesm2022/ngx-kit-notify.mjs

@@ -168,11 +168,11 @@ class NgxNotificationComponent {
         return div.textContent;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxNotificationComponent, isStandalone: true, selector: "ngx-notification", inputs: { payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: true, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose", onFinish: "onFinish" }, viewQueries: [{ propertyName: "bar", first: true, predicate: ["bar"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"{{ containerClass }} {{ containerClass }}-{{ payload().type }} {{ showClass() }}\"\n  role=\"status\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (click)=\"onTap()\"\n  [attr.aria-live]=\"\n    payload().type === 'error' || payload().type === 'warning' ? 'assertive' : 'polite'\n  \"\n  [attr.data-id]=\"payload().id\">\n  <div class=\"ngx-notify-icon-container\">\n    <div class=\"ngx-notify-icon\">\n      @switch (payload().type) {\n        @case ('success') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M235.3 331.3C229.1 337.6 218.9 337.6 212.7 331.3L148.7 267.3C142.4 261.1 142.4 250.9 148.7 244.7C154.9 238.4 165.1 238.4 171.3 244.7L224 297.4L340.7 180.7C346.9 174.4 357.1 174.4 363.3 180.7C369.6 186.9 369.6 197.1 363.3 203.3L235.3 331.3zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z\" />\n          </svg>\n        }\n        @case ('error') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M180.7 180.7C186.9 174.4 197.1 174.4 203.3 180.7L256 233.4L308.7 180.7C314.9 174.4 325.1 174.4 331.3 180.7C337.6 186.9 337.6 197.1 331.3 203.3L278.6 255.1L331.3 308.7C337.6 314.9 337.6 325.1 331.3 331.3C325.1 337.6 314.9 337.6 308.7 331.3L256 278.6L203.3 331.3C197.1 337.6 186.9 337.6 180.7 331.3C174.4 325.1 174.4 314.9 180.7 308.7L233.4 255.1L180.7 203.3C174.4 197.1 174.4 186.9 180.7 180.7V180.7zM.0669 191.5C.0669 172.4 7.652 154.1 21.16 140.6L140.6 21.15C154.1 7.648 172.4 .0625 191.5 .0625H320.5C339.6 .0625 357.9 7.648 371.4 21.15L490.8 140.6C504.3 154.1 511.9 172.4 511.9 191.5V320.5C511.9 339.6 504.3 357.9 490.8 371.4L371.4 490.8C357.9 504.3 339.6 511.9 320.5 511.9H191.5C172.4 511.9 154.1 504.3 140.6 490.8L21.15 371.4C7.652 357.9 .0666 339.6 .0666 320.5L.0669 191.5zM43.78 163.2C36.28 170.7 32.07 180.9 32.07 191.5V320.5C32.07 331.1 36.28 341.3 43.78 348.8L163.2 468.2C170.7 475.7 180.9 479.9 191.5 479.9H320.5C331.1 479.9 341.3 475.7 348.8 468.2L468.2 348.8C475.7 341.3 479.9 331.1 479.9 320.5V191.5C479.9 180.9 475.7 170.7 468.2 163.2L348.8 43.78C341.3 36.28 331.1 32.06 320.5 32.06H191.5C180.9 32.06 170.7 36.28 163.2 43.78L43.78 163.2zM43.78 348.8L21.15 371.4z\" />\n          </svg>\n        }\n        @case ('warning') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M256 360c-13.25 0-23.1 10.74-23.1 24c0 13.25 10.75 24 23.1 24c13.25 0 23.1-10.75 23.1-24C280 370.7 269.3 360 256 360zM256 320c8.843 0 15.1-7.156 15.1-16V160c0-8.844-7.155-16-15.1-16S240 151.2 240 160v144C240 312.8 247.2 320 256 320zM504.3 397.3L304.5 59.38C294.4 42.27 276.2 32.03 256 32C235.8 32 217.7 42.22 207.5 59.36l-199.9 338c-10.05 16.97-10.2 37.34-.4218 54.5C17.29 469.5 35.55 480 56.1 480h399.9c20.51 0 38.75-10.53 48.81-28.17C514.6 434.7 514.4 414.3 504.3 397.3zM476.1 435.1C472.7 443.5 464.8 448 455.1 448H56.1c-8.906 0-16.78-4.484-21.08-12c-4.078-7.156-4.015-15.3 .1562-22.36L235.1 75.66C239.4 68.36 247.2 64 256 64c0 0-.0156 0 0 0c8.765 .0156 16.56 4.359 20.86 11.64l199.9 338C480.1 420.7 481.1 428.8 476.1 435.1z\" />\n          </svg>\n        }\n        @case ('info') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 480c-123.5 0-224-100.5-224-224s100.5-224 224-224s224 100.5 224 224S379.5 480 256 480zM256 184c13.25 0 24-10.74 24-24c0-13.25-10.75-24-24-24S232 146.7 232 160C232 173.3 242.7 184 256 184zM304 352h-32V240C272 231.2 264.8 224 256 224H224C215.2 224 208 231.2 208 240S215.2 256 224 256h16v96h-32C199.2 352 192 359.2 192 368C192 376.8 199.2 384 208 384h96c8.836 0 16-7.164 16-16C320 359.2 312.8 352 304 352z\" />\n          </svg>\n        }\n      }\n    </div>\n  </div>\n\n  <div class=\"ngx-notify-content\">\n    <div class=\"ngx-notify-title\" [innerHTML]=\"safeMessage\"></div>\n    <div class=\"ngx-notify-description\" [innerHTML]=\"safeDescription\"></div>\n  </div>\n\n  @if (payload().options.dismissible) {\n    <div class=\"ngx-notify-close-container\">\n      <button class=\"ngx-notify-close\" (click)=\"close($event)\" aria-label=\"close\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            fill=\"currentColor\"\n            d=\"M315.3 411.3c-6.253 6.253-16.37 6.253-22.63 0L160 278.6l-132.7 132.7c-6.253 6.253-16.37 6.253-22.63 0c-6.253-6.253-6.253-16.37 0-22.63L137.4 256L4.69 123.3c-6.253-6.253-6.253-16.37 0-22.63c6.253-6.253 16.37-6.253 22.63 0L160 233.4l132.7-132.7c6.253-6.253 16.37-6.253 22.63 0c6.253 6.253 6.253 16.37 0 22.63L182.6 256l132.7 132.7C321.6 394.9 321.6 405.1 315.3 411.3z\" />\n        </svg>\n      </button>\n    </div>\n  }\n\n  <div class=\"ngx-notify-progress\">\n    <div class=\"progress-bar\" #bar></div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0;--ngx-notify-content-bg: light-dark(#ffffff, #262b35);--ngx-notify-content-fg: light-dark(#000, #fff)}.ngx-notify{display:flex;min-width:240px;min-width:min(500px,100dvw);max-width:100%;border-radius:8px;box-shadow:0 0 20px light-dark(#797979,rgba(2,2,2,.7411764706));opacity:0;transform:translateY(-8px);transition:opacity .28s ease,transform .28s ease;pointer-events:auto;overflow:hidden}.ngx-notify-icon-container{width:60px;min-width:60px;display:flex;align-items:center;justify-content:center}.ngx-notify-icon-container .ngx-notify-icon{padding:15px}.ngx-notify-icon-container .ngx-notify-icon svg{width:100%;height:100%}.ngx-notify-content{background-color:var(--ngx-notify-content-bg);color:var(--ngx-notify-content-fg);padding:15px;border-radius:0 0 0 15px;flex:auto}.ngx-notify-content .ngx-notify-title{font-size:1rem}.ngx-notify-content .ngx-notify-description{opacity:.8;font-size:.8rem}.ngx-show{opacity:1;transform:translateY(0)}.ngx-notify-info{background:#1cacff;--var-ngx-progress-bar-bg: #1cacff;color:#e8f3ff}.ngx-notify-success{background:#54c999;--var-ngx-progress-bar-bg: #54c999;color:#ebeceb}.ngx-notify-warning{background:#ffb242;--var-ngx-progress-bar-bg: #ffb242;color:#ffecec}.ngx-notify-error{background:#ff3c39;--var-ngx-progress-bar-bg: #ff3c39;color:#ffecec}.ngx-notify-close-container{background-color:var(--ngx-notify-content-bg);color:var(--ngx-notify-content-fg);display:flex;align-items:center;justify-content:center}.ngx-notify-close-container .ngx-notify-close{background:transparent;border:none;width:22px;height:22px;line-height:0;margin:0 5px;cursor:pointer;transform:rotate(0);transition:transform .4s}.ngx-notify-close-container .ngx-notify-close:hover{transform:rotate(90deg)}.ngx-notify-progress{position:absolute;bottom:0;height:4px;left:60px;right:0;overflow:hidden}.ngx-notify-progress .progress-bar{background-color:var(--var-ngx-progress-bar-bg);height:100%;transform:scaleX(0);transform-origin:left}:host-context([dir=rtl]) .ngx-notify-content{border-radius:0 0 15px}:host-context([dir=rtl]) .ngx-notify-progress{left:0;right:60px}:host-context([dir=rtl]) .ngx-notify-progress .progress-bar{transform-origin:right!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxNotificationComponent, isStandalone: true, selector: "ngx-notification", inputs: { payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: true, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose", onFinish: "onFinish" }, viewQueries: [{ propertyName: "bar", first: true, predicate: ["bar"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"{{ containerClass }} {{ containerClass }}-{{ payload().type }} {{ showClass() }}\"\n  role=\"status\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (click)=\"onTap()\"\n  [attr.aria-live]=\"\n    payload().type === 'error' || payload().type === 'warning' ? 'assertive' : 'polite'\n  \"\n  [attr.data-id]=\"payload().id\">\n  <div class=\"ngx-notify-icon-container\">\n    <div class=\"ngx-notify-icon\">\n      @switch (payload().type) {\n        @case ('success') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M235.3 331.3C229.1 337.6 218.9 337.6 212.7 331.3L148.7 267.3C142.4 261.1 142.4 250.9 148.7 244.7C154.9 238.4 165.1 238.4 171.3 244.7L224 297.4L340.7 180.7C346.9 174.4 357.1 174.4 363.3 180.7C369.6 186.9 369.6 197.1 363.3 203.3L235.3 331.3zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z\" />\n          </svg>\n        }\n        @case ('error') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M180.7 180.7C186.9 174.4 197.1 174.4 203.3 180.7L256 233.4L308.7 180.7C314.9 174.4 325.1 174.4 331.3 180.7C337.6 186.9 337.6 197.1 331.3 203.3L278.6 255.1L331.3 308.7C337.6 314.9 337.6 325.1 331.3 331.3C325.1 337.6 314.9 337.6 308.7 331.3L256 278.6L203.3 331.3C197.1 337.6 186.9 337.6 180.7 331.3C174.4 325.1 174.4 314.9 180.7 308.7L233.4 255.1L180.7 203.3C174.4 197.1 174.4 186.9 180.7 180.7V180.7zM.0669 191.5C.0669 172.4 7.652 154.1 21.16 140.6L140.6 21.15C154.1 7.648 172.4 .0625 191.5 .0625H320.5C339.6 .0625 357.9 7.648 371.4 21.15L490.8 140.6C504.3 154.1 511.9 172.4 511.9 191.5V320.5C511.9 339.6 504.3 357.9 490.8 371.4L371.4 490.8C357.9 504.3 339.6 511.9 320.5 511.9H191.5C172.4 511.9 154.1 504.3 140.6 490.8L21.15 371.4C7.652 357.9 .0666 339.6 .0666 320.5L.0669 191.5zM43.78 163.2C36.28 170.7 32.07 180.9 32.07 191.5V320.5C32.07 331.1 36.28 341.3 43.78 348.8L163.2 468.2C170.7 475.7 180.9 479.9 191.5 479.9H320.5C331.1 479.9 341.3 475.7 348.8 468.2L468.2 348.8C475.7 341.3 479.9 331.1 479.9 320.5V191.5C479.9 180.9 475.7 170.7 468.2 163.2L348.8 43.78C341.3 36.28 331.1 32.06 320.5 32.06H191.5C180.9 32.06 170.7 36.28 163.2 43.78L43.78 163.2zM43.78 348.8L21.15 371.4z\" />\n          </svg>\n        }\n        @case ('warning') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M256 360c-13.25 0-23.1 10.74-23.1 24c0 13.25 10.75 24 23.1 24c13.25 0 23.1-10.75 23.1-24C280 370.7 269.3 360 256 360zM256 320c8.843 0 15.1-7.156 15.1-16V160c0-8.844-7.155-16-15.1-16S240 151.2 240 160v144C240 312.8 247.2 320 256 320zM504.3 397.3L304.5 59.38C294.4 42.27 276.2 32.03 256 32C235.8 32 217.7 42.22 207.5 59.36l-199.9 338c-10.05 16.97-10.2 37.34-.4218 54.5C17.29 469.5 35.55 480 56.1 480h399.9c20.51 0 38.75-10.53 48.81-28.17C514.6 434.7 514.4 414.3 504.3 397.3zM476.1 435.1C472.7 443.5 464.8 448 455.1 448H56.1c-8.906 0-16.78-4.484-21.08-12c-4.078-7.156-4.015-15.3 .1562-22.36L235.1 75.66C239.4 68.36 247.2 64 256 64c0 0-.0156 0 0 0c8.765 .0156 16.56 4.359 20.86 11.64l199.9 338C480.1 420.7 481.1 428.8 476.1 435.1z\" />\n          </svg>\n        }\n        @case ('info') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 480c-123.5 0-224-100.5-224-224s100.5-224 224-224s224 100.5 224 224S379.5 480 256 480zM256 184c13.25 0 24-10.74 24-24c0-13.25-10.75-24-24-24S232 146.7 232 160C232 173.3 242.7 184 256 184zM304 352h-32V240C272 231.2 264.8 224 256 224H224C215.2 224 208 231.2 208 240S215.2 256 224 256h16v96h-32C199.2 352 192 359.2 192 368C192 376.8 199.2 384 208 384h96c8.836 0 16-7.164 16-16C320 359.2 312.8 352 304 352z\" />\n          </svg>\n        }\n      }\n    </div>\n  </div>\n\n  <div class=\"ngx-notify-content\">\n    <div class=\"ngx-notify-title\" [innerHTML]=\"safeMessage\"></div>\n    <div class=\"ngx-notify-description\" [innerHTML]=\"safeDescription\"></div>\n  </div>\n\n  @if (payload().options.dismissible) {\n    <div class=\"ngx-notify-close-container\">\n      <button class=\"ngx-notify-close\" (click)=\"close($event)\" aria-label=\"close\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            fill=\"currentColor\"\n            d=\"M315.3 411.3c-6.253 6.253-16.37 6.253-22.63 0L160 278.6l-132.7 132.7c-6.253 6.253-16.37 6.253-22.63 0c-6.253-6.253-6.253-16.37 0-22.63L137.4 256L4.69 123.3c-6.253-6.253-6.253-16.37 0-22.63c6.253-6.253 16.37-6.253 22.63 0L160 233.4l132.7-132.7c6.253-6.253 16.37-6.253 22.63 0c6.253 6.253 6.253 16.37 0 22.63L182.6 256l132.7 132.7C321.6 394.9 321.6 405.1 315.3 411.3z\" />\n        </svg>\n      </button>\n    </div>\n  }\n\n  <div class=\"ngx-notify-progress\">\n    <div class=\"progress-bar\" #bar></div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0;--ngx-notify-content-bg: light-dark(#ffffff, #262b35);--ngx-notify-content-fg: light-dark(#000, #fff)}.ngx-notify{display:flex;min-width:240px;min-width:min(350px,100dvw);max-width:100%;border-radius:8px;box-shadow:0 0 20px light-dark(#797979,rgba(2,2,2,.7411764706));opacity:0;transform:translateY(-8px);transition:opacity .28s ease,transform .28s ease;pointer-events:auto;overflow:hidden}.ngx-notify-icon-container{width:60px;min-width:60px;display:flex;align-items:center;justify-content:center}.ngx-notify-icon-container .ngx-notify-icon{padding:15px}.ngx-notify-icon-container .ngx-notify-icon svg{width:100%;height:100%}.ngx-notify-content{background-color:var(--ngx-notify-content-bg);color:var(--ngx-notify-content-fg);padding:15px;border-radius:0 0 0 15px;flex:auto}.ngx-notify-content .ngx-notify-title{font-size:1rem}.ngx-notify-content .ngx-notify-description{opacity:.8;font-size:.8rem}.ngx-show{opacity:1;transform:translateY(0)}.ngx-notify-info{background:#1cacff;--var-ngx-progress-bar-bg: #1cacff;color:#e8f3ff}.ngx-notify-success{background:#54c999;--var-ngx-progress-bar-bg: #54c999;color:#ebeceb}.ngx-notify-warning{background:#ffb242;--var-ngx-progress-bar-bg: #ffb242;color:#ffecec}.ngx-notify-error{background:#ff3c39;--var-ngx-progress-bar-bg: #ff3c39;color:#ffecec}.ngx-notify-close-container{background-color:var(--ngx-notify-content-bg);color:var(--ngx-notify-content-fg);display:flex;align-items:center;justify-content:center}.ngx-notify-close-container .ngx-notify-close{background:transparent;border:none;width:22px;height:22px;line-height:0;margin:0 5px;cursor:pointer;transform:rotate(0);transition:transform .4s}.ngx-notify-close-container .ngx-notify-close:hover{transform:rotate(90deg)}.ngx-notify-progress{position:absolute;bottom:0;height:4px;left:60px;right:0;overflow:hidden}.ngx-notify-progress .progress-bar{background-color:var(--var-ngx-progress-bar-bg);height:100%;transform:scaleX(0);transform-origin:left}:host-context([dir=rtl]) .ngx-notify-content{border-radius:0 0 15px}:host-context([dir=rtl]) .ngx-notify-progress{left:0;right:60px}:host-context([dir=rtl]) .ngx-notify-progress .progress-bar{transform-origin:right!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-notification', imports: [CommonModule], template: "<div\n  class=\"{{ containerClass }} {{ containerClass }}-{{ payload().type }} {{ showClass() }}\"\n  role=\"status\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (click)=\"onTap()\"\n  [attr.aria-live]=\"\n    payload().type === 'error' || payload().type === 'warning' ? 'assertive' : 'polite'\n  \"\n  [attr.data-id]=\"payload().id\">\n  <div class=\"ngx-notify-icon-container\">\n    <div class=\"ngx-notify-icon\">\n      @switch (payload().type) {\n        @case ('success') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M235.3 331.3C229.1 337.6 218.9 337.6 212.7 331.3L148.7 267.3C142.4 261.1 142.4 250.9 148.7 244.7C154.9 238.4 165.1 238.4 171.3 244.7L224 297.4L340.7 180.7C346.9 174.4 357.1 174.4 363.3 180.7C369.6 186.9 369.6 197.1 363.3 203.3L235.3 331.3zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z\" />\n          </svg>\n        }\n        @case ('error') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M180.7 180.7C186.9 174.4 197.1 174.4 203.3 180.7L256 233.4L308.7 180.7C314.9 174.4 325.1 174.4 331.3 180.7C337.6 186.9 337.6 197.1 331.3 203.3L278.6 255.1L331.3 308.7C337.6 314.9 337.6 325.1 331.3 331.3C325.1 337.6 314.9 337.6 308.7 331.3L256 278.6L203.3 331.3C197.1 337.6 186.9 337.6 180.7 331.3C174.4 325.1 174.4 314.9 180.7 308.7L233.4 255.1L180.7 203.3C174.4 197.1 174.4 186.9 180.7 180.7V180.7zM.0669 191.5C.0669 172.4 7.652 154.1 21.16 140.6L140.6 21.15C154.1 7.648 172.4 .0625 191.5 .0625H320.5C339.6 .0625 357.9 7.648 371.4 21.15L490.8 140.6C504.3 154.1 511.9 172.4 511.9 191.5V320.5C511.9 339.6 504.3 357.9 490.8 371.4L371.4 490.8C357.9 504.3 339.6 511.9 320.5 511.9H191.5C172.4 511.9 154.1 504.3 140.6 490.8L21.15 371.4C7.652 357.9 .0666 339.6 .0666 320.5L.0669 191.5zM43.78 163.2C36.28 170.7 32.07 180.9 32.07 191.5V320.5C32.07 331.1 36.28 341.3 43.78 348.8L163.2 468.2C170.7 475.7 180.9 479.9 191.5 479.9H320.5C331.1 479.9 341.3 475.7 348.8 468.2L468.2 348.8C475.7 341.3 479.9 331.1 479.9 320.5V191.5C479.9 180.9 475.7 170.7 468.2 163.2L348.8 43.78C341.3 36.28 331.1 32.06 320.5 32.06H191.5C180.9 32.06 170.7 36.28 163.2 43.78L43.78 163.2zM43.78 348.8L21.15 371.4z\" />\n          </svg>\n        }\n        @case ('warning') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M256 360c-13.25 0-23.1 10.74-23.1 24c0 13.25 10.75 24 23.1 24c13.25 0 23.1-10.75 23.1-24C280 370.7 269.3 360 256 360zM256 320c8.843 0 15.1-7.156 15.1-16V160c0-8.844-7.155-16-15.1-16S240 151.2 240 160v144C240 312.8 247.2 320 256 320zM504.3 397.3L304.5 59.38C294.4 42.27 276.2 32.03 256 32C235.8 32 217.7 42.22 207.5 59.36l-199.9 338c-10.05 16.97-10.2 37.34-.4218 54.5C17.29 469.5 35.55 480 56.1 480h399.9c20.51 0 38.75-10.53 48.81-28.17C514.6 434.7 514.4 414.3 504.3 397.3zM476.1 435.1C472.7 443.5 464.8 448 455.1 448H56.1c-8.906 0-16.78-4.484-21.08-12c-4.078-7.156-4.015-15.3 .1562-22.36L235.1 75.66C239.4 68.36 247.2 64 256 64c0 0-.0156 0 0 0c8.765 .0156 16.56 4.359 20.86 11.64l199.9 338C480.1 420.7 481.1 428.8 476.1 435.1z\" />\n          </svg>\n        }\n        @case ('info') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 480c-123.5 0-224-100.5-224-224s100.5-224 224-224s224 100.5 224 224S379.5 480 256 480zM256 184c13.25 0 24-10.74 24-24c0-13.25-10.75-24-24-24S232 146.7 232 160C232 173.3 242.7 184 256 184zM304 352h-32V240C272 231.2 264.8 224 256 224H224C215.2 224 208 231.2 208 240S215.2 256 224 256h16v96h-32C199.2 352 192 359.2 192 368C192 376.8 199.2 384 208 384h96c8.836 0 16-7.164 16-16C320 359.2 312.8 352 304 352z\" />\n          </svg>\n        }\n      }\n    </div>\n  </div>\n\n  <div class=\"ngx-notify-content\">\n    <div class=\"ngx-notify-title\" [innerHTML]=\"safeMessage\"></div>\n    <div class=\"ngx-notify-description\" [innerHTML]=\"safeDescription\"></div>\n  </div>\n\n  @if (payload().options.dismissible) {\n    <div class=\"ngx-notify-close-container\">\n      <button class=\"ngx-notify-close\" (click)=\"close($event)\" aria-label=\"close\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            fill=\"currentColor\"\n            d=\"M315.3 411.3c-6.253 6.253-16.37 6.253-22.63 0L160 278.6l-132.7 132.7c-6.253 6.253-16.37 6.253-22.63 0c-6.253-6.253-6.253-16.37 0-22.63L137.4 256L4.69 123.3c-6.253-6.253-6.253-16.37 0-22.63c6.253-6.253 16.37-6.253 22.63 0L160 233.4l132.7-132.7c6.253-6.253 16.37-6.253 22.63 0c6.253 6.253 6.253 16.37 0 22.63L182.6 256l132.7 132.7C321.6 394.9 321.6 405.1 315.3 411.3z\" />\n        </svg>\n      </button>\n    </div>\n  }\n\n  <div class=\"ngx-notify-progress\">\n    <div class=\"progress-bar\" #bar></div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0;--ngx-notify-content-bg: light-dark(#ffffff, #262b35);--ngx-notify-content-fg: light-dark(#000, #fff)}.ngx-notify{display:flex;min-width:240px;min-width:min(500px,100dvw);max-width:100%;border-radius:8px;box-shadow:0 0 20px light-dark(#797979,rgba(2,2,2,.7411764706));opacity:0;transform:translateY(-8px);transition:opacity .28s ease,transform .28s ease;pointer-events:auto;overflow:hidden}.ngx-notify-icon-container{width:60px;min-width:60px;display:flex;align-items:center;justify-content:center}.ngx-notify-icon-container .ngx-notify-icon{padding:15px}.ngx-notify-icon-container .ngx-notify-icon svg{width:100%;height:100%}.ngx-notify-content{background-color:var(--ngx-notify-content-bg);color:var(--ngx-notify-content-fg);padding:15px;border-radius:0 0 0 15px;flex:auto}.ngx-notify-content .ngx-notify-title{font-size:1rem}.ngx-notify-content .ngx-notify-description{opacity:.8;font-size:.8rem}.ngx-show{opacity:1;transform:translateY(0)}.ngx-notify-info{background:#1cacff;--var-ngx-progress-bar-bg: #1cacff;color:#e8f3ff}.ngx-notify-success{background:#54c999;--var-ngx-progress-bar-bg: #54c999;color:#ebeceb}.ngx-notify-warning{background:#ffb242;--var-ngx-progress-bar-bg: #ffb242;color:#ffecec}.ngx-notify-error{background:#ff3c39;--var-ngx-progress-bar-bg: #ff3c39;color:#ffecec}.ngx-notify-close-container{background-color:var(--ngx-notify-content-bg);color:var(--ngx-notify-content-fg);display:flex;align-items:center;justify-content:center}.ngx-notify-close-container .ngx-notify-close{background:transparent;border:none;width:22px;height:22px;line-height:0;margin:0 5px;cursor:pointer;transform:rotate(0);transition:transform .4s}.ngx-notify-close-container .ngx-notify-close:hover{transform:rotate(90deg)}.ngx-notify-progress{position:absolute;bottom:0;height:4px;left:60px;right:0;overflow:hidden}.ngx-notify-progress .progress-bar{background-color:var(--var-ngx-progress-bar-bg);height:100%;transform:scaleX(0);transform-origin:left}:host-context([dir=rtl]) .ngx-notify-content{border-radius:0 0 15px}:host-context([dir=rtl]) .ngx-notify-progress{left:0;right:60px}:host-context([dir=rtl]) .ngx-notify-progress .progress-bar{transform-origin:right!important}\n"] }]
+            args: [{ selector: 'ngx-notification', imports: [CommonModule], template: "<div\n  class=\"{{ containerClass }} {{ containerClass }}-{{ payload().type }} {{ showClass() }}\"\n  role=\"status\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (click)=\"onTap()\"\n  [attr.aria-live]=\"\n    payload().type === 'error' || payload().type === 'warning' ? 'assertive' : 'polite'\n  \"\n  [attr.data-id]=\"payload().id\">\n  <div class=\"ngx-notify-icon-container\">\n    <div class=\"ngx-notify-icon\">\n      @switch (payload().type) {\n        @case ('success') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M235.3 331.3C229.1 337.6 218.9 337.6 212.7 331.3L148.7 267.3C142.4 261.1 142.4 250.9 148.7 244.7C154.9 238.4 165.1 238.4 171.3 244.7L224 297.4L340.7 180.7C346.9 174.4 357.1 174.4 363.3 180.7C369.6 186.9 369.6 197.1 363.3 203.3L235.3 331.3zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z\" />\n          </svg>\n        }\n        @case ('error') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M180.7 180.7C186.9 174.4 197.1 174.4 203.3 180.7L256 233.4L308.7 180.7C314.9 174.4 325.1 174.4 331.3 180.7C337.6 186.9 337.6 197.1 331.3 203.3L278.6 255.1L331.3 308.7C337.6 314.9 337.6 325.1 331.3 331.3C325.1 337.6 314.9 337.6 308.7 331.3L256 278.6L203.3 331.3C197.1 337.6 186.9 337.6 180.7 331.3C174.4 325.1 174.4 314.9 180.7 308.7L233.4 255.1L180.7 203.3C174.4 197.1 174.4 186.9 180.7 180.7V180.7zM.0669 191.5C.0669 172.4 7.652 154.1 21.16 140.6L140.6 21.15C154.1 7.648 172.4 .0625 191.5 .0625H320.5C339.6 .0625 357.9 7.648 371.4 21.15L490.8 140.6C504.3 154.1 511.9 172.4 511.9 191.5V320.5C511.9 339.6 504.3 357.9 490.8 371.4L371.4 490.8C357.9 504.3 339.6 511.9 320.5 511.9H191.5C172.4 511.9 154.1 504.3 140.6 490.8L21.15 371.4C7.652 357.9 .0666 339.6 .0666 320.5L.0669 191.5zM43.78 163.2C36.28 170.7 32.07 180.9 32.07 191.5V320.5C32.07 331.1 36.28 341.3 43.78 348.8L163.2 468.2C170.7 475.7 180.9 479.9 191.5 479.9H320.5C331.1 479.9 341.3 475.7 348.8 468.2L468.2 348.8C475.7 341.3 479.9 331.1 479.9 320.5V191.5C479.9 180.9 475.7 170.7 468.2 163.2L348.8 43.78C341.3 36.28 331.1 32.06 320.5 32.06H191.5C180.9 32.06 170.7 36.28 163.2 43.78L43.78 163.2zM43.78 348.8L21.15 371.4z\" />\n          </svg>\n        }\n        @case ('warning') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M256 360c-13.25 0-23.1 10.74-23.1 24c0 13.25 10.75 24 23.1 24c13.25 0 23.1-10.75 23.1-24C280 370.7 269.3 360 256 360zM256 320c8.843 0 15.1-7.156 15.1-16V160c0-8.844-7.155-16-15.1-16S240 151.2 240 160v144C240 312.8 247.2 320 256 320zM504.3 397.3L304.5 59.38C294.4 42.27 276.2 32.03 256 32C235.8 32 217.7 42.22 207.5 59.36l-199.9 338c-10.05 16.97-10.2 37.34-.4218 54.5C17.29 469.5 35.55 480 56.1 480h399.9c20.51 0 38.75-10.53 48.81-28.17C514.6 434.7 514.4 414.3 504.3 397.3zM476.1 435.1C472.7 443.5 464.8 448 455.1 448H56.1c-8.906 0-16.78-4.484-21.08-12c-4.078-7.156-4.015-15.3 .1562-22.36L235.1 75.66C239.4 68.36 247.2 64 256 64c0 0-.0156 0 0 0c8.765 .0156 16.56 4.359 20.86 11.64l199.9 338C480.1 420.7 481.1 428.8 476.1 435.1z\" />\n          </svg>\n        }\n        @case ('info') {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              fill=\"currentColor\"\n              d=\"M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 480c-123.5 0-224-100.5-224-224s100.5-224 224-224s224 100.5 224 224S379.5 480 256 480zM256 184c13.25 0 24-10.74 24-24c0-13.25-10.75-24-24-24S232 146.7 232 160C232 173.3 242.7 184 256 184zM304 352h-32V240C272 231.2 264.8 224 256 224H224C215.2 224 208 231.2 208 240S215.2 256 224 256h16v96h-32C199.2 352 192 359.2 192 368C192 376.8 199.2 384 208 384h96c8.836 0 16-7.164 16-16C320 359.2 312.8 352 304 352z\" />\n          </svg>\n        }\n      }\n    </div>\n  </div>\n\n  <div class=\"ngx-notify-content\">\n    <div class=\"ngx-notify-title\" [innerHTML]=\"safeMessage\"></div>\n    <div class=\"ngx-notify-description\" [innerHTML]=\"safeDescription\"></div>\n  </div>\n\n  @if (payload().options.dismissible) {\n    <div class=\"ngx-notify-close-container\">\n      <button class=\"ngx-notify-close\" (click)=\"close($event)\" aria-label=\"close\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n          <path\n            fill=\"currentColor\"\n            d=\"M315.3 411.3c-6.253 6.253-16.37 6.253-22.63 0L160 278.6l-132.7 132.7c-6.253 6.253-16.37 6.253-22.63 0c-6.253-6.253-6.253-16.37 0-22.63L137.4 256L4.69 123.3c-6.253-6.253-6.253-16.37 0-22.63c6.253-6.253 16.37-6.253 22.63 0L160 233.4l132.7-132.7c6.253-6.253 16.37-6.253 22.63 0c6.253 6.253 6.253 16.37 0 22.63L182.6 256l132.7 132.7C321.6 394.9 321.6 405.1 315.3 411.3z\" />\n        </svg>\n      </button>\n    </div>\n  }\n\n  <div class=\"ngx-notify-progress\">\n    <div class=\"progress-bar\" #bar></div>\n  </div>\n</div>\n", styles: [":host{display:block;margin:8px 0;--ngx-notify-content-bg: light-dark(#ffffff, #262b35);--ngx-notify-content-fg: light-dark(#000, #fff)}.ngx-notify{display:flex;min-width:240px;min-width:min(350px,100dvw);max-width:100%;border-radius:8px;box-shadow:0 0 20px light-dark(#797979,rgba(2,2,2,.7411764706));opacity:0;transform:translateY(-8px);transition:opacity .28s ease,transform .28s ease;pointer-events:auto;overflow:hidden}.ngx-notify-icon-container{width:60px;min-width:60px;display:flex;align-items:center;justify-content:center}.ngx-notify-icon-container .ngx-notify-icon{padding:15px}.ngx-notify-icon-container .ngx-notify-icon svg{width:100%;height:100%}.ngx-notify-content{background-color:var(--ngx-notify-content-bg);color:var(--ngx-notify-content-fg);padding:15px;border-radius:0 0 0 15px;flex:auto}.ngx-notify-content .ngx-notify-title{font-size:1rem}.ngx-notify-content .ngx-notify-description{opacity:.8;font-size:.8rem}.ngx-show{opacity:1;transform:translateY(0)}.ngx-notify-info{background:#1cacff;--var-ngx-progress-bar-bg: #1cacff;color:#e8f3ff}.ngx-notify-success{background:#54c999;--var-ngx-progress-bar-bg: #54c999;color:#ebeceb}.ngx-notify-warning{background:#ffb242;--var-ngx-progress-bar-bg: #ffb242;color:#ffecec}.ngx-notify-error{background:#ff3c39;--var-ngx-progress-bar-bg: #ff3c39;color:#ffecec}.ngx-notify-close-container{background-color:var(--ngx-notify-content-bg);color:var(--ngx-notify-content-fg);display:flex;align-items:center;justify-content:center}.ngx-notify-close-container .ngx-notify-close{background:transparent;border:none;width:22px;height:22px;line-height:0;margin:0 5px;cursor:pointer;transform:rotate(0);transition:transform .4s}.ngx-notify-close-container .ngx-notify-close:hover{transform:rotate(90deg)}.ngx-notify-progress{position:absolute;bottom:0;height:4px;left:60px;right:0;overflow:hidden}.ngx-notify-progress .progress-bar{background-color:var(--var-ngx-progress-bar-bg);height:100%;transform:scaleX(0);transform-origin:left}:host-context([dir=rtl]) .ngx-notify-content{border-radius:0 0 15px}:host-context([dir=rtl]) .ngx-notify-progress{left:0;right:60px}:host-context([dir=rtl]) .ngx-notify-progress .progress-bar{transform-origin:right!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { payload: [{ type: i0.Input, args: [{ isSignal: true, alias: "payload", required: true }] }], containerClass: [{
                 type: Input
             }], bar: [{ type: i0.ViewChild, args: ['bar', { isSignal: true }] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onFinish: [{ type: i0.Output, args: ["onFinish"] }] } });

package/fesm2022/ngx-kit-side-nav.mjs

@@ -84,6 +84,8 @@ class NgxSideNav {
         }
     }
     closeMenu() {
+        if (this.open() == false)
+            return;
         this.open.set(false);
         this.shouldShowOverlay.set(false);
     }

package/fesm2022/ngx-kit-side-nav.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngx-kit-side-nav.mjs","sources":["../../../projects/libs/side-nav/directives/drawer-menu.ts","../../../projects/libs/side-nav/components/side-nav/side-nav.ts","../../../projects/libs/side-nav/components/side-nav/side-nav.html","../../../projects/libs/side-nav/directives/drawer-menu-toggle.ts","../../../projects/libs/side-nav/ngx-side-nav.module.ts","../../../projects/libs/side-nav/ngx-kit-side-nav.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[ngxDrawerMenu]',\n})\nexport class NgxDrawerMenu {}\n","import { CommonModule } from '@angular/common';\nimport {\n  afterNextRender,\n  Component,\n  effect,\n  inject,\n  InjectionToken,\n  input,\n  model,\n  OnInit,\n  signal,\n  type OnDestroy,\n} from '@angular/core';\nimport { WINDOW } from 'ngx-kit/core';\nimport { NgxSideNavMode } from '../../contracts/mode';\n\nexport const NGX_SIDE_NAV = new InjectionToken<NgxSideNav>('NGX_SIDE_NAV');\n\n@Component({\n  selector: 'ngx-side-nav',\n  templateUrl: './side-nav.html',\n  styleUrls: ['./side-nav.scss'],\n  imports: [CommonModule],\n  host: {\n    '[style.--ngx-drawer-size.px]': 'width()',\n  },\n  providers: [\n    {\n      provide: NGX_SIDE_NAV,\n      useExisting: NgxSideNav,\n    },\n  ],\n})\nexport class NgxSideNav implements OnInit, OnDestroy {\n  readonly open = model<boolean>(true);\n  readonly width = input<number>(270);\n  readonly breakpoint = input<number | null>(null);\n  readonly mode = input<NgxSideNavMode>('push');\n  shouldShowOverlay = signal(false);\n\n  private mediaQuery?: MediaQueryList;\n  readonly isMatchMediaQuery = signal(false);\n  private removeMediaQueryListener?: () => void;\n\n  protected readonly win = inject(WINDOW);\n\n  constructor() {\n    afterNextRender(() => {\n      this.setupMediaQuery();\n    });\n  }\n\n  ngOnInit() {\n    this.initialize();\n  }\n\n  ngOnDestroy(): void {\n    this.removeMediaQueryListener?.();\n  }\n\n  initialize() {\n    if (!this.win) return;\n    const breakpoint = this.breakpoint() ?? 0;\n    if (breakpoint == 0) {\n      this.isMatchMediaQuery.set(true);\n      this.open.set(true);\n      return;\n    }\n\n    if (this.win.innerWidth <= breakpoint) {\n      this.isMatchMediaQuery.set(true);\n      this.open.set(false);\n    } else {\n      this.open.set(true);\n    }\n  }\n\n  setupMediaQuery() {\n    const breakpoint = this.breakpoint();\n    if (!this.win || !breakpoint) return;\n\n    this.mediaQuery = this.win.matchMedia(`(max-width: ${breakpoint - 0.02}px)`);\n    const listener = () => this.onResize();\n\n    this.mediaQuery.addEventListener('change', listener);\n    this.removeMediaQueryListener = () => this.mediaQuery?.removeEventListener('change', listener);\n  }\n  onResize() {\n    if (!this.mediaQuery) {\n      return;\n    }\n    this.isMatchMediaQuery.set(this.mediaQuery.matches);\n    this.open.set(!this.isMatchMediaQuery());\n  }\n\n  toggleMenu() {\n    if (this.open()) {\n      this.closeMenu();\n    } else {\n      this.openMenu();\n    }\n  }\n  closeMenu() {\n    this.open.set(false);\n    this.shouldShowOverlay.set(false);\n  }\n  openMenu() {\n    this.open.set(true);\n    if (this.mode() == 'overlay' && this.open() == true) {\n      this.shouldShowOverlay.set(true);\n    } else {\n      this.shouldShowOverlay.set(false);\n    }\n  }\n}\n","<div class=\"ngx-side-nav-container\"\n      [class.is-open]=\"open()\">\n  @if (shouldShowOverlay()) {\n    <div class=\"ngx-drawer-menu-overlay\" (click)=\"closeMenu()\"></div>\n  }\n\n  @if (open()) {\n    <div\n      class=\"ngx-drawer-menu\"\n      [class.overlay-mode]=\"mode() === 'overlay' && isMatchMediaQuery()\"\n      animate.enter=\"show-ngx-drawer-menu\"\n      animate.leave=\"hide-ngx-drawer-menu\">\n      <ng-content select=\"[ngxDrawerMenu]\" />\n    </div>\n  }\n\n  <div class=\"ngx-side-nav-content\">\n    <ng-content />\n  </div>\n</div>\n","import {\n  Directive,\n  effect,\n  HostListener,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\nimport { NGX_SIDE_NAV } from '../components/side-nav/side-nav';\n\n@Directive({\n  selector: '[ngxDrawerMenuToggle]',\n  host: {\n    '[style.display]': \"hide()?'none':''\",\n  },\n})\nexport class NgxDrawerMenuToggle {\n  readonly hideOnBreakPoint = input(false);\n\n  protected readonly sideNav = inject(NGX_SIDE_NAV);\n  hide = signal(true);\n\n  constructor() {\n    effect(() => {\n      const isMatch = this.sideNav.isMatchMediaQuery();\n      this.hide.set(this.hideOnBreakPoint() && !isMatch);\n    });\n  }\n\n  @HostListener('click')\n  protected onClick() {\n    this.sideNav.toggleMenu();\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { NgxDrawerMenu } from './directives/drawer-menu';\nimport { NgxDrawerMenuToggle } from './directives/drawer-menu-toggle';\nimport { NgxSideNav } from './components/side-nav/side-nav';\n\nconst d = [NgxDrawerMenu, NgxDrawerMenuToggle];\nconst c = [NgxSideNav];\n\n@NgModule({\n  imports: [...d, ...c],\n  exports: [...d, ...c],\n})\nexport class NgxSideNavModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngx-kit-side-nav.mjs","sources":["../../../projects/libs/side-nav/directives/drawer-menu.ts","../../../projects/libs/side-nav/components/side-nav/side-nav.ts","../../../projects/libs/side-nav/components/side-nav/side-nav.html","../../../projects/libs/side-nav/directives/drawer-menu-toggle.ts","../../../projects/libs/side-nav/ngx-side-nav.module.ts","../../../projects/libs/side-nav/ngx-kit-side-nav.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[ngxDrawerMenu]',\n})\nexport class NgxDrawerMenu {}\n","import { CommonModule } from '@angular/common';\nimport {\n  afterNextRender,\n  Component,\n  effect,\n  inject,\n  InjectionToken,\n  input,\n  model,\n  OnInit,\n  signal,\n  type OnDestroy,\n} from '@angular/core';\nimport { WINDOW } from 'ngx-kit/core';\nimport { NgxSideNavMode } from '../../contracts/mode';\n\nexport const NGX_SIDE_NAV = new InjectionToken<NgxSideNav>('NGX_SIDE_NAV');\n\n@Component({\n  selector: 'ngx-side-nav',\n  templateUrl: './side-nav.html',\n  styleUrls: ['./side-nav.scss'],\n  imports: [CommonModule],\n  host: {\n    '[style.--ngx-drawer-size.px]': 'width()',\n  },\n  providers: [\n    {\n      provide: NGX_SIDE_NAV,\n      useExisting: NgxSideNav,\n    },\n  ],\n})\nexport class NgxSideNav implements OnInit, OnDestroy {\n  readonly open = model<boolean>(true);\n  readonly width = input<number>(270);\n  readonly breakpoint = input<number | null>(null);\n  readonly mode = input<NgxSideNavMode>('push');\n  readonly shouldShowOverlay = signal(false);\n\n  private mediaQuery?: MediaQueryList;\n  readonly isMatchMediaQuery = signal(false);\n  private removeMediaQueryListener?: () => void;\n\n  protected readonly win = inject(WINDOW);\n\n  constructor() {\n    afterNextRender(() => {\n      this.setupMediaQuery();\n    });\n  }\n\n  ngOnInit() {\n    this.initialize();\n  }\n\n  ngOnDestroy(): void {\n    this.removeMediaQueryListener?.();\n  }\n\n  initialize() {\n    if (!this.win) return;\n    const breakpoint = this.breakpoint() ?? 0;\n    if (breakpoint == 0) {\n      this.isMatchMediaQuery.set(true);\n      this.open.set(true);\n      return;\n    }\n\n    if (this.win.innerWidth <= breakpoint) {\n      this.isMatchMediaQuery.set(true);\n      this.open.set(false);\n    } else {\n      this.open.set(true);\n    }\n  }\n\n  setupMediaQuery() {\n    const breakpoint = this.breakpoint();\n    if (!this.win || !breakpoint) return;\n\n    this.mediaQuery = this.win.matchMedia(`(max-width: ${breakpoint - 0.02}px)`);\n    const listener = () => this.onResize();\n\n    this.mediaQuery.addEventListener('change', listener);\n    this.removeMediaQueryListener = () => this.mediaQuery?.removeEventListener('change', listener);\n  }\n  onResize() {\n    if (!this.mediaQuery) {\n      return;\n    }\n    this.isMatchMediaQuery.set(this.mediaQuery.matches);\n    this.open.set(!this.isMatchMediaQuery());\n  }\n\n  toggleMenu() {\n    if (this.open()) {\n      this.closeMenu();\n    } else {\n      this.openMenu();\n    }\n  }\n  closeMenu() {\n    if (this.open() == false) return;\n    this.open.set(false);\n    this.shouldShowOverlay.set(false);\n  }\n  openMenu() {\n    this.open.set(true);\n    if (this.mode() == 'overlay' && this.open() == true) {\n      this.shouldShowOverlay.set(true);\n    } else {\n      this.shouldShowOverlay.set(false);\n    }\n  }\n}\n","<div class=\"ngx-side-nav-container\"\n      [class.is-open]=\"open()\">\n  @if (shouldShowOverlay()) {\n    <div class=\"ngx-drawer-menu-overlay\" (click)=\"closeMenu()\"></div>\n  }\n\n  @if (open()) {\n    <div\n      class=\"ngx-drawer-menu\"\n      [class.overlay-mode]=\"mode() === 'overlay' && isMatchMediaQuery()\"\n      animate.enter=\"show-ngx-drawer-menu\"\n      animate.leave=\"hide-ngx-drawer-menu\">\n      <ng-content select=\"[ngxDrawerMenu]\" />\n    </div>\n  }\n\n  <div class=\"ngx-side-nav-content\">\n    <ng-content />\n  </div>\n</div>\n","import {\n  Directive,\n  effect,\n  HostListener,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\nimport { NGX_SIDE_NAV } from '../components/side-nav/side-nav';\n\n@Directive({\n  selector: '[ngxDrawerMenuToggle]',\n  host: {\n    '[style.display]': \"hide()?'none':''\",\n  },\n})\nexport class NgxDrawerMenuToggle {\n  readonly hideOnBreakPoint = input(false);\n\n  protected readonly sideNav = inject(NGX_SIDE_NAV);\n  hide = signal(true);\n\n  constructor() {\n    effect(() => {\n      const isMatch = this.sideNav.isMatchMediaQuery();\n      this.hide.set(this.hideOnBreakPoint() && !isMatch);\n    });\n  }\n\n  @HostListener('click')\n  protected onClick() {\n    this.sideNav.toggleMenu();\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { NgxDrawerMenu } from './directives/drawer-menu';\nimport { NgxDrawerMenuToggle } from './directives/drawer-menu-toggle';\nimport { NgxSideNav } from './components/side-nav/side-nav';\n\nconst d = [NgxDrawerMenu, NgxDrawerMenuToggle];\nconst c = [NgxSideNav];\n\n@NgModule({\n  imports: [...d, ...c],\n  exports: [...d, ...c],\n})\nexport class NgxSideNavModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-kit",
-  "version": "9.1.0",
+  "version": "9.2.0",
   "description": "Angular input components",
   "author": "Mohammadreza Samani <mr.samani1368@gmail.com>",
   "license": "MIT",

package/types/ngx-kit-drag-resize.d.ts

@@ -60,6 +60,14 @@ declare class DropListRef<T = any> {
     dropListGroup?: DropListGroupRef | null;
     /** Duration (ms) of the sibling slide animation. `0` disables animation. */
     sortAnimationDuration: number;
+    /**
+     * How the auto-generated placeholder is sized.
+     *  - `'item'` (default): exactly the dragged item's footprint.
+     *  - `'stretch'`: only the MAIN axis follows the item; the cross axis fills the list. This is
+     *    what a page-builder canvas wants when a small palette tile is dragged into a full-width
+     *    column of blocks (the tile's own width means nothing there).
+     */
+    placeholderFit: 'item' | 'stretch';
     readonly _draggables: Set<DragRef<T>>;
     readonly onDrop: EventEmitter<IDropEvent<T>>;
     /**
@@ -284,6 +292,14 @@ declare class DragRef<T = unknown> {
     private lastEffective;
     private scrollListener?;
     private resizeListener?;
+    /**
+     * Every document that hosts a candidate list (the source document, plus any same-origin iframe
+     * such as a page-builder canvas) needs its own scroll/resize listeners: `scroll` does not cross
+     * the iframe boundary, so scrolling the canvas never reaches a listener on the parent page.
+     */
+    private readonly documentListeners;
+    /** viewport → local matrix of the dragged element, computed once per free drag. */
+    private freeDragInverse;
     init(): void;
     withDropList(list: DropListRef<T> | null): this;
     clearDropList(): void;
@@ -312,6 +328,11 @@ declare class DragRef<T = unknown> {
     notifyScroll(dx: number, dy: number): void;
     private applyTransform;
     private beginListDrag;
+    /**
+     * Keeps scroll/resize listeners attached to every document that currently hosts a candidate
+     * list. Capture: `scroll` does not bubble, and any ancestor (or the page) may be scrolling.
+     */
+    private syncDocumentListeners;
     /**
      * Recomputes which registered lists are valid targets for this drag — connected to the
      * origin, and not nested inside the element being dragged — plus each one's nesting depth.
@@ -394,6 +415,17 @@ declare class NgxDraggable<T = unknown> implements OnInit, OnDestroy, AfterConte
     readonly keyboardStep: _angular_core.InputSignal<number>;
     /** Auto-scroll the nearest scrollable ancestor while dragging near its edge. */
     readonly autoScroll: _angular_core.InputSignal<boolean>;
+    /**
+     * Presses that start inside an element matching this selector never start a drag (the element
+     * stays fully usable: text caret, clicks, selection). Handy for editable regions of a block.
+     */
+    readonly noDragSelector: _angular_core.InputSignal<string>;
+    /**
+     * When `true`, presses on native interactive controls (`button, a, input, textarea, select`,
+     * `[contenteditable]`) do not start a drag either. Off by default so that a page-builder canvas
+     * block can be grabbed by its own button/link, which is exactly what you want while editing.
+     */
+    readonly ignoreInteractive: _angular_core.InputSignal<boolean>;
     set data(v: T);
     private readonly customPreview?;
     readonly dragStart: _angular_core.OutputEmitterRef<IPosition>;
@@ -419,6 +451,8 @@ declare class NgxDraggable<T = unknown> implements OnInit, OnDestroy, AfterConte
     private lastWindowScroll;
     private removeContainerScroll?;
     private removeWindowScroll?;
+    private removeDocKeydown?;
+    private keyboardDrag;
     protected readonly renderer: Renderer2;
     constructor(host: ElementRef<HTMLElement>);
     ngOnInit(): void;
@@ -435,14 +469,27 @@ declare class NgxDraggable<T = unknown> implements OnInit, OnDestroy, AfterConte
     private pointerUp;
     /** Browser cancelled the pointer (touch takeover, lost capture...). */
     private pointerCancel;
+    private releaseCapture;
     private cancel;
     private finish;
+    /** Keys already processed (the host listener and the document listener may both see one). */
+    private readonly handledKeys;
     /** Arrow-key movement for keyboard/assistive-tech users. Shift multiplies the step by 4. */
     private keyDown;
+    /**
+     * A list item is `display:none` while it is being moved, so the browser drops its focus and
+     * the following arrow/Enter/Escape presses would go to <body>. Listen on the document for the
+     * duration of a keyboard drag so the gesture keeps working.
+     */
+    private beginKeyboardSession;
+    private restoreFocus;
+    /** Swallow the single `click` the browser dispatches right after a completed drag. */
+    private swallowNextClick;
     private isOnHandle;
-    private isInteractive;
+    /** Should a press on `target` be left alone (no drag)? */
+    private isExcluded;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDraggable<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgxDraggable<any>, "[NgxDraggable],[ngxDraggable]", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "boundary": { "alias": "boundary"; "required": false; "isSignal": true; }; "dragRootElement": { "alias": "dragRootElement"; "required": false; "isSignal": true; }; "dragHandle": { "alias": "dragHandle"; "required": false; "isSignal": true; }; "lockAxis": { "alias": "lockAxis"; "required": false; "isSignal": true; }; "dragThreshold": { "alias": "dragThreshold"; "required": false; "isSignal": true; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; "isSignal": true; }; "autoScroll": { "alias": "autoScroll"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; }; }, { "disabled": "disabledChange"; "dragRootElement": "dragRootElementChange"; "dragHandle": "dragHandleChange"; "dragStart": "dragStart"; "dragMove": "dragMove"; "dragEnd": "dragEnd"; }, ["customPreview"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgxDraggable<any>, "[NgxDraggable],[ngxDraggable]", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "boundary": { "alias": "boundary"; "required": false; "isSignal": true; }; "dragRootElement": { "alias": "dragRootElement"; "required": false; "isSignal": true; }; "dragHandle": { "alias": "dragHandle"; "required": false; "isSignal": true; }; "lockAxis": { "alias": "lockAxis"; "required": false; "isSignal": true; }; "dragThreshold": { "alias": "dragThreshold"; "required": false; "isSignal": true; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; "isSignal": true; }; "autoScroll": { "alias": "autoScroll"; "required": false; "isSignal": true; }; "noDragSelector": { "alias": "noDragSelector"; "required": false; "isSignal": true; }; "ignoreInteractive": { "alias": "ignoreInteractive"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; }; }, { "disabled": "disabledChange"; "dragRootElement": "dragRootElementChange"; "dragHandle": "dragHandleChange"; "dragStart": "dragStart"; "dragMove": "dragMove"; "dragEnd": "dragEnd"; }, ["customPreview"], never, true, never>;
 }
 
 declare class NgxResizable implements OnDestroy {
@@ -488,6 +535,14 @@ declare class NgxResizable implements OnDestroy {
     onHandleKeyDown(e: KeyboardEvent): void;
     private calculate;
     private apply;
+    /**
+     * `offsetWidth/Height` (what we measure and report) are BORDER-box sizes. The inline
+     * `width/height` we write are interpreted according to `box-sizing`: for the CSS default
+     * (`content-box`) writing the border-box number would make a padded/bordered block jump by
+     * its padding+border the instant a resize starts. Convert so the box is exactly the size
+     * reported in `IResizableOutput`.
+     */
+    private toStyleSize;
     private clampGrid;
     private finish;
     private resolvedDirections;
@@ -503,6 +558,9 @@ declare class NgxDropList<T = any> implements OnInit, OnDestroy, AfterContentIni
     set data(value: T);
     set connectedTo(value: HTMLElement[] | null | undefined);
     set disableSort(value: boolean);
+    /** `'stretch'`: the placeholder only copies the item's size along the list's main axis. */
+    set placeholderFit(value: 'item' | 'stretch' | null | undefined);
+    set sortAnimationDuration(value: number | null | undefined);
     readonly drop: EventEmitter<IDropEvent<T>>;
     private readonly customPlaceholder?;
     private sub?;
@@ -512,7 +570,7 @@ declare class NgxDropList<T = any> implements OnInit, OnDestroy, AfterContentIni
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDropList<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgxDropList<any>, "[NgxDropList],[ngxDropList]", never, { "data": { "alias": "data"; "required": false; }; "connectedTo": { "alias": "connectedTo"; "required": false; }; "disableSort": { "alias": "disableSort"; "required": false; }; }, { "drop": "drop"; }, ["customPlaceholder"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgxDropList<any>, "[NgxDropList],[ngxDropList]", never, { "data": { "alias": "data"; "required": false; }; "connectedTo": { "alias": "connectedTo"; "required": false; }; "disableSort": { "alias": "disableSort"; "required": false; }; "placeholderFit": { "alias": "placeholderFit"; "required": false; }; "sortAnimationDuration": { "alias": "sortAnimationDuration"; "required": false; }; }, { "drop": "drop"; }, ["customPlaceholder"], never, true, never>;
 }
 
 declare const NGX_DROPLIST_GROUP: InjectionToken<NgxDropListGroup>;
@@ -618,6 +676,8 @@ declare class AutoScroller {
     private raf;
     private container;
     private win?;
+    /** Document the pointer coordinates (`update(x, y)`) are expressed in. */
+    private pointerDoc?;
     private speed;
     private onTick?;
     private readonly edge;
@@ -650,5 +710,26 @@ declare function transferArrayItem<T>(src: T[], dst: T[], from: number, to: numb
  */
 declare function copyArrayItem<T = any>(currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number): void;
 
-export { AutoScroller, DragDropService, DragRef, DropListGroupRef, DropListRef, NGX_DRAGGABLE, NGX_DRAG_PREVIEW, NGX_DROPLIST, NGX_DROPLIST_GROUP, NGX_PLACEHOLDER, NgxDragPreview, NgxDraggable, NgxDropList, NgxDropListGroup, NgxPlaceholder, NgxResizable, PlaceHolderRef, adjustForZoom, checkBoundX, checkBoundY, clampResizeWithinBoundary, copyArrayItem, findScrollableAncestor, getPageZoom, getScrollPosition, isRtl, moveItemInArray, resolveLogicalDirection, transferArrayItem };
-export type { DragAxis, IDropEvent, IPosition, IResizableOutput, LogicalResizeDirection, ResizeDirection };
+/**
+ * Helpers for a page builder's "export HTML" step.
+ *
+ * While you edit, the directives decorate the canvas DOM: `ngx-*` classes, `tabindex="0"`,
+ * `aria-grabbed`, `touch-action: none`, and — if an export happens mid-drag — a placeholder or a
+ * preview clone. None of that belongs in the page a visitor receives. Run the canvas through
+ * `getCleanHtml()` (or `stripEditorArtifacts()` on a clone you already have) before saving.
+ */
+interface StripOptions {
+    /** Class-name prefix treated as editor-only. Default `ngx-`. */
+    classPrefix?: string;
+    /** Extra class names to drop (besides the prefix match and `disable-drag`). */
+    extraClasses?: string[];
+    /** Extra attributes to drop from every element. */
+    extraAttributes?: string[];
+}
+/** Mutates `root` (and its subtree) in place. Pass a CLONE of live DOM, never the live canvas. */
+declare function stripEditorArtifacts(root: Element, options?: StripOptions): void;
+/** Serialised, editor-free HTML of `el`'s children (the canvas content). */
+declare function getCleanHtml(el: Element, options?: StripOptions): string;
+
+export { AutoScroller, DragDropService, DragRef, DropListGroupRef, DropListRef, NGX_DRAGGABLE, NGX_DRAG_PREVIEW, NGX_DROPLIST, NGX_DROPLIST_GROUP, NGX_PLACEHOLDER, NgxDragPreview, NgxDraggable, NgxDropList, NgxDropListGroup, NgxPlaceholder, NgxResizable, PlaceHolderRef, adjustForZoom, checkBoundX, checkBoundY, clampResizeWithinBoundary, copyArrayItem, findScrollableAncestor, getCleanHtml, getPageZoom, getScrollPosition, isRtl, moveItemInArray, resolveLogicalDirection, stripEditorArtifacts, transferArrayItem };
+export type { DragAxis, IDropEvent, IPosition, IResizableOutput, LogicalResizeDirection, ResizeDirection, StripOptions };

package/types/ngx-kit-image-viewer.d.ts

@@ -21,27 +21,6 @@ interface NgxImageViewerToolbarConfig {
 }
 declare const NGX_IMAGE_VIEWER_DEFAULT_TOOLBAR: Required<NgxImageViewerToolbarConfig>;
 
-/**
- * ویوئر حرفه‌ایِ تصویر: یه لیست تصویر می‌گیره، اولی رو نشون می‌ده، با
- * دکمه‌های چپ/راست (مثل کاروسل) بین‌شون می‌ره، و یه نوار ابزار کاملاً
- * قابل‌تنظیم (هر دکمه جدا فعال/غیرفعال می‌شه) داره: زوم این/اوت/ریست،
- * چرخش، دانلود، پرینت، تمام‌صفحه.
- *
- * تعامل‌ها:
- *  - اسکرول موس روی تصویر = زوم (نسبت به همون نقطه‌ی زیر cursor، نه مرکز)
- *  - دو انگشتی روی تاچ = پینچ زوم
- *  - وقتی زوم‌شده، درگ با موس یا تک‌انگشتی = پن
- *  - کیبورد: ← → برای قبلی/بعدی، +/- برای زوم، Esc برای closed
- *
- * چون wheel/touchmove باید preventDefault بشن (وگرنه صفحه اسکرول/زوم
- * می‌شه) و انگیولار این ایونت‌ها رو به‌صورت پیش‌فرض passive رجیستر می‌کنه
- * (که توش preventDefault اثر نداره)، این‌ها با addEventListener دستی و
- * {passive:false} وصل می‌شن، نه با بایندینگ تمپلیت.
- *
- * می‌تونه هم مستقیم توی صفحه جا بگیره، هم توسط مصرف‌کننده داخل
- * ngx-kit/dialog (یا هر overlay دیگه) قرار بگیره — خودش به هیچ‌کدوم وابسته
- * نیست، فقط با closed خروجی به بیرون خبر می‌ده که «ببندم».
- */
 declare class NgxImageViewer {
     images: _angular_core.InputSignal<NgxImageViewerItem[]>;
     startIndex: _angular_core.InputSignal<number>;

package/types/ngx-kit-side-nav.d.ts

@@ -25,7 +25,7 @@ declare class NgxSideNav implements OnInit, OnDestroy {
     readonly width: i0.InputSignal<number>;
     readonly breakpoint: i0.InputSignal<number | null>;
     readonly mode: i0.InputSignal<NgxSideNavMode>;
-    shouldShowOverlay: i0.WritableSignal<boolean>;
+    readonly shouldShowOverlay: i0.WritableSignal<boolean>;
     private mediaQuery?;
     readonly isMatchMediaQuery: i0.WritableSignal<boolean>;
     private removeMediaQueryListener?;