@filip.mazev/blocks 1.4.3 → 1.4.4
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.
- package/README.md +1 -1
- package/_index.scss +1 -1
- package/core/styles/_field-state.scss +16 -4
- package/core/styles/_index.scss +0 -1
- package/core/styles/_mixins.scss +2 -2
- package/core/styles/_motion.scss +1 -1
- package/core/styles/_palettes.scss +127 -132
- package/core/styles/_slider.scss +158 -40
- package/core/styles/_theme-engine.scss +43 -63
- package/core/styles/_utilities.scss +3 -4
- package/core/styles/_validation.scss +6 -1
- package/core/styles/_variables.scss +24 -14
- package/core/styles/themes/_cyberpunk-theme.scss +1 -1
- package/core/styles/themes/_green-theme.scss +1 -1
- package/core/styles/themes/_high-contrast-theme.scss +152 -133
- package/core/styles/themes/_orange-theme.scss +1 -1
- package/core/styles/themes/_purple-theme.scss +1 -1
- package/core/styles/themes/_red-theme.scss +1 -1
- package/core/styles/themes/_white-theme.scss +26 -20
- package/effects/README.md +5 -9
- package/effects/effects.css +200 -121
- package/effects/runtime/README.md +19 -11
- package/fesm2022/filip.mazev-blocks-core.mjs +27 -22
- package/fesm2022/filip.mazev-blocks-core.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-effects-runtime.mjs +887 -67
- package/fesm2022/filip.mazev-blocks-effects-runtime.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-effects.mjs +8 -48
- package/fesm2022/filip.mazev-blocks-effects.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-forms.mjs +65 -61
- package/fesm2022/filip.mazev-blocks-forms.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-modal.mjs +29 -32
- package/fesm2022/filip.mazev-blocks-modal.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-navigation.mjs +35 -1
- package/fesm2022/filip.mazev-blocks-navigation.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-primitives.mjs +106 -32
- package/fesm2022/filip.mazev-blocks-primitives.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks-toastr.mjs +5 -7
- package/fesm2022/filip.mazev-blocks-toastr.mjs.map +1 -1
- package/fesm2022/filip.mazev-blocks.mjs +1 -1
- package/fesm2022/filip.mazev-blocks.mjs.map +1 -1
- package/navigation/README.md +44 -0
- package/package.json +1 -1
- package/schematics/ng-add/index.js +4 -1
- package/types/filip.mazev-blocks-core.d.ts +3 -4
- package/types/filip.mazev-blocks-effects-runtime.d.ts +10 -8
- package/types/filip.mazev-blocks-effects.d.ts +5 -17
- package/types/filip.mazev-blocks-forms.d.ts +13 -11
- package/types/filip.mazev-blocks-modal.d.ts +1 -0
- package/types/filip.mazev-blocks-navigation.d.ts +21 -5
- package/types/filip.mazev-blocks-primitives.d.ts +10 -0
- package/types/filip.mazev-blocks-toastr.d.ts +4 -4
- package/types/filip.mazev-blocks.d.ts +1 -1
|
@@ -396,8 +396,8 @@ var ModalBackdrop = class ModalBackdrop {
|
|
|
396
396
|
},
|
|
397
397
|
outputs: { click: "click" },
|
|
398
398
|
ngImport: i0,
|
|
399
|
-
template: "<
|
|
400
|
-
styles: [".modal-backdrop{position:fixed;inset:0;z-index:400;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:#00000040;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased
|
|
399
|
+
template: "<button type=\"button\" class=\"modal-backdrop\" aria-label=\"Close dialog\" [class.backdrop-fade-in]=\"isAnimated() && isOpen()\"\n [class.backdrop-fade-out]=\"isAnimated() && !isOpen()\" (click)=\"click.emit($event)\"></button>\n",
|
|
400
|
+
styles: [".modal-backdrop{padding:0;border:0;appearance:none;cursor:pointer;position:fixed;inset:0;z-index:400;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:#00000040;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased;transform-style:preserve-3d;transform-origin:center}.modal-backdrop{background:#00000052;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.modal-backdrop{background:#00000080}}@media(prefers-reduced-transparency:reduce),(forced-colors:active){.modal-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0009}}:host-context([data-bx-reduced-transparency=true]) .modal-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0009}\n"],
|
|
401
401
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
402
402
|
});
|
|
403
403
|
};
|
|
@@ -412,8 +412,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
412
412
|
selector: "bx-modal-backdrop",
|
|
413
413
|
imports: [],
|
|
414
414
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
415
|
-
template: "<
|
|
416
|
-
styles: [".modal-backdrop{position:fixed;inset:0;z-index:400;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:#00000040;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased
|
|
415
|
+
template: "<button type=\"button\" class=\"modal-backdrop\" aria-label=\"Close dialog\" [class.backdrop-fade-in]=\"isAnimated() && isOpen()\"\n [class.backdrop-fade-out]=\"isAnimated() && !isOpen()\" (click)=\"click.emit($event)\"></button>\n",
|
|
416
|
+
styles: [".modal-backdrop{padding:0;border:0;appearance:none;cursor:pointer;position:fixed;inset:0;z-index:400;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:#00000040;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased;transform-style:preserve-3d;transform-origin:center}.modal-backdrop{background:#00000052;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.modal-backdrop{background:#00000080}}@media(prefers-reduced-transparency:reduce),(forced-colors:active){.modal-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0009}}:host-context([data-bx-reduced-transparency=true]) .modal-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0009}\n"]
|
|
417
417
|
}]
|
|
418
418
|
}],
|
|
419
419
|
propDecorators: {
|
|
@@ -483,8 +483,8 @@ var ModalBanner = class ModalBanner {
|
|
|
483
483
|
},
|
|
484
484
|
outputs: { close: "close" },
|
|
485
485
|
ngImport: i0,
|
|
486
|
-
template: "<div class=\"modal-top-banner-container\">\n @let headerData = header();\n @if(headerData) {\n <div class=\"modal-top-banner-title-container\">\n @if(headerData.icon) {\n <bx-icon [name]=\"headerData.icon.name\" [size]=\"headerData.icon.size ?? '24'\" [color]=\"headerData.icon.color\"\n [bgColor]=\"headerData.icon.bgColor\" [strokeWidth]=\"headerData.icon.strokeWidth\" />\n }\n @if (resolvedText()) {\n {{ resolvedText() }}\n }\n </div>\n }\n\n @if(showCloseButton()) {\n <button type=\"button\" class=\"bx-modal-close\" aria-label=\"Close dialog\" (click)=\"close.emit('cancel')\"><bx-icon name=\"x\" /></button>\n }\n</div
|
|
487
|
-
styles: [".modal-top-banner-container{display:flex;flex-direction:row;gap:2rem;justify-content:space-between;align-items:flex-start;color:var(--bx-modal-text, var(--bx-text-primary));top:0;min-height:2rem;padding-bottom:1rem;border-bottom:1px solid var(--bx-border-default)}.modal-top-banner-title-container{display:flex;flex-direction:row;justify-content:flex-start;gap:1rem;align-items:center;width:100%;font-weight:700;font-size:1.25rem}@keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}
|
|
486
|
+
template: "<div class=\"modal-top-banner-container\">\n @let headerData = header();\n @if(headerData) {\n <div class=\"modal-top-banner-title-container\">\n @if(headerData.icon) {\n <bx-icon [name]=\"headerData.icon.name\" [size]=\"headerData.icon.size ?? '24'\" [color]=\"headerData.icon.color\"\n [bgColor]=\"headerData.icon.bgColor\" [strokeWidth]=\"headerData.icon.strokeWidth\" />\n }\n @if (resolvedText()) {\n {{ resolvedText() }}\n }\n </div>\n }\n\n @if(showCloseButton()) {\n <button type=\"button\" class=\"bx-modal-close\" aria-label=\"Close dialog\" (click)=\"close.emit('cancel')\"><bx-icon name=\"x\" /></button>\n }\n</div>\n",
|
|
487
|
+
styles: [".modal-top-banner-container{display:flex;flex-direction:row;gap:2rem;justify-content:space-between;align-items:flex-start;color:var(--bx-modal-text, var(--bx-text-primary));top:0;min-height:2rem;padding-bottom:1rem;border-bottom:1px solid var(--bx-border-default)}.modal-top-banner-title-container{display:flex;flex-direction:row;justify-content:flex-start;gap:1rem;align-items:center;width:100%;font-weight:700;font-size:1.25rem}@keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}.bx-modal-close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--bx-rounded-sm, radius(sm));background:transparent;color:inherit;cursor:pointer}.bx-modal-close:hover{background:var(--bx-bg-element-hover)}.bx-modal-close:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:2px}\n"],
|
|
488
488
|
dependencies: [{
|
|
489
489
|
kind: "component",
|
|
490
490
|
type: Icon,
|
|
@@ -513,8 +513,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
513
513
|
selector: "bx-modal-banner",
|
|
514
514
|
imports: [Icon],
|
|
515
515
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
516
|
-
template: "<div class=\"modal-top-banner-container\">\n @let headerData = header();\n @if(headerData) {\n <div class=\"modal-top-banner-title-container\">\n @if(headerData.icon) {\n <bx-icon [name]=\"headerData.icon.name\" [size]=\"headerData.icon.size ?? '24'\" [color]=\"headerData.icon.color\"\n [bgColor]=\"headerData.icon.bgColor\" [strokeWidth]=\"headerData.icon.strokeWidth\" />\n }\n @if (resolvedText()) {\n {{ resolvedText() }}\n }\n </div>\n }\n\n @if(showCloseButton()) {\n <button type=\"button\" class=\"bx-modal-close\" aria-label=\"Close dialog\" (click)=\"close.emit('cancel')\"><bx-icon name=\"x\" /></button>\n }\n</div
|
|
517
|
-
styles: [".modal-top-banner-container{display:flex;flex-direction:row;gap:2rem;justify-content:space-between;align-items:flex-start;color:var(--bx-modal-text, var(--bx-text-primary));top:0;min-height:2rem;padding-bottom:1rem;border-bottom:1px solid var(--bx-border-default)}.modal-top-banner-title-container{display:flex;flex-direction:row;justify-content:flex-start;gap:1rem;align-items:center;width:100%;font-weight:700;font-size:1.25rem}@keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}
|
|
516
|
+
template: "<div class=\"modal-top-banner-container\">\n @let headerData = header();\n @if(headerData) {\n <div class=\"modal-top-banner-title-container\">\n @if(headerData.icon) {\n <bx-icon [name]=\"headerData.icon.name\" [size]=\"headerData.icon.size ?? '24'\" [color]=\"headerData.icon.color\"\n [bgColor]=\"headerData.icon.bgColor\" [strokeWidth]=\"headerData.icon.strokeWidth\" />\n }\n @if (resolvedText()) {\n {{ resolvedText() }}\n }\n </div>\n }\n\n @if(showCloseButton()) {\n <button type=\"button\" class=\"bx-modal-close\" aria-label=\"Close dialog\" (click)=\"close.emit('cancel')\"><bx-icon name=\"x\" /></button>\n }\n</div>\n",
|
|
517
|
+
styles: [".modal-top-banner-container{display:flex;flex-direction:row;gap:2rem;justify-content:space-between;align-items:flex-start;color:var(--bx-modal-text, var(--bx-text-primary));top:0;min-height:2rem;padding-bottom:1rem;border-bottom:1px solid var(--bx-border-default)}.modal-top-banner-title-container{display:flex;flex-direction:row;justify-content:flex-start;gap:1rem;align-items:center;width:100%;font-weight:700;font-size:1.25rem}@keyframes banner-display{0%{opacity:0;height:0}to{opacity:1;height:auto}}.bx-modal-close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--bx-rounded-sm, radius(sm));background:transparent;color:inherit;cursor:pointer}.bx-modal-close:hover{background:var(--bx-bg-element-hover)}.bx-modal-close:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:2px}\n"]
|
|
518
518
|
}]
|
|
519
519
|
}],
|
|
520
520
|
propDecorators: {
|
|
@@ -575,6 +575,9 @@ var ModalBottomSheet = class ModalBottomSheet {
|
|
|
575
575
|
this.stopVerticalSwipeDetection();
|
|
576
576
|
this.globalResizeCleanup?.();
|
|
577
577
|
}
|
|
578
|
+
onDismissClick(event) {
|
|
579
|
+
if (!this.isTrackingSwipe || event.detail === 0) this.close.emit("cancel");
|
|
580
|
+
}
|
|
578
581
|
startVerticalSwipeDetection() {
|
|
579
582
|
if (this.isTrackingSwipe) return;
|
|
580
583
|
if (!(typeof window !== "undefined" && (window.matchMedia("(pointer: coarse)").matches || navigator.maxTouchPoints > 0))) return;
|
|
@@ -738,18 +741,16 @@ var ModalBottomSheet = class ModalBottomSheet {
|
|
|
738
741
|
static: true
|
|
739
742
|
}],
|
|
740
743
|
ngImport: i0,
|
|
741
|
-
template: "<div\n bxSurface\n data-bx-light-scope\n
|
|
742
|
-
styles: [".bottom-sheet-modal-style{position:fixed;z-index:400;min-height:60vh;min-height:60dvh;max-height:98vh;max-height:98dvh;width:100vw;width:100dvw;min-width:100vw;max-width:100dvw;bottom:0;left:0;margin:0 auto;border-radius:1.875rem 1.875rem 0 0;background-color:var(--bx-modal-bg, var(--bx-bg-surface));color:var(--bx-modal-text, var(--bx-text-primary));display:flex;flex-direction:column}.touch-hitbox{display:flex;flex-direction:row;width:100%;height:3.5rem;justify-content:center;align-items:center;padding-bottom:.5rem;margin-top:-1.5rem;flex-shrink:0}.swipe-line{width:7rem;height:.33rem;background-color:var(--bx-modal-mobile-swipe-line-color, var(--bx-border-default));border-radius:9999px;margin-top:1.5rem;opacity:.215;cursor:pointer}.bottom-sheet-modal-inner-content-container{display:flex;flex-direction:column;flex:1;min-height:0;padding:0 1.25rem 1.5rem;gap:1.5rem;box-sizing:border-box;overflow:hidden}.bottom-sheet-modal-top-group{display:flex;flex-direction:column;gap:1rem;flex-grow:1;min-height:0}.bottom-sheet-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;padding:0}.opened-bottom-sheet-modal{animation:opened-bottom-sheet-modal-anim .35s}.bottom-sheet-modal-top-bar{display:flex;justify-content:center}.bottom-sheet-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:flex-start;padding-top:.5rem;gap:.5rem}.bottom-sheet-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:center;gap:.5rem}
|
|
744
|
+
template: "<div\n bxSurface\n data-bx-light-scope\n [id]=\"id() ?? ''\"\n [class]=\"config()?.style?.wrapperClasses ?? ''\"\n [style]=\"config()?.style?.wrapperStyles ?? ''\"\n [style.max-height]=\"config()?.style?.mobileConfig?.customHeight ?? ''\"\n [style.transform]=\"modalTransform()\"\n [style.transition]=\"isAnimated() && !isSwipingVertically() ? 'transform 300ms ease-in-out' : ''\"\n [ngClass]=\"{\n 'opened-bottom-sheet-modal': isAnimated(),\n }\"\n #elementRef\n class=\"bottom-sheet-modal-style\"\n>\n <button\n #verticalSwipeTarget\n type=\"button\"\n aria-label=\"Close dialog\"\n class=\"touch-hitbox bottom-sheet-modal-top-bar\"\n (click)=\"onDismissClick($event)\"\n >\n <div class=\"swipe-line\"></div>\n </button>\n\n <div class=\"bottom-sheet-modal-inner-content-container\">\n <div class=\"bottom-sheet-modal-top-group\">\n @if (hasBanner()) {\n <bx-modal-banner\n [header]=\"config()?.header\"\n [showCloseButton]=\"false\"\n ></bx-modal-banner>\n }\n\n @if (headerTemplate()) {\n <div class=\"bottom-sheet-modal-header\">\n <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n </div>\n }\n\n <div\n class=\"bottom-sheet-modal-main-content-container\"\n [style.animationDuration]=\"isAnimated() ? animationDuration() + 'ms' : '0ms'\"\n >\n <ng-content></ng-content>\n </div>\n </div>\n\n @if (footerTemplate()) {\n <div class=\"bottom-sheet-modal-footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n </div>\n }\n </div>\n</div>\n",
|
|
745
|
+
styles: [".bottom-sheet-modal-style{position:fixed;z-index:400;min-height:60vh;min-height:60dvh;max-height:98vh;max-height:98dvh;width:100vw;width:100dvw;min-width:100vw;max-width:100dvw;bottom:0;left:0;margin:0 auto;border-radius:1.875rem 1.875rem 0 0;background-color:var(--bx-modal-bg, var(--bx-bg-surface));color:var(--bx-modal-text, var(--bx-text-primary));display:flex;flex-direction:column}.touch-hitbox{padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;display:flex;flex-direction:row;width:100%;height:3.5rem;justify-content:center;align-items:center;padding-bottom:.5rem;margin-top:-1.5rem;flex-shrink:0}.swipe-line{width:7rem;height:.33rem;background-color:var(--bx-modal-mobile-swipe-line-color, var(--bx-border-default));border-radius:9999px;margin-top:1.5rem;opacity:.215;cursor:pointer}.bottom-sheet-modal-inner-content-container{display:flex;flex-direction:column;flex:1;min-height:0;padding:0 1.25rem 1.5rem;gap:1.5rem;box-sizing:border-box;overflow:hidden}.bottom-sheet-modal-top-group{display:flex;flex-direction:column;gap:1rem;flex-grow:1;min-height:0}.bottom-sheet-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;padding:0}.opened-bottom-sheet-modal{animation:opened-bottom-sheet-modal-anim .35s}.bottom-sheet-modal-top-bar{display:flex;justify-content:center}.bottom-sheet-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:flex-start;padding-top:.5rem;gap:.5rem}.bottom-sheet-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:center;gap:.5rem}@keyframes opened-bottom-sheet-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}[data-bx-surface]{--bx-glass-surface: var(--bx-modal-bg, var(--bx-bg-surface));--bx-glass-text: var(--bx-modal-text, var(--bx-text-primary));--bx-glass-shadow: 0 8px 20px rgba(0, 0, 0, .12);--bx-glass-min-opacity: .52;--bx-glass-rim-opacity: 1;border:1px solid var(--bx-glass-edge, var(--bx-border-default))}:host-context([data-theme=dark]) [data-bx-surface]{--bx-glass-min-opacity: .72}\n"],
|
|
743
746
|
dependencies: [
|
|
744
747
|
{
|
|
745
748
|
kind: "directive",
|
|
746
749
|
type: BxSurfaceDirective,
|
|
747
750
|
selector: "[bxSurface]",
|
|
748
751
|
inputs: [
|
|
749
|
-
"bxSurface",
|
|
750
752
|
"bxSurfaceInteractive",
|
|
751
|
-
"
|
|
752
|
-
"bxSurfaceTint",
|
|
753
|
+
"bxSurfaceGlassiness",
|
|
753
754
|
"bxSurfaceEmission",
|
|
754
755
|
"bxSurfaceFocusEmission",
|
|
755
756
|
"bxReducedTransparency"
|
|
@@ -799,8 +800,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
799
800
|
ModalBanner
|
|
800
801
|
],
|
|
801
802
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
802
|
-
template: "<div\n bxSurface\n data-bx-light-scope\n
|
|
803
|
-
styles: [".bottom-sheet-modal-style{position:fixed;z-index:400;min-height:60vh;min-height:60dvh;max-height:98vh;max-height:98dvh;width:100vw;width:100dvw;min-width:100vw;max-width:100dvw;bottom:0;left:0;margin:0 auto;border-radius:1.875rem 1.875rem 0 0;background-color:var(--bx-modal-bg, var(--bx-bg-surface));color:var(--bx-modal-text, var(--bx-text-primary));display:flex;flex-direction:column}.touch-hitbox{display:flex;flex-direction:row;width:100%;height:3.5rem;justify-content:center;align-items:center;padding-bottom:.5rem;margin-top:-1.5rem;flex-shrink:0}.swipe-line{width:7rem;height:.33rem;background-color:var(--bx-modal-mobile-swipe-line-color, var(--bx-border-default));border-radius:9999px;margin-top:1.5rem;opacity:.215;cursor:pointer}.bottom-sheet-modal-inner-content-container{display:flex;flex-direction:column;flex:1;min-height:0;padding:0 1.25rem 1.5rem;gap:1.5rem;box-sizing:border-box;overflow:hidden}.bottom-sheet-modal-top-group{display:flex;flex-direction:column;gap:1rem;flex-grow:1;min-height:0}.bottom-sheet-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;padding:0}.opened-bottom-sheet-modal{animation:opened-bottom-sheet-modal-anim .35s}.bottom-sheet-modal-top-bar{display:flex;justify-content:center}.bottom-sheet-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:flex-start;padding-top:.5rem;gap:.5rem}.bottom-sheet-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:center;gap:.5rem}
|
|
803
|
+
template: "<div\n bxSurface\n data-bx-light-scope\n [id]=\"id() ?? ''\"\n [class]=\"config()?.style?.wrapperClasses ?? ''\"\n [style]=\"config()?.style?.wrapperStyles ?? ''\"\n [style.max-height]=\"config()?.style?.mobileConfig?.customHeight ?? ''\"\n [style.transform]=\"modalTransform()\"\n [style.transition]=\"isAnimated() && !isSwipingVertically() ? 'transform 300ms ease-in-out' : ''\"\n [ngClass]=\"{\n 'opened-bottom-sheet-modal': isAnimated(),\n }\"\n #elementRef\n class=\"bottom-sheet-modal-style\"\n>\n <button\n #verticalSwipeTarget\n type=\"button\"\n aria-label=\"Close dialog\"\n class=\"touch-hitbox bottom-sheet-modal-top-bar\"\n (click)=\"onDismissClick($event)\"\n >\n <div class=\"swipe-line\"></div>\n </button>\n\n <div class=\"bottom-sheet-modal-inner-content-container\">\n <div class=\"bottom-sheet-modal-top-group\">\n @if (hasBanner()) {\n <bx-modal-banner\n [header]=\"config()?.header\"\n [showCloseButton]=\"false\"\n ></bx-modal-banner>\n }\n\n @if (headerTemplate()) {\n <div class=\"bottom-sheet-modal-header\">\n <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n </div>\n }\n\n <div\n class=\"bottom-sheet-modal-main-content-container\"\n [style.animationDuration]=\"isAnimated() ? animationDuration() + 'ms' : '0ms'\"\n >\n <ng-content></ng-content>\n </div>\n </div>\n\n @if (footerTemplate()) {\n <div class=\"bottom-sheet-modal-footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n </div>\n }\n </div>\n</div>\n",
|
|
804
|
+
styles: [".bottom-sheet-modal-style{position:fixed;z-index:400;min-height:60vh;min-height:60dvh;max-height:98vh;max-height:98dvh;width:100vw;width:100dvw;min-width:100vw;max-width:100dvw;bottom:0;left:0;margin:0 auto;border-radius:1.875rem 1.875rem 0 0;background-color:var(--bx-modal-bg, var(--bx-bg-surface));color:var(--bx-modal-text, var(--bx-text-primary));display:flex;flex-direction:column}.touch-hitbox{padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;display:flex;flex-direction:row;width:100%;height:3.5rem;justify-content:center;align-items:center;padding-bottom:.5rem;margin-top:-1.5rem;flex-shrink:0}.swipe-line{width:7rem;height:.33rem;background-color:var(--bx-modal-mobile-swipe-line-color, var(--bx-border-default));border-radius:9999px;margin-top:1.5rem;opacity:.215;cursor:pointer}.bottom-sheet-modal-inner-content-container{display:flex;flex-direction:column;flex:1;min-height:0;padding:0 1.25rem 1.5rem;gap:1.5rem;box-sizing:border-box;overflow:hidden}.bottom-sheet-modal-top-group{display:flex;flex-direction:column;gap:1rem;flex-grow:1;min-height:0}.bottom-sheet-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;padding:0}.opened-bottom-sheet-modal{animation:opened-bottom-sheet-modal-anim .35s}.bottom-sheet-modal-top-bar{display:flex;justify-content:center}.bottom-sheet-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:flex-start;padding-top:.5rem;gap:.5rem}.bottom-sheet-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:center;gap:.5rem}@keyframes opened-bottom-sheet-modal-anim{0%{transform:translateY(100%)}to{transform:translateY(0)}}[data-bx-surface]{--bx-glass-surface: var(--bx-modal-bg, var(--bx-bg-surface));--bx-glass-text: var(--bx-modal-text, var(--bx-text-primary));--bx-glass-shadow: 0 8px 20px rgba(0, 0, 0, .12);--bx-glass-min-opacity: .52;--bx-glass-rim-opacity: 1;border:1px solid var(--bx-glass-edge, var(--bx-border-default))}:host-context([data-theme=dark]) [data-bx-surface]{--bx-glass-min-opacity: .72}\n"]
|
|
804
805
|
}]
|
|
805
806
|
}],
|
|
806
807
|
propDecorators: {
|
|
@@ -1000,18 +1001,16 @@ var ModalCentered = class ModalCentered {
|
|
|
1000
1001
|
descendants: true
|
|
1001
1002
|
}],
|
|
1002
1003
|
ngImport: i0,
|
|
1003
|
-
template: "@if (!isBottomSheetModalActive()) {\n <div\n class=\"modal-overlay\"\n [id]=\"id() ?? ''\"\n
|
|
1004
|
-
styles: [".modal-overlay-wrapper{display:flex;position:absolute;z-index:400;justify-content:center;align-items:center;width:100%;height:100
|
|
1004
|
+
template: "@if (!isBottomSheetModalActive()) {\n <div\n class=\"modal-overlay\"\n [id]=\"id() ?? ''\"\n >\n @if (config()?.style?.hasBackdrop) {\n <button type=\"button\" class=\"modal-backdrop\" aria-label=\"Close dialog\" (click)=\"onBackdropClick.emit($event)\"></button>\n }\n <div class=\"modal-overlay-wrapper\">\n <div\n [ngClass]=\"modalClasses()\"\n bxSurface\n data-bx-light-scope\n >\n <div\n class=\"centered-modal-inner-content-container\"\n [class]=\"config()?.style?.wrapperClasses ?? ''\"\n [style]=\"config()?.style?.wrapperStyles ?? ''\"\n >\n <div class=\"centered-modal-top-group\">\n @if (hasBanner()) {\n <bx-modal-banner\n [header]=\"config()?.header\"\n (close)=\"close.emit('cancel')\"\n [showCloseButton]=\"config()?.style?.showCloseButton ?? true\"\n ></bx-modal-banner>\n }\n @if (headerTemplate()) {\n <div class=\"centered-modal-header\">\n <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n @if (!hasBanner()) {\n <button\n type=\"button\"\n class=\"bx-modal-close\"\n aria-label=\"Close dialog\"\n (click)=\"close.emit('cancel')\"\n >\n <bx-icon name=\"x\" />\n </button>\n }\n </div>\n }\n <div class=\"centered-modal-main-content-container\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n </div>\n </div>\n\n @if (footerTemplate()) {\n <div class=\"centered-modal-footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n} @else {\n <bx-modal-bottom-sheet\n [headerTemplate]=\"headerTemplate()\"\n [footerTemplate]=\"footerTemplate()\"\n [config]=\"config()\"\n [id]=\"id()\"\n [isOpen]=\"isOpen()\"\n [isAnimated]=\"isAnimated()\"\n [hasBanner]=\"hasBanner()\"\n [animationDuration]=\"animationDuration()\"\n (close)=\"close.emit('cancel')\"\n >\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n </bx-modal-bottom-sheet>\n}\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n",
|
|
1005
|
+
styles: [".modal-overlay-wrapper{display:flex;position:absolute;z-index:400;justify-content:center;align-items:center;width:100%;height:100%;pointer-events:none}.modal-overlay{position:fixed;inset:0;z-index:0}.modal-backdrop{padding:0;border:0;appearance:none;cursor:pointer;position:fixed;inset:0;z-index:400;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:#00000040;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased;transform-style:preserve-3d;transform-origin:center}.centered-modal-content-wrapper{pointer-events:auto;display:flex;flex-direction:column;max-width:90vw;max-width:90dvw;max-height:95vh;max-height:95dvh;overflow:hidden}.centered-modal-default-style{border-radius:.75rem;box-shadow:0 8px 20px #0000001f;color:var(--bx-modal-text, var(--bx-text-primary));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid transparent;background-color:var(--bx-modal-bg, var(--bx-bg-surface))}.centered-modal-inner-content-container{display:flex;flex-direction:column;height:100%;padding:1rem 1.5rem;gap:1.5rem;box-sizing:border-box}.centered-modal-top-group{display:flex;flex-direction:column;gap:1rem;flex-grow:1;min-height:0}.centered-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0}.centered-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:space-between;gap:.5rem}.centered-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:center;gap:.5rem}.centered-modal-animate-in{scale:0;animation:centered-modal-animate-in .15s ease-in-out forwards}.centered-modal-animate-out{animation:centered-modal-animate-out .15s ease-in-out forwards}@keyframes centered-modal-animate-in{0%{scale:0}to{scale:1}}@keyframes centered-modal-animate-out{0%{scale:1}to{scale:0}}[data-bx-surface]{--bx-glass-surface: var(--bx-modal-bg, var(--bx-bg-surface));--bx-glass-text: var(--bx-modal-text, var(--bx-text-primary));--bx-glass-shadow: 0 8px 20px rgba(0, 0, 0, .12);--bx-glass-min-opacity: .52;--bx-glass-rim-opacity: 1;border:1px solid var(--bx-glass-edge, var(--bx-border-default))}.bx-modal-close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--bx-rounded-sm, .25rem);background:transparent;color:inherit;cursor:pointer}.bx-modal-close:hover{background:var(--bx-bg-element-hover)}.bx-modal-close:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:2px}.modal-backdrop{background:#00000052;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.modal-backdrop{background:#00000080}}@media(prefers-reduced-transparency:reduce),(forced-colors:active){.modal-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0009}}:host-context([data-bx-reduced-transparency=true]) .modal-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0009}:host-context([data-theme=dark]) [data-bx-surface]{--bx-glass-min-opacity: .72}\n"],
|
|
1005
1006
|
dependencies: [
|
|
1006
1007
|
{
|
|
1007
1008
|
kind: "directive",
|
|
1008
1009
|
type: BxSurfaceDirective,
|
|
1009
1010
|
selector: "[bxSurface]",
|
|
1010
1011
|
inputs: [
|
|
1011
|
-
"bxSurface",
|
|
1012
1012
|
"bxSurfaceInteractive",
|
|
1013
|
-
"
|
|
1014
|
-
"bxSurfaceTint",
|
|
1013
|
+
"bxSurfaceGlassiness",
|
|
1015
1014
|
"bxSurfaceEmission",
|
|
1016
1015
|
"bxSurfaceFocusEmission",
|
|
1017
1016
|
"bxReducedTransparency"
|
|
@@ -1093,8 +1092,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1093
1092
|
Icon
|
|
1094
1093
|
],
|
|
1095
1094
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
1096
|
-
template: "@if (!isBottomSheetModalActive()) {\n <div\n class=\"modal-overlay\"\n [id]=\"id() ?? ''\"\n
|
|
1097
|
-
styles: [".modal-overlay-wrapper{display:flex;position:absolute;z-index:400;justify-content:center;align-items:center;width:100%;height:100
|
|
1095
|
+
template: "@if (!isBottomSheetModalActive()) {\n <div\n class=\"modal-overlay\"\n [id]=\"id() ?? ''\"\n >\n @if (config()?.style?.hasBackdrop) {\n <button type=\"button\" class=\"modal-backdrop\" aria-label=\"Close dialog\" (click)=\"onBackdropClick.emit($event)\"></button>\n }\n <div class=\"modal-overlay-wrapper\">\n <div\n [ngClass]=\"modalClasses()\"\n bxSurface\n data-bx-light-scope\n >\n <div\n class=\"centered-modal-inner-content-container\"\n [class]=\"config()?.style?.wrapperClasses ?? ''\"\n [style]=\"config()?.style?.wrapperStyles ?? ''\"\n >\n <div class=\"centered-modal-top-group\">\n @if (hasBanner()) {\n <bx-modal-banner\n [header]=\"config()?.header\"\n (close)=\"close.emit('cancel')\"\n [showCloseButton]=\"config()?.style?.showCloseButton ?? true\"\n ></bx-modal-banner>\n }\n @if (headerTemplate()) {\n <div class=\"centered-modal-header\">\n <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n @if (!hasBanner()) {\n <button\n type=\"button\"\n class=\"bx-modal-close\"\n aria-label=\"Close dialog\"\n (click)=\"close.emit('cancel')\"\n >\n <bx-icon name=\"x\" />\n </button>\n }\n </div>\n }\n <div class=\"centered-modal-main-content-container\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n </div>\n </div>\n\n @if (footerTemplate()) {\n <div class=\"centered-modal-footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n} @else {\n <bx-modal-bottom-sheet\n [headerTemplate]=\"headerTemplate()\"\n [footerTemplate]=\"footerTemplate()\"\n [config]=\"config()\"\n [id]=\"id()\"\n [isOpen]=\"isOpen()\"\n [isAnimated]=\"isAnimated()\"\n [hasBanner]=\"hasBanner()\"\n [animationDuration]=\"animationDuration()\"\n (close)=\"close.emit('cancel')\"\n >\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n </bx-modal-bottom-sheet>\n}\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n",
|
|
1096
|
+
styles: [".modal-overlay-wrapper{display:flex;position:absolute;z-index:400;justify-content:center;align-items:center;width:100%;height:100%;pointer-events:none}.modal-overlay{position:fixed;inset:0;z-index:0}.modal-backdrop{padding:0;border:0;appearance:none;cursor:pointer;position:fixed;inset:0;z-index:400;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:#00000040;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased;transform-style:preserve-3d;transform-origin:center}.centered-modal-content-wrapper{pointer-events:auto;display:flex;flex-direction:column;max-width:90vw;max-width:90dvw;max-height:95vh;max-height:95dvh;overflow:hidden}.centered-modal-default-style{border-radius:.75rem;box-shadow:0 8px 20px #0000001f;color:var(--bx-modal-text, var(--bx-text-primary));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid transparent;background-color:var(--bx-modal-bg, var(--bx-bg-surface))}.centered-modal-inner-content-container{display:flex;flex-direction:column;height:100%;padding:1rem 1.5rem;gap:1.5rem;box-sizing:border-box}.centered-modal-top-group{display:flex;flex-direction:column;gap:1rem;flex-grow:1;min-height:0}.centered-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0}.centered-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:space-between;gap:.5rem}.centered-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:center;gap:.5rem}.centered-modal-animate-in{scale:0;animation:centered-modal-animate-in .15s ease-in-out forwards}.centered-modal-animate-out{animation:centered-modal-animate-out .15s ease-in-out forwards}@keyframes centered-modal-animate-in{0%{scale:0}to{scale:1}}@keyframes centered-modal-animate-out{0%{scale:1}to{scale:0}}[data-bx-surface]{--bx-glass-surface: var(--bx-modal-bg, var(--bx-bg-surface));--bx-glass-text: var(--bx-modal-text, var(--bx-text-primary));--bx-glass-shadow: 0 8px 20px rgba(0, 0, 0, .12);--bx-glass-min-opacity: .52;--bx-glass-rim-opacity: 1;border:1px solid var(--bx-glass-edge, var(--bx-border-default))}.bx-modal-close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--bx-rounded-sm, .25rem);background:transparent;color:inherit;cursor:pointer}.bx-modal-close:hover{background:var(--bx-bg-element-hover)}.bx-modal-close:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:2px}.modal-backdrop{background:#00000052;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.modal-backdrop{background:#00000080}}@media(prefers-reduced-transparency:reduce),(forced-colors:active){.modal-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0009}}:host-context([data-bx-reduced-transparency=true]) .modal-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0009}:host-context([data-theme=dark]) [data-bx-surface]{--bx-glass-min-opacity: .72}\n"]
|
|
1098
1097
|
}]
|
|
1099
1098
|
}],
|
|
1100
1099
|
propDecorators: {
|
|
@@ -1332,18 +1331,16 @@ var ModalSide = class ModalSide {
|
|
|
1332
1331
|
descendants: true
|
|
1333
1332
|
}],
|
|
1334
1333
|
ngImport: i0,
|
|
1335
|
-
template: "@if (!isBottomSheetModalActive()) {\n <div\n bxSurface\n data-bx-light-scope\n [ngClass]=\"modalClasses()\"\n
|
|
1336
|
-
styles: [".side-modal-content-wrapper{position:fixed;top:0;height:100vh;height:100dvh;z-index:400;display:flex;flex-direction:column;padding:1rem;gap:1rem;box-sizing:border-box;overflow:hidden;transition:transform var(--anim-duration, 175ms) ease-in-out}.side-modal-content-wrapper.left{left:0}.side-modal-content-wrapper.right{right:0}.side-modal-content-wrapper.side-modal-animate-in{transform:translate(0)!important}.side-modal-content-wrapper.side-modal-animate-out.left{transform:translate(-100%)}.side-modal-content-wrapper.side-modal-animate-out.right{transform:translate(100%)}.side-modal-content-wrapper.with-footer{justify-content:space-between}.side-modal-content-wrapper .side-modal-inner-content-container{flex-grow:1;display:flex;flex-direction:column;gap:1rem;min-height:0}@media(max-width:768px){.side-modal-content-wrapper{max-width:90vw;max-width:95dvw}}.side-modal-default-style{background:var(--bx-modal-bg, var(--bx-bg-surface));color:var(--bx-modal-text, var(--bx-text-primary));box-shadow:0 8px 20px #0000001f;max-width:85vw;max-width:85dvw}.side-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0;max-height:none}.side-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:space-between;gap:.5rem;padding-top:.75rem}.side-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:flex-end;gap:.5rem;padding-bottom:.75rem}[data-bx-surface]{--bx-glass-surface: var(--bx-modal-bg, var(--bx-bg-surface));--bx-glass-text: var(--bx-modal-text, var(--bx-text-primary));--bx-glass-shadow: 0 8px 20px rgba(0, 0, 0, .12);--bx-glass-min-opacity: .52;--bx-glass-rim-opacity: 1;border:1px solid var(--bx-glass-edge, var(--bx-border-default))}.bx-modal-close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--bx-rounded-sm, .25rem);background:transparent;color:inherit;cursor:pointer}.bx-modal-close:hover{background:var(--bx-bg-element-hover)}.bx-modal-close:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:2px}:host-context([data-theme=dark]) [data-bx-surface]{--bx-glass-min-opacity: .72}\n"],
|
|
1334
|
+
template: "@if (!isBottomSheetModalActive()) {\n <div\n bxSurface\n data-bx-light-scope\n [ngClass]=\"modalClasses()\"\n [id]=\"id() ?? ''\"\n [style.--anim-duration.ms]=\"animationDuration()\"\n >\n <div\n class=\"side-modal-inner-content-container\"\n [class]=\"config() && config()?.style?.wrapperClasses ? config()?.style?.wrapperClasses : ''\"\n [style]=\"config() && config()?.style?.wrapperStyles ? config()?.style?.wrapperStyles : ''\"\n >\n @if (hasBanner()) {\n <bx-modal-banner\n [header]=\"config()?.header\"\n (close)=\"close.emit('cancel')\"\n [showCloseButton]=\"config()?.style?.showCloseButton ?? true\"\n ></bx-modal-banner>\n }\n @if (headerTemplate()) {\n <div class=\"side-modal-header\">\n <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n @if (!hasBanner()) {\n <button\n type=\"button\"\n class=\"bx-modal-close\"\n aria-label=\"Close dialog\"\n (click)=\"close.emit('cancel')\"\n >\n <bx-icon name=\"x\" />\n </button>\n }\n </div>\n }\n <div class=\"side-modal-main-content-container\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n </div>\n </div>\n\n @if (footerTemplate()) {\n <div class=\"side-modal-footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n </div>\n }\n </div>\n} @else {\n <bx-modal-bottom-sheet\n [headerTemplate]=\"headerTemplate()\"\n [footerTemplate]=\"footerTemplate()\"\n [config]=\"config()\"\n [id]=\"id()\"\n [isOpen]=\"isOpen()\"\n [isAnimated]=\"isAnimated()\"\n [hasBanner]=\"hasBanner()\"\n [animationDuration]=\"animationDuration()\"\n (close)=\"close.emit('cancel')\"\n >\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n </bx-modal-bottom-sheet>\n}\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n",
|
|
1335
|
+
styles: [".side-modal-content-wrapper{position:fixed;top:0;height:100vh;height:100dvh;z-index:400;display:flex;flex-direction:column;padding:1rem;gap:1rem;box-sizing:border-box;overflow:hidden;transition:transform var(--anim-duration, 175ms) ease-in-out}.side-modal-content-wrapper.left{left:0;border-top-left-radius:0;border-bottom-left-radius:0}.side-modal-content-wrapper.right{right:0;border-top-right-radius:0;border-bottom-right-radius:0}.side-modal-content-wrapper.side-modal-animate-in{transform:translate(0)!important}.side-modal-content-wrapper.side-modal-animate-out.left{transform:translate(-100%)}.side-modal-content-wrapper.side-modal-animate-out.right{transform:translate(100%)}.side-modal-content-wrapper.with-footer{justify-content:space-between}.side-modal-content-wrapper .side-modal-inner-content-container{flex-grow:1;display:flex;flex-direction:column;gap:1rem;min-height:0}@media(max-width:768px){.side-modal-content-wrapper{max-width:90vw;max-width:95dvw}}.side-modal-default-style{background:var(--bx-modal-bg, var(--bx-bg-surface));color:var(--bx-modal-text, var(--bx-text-primary));box-shadow:0 8px 20px #0000001f;max-width:85vw;max-width:85dvw}.side-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0;max-height:none}.side-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:space-between;gap:.5rem;padding-top:.75rem}.side-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:flex-end;gap:.5rem;padding-bottom:.75rem}[data-bx-surface]{--bx-glass-surface: var(--bx-modal-bg, var(--bx-bg-surface));--bx-glass-text: var(--bx-modal-text, var(--bx-text-primary));--bx-glass-shadow: 0 8px 20px rgba(0, 0, 0, .12);--bx-glass-min-opacity: .52;--bx-glass-rim-opacity: 1;border:1px solid var(--bx-glass-edge, var(--bx-border-default))}.bx-modal-close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--bx-rounded-sm, .25rem);background:transparent;color:inherit;cursor:pointer}.bx-modal-close:hover{background:var(--bx-bg-element-hover)}.bx-modal-close:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:2px}:host-context([data-theme=dark]) [data-bx-surface]{--bx-glass-min-opacity: .72}\n"],
|
|
1337
1336
|
dependencies: [
|
|
1338
1337
|
{
|
|
1339
1338
|
kind: "directive",
|
|
1340
1339
|
type: BxSurfaceDirective,
|
|
1341
1340
|
selector: "[bxSurface]",
|
|
1342
1341
|
inputs: [
|
|
1343
|
-
"bxSurface",
|
|
1344
1342
|
"bxSurfaceInteractive",
|
|
1345
|
-
"
|
|
1346
|
-
"bxSurfaceTint",
|
|
1343
|
+
"bxSurfaceGlassiness",
|
|
1347
1344
|
"bxSurfaceEmission",
|
|
1348
1345
|
"bxSurfaceFocusEmission",
|
|
1349
1346
|
"bxReducedTransparency"
|
|
@@ -1425,8 +1422,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1425
1422
|
Icon
|
|
1426
1423
|
],
|
|
1427
1424
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
1428
|
-
template: "@if (!isBottomSheetModalActive()) {\n <div\n bxSurface\n data-bx-light-scope\n [ngClass]=\"modalClasses()\"\n
|
|
1429
|
-
styles: [".side-modal-content-wrapper{position:fixed;top:0;height:100vh;height:100dvh;z-index:400;display:flex;flex-direction:column;padding:1rem;gap:1rem;box-sizing:border-box;overflow:hidden;transition:transform var(--anim-duration, 175ms) ease-in-out}.side-modal-content-wrapper.left{left:0}.side-modal-content-wrapper.right{right:0}.side-modal-content-wrapper.side-modal-animate-in{transform:translate(0)!important}.side-modal-content-wrapper.side-modal-animate-out.left{transform:translate(-100%)}.side-modal-content-wrapper.side-modal-animate-out.right{transform:translate(100%)}.side-modal-content-wrapper.with-footer{justify-content:space-between}.side-modal-content-wrapper .side-modal-inner-content-container{flex-grow:1;display:flex;flex-direction:column;gap:1rem;min-height:0}@media(max-width:768px){.side-modal-content-wrapper{max-width:90vw;max-width:95dvw}}.side-modal-default-style{background:var(--bx-modal-bg, var(--bx-bg-surface));color:var(--bx-modal-text, var(--bx-text-primary));box-shadow:0 8px 20px #0000001f;max-width:85vw;max-width:85dvw}.side-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0;max-height:none}.side-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:space-between;gap:.5rem;padding-top:.75rem}.side-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:flex-end;gap:.5rem;padding-bottom:.75rem}[data-bx-surface]{--bx-glass-surface: var(--bx-modal-bg, var(--bx-bg-surface));--bx-glass-text: var(--bx-modal-text, var(--bx-text-primary));--bx-glass-shadow: 0 8px 20px rgba(0, 0, 0, .12);--bx-glass-min-opacity: .52;--bx-glass-rim-opacity: 1;border:1px solid var(--bx-glass-edge, var(--bx-border-default))}.bx-modal-close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--bx-rounded-sm, .25rem);background:transparent;color:inherit;cursor:pointer}.bx-modal-close:hover{background:var(--bx-bg-element-hover)}.bx-modal-close:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:2px}:host-context([data-theme=dark]) [data-bx-surface]{--bx-glass-min-opacity: .72}\n"]
|
|
1425
|
+
template: "@if (!isBottomSheetModalActive()) {\n <div\n bxSurface\n data-bx-light-scope\n [ngClass]=\"modalClasses()\"\n [id]=\"id() ?? ''\"\n [style.--anim-duration.ms]=\"animationDuration()\"\n >\n <div\n class=\"side-modal-inner-content-container\"\n [class]=\"config() && config()?.style?.wrapperClasses ? config()?.style?.wrapperClasses : ''\"\n [style]=\"config() && config()?.style?.wrapperStyles ? config()?.style?.wrapperStyles : ''\"\n >\n @if (hasBanner()) {\n <bx-modal-banner\n [header]=\"config()?.header\"\n (close)=\"close.emit('cancel')\"\n [showCloseButton]=\"config()?.style?.showCloseButton ?? true\"\n ></bx-modal-banner>\n }\n @if (headerTemplate()) {\n <div class=\"side-modal-header\">\n <ng-container *ngTemplateOutlet=\"headerTemplate()\"></ng-container>\n @if (!hasBanner()) {\n <button\n type=\"button\"\n class=\"bx-modal-close\"\n aria-label=\"Close dialog\"\n (click)=\"close.emit('cancel')\"\n >\n <bx-icon name=\"x\" />\n </button>\n }\n </div>\n }\n <div class=\"side-modal-main-content-container\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n </div>\n </div>\n\n @if (footerTemplate()) {\n <div class=\"side-modal-footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n </div>\n }\n </div>\n} @else {\n <bx-modal-bottom-sheet\n [headerTemplate]=\"headerTemplate()\"\n [footerTemplate]=\"footerTemplate()\"\n [config]=\"config()\"\n [id]=\"id()\"\n [isOpen]=\"isOpen()\"\n [isAnimated]=\"isAnimated()\"\n [hasBanner]=\"hasBanner()\"\n [animationDuration]=\"animationDuration()\"\n (close)=\"close.emit('cancel')\"\n >\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"> </ng-container>\n </bx-modal-bottom-sheet>\n}\n\n<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n",
|
|
1426
|
+
styles: [".side-modal-content-wrapper{position:fixed;top:0;height:100vh;height:100dvh;z-index:400;display:flex;flex-direction:column;padding:1rem;gap:1rem;box-sizing:border-box;overflow:hidden;transition:transform var(--anim-duration, 175ms) ease-in-out}.side-modal-content-wrapper.left{left:0;border-top-left-radius:0;border-bottom-left-radius:0}.side-modal-content-wrapper.right{right:0;border-top-right-radius:0;border-bottom-right-radius:0}.side-modal-content-wrapper.side-modal-animate-in{transform:translate(0)!important}.side-modal-content-wrapper.side-modal-animate-out.left{transform:translate(-100%)}.side-modal-content-wrapper.side-modal-animate-out.right{transform:translate(100%)}.side-modal-content-wrapper.with-footer{justify-content:space-between}.side-modal-content-wrapper .side-modal-inner-content-container{flex-grow:1;display:flex;flex-direction:column;gap:1rem;min-height:0}@media(max-width:768px){.side-modal-content-wrapper{max-width:90vw;max-width:95dvw}}.side-modal-default-style{background:var(--bx-modal-bg, var(--bx-bg-surface));color:var(--bx-modal-text, var(--bx-text-primary));box-shadow:0 8px 20px #0000001f;max-width:85vw;max-width:85dvw}.side-modal-main-content-container{flex-grow:1;overflow-y:auto;min-height:0;max-height:none}.side-modal-header{flex-shrink:0;width:100%;display:flex;justify-content:space-between;gap:.5rem;padding-top:.75rem}.side-modal-footer{flex-shrink:0;width:100%;display:flex;justify-content:flex-end;gap:.5rem;padding-bottom:.75rem}[data-bx-surface]{--bx-glass-surface: var(--bx-modal-bg, var(--bx-bg-surface));--bx-glass-text: var(--bx-modal-text, var(--bx-text-primary));--bx-glass-shadow: 0 8px 20px rgba(0, 0, 0, .12);--bx-glass-min-opacity: .52;--bx-glass-rim-opacity: 1;border:1px solid var(--bx-glass-edge, var(--bx-border-default))}.bx-modal-close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--bx-rounded-sm, .25rem);background:transparent;color:inherit;cursor:pointer}.bx-modal-close:hover{background:var(--bx-bg-element-hover)}.bx-modal-close:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:2px}:host-context([data-theme=dark]) [data-bx-surface]{--bx-glass-min-opacity: .72}\n"]
|
|
1430
1427
|
}]
|
|
1431
1428
|
}],
|
|
1432
1429
|
ctorParameters: () => [],
|
|
@@ -1629,7 +1626,7 @@ var ModalCore = class ModalCore {
|
|
|
1629
1626
|
}
|
|
1630
1627
|
}
|
|
1631
1628
|
initKeyboardSubscription() {
|
|
1632
|
-
fromEvent(document, "keydown").pipe(filter((event) => event.key === "Escape"), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
1629
|
+
fromEvent(document, "keydown").pipe(filter((event) => event.key === "Escape" && !event.defaultPrevented), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
1633
1630
|
if (!this.isConfirmCloseModalOpen) this.close("cancel", void 0, true);
|
|
1634
1631
|
});
|
|
1635
1632
|
}
|
|
@@ -1741,7 +1738,7 @@ var ModalCore = class ModalCore {
|
|
|
1741
1738
|
}
|
|
1742
1739
|
],
|
|
1743
1740
|
ngImport: i0,
|
|
1744
|
-
template: "@if (config?.style?.hasBackdrop && (isSide() || isBottomSheetModalActive())) {\n<bx-modal-backdrop [isAnimated]=\"isAnimated()\" [isOpen]=\"isOpen()\" (click)=\"onBackdropClick($event)\">\n</bx-modal-backdrop>\n}\n\n<ng-container #modalContainer>\n @switch (true) {\n @case (isSide()) {\n <bx-modal-side [layout]=\"effectiveLayout()\" [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\"\n [config]=\"config\" [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\"\n [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" [animationDuration]=\"animationDuration\"\n [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n </bx-modal-side>\n }\n @case (isCentered()) {\n <bx-modal-centered [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [config]=\"config\"\n [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\"\n [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" [animationDuration]=\"animationDuration\"\n [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\"\n (onBackdropClick)=\"onBackdropClick($event)\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n </bx-modal-centered>\n }\n }\n</ng-container>\n\n<ng-template #contentTemplate>\n <ng-container #dynamicContainer></ng-container>\n</ng-template
|
|
1741
|
+
template: "@if (config?.style?.hasBackdrop && (isSide() || isBottomSheetModalActive())) {\n<bx-modal-backdrop [isAnimated]=\"isAnimated()\" [isOpen]=\"isOpen()\" (click)=\"onBackdropClick($event)\">\n</bx-modal-backdrop>\n}\n\n<ng-container #modalContainer>\n @switch (true) {\n @case (isSide()) {\n <bx-modal-side [layout]=\"effectiveLayout()\" [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\"\n [config]=\"config\" [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\"\n [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" [animationDuration]=\"animationDuration\"\n [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n </bx-modal-side>\n }\n @case (isCentered()) {\n <bx-modal-centered [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [config]=\"config\"\n [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\"\n [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" [animationDuration]=\"animationDuration\"\n [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\"\n (onBackdropClick)=\"onBackdropClick($event)\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n </bx-modal-centered>\n }\n }\n</ng-container>\n\n<ng-template #contentTemplate>\n <ng-container #dynamicContainer></ng-container>\n</ng-template>\n",
|
|
1745
1742
|
styles: [":host{position:fixed;inset:0;z-index:400;pointer-events:none}:host>*{pointer-events:auto}\n"],
|
|
1746
1743
|
dependencies: [
|
|
1747
1744
|
{
|
|
@@ -1818,7 +1815,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1818
1815
|
ModalBackdrop
|
|
1819
1816
|
],
|
|
1820
1817
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
1821
|
-
template: "@if (config?.style?.hasBackdrop && (isSide() || isBottomSheetModalActive())) {\n<bx-modal-backdrop [isAnimated]=\"isAnimated()\" [isOpen]=\"isOpen()\" (click)=\"onBackdropClick($event)\">\n</bx-modal-backdrop>\n}\n\n<ng-container #modalContainer>\n @switch (true) {\n @case (isSide()) {\n <bx-modal-side [layout]=\"effectiveLayout()\" [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\"\n [config]=\"config\" [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\"\n [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" [animationDuration]=\"animationDuration\"\n [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n </bx-modal-side>\n }\n @case (isCentered()) {\n <bx-modal-centered [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [config]=\"config\"\n [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\"\n [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" [animationDuration]=\"animationDuration\"\n [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\"\n (onBackdropClick)=\"onBackdropClick($event)\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n </bx-modal-centered>\n }\n }\n</ng-container>\n\n<ng-template #contentTemplate>\n <ng-container #dynamicContainer></ng-container>\n</ng-template
|
|
1818
|
+
template: "@if (config?.style?.hasBackdrop && (isSide() || isBottomSheetModalActive())) {\n<bx-modal-backdrop [isAnimated]=\"isAnimated()\" [isOpen]=\"isOpen()\" (click)=\"onBackdropClick($event)\">\n</bx-modal-backdrop>\n}\n\n<ng-container #modalContainer>\n @switch (true) {\n @case (isSide()) {\n <bx-modal-side [layout]=\"effectiveLayout()\" [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\"\n [config]=\"config\" [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\"\n [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" [animationDuration]=\"animationDuration\"\n [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n </bx-modal-side>\n }\n @case (isCentered()) {\n <bx-modal-centered [headerTemplate]=\"headerTemplate()\" [footerTemplate]=\"footerTemplate()\" [config]=\"config\"\n [id]=\"id()\" [isOpen]=\"isOpen()\" [isAnimated]=\"isAnimated()\"\n [isBottomSheetModalActive]=\"isBottomSheetModalActive()\" [animationDuration]=\"animationDuration\"\n [hasDefaultContentWrapperClass]=\"hasDefaultContentWrapperClass\" [hasBanner]=\"hasBanner\" (close)=\"close($event)\"\n (onBackdropClick)=\"onBackdropClick($event)\">\n <ng-container [ngTemplateOutlet]=\"contentTemplate\"></ng-container>\n </bx-modal-centered>\n }\n }\n</ng-container>\n\n<ng-template #contentTemplate>\n <ng-container #dynamicContainer></ng-container>\n</ng-template>\n",
|
|
1822
1819
|
styles: [":host{position:fixed;inset:0;z-index:400;pointer-events:none}:host>*{pointer-events:auto}\n"]
|
|
1823
1820
|
}]
|
|
1824
1821
|
}],
|