@shival99/z-ui 2.5.3 → 2.5.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/assets/css/features/media.css +14 -0
- package/assets/css/features/office.css +11 -0
- package/assets/css/global.css +5 -9
- package/assets/css/overlay.css +28 -3
- package/fesm2022/shival99-z-ui-components-z-command.mjs +2 -2
- package/fesm2022/shival99-z-ui-components-z-command.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-drawer.mjs +2 -2
- package/fesm2022/shival99-z-ui-components-z-drawer.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-gallery.mjs +4 -3
- package/fesm2022/shival99-z-ui-components-z-gallery.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-loading.mjs +2 -2
- package/fesm2022/shival99-z-ui-components-z-loading.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-menu.mjs +4 -4
- package/fesm2022/shival99-z-ui-components-z-menu.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-modal.mjs +2 -2
- package/fesm2022/shival99-z-ui-components-z-modal.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-overlay.mjs +32 -29
- package/fesm2022/shival99-z-ui-components-z-overlay.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-table.mjs +7 -7
- package/fesm2022/shival99-z-ui-components-z-table.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-services-excel.mjs +672 -0
- package/fesm2022/shival99-z-ui-services-excel.mjs.map +1 -0
- package/fesm2022/shival99-z-ui-services-office.mjs +123 -0
- package/fesm2022/shival99-z-ui-services-office.mjs.map +1 -0
- package/fesm2022/shival99-z-ui-services.mjs +2 -778
- package/fesm2022/shival99-z-ui-services.mjs.map +1 -1
- package/package.json +22 -6
- package/types/shival99-z-ui-components-z-autocomplete.d.ts +1 -1
- package/types/shival99-z-ui-components-z-calendar.d.ts +4 -4
- package/types/shival99-z-ui-components-z-overlay.d.ts +11 -12
- package/types/shival99-z-ui-components-z-select.d.ts +2 -2
- package/types/shival99-z-ui-components-z-table.d.ts +2 -2
- package/types/shival99-z-ui-services-excel.d.ts +36 -0
- package/types/shival99-z-ui-services-office.d.ts +15 -0
- package/types/shival99-z-ui-services.d.ts +151 -194
|
@@ -113,13 +113,13 @@ class ZLoadingComponent {
|
|
|
113
113
|
}, 100);
|
|
114
114
|
}
|
|
115
115
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
116
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZLoadingComponent, isStandalone: true, selector: "z-loading", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zSpinner: { classPropertyName: "zSpinner", publicName: "zSpinner", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zColor: { classPropertyName: "zColor", publicName: "zColor", isSignal: true, isRequired: false, transformFunction: null }, zText: { classPropertyName: "zText", publicName: "zText", isSignal: true, isRequired: false, transformFunction: null }, zOverlay: { classPropertyName: "zOverlay", publicName: "zOverlay", isSignal: true, isRequired: false, transformFunction: null }, zOverlayType: { classPropertyName: "zOverlayType", publicName: "zOverlayType", isSignal: true, isRequired: false, transformFunction: null }, zFullscreen: { classPropertyName: "zFullscreen", publicName: "zFullscreen", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "z-loading inline-flex" }, ngImport: i0, template: "@if (!zOverlay() && !zFullscreen()) {\n <div\n class=\"z-loading-wrapper inline-flex items-center justify-center transition-opacity duration-150\"\n [class.opacity-0]=\"!zLoading()\"\n [class.pointer-events-none]=\"!zLoading()\">\n <ng-container *ngTemplateOutlet=\"spinnerContent\" />\n </div>\n}\n\n@if ((zOverlay() || zFullscreen()) && isVisible()) {\n <div\n class=\"z-loading-wrapper inline-flex items-center justify-center\"\n [class.z-loading-overlay]=\"zOverlay()\"\n [class.z-loading-fullscreen]=\"zFullscreen()\"\n [class.z-loading-leaving]=\"isLeaving()\"\n [class]=\"overlayClasses()\">\n <ng-container *ngTemplateOutlet=\"spinnerContent\" />\n </div>\n}\n\n<ng-template #spinnerContent>\n <div\n class=\"z-loading-content flex flex-col items-center justify-center gap-3\"\n [attr.data-z-loading-spinner]=\"zSpinner()\">\n @switch (zSpinner()) {\n @case ('spinner') {\n <svg [class]=\"spinnerClasses()\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n </svg>\n }\n @case ('orbit') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-orbit\">\n <div class=\"absolute top-1/2 left-0 h-2 w-2 -translate-y-1/2 rounded-full bg-current\"></div>\n <div class=\"absolute top-1/2 right-0 h-2 w-2 -translate-y-1/2 rounded-full bg-current opacity-30\"></div>\n </div>\n }\n @case ('matrix') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-matrix\"></div>\n }\n @case ('conic') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-conic rounded-full\"></div>\n }\n @case ('polygon') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-polygon rounded-full\"></div>\n }\n @case ('triple') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-triple rounded-full\"></div>\n }\n @case ('bar') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-bar\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('beat') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-beat\">\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('bounce') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-bounce\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('circle') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-circle\">\n @for (ring of circleRings; track ring) {\n <i [style.--z-index]=\"ring\"></i>\n }\n </span>\n }\n @case ('climbing-box') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-climbing-box\">\n <i></i>\n <b></b>\n </span>\n }\n @case ('clip') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-clip\"></span>\n }\n @case ('clock') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-clock\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('dot') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-dot\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('fade') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-fade\">\n @for (bar of fadeBars; track bar) {\n <i [style.--z-index]=\"bar\"></i>\n }\n </span>\n }\n @case ('grid') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-grid\">\n @for (dot of gridDots; track dot) {\n <i [style.--z-index]=\"dot\"></i>\n }\n </span>\n }\n @case ('hash') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-hash\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('moon') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-moon\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('pacman') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-pacman\">\n <i></i>\n <i></i>\n @for (dot of pacmanDots; track dot) {\n <b [style.--z-index]=\"dot\"></b>\n }\n </span>\n }\n @case ('propagate') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-propagate\">\n @for (dot of propagateDots; track dot) {\n <i [style.--z-index]=\"dot\"></i>\n }\n </span>\n }\n @case ('puff') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-puff\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('pulse') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-pulse\">\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('ring') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-ring\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('rise') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-rise\">\n <i></i>\n <i></i>\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('rotate') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-rotate\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('scale') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-scale\">\n @for (bar of scaleBars; track bar) {\n <i [style.--z-index]=\"bar\"></i>\n }\n </span>\n }\n @case ('skew') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-skew\"></span>\n }\n @case ('square') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-square\"></span>\n }\n @case ('sync') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-sync\">\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('orbit-chase') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-orbit-chase\">\n @for (node of orbitChaseNodes; track node) {\n <i [style.--z-index]=\"node\"></i>\n }\n </span>\n }\n @case ('bars') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-bars\">\n @for (column of barsColumns; track column) {\n <i [style.--z-index]=\"column\"></i>\n }\n </span>\n }\n @case ('matrix-grid') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-matrix-grid\">\n @for (dot of matrixDots; track dot) {\n <i></i>\n }\n </span>\n }\n @case ('merge') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-merge\">\n @for (cell of mergeCells; track cell) {\n <i [style.--z-index]=\"cell\"></i>\n }\n </span>\n }\n @case ('encode') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-encode\">\n @for (bit of encodeBits; track bit) {\n <i [style.--z-index]=\"bit\"></i>\n }\n </span>\n }\n @case ('scan') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-scan\">\n @for (row of scanRows; track row) {\n <b><i [style.--z-index]=\"row\"></i></b>\n }\n </span>\n }\n @case ('lift') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-lift\">\n @for (level of liftLevels; track level) {\n <i [style.--z-index]=\"level\"></i>\n }\n </span>\n }\n }\n\n @if (zText()) {\n <p [class]=\"textSizeClasses()\" class=\"z-loading-text font-medium\" [style.color]=\"'currentColor'\">\n {{ zText() }}\n </p>\n }\n </div>\n</ng-template>\n", styles: [".z-loading:has(.z-loading-overlay),.z-loading:has(.z-loading-fullscreen){display:contents}.z-loading-overlay,.z-loading-fullscreen{position:absolute;inset:0;z-index:150;display:flex;align-items:center;justify-content:center}.z-loading-fullscreen{position:fixed;z-index:9999}.z-loading-overlay-dark{background-color:#0009;animation:z-backdrop-enter .15s ease-out forwards}.z-loading-overlay-blur{background-color:#0000000d;backdrop-filter:blur(2px);animation:z-backdrop-enter .15s ease-out forwards}.z-loading-overlay-default{background-color:var(--loading-overlay-bg, rgba(255, 255, 255, .85));animation:z-backdrop-enter .15s ease-out forwards}.dark .z-loading-overlay-default{background-color:#000000d9}.z-loading-leaving.z-loading-overlay-dark,.z-loading-leaving.z-loading-overlay-blur,.z-loading-leaving.z-loading-overlay-default{animation:z-backdrop-exit .12s ease-in forwards}.z-loading-content{position:relative;z-index:51}.z-loading-loader{--z-loading-size: 1.5rem;--z-loading-stroke: max(2px, calc(var(--z-loading-size) / 12));display:inline-block;flex:none;box-sizing:border-box}.z-loading-loader *,.z-loading-loader *:before,.z-loading-loader *:after{box-sizing:border-box}.z-loading-size-2xs{--z-loading-size: .75rem}.z-loading-size-xs{--z-loading-size: 1rem}.z-loading-size-default{--z-loading-size: 1.5rem}.z-loading-size-lg{--z-loading-size: 2rem}.z-loading-size-xl{--z-loading-size: 3rem}.z-loading-orbit{position:relative;width:var(--z-loading-size);height:var(--z-loading-size);animation:z-loading-spin 1.2s linear infinite}.z-loading-orbit>div{width:calc(var(--z-loading-size) / 4);height:calc(var(--z-loading-size) / 4)}.z-loading-matrix{width:var(--z-loading-size);height:calc(var(--z-loading-size) * .875);background:linear-gradient(transparent 16.6666666667%,currentColor 0 50%,transparent 0),linear-gradient(transparent 33.3333333333%,currentColor 0 66.6666666667%,transparent 0),linear-gradient(transparent 50%,currentColor 0 83.3333333333%,transparent 0);background-size:calc(var(--z-loading-size) / 4) 400%;background-repeat:no-repeat;animation:z-loading-matrix 1s infinite linear}.z-loading-conic{width:var(--z-loading-size);padding:calc(var(--z-loading-size) / 6);aspect-ratio:1;background:currentColor;-webkit-mask:conic-gradient(transparent 10%,#000),linear-gradient(#000 0 0) content-box;mask:conic-gradient(transparent 10%,#000),linear-gradient(#000 0 0) content-box;-webkit-mask-composite:source-out;mask-composite:subtract;animation:z-loading-conic 1s infinite linear}.z-loading-polygon{width:var(--z-loading-size);aspect-ratio:1;border:max(2px,var(--z-loading-size) / 6) solid currentColor;animation:z-loading-polygon-1 .8s infinite linear alternate,z-loading-polygon-2 1.6s infinite linear}.z-loading-triple{width:var(--z-loading-size);aspect-ratio:1;border:var(--z-loading-stroke) solid transparent;border-right-color:currentColor;position:relative;animation:z-loading-triple 1s infinite linear}.z-loading-triple:before,.z-loading-triple:after{content:\"\";position:absolute;inset:calc(var(--z-loading-stroke) * -1);border-radius:50%;border:inherit;animation:inherit}.z-loading-triple:before{animation-duration:2s;opacity:.6}.z-loading-triple:after{animation-duration:4s;opacity:.3}.z-loading-bar{position:relative;width:calc(var(--z-loading-size) * 3);height:var(--z-loading-stroke);overflow:hidden;border-radius:999px;background:color-mix(in srgb,currentColor 20%,transparent)}.z-loading-bar i{position:absolute;inset-block:0;display:block;border-radius:inherit;background:currentColor;will-change:left,right}.z-loading-bar i:first-child{animation:z-loading-bar-long 2.1s infinite cubic-bezier(.65,.815,.735,.395)}.z-loading-bar i:last-child{animation:z-loading-bar-short 2.1s 1.15s infinite cubic-bezier(.165,.84,.44,1)}.z-loading-beat,.z-loading-pulse,.z-loading-sync,.z-loading-rise{display:inline-flex;align-items:center;gap:calc(var(--z-loading-size) / 8)}.z-loading-beat i,.z-loading-pulse i,.z-loading-sync i,.z-loading-rise i{width:calc(var(--z-loading-size) * .38);height:calc(var(--z-loading-size) * .38);border-radius:50%;background:currentColor}.z-loading-beat i{animation:z-loading-beat .7s infinite linear both}.z-loading-beat i:nth-child(2){animation-delay:.35s}.z-loading-bounce,.z-loading-dot,.z-loading-puff,.z-loading-ring{position:relative;width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-bounce i{position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:.6;animation:z-loading-bounce 2.1s infinite ease-in-out both}.z-loading-bounce i:first-child{animation-delay:1s}.z-loading-circle{position:relative;width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-circle i{--z-ring-inset: calc(var(--z-index) * var(--z-loading-size) * .035);position:absolute;inset:var(--z-ring-inset);border-top:max(1px,var(--z-loading-stroke) / 2) solid currentColor;border-left:max(1px,var(--z-loading-stroke) / 2) solid currentColor;border-radius:50%;animation:z-loading-circle 1s calc(var(--z-index) * .2s) infinite linear}.z-loading-climbing-box{position:relative;width:calc(var(--z-loading-size) * 1.35);height:var(--z-loading-size);overflow:hidden}.z-loading-climbing-box i{position:absolute;left:8%;bottom:7%;width:22%;height:22%;border:var(--z-loading-stroke) solid currentColor;border-radius:15%;animation:z-loading-climbing-box 2.5s infinite cubic-bezier(.79,0,.47,.97) both}.z-loading-climbing-box b{position:absolute;right:2%;bottom:-48%;width:92%;height:92%;border-left:var(--z-loading-stroke) solid currentColor;transform:rotate(45deg)}.z-loading-clip{width:var(--z-loading-size);height:var(--z-loading-size);border:var(--z-loading-stroke) solid currentColor;border-bottom-color:transparent;border-radius:50%;animation:z-loading-clip .75s infinite linear both}.z-loading-clock{position:relative;width:var(--z-loading-size);height:var(--z-loading-size);border:var(--z-loading-stroke) solid currentColor;border-radius:50%}.z-loading-clock i{position:absolute;top:50%;left:50%;width:40%;height:var(--z-loading-stroke);border-radius:999px;background:currentColor;transform-origin:left center;animation:z-loading-clock 2s linear infinite}.z-loading-clock i:last-child{width:28%;animation-duration:8s}.z-loading-dot{animation:z-loading-spin 2s infinite linear}.z-loading-dot i{position:absolute;width:50%;height:50%;border-radius:50%;background:currentColor;animation:z-loading-dot 2s infinite linear both}.z-loading-dot i:first-child{top:0;left:0}.z-loading-dot i:last-child{right:0;bottom:0;animation-delay:1s}.z-loading-fade{position:relative;width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-fade i{position:absolute;top:8%;left:44%;width:12%;height:32%;border-radius:999px;background:currentColor;transform:rotate(calc(var(--z-index) * 45deg));transform-origin:50% 132%;animation:z-loading-fade 1.2s calc(var(--z-index) * .12s) infinite ease-in-out both}.z-loading-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--z-loading-size) / 12);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-grid i{border-radius:50%;background:currentColor;animation:z-loading-grid .9s calc(var(--z-index) * -.07s) infinite ease both}.z-loading-hash{position:relative;width:var(--z-loading-size);height:var(--z-loading-size);transform:rotate(165deg)}.z-loading-hash i{position:absolute;top:50%;left:50%;width:20%;height:20%;border-radius:999px;transform:translate(-50%,-50%)}.z-loading-hash i:first-child{animation:z-loading-hash-horizontal 2s infinite}.z-loading-hash i:last-child{animation:z-loading-hash-vertical 2s infinite}.z-loading-moon{position:relative;width:var(--z-loading-size);height:var(--z-loading-size);animation:z-loading-spin .6s infinite linear}.z-loading-moon i:first-child{position:absolute;top:42%;left:-8%;width:22%;height:22%;border-radius:50%;background:currentColor;opacity:.8}.z-loading-moon i:last-child{position:absolute;inset:8%;border:calc(var(--z-loading-size) / 8) solid currentColor;border-radius:50%;opacity:.12}.z-loading-pacman{position:relative;width:calc(var(--z-loading-size) * 2.6);height:var(--z-loading-size)}.z-loading-pacman>i{position:absolute;left:0;width:0;height:0;border:calc(var(--z-loading-size) / 2) solid currentColor;border-right-color:transparent;border-radius:50%;animation:z-loading-pacman-top .8s infinite ease-in-out both}.z-loading-pacman>i:nth-child(2){border-top-color:transparent;border-right-color:transparent;animation-name:z-loading-pacman-bottom}.z-loading-pacman b{--z-pacman-dot-size: calc(var(--z-loading-size) / 6);position:absolute;top:calc(50% - var(--z-pacman-dot-size) / 2);left:calc(var(--z-loading-size) * 2.35);width:var(--z-pacman-dot-size);height:var(--z-pacman-dot-size);border-radius:50%;background:currentColor;animation:z-loading-pacman-dot 1s calc(var(--z-index) * .25s) infinite linear both}.z-loading-propagate{position:relative;width:var(--z-loading-size);height:calc(var(--z-loading-size) / 3)}.z-loading-propagate i{position:absolute;left:calc(50% - var(--z-loading-size) / 6);width:calc(var(--z-loading-size) / 3);height:calc(var(--z-loading-size) / 3);border-radius:50%;background:currentColor;animation:z-loading-propagate 1.5s infinite both}.z-loading-propagate i:nth-child(1){--z-propagate-distance: -750%}.z-loading-propagate i:nth-child(2){--z-propagate-distance: -450%}.z-loading-propagate i:nth-child(3){--z-propagate-distance: -150%}.z-loading-propagate i:nth-child(4){--z-propagate-distance: 150%}.z-loading-propagate i:nth-child(5){--z-propagate-distance: 450%}.z-loading-propagate i:nth-child(6){--z-propagate-distance: 750%}.z-loading-puff i{position:absolute;inset:0;border:var(--z-loading-stroke) solid currentColor;border-radius:50%;animation:z-loading-puff-scale 2s infinite cubic-bezier(.165,.84,.44,1) both,z-loading-puff-opacity 2s infinite cubic-bezier(.3,.61,.355,1) both}.z-loading-puff i:first-child{animation-delay:-1s}.z-loading-pulse i{animation:z-loading-pulse .75s infinite cubic-bezier(.2,.68,.18,1.08) both}.z-loading-pulse i:nth-child(2){animation-delay:.12s}.z-loading-pulse i:nth-child(3){animation-delay:.24s}.z-loading-ring{perspective:800px}.z-loading-ring i{position:absolute;inset:0;border:calc(var(--z-loading-size) / 10) solid currentColor;border-radius:50%;opacity:.4;animation:z-loading-ring-right 2s infinite linear both}.z-loading-ring i:last-child{animation-name:z-loading-ring-left}.z-loading-rise i{animation:z-loading-rise-odd 1s infinite cubic-bezier(.15,.46,.9,.6) both}.z-loading-rise i:nth-child(2n){animation-name:z-loading-rise-even}.z-loading-rotate{position:relative;width:calc(var(--z-loading-size) / 3);height:calc(var(--z-loading-size) / 3);border-radius:50%;background:currentColor;animation:z-loading-spin 1s infinite cubic-bezier(.7,-.13,.22,.86) both}.z-loading-rotate i{position:absolute;top:0;width:100%;height:100%;border-radius:inherit;background:currentColor;opacity:.8}.z-loading-rotate i:first-child{left:calc(var(--z-loading-size) * -.75)}.z-loading-rotate i:last-child{right:calc(var(--z-loading-size) * -.75)}.z-loading-scale{display:inline-flex;align-items:center;gap:calc(var(--z-loading-size) / 10);height:var(--z-loading-size)}.z-loading-scale i{width:calc(var(--z-loading-size) / 9);height:100%;border-radius:999px;background:currentColor;animation:z-loading-scale 1s calc((var(--z-index) + 1) * .1s) infinite cubic-bezier(.2,.68,.18,1.08) both}.z-loading-skew{width:0;height:0;border-right:calc(var(--z-loading-size) / 2) solid transparent;border-bottom:var(--z-loading-size) solid currentColor;border-left:calc(var(--z-loading-size) / 2) solid transparent;animation:z-loading-skew 3s infinite cubic-bezier(.09,.57,.49,.9) both}.z-loading-square{width:var(--z-loading-size);height:var(--z-loading-size);background:currentColor;animation:z-loading-square 3s infinite cubic-bezier(.09,.57,.49,.9) both}.z-loading-sync i{animation:z-loading-sync .6s infinite ease-in-out both}.z-loading-sync i:nth-child(2){animation-delay:.07s}.z-loading-sync i:nth-child(3){animation-delay:.14s}.z-loading-orbit-chase{position:relative;width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-orbit-chase i{position:absolute;top:50%;left:50%;width:calc(var(--z-loading-size) * .146);height:calc(var(--z-loading-size) * .146);margin:calc(var(--z-loading-size) * -.073) 0 0 calc(var(--z-loading-size) * -.073);border-radius:999px;background:currentColor;transform:rotate(calc(var(--z-index) * 45deg)) translateY(calc(var(--z-loading-size) * -.375));animation:z-loading-orbit-chase-node .96s ease-in-out calc(var(--z-index) * .12s) infinite}.z-loading-bars{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--z-loading-size) / 12);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-bars i{width:calc(var(--z-loading-size) / 12);border-radius:999px;background:currentColor;opacity:.22;scale:1 .56;animation:z-loading-bars-bar .98s cubic-bezier(.45,0,.25,1) calc(var(--z-index) * .09s) infinite}.z-loading-bars i:nth-child(1),.z-loading-bars i:nth-child(5){height:calc(var(--z-loading-size) * .458)}.z-loading-bars i:nth-child(2),.z-loading-bars i:nth-child(4){height:calc(var(--z-loading-size) * .375)}.z-loading-bars i:nth-child(3){height:calc(var(--z-loading-size) * .292)}.z-loading-matrix-grid{display:grid;grid-template-columns:repeat(3,1fr);place-items:center;gap:calc(var(--z-loading-size) / 8);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-matrix-grid i{width:calc(var(--z-loading-size) / 8);height:calc(var(--z-loading-size) / 8);border-radius:999px;background:currentColor;opacity:.2;scale:.68;animation:z-loading-matrix-grid-node 1.04s cubic-bezier(.45,0,.25,1) infinite}.z-loading-matrix-grid i:nth-child(2),.z-loading-matrix-grid i:nth-child(4){animation-delay:.09s}.z-loading-matrix-grid i:nth-child(3),.z-loading-matrix-grid i:nth-child(5),.z-loading-matrix-grid i:nth-child(7){animation-delay:.18s}.z-loading-matrix-grid i:nth-child(6),.z-loading-matrix-grid i:nth-child(8){animation-delay:.27s}.z-loading-matrix-grid i:nth-child(9){animation-delay:.36s}.z-loading-merge{display:grid;grid-template-columns:repeat(2,1fr);place-items:center;gap:calc(var(--z-loading-size) / 8);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-merge i{--z-cell-x: calc(var(--z-loading-size) * .083);--z-cell-y: calc(var(--z-loading-size) * .083);width:calc(var(--z-loading-size) / 4);height:calc(var(--z-loading-size) / 4);border-radius:calc(var(--z-loading-size) / 16);background:currentColor;opacity:.2;scale:.7;animation:z-loading-merge-cell 1.12s cubic-bezier(.45,0,.25,1) calc(var(--z-index) * .1s) infinite}.z-loading-merge i:nth-child(2){--z-cell-x: calc(var(--z-loading-size) * -.083)}.z-loading-merge i:nth-child(3){--z-cell-y: calc(var(--z-loading-size) * -.083)}.z-loading-merge i:nth-child(4){--z-cell-x: calc(var(--z-loading-size) * -.083);--z-cell-y: calc(var(--z-loading-size) * -.083)}.z-loading-encode{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--z-loading-size) / 12);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-encode i{width:calc(var(--z-loading-size) / 12);height:calc(var(--z-loading-size) * .375);border-radius:999px;background:currentColor;opacity:.2;scale:1 .42;animation:z-loading-encode-bit 1.04s cubic-bezier(.45,0,.25,1) calc(var(--z-index) * .09s) infinite}.z-loading-encode i:nth-child(odd){translate:0 calc(var(--z-loading-size) * -.125)}.z-loading-encode i:nth-child(2n){translate:0 calc(var(--z-loading-size) * .125)}.z-loading-scan{display:grid;align-content:center;gap:calc(var(--z-loading-size) / 6);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-scan b{position:relative;display:block;width:calc(var(--z-loading-size) * .833);height:calc(var(--z-loading-size) / 12);margin-inline:auto;overflow:hidden;border-radius:calc(var(--z-loading-size) / 24);background:color-mix(in srgb,currentColor 20%,transparent)}.z-loading-scan i{position:absolute;inset:0;display:block;width:calc(var(--z-loading-size) * .292);border-radius:inherit;background:currentColor;opacity:.26;translate:calc(var(--z-loading-size) * -.333) 0;animation:z-loading-scan-segment 1.06s cubic-bezier(.45,0,.25,1) calc(var(--z-index) * .18s) infinite}.z-loading-lift{position:relative;width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-lift:before{position:absolute;top:calc(var(--z-loading-size) * .125);bottom:calc(var(--z-loading-size) * .125);left:calc(var(--z-loading-size) * .479);width:max(1px,var(--z-loading-size) / 48);background:color-mix(in srgb,currentColor 20%,transparent);content:\"\"}.z-loading-lift i{position:absolute;bottom:calc(var(--z-loading-size) * (.125 + var(--z-index) * .208));left:calc(var(--z-loading-size) * (.375 - var(--z-index) * .027));width:calc(var(--z-loading-size) * (.25 + var(--z-index) * .054));height:calc(var(--z-loading-size) / 8);border-radius:calc(var(--z-loading-size) / 16);background:currentColor;opacity:.18;animation:z-loading-lift-rise 1.24s cubic-bezier(.34,1.4,.55,1) calc(var(--z-index) * .12s) infinite}@keyframes z-loading-matrix{0%{background-position:0% 100%,50% 100%,100% 100%}to{background-position:0% 0%,50% 0%,100% 0%}}@keyframes z-loading-conic{to{transform:rotate(1turn)}}@keyframes z-loading-polygon-1{0%{clip-path:polygon(50% 50%,0 0,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}25%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0% 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%)}}@keyframes z-loading-polygon-2{0%{transform:scaleY(1) rotate(0)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0)}to{transform:scaleY(-1) rotate(-135deg)}}@keyframes z-loading-triple{to{transform:rotate(1turn)}}@keyframes z-loading-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes z-loading-bar-long{0%{right:100%;left:-35%}60%,to{right:-90%;left:100%}}@keyframes z-loading-bar-short{0%{right:100%;left:-200%}60%,to{right:-8%;left:107%}}@keyframes z-loading-beat{50%{opacity:.2;transform:scale(.75)}to{opacity:1;transform:scale(1)}}@keyframes z-loading-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes z-loading-circle{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}@keyframes z-loading-climbing-box{0%{transform:translate(0) rotate(-45deg)}20%{transform:translate(85%,-85%) rotate(47deg)}45%{transform:translate(170%,-170%) rotate(137deg)}70%{transform:translate(255%,-255%) rotate(217deg)}to{transform:translate(0) rotate(-225deg)}}@keyframes z-loading-clip{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.8)}to{transform:rotate(360deg) scale(1)}}@keyframes z-loading-clock{to{transform:rotate(360deg)}}@keyframes z-loading-dot{0%,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes z-loading-fade{50%{opacity:.3}to{opacity:1}}@keyframes z-loading-grid{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.5)}}@keyframes z-loading-hash-horizontal{0%,to{width:20%;box-shadow:calc(var(--z-loading-size) * .4) calc(var(--z-loading-size) * -.2) color-mix(in srgb,currentColor 75%,transparent),calc(var(--z-loading-size) * -.4) calc(var(--z-loading-size) * .2) color-mix(in srgb,currentColor 75%,transparent)}35%{width:100%;box-shadow:0 calc(var(--z-loading-size) * -.2) color-mix(in srgb,currentColor 75%,transparent),0 calc(var(--z-loading-size) * .2) color-mix(in srgb,currentColor 75%,transparent)}70%{width:20%;box-shadow:calc(var(--z-loading-size) * -.4) calc(var(--z-loading-size) * -.2) color-mix(in srgb,currentColor 75%,transparent),calc(var(--z-loading-size) * .4) calc(var(--z-loading-size) * .2) color-mix(in srgb,currentColor 75%,transparent)}}@keyframes z-loading-hash-vertical{0%,to{height:20%;box-shadow:calc(var(--z-loading-size) * .2) calc(var(--z-loading-size) * .4) currentColor,calc(var(--z-loading-size) * -.2) calc(var(--z-loading-size) * -.4) currentColor}35%{height:100%;box-shadow:calc(var(--z-loading-size) * .2) 0 currentColor,calc(var(--z-loading-size) * -.2) 0 currentColor}70%{height:20%;box-shadow:calc(var(--z-loading-size) * .2) calc(var(--z-loading-size) * -.4) currentColor,calc(var(--z-loading-size) * -.2) calc(var(--z-loading-size) * .4) currentColor}}@keyframes z-loading-pacman-top{0%,to{transform:rotate(0)}50%{transform:rotate(-44deg)}}@keyframes z-loading-pacman-bottom{0%,to{transform:rotate(0)}50%{transform:rotate(44deg)}}@keyframes z-loading-pacman-dot{75%{opacity:.7}to{transform:translate(calc(var(--z-loading-size) * -2.2))}}@keyframes z-loading-propagate{0%,95%,to{transform:translate(0) scale(1)}50%{transform:translate(var(--z-propagate-distance)) scale(.6)}}@keyframes z-loading-puff-scale{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes z-loading-puff-opacity{0%{opacity:1}to{opacity:0}}@keyframes z-loading-pulse{0%,80%{opacity:1;transform:scale(1)}45%{opacity:.7;transform:scale(.1)}}@keyframes z-loading-ring-right{0%{transform:rotateX(0) rotateY(0) rotate(0)}to{transform:rotateX(180deg) rotateY(360deg) rotate(360deg)}}@keyframes z-loading-ring-left{0%{transform:rotateX(0) rotateY(0) rotate(0)}to{transform:rotateX(360deg) rotateY(180deg) rotate(360deg)}}@keyframes z-loading-rise-even{0%{transform:scale(1.1)}25%{transform:translateY(calc(var(--z-loading-size) * -.4))}50%{transform:scale(.4)}75%{transform:translateY(calc(var(--z-loading-size) * .4))}to{transform:translateY(0) scale(1)}}@keyframes z-loading-rise-odd{0%{transform:scale(.4)}25%{transform:translateY(calc(var(--z-loading-size) * .4))}50%{transform:scale(1.1)}75%{transform:translateY(calc(var(--z-loading-size) * -.4))}to{transform:translateY(0) scale(.75)}}@keyframes z-loading-scale{0%,to{transform:scaleY(1)}50%{transform:scaleY(.4)}}@keyframes z-loading-skew{25%{transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{transform:perspective(100px) rotateX(0) rotateY(180deg)}to{transform:perspective(100px) rotateX(0) rotateY(0)}}@keyframes z-loading-square{25%{transform:rotateX(180deg) rotateY(0)}50%{transform:rotateX(180deg) rotateY(180deg)}75%{transform:rotateX(0) rotateY(180deg)}to{transform:rotateX(0) rotateY(0)}}@keyframes z-loading-sync{33%{transform:translateY(calc(var(--z-loading-size) * .3))}66%{transform:translateY(calc(var(--z-loading-size) * -.3))}to{transform:translateY(0)}}@keyframes z-loading-orbit-chase-node{0%,to{opacity:.18;scale:.72}20%{opacity:1;scale:1.2}42%{opacity:.7;scale:1}65%{opacity:.18;scale:.72}}@keyframes z-loading-bars-bar{0%,to{opacity:.22;scale:1 .56}28%{opacity:.52;scale:1 .82}48%{opacity:1;scale:1 1}72%{opacity:.34;scale:1 .68}}@keyframes z-loading-matrix-grid-node{0%,to{opacity:.2;scale:.68}30%{opacity:.46;scale:.82}48%{opacity:1;scale:1.18}72%{opacity:.3;scale:.74}}@keyframes z-loading-merge-cell{0%,to{opacity:.2;scale:.7;translate:0 0}44%,62%{opacity:1;scale:1;translate:var(--z-cell-x) var(--z-cell-y)}78%{opacity:.36;scale:.78;translate:0 0}}@keyframes z-loading-encode-bit{0%,to{opacity:.2;scale:1 .42}32%{opacity:.5;scale:1 .72}50%{opacity:1;scale:1 1}74%{opacity:.32;scale:1 .52}}@keyframes z-loading-scan-segment{0%,to{opacity:.2;translate:calc(var(--z-loading-size) * -.333) 0}42%{opacity:1;translate:calc(var(--z-loading-size) * .292) 0}70%{opacity:.36;translate:calc(var(--z-loading-size) * .583) 0}}@keyframes z-loading-lift-rise{0%,to{opacity:.16;translate:0 calc(var(--z-loading-size) * .083);scale:.72}32%{opacity:.5;translate:0 0;scale:.9}50%{opacity:1;translate:0 calc(var(--z-loading-size) * -.083);scale:1.08}74%{opacity:.3;translate:0 calc(var(--z-loading-size) * -.125);scale:.82}}\n/*! Spinner animations adapted from react-spinners, Copyright (c) 2017 David Hu, MIT License. */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
116
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZLoadingComponent, isStandalone: true, selector: "z-loading", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zSpinner: { classPropertyName: "zSpinner", publicName: "zSpinner", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zColor: { classPropertyName: "zColor", publicName: "zColor", isSignal: true, isRequired: false, transformFunction: null }, zText: { classPropertyName: "zText", publicName: "zText", isSignal: true, isRequired: false, transformFunction: null }, zOverlay: { classPropertyName: "zOverlay", publicName: "zOverlay", isSignal: true, isRequired: false, transformFunction: null }, zOverlayType: { classPropertyName: "zOverlayType", publicName: "zOverlayType", isSignal: true, isRequired: false, transformFunction: null }, zFullscreen: { classPropertyName: "zFullscreen", publicName: "zFullscreen", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "z-loading inline-flex" }, ngImport: i0, template: "@if (!zOverlay() && !zFullscreen()) {\n <div\n class=\"z-loading-wrapper inline-flex items-center justify-center transition-opacity duration-150\"\n [class.opacity-0]=\"!zLoading()\"\n [class.pointer-events-none]=\"!zLoading()\">\n <ng-container *ngTemplateOutlet=\"spinnerContent\" />\n </div>\n}\n\n@if ((zOverlay() || zFullscreen()) && isVisible()) {\n <div\n class=\"z-loading-wrapper inline-flex items-center justify-center\"\n [class.z-loading-overlay]=\"zOverlay()\"\n [class.z-loading-fullscreen]=\"zFullscreen()\"\n [class.z-loading-leaving]=\"isLeaving()\"\n [class]=\"overlayClasses()\">\n <ng-container *ngTemplateOutlet=\"spinnerContent\" />\n </div>\n}\n\n<ng-template #spinnerContent>\n <div\n class=\"z-loading-content flex flex-col items-center justify-center gap-3\"\n [attr.data-z-loading-spinner]=\"zSpinner()\">\n @switch (zSpinner()) {\n @case ('spinner') {\n <svg [class]=\"spinnerClasses()\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n </svg>\n }\n @case ('orbit') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-orbit\">\n <div class=\"absolute top-1/2 left-0 h-2 w-2 -translate-y-1/2 rounded-full bg-current\"></div>\n <div class=\"absolute top-1/2 right-0 h-2 w-2 -translate-y-1/2 rounded-full bg-current opacity-30\"></div>\n </div>\n }\n @case ('matrix') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-matrix\"></div>\n }\n @case ('conic') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-conic rounded-full\"></div>\n }\n @case ('polygon') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-polygon rounded-full\"></div>\n }\n @case ('triple') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-triple rounded-full\"></div>\n }\n @case ('bar') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-bar\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('beat') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-beat\">\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('bounce') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-bounce\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('circle') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-circle\">\n @for (ring of circleRings; track ring) {\n <i [style.--z-index]=\"ring\"></i>\n }\n </span>\n }\n @case ('climbing-box') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-climbing-box\">\n <i></i>\n <b></b>\n </span>\n }\n @case ('clip') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-clip\"></span>\n }\n @case ('clock') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-clock\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('dot') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-dot\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('fade') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-fade\">\n @for (bar of fadeBars; track bar) {\n <i [style.--z-index]=\"bar\"></i>\n }\n </span>\n }\n @case ('grid') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-grid\">\n @for (dot of gridDots; track dot) {\n <i [style.--z-index]=\"dot\"></i>\n }\n </span>\n }\n @case ('hash') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-hash\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('moon') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-moon\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('pacman') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-pacman\">\n <i></i>\n <i></i>\n @for (dot of pacmanDots; track dot) {\n <b [style.--z-index]=\"dot\"></b>\n }\n </span>\n }\n @case ('propagate') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-propagate\">\n @for (dot of propagateDots; track dot) {\n <i [style.--z-index]=\"dot\"></i>\n }\n </span>\n }\n @case ('puff') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-puff\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('pulse') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-pulse\">\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('ring') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-ring\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('rise') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-rise\">\n <i></i>\n <i></i>\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('rotate') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-rotate\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('scale') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-scale\">\n @for (bar of scaleBars; track bar) {\n <i [style.--z-index]=\"bar\"></i>\n }\n </span>\n }\n @case ('skew') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-skew\"></span>\n }\n @case ('square') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-square\"></span>\n }\n @case ('sync') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-sync\">\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('orbit-chase') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-orbit-chase\">\n @for (node of orbitChaseNodes; track node) {\n <i [style.--z-index]=\"node\"></i>\n }\n </span>\n }\n @case ('bars') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-bars\">\n @for (column of barsColumns; track column) {\n <i [style.--z-index]=\"column\"></i>\n }\n </span>\n }\n @case ('matrix-grid') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-matrix-grid\">\n @for (dot of matrixDots; track dot) {\n <i></i>\n }\n </span>\n }\n @case ('merge') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-merge\">\n @for (cell of mergeCells; track cell) {\n <i [style.--z-index]=\"cell\"></i>\n }\n </span>\n }\n @case ('encode') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-encode\">\n @for (bit of encodeBits; track bit) {\n <i [style.--z-index]=\"bit\"></i>\n }\n </span>\n }\n @case ('scan') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-scan\">\n @for (row of scanRows; track row) {\n <b><i [style.--z-index]=\"row\"></i></b>\n }\n </span>\n }\n @case ('lift') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-lift\">\n @for (level of liftLevels; track level) {\n <i [style.--z-index]=\"level\"></i>\n }\n </span>\n }\n }\n\n @if (zText()) {\n <p [class]=\"textSizeClasses()\" class=\"z-loading-text font-medium\" [style.color]=\"'currentColor'\">\n {{ zText() }}\n </p>\n }\n </div>\n</ng-template>\n", styles: [".z-loading:has(.z-loading-overlay),.z-loading:has(.z-loading-fullscreen){display:contents}.z-loading-overlay,.z-loading-fullscreen{position:absolute;inset:0;z-index:150;display:flex;align-items:center;justify-content:center}.z-loading-fullscreen{position:fixed;z-index:9999}.z-loading-overlay-dark{background-color:#0009;animation:z-backdrop-enter .15s ease-out forwards}.z-loading-overlay-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:z-backdrop-enter .15s ease-out forwards}.z-loading-overlay-default{background-color:var(--loading-overlay-bg, rgba(255, 255, 255, .85));animation:z-backdrop-enter .15s ease-out forwards}.dark .z-loading-overlay-default{background-color:#000000d9}.z-loading-leaving.z-loading-overlay-dark,.z-loading-leaving.z-loading-overlay-blur,.z-loading-leaving.z-loading-overlay-default{animation:z-backdrop-exit .12s ease-in forwards}.z-loading-content{position:relative;z-index:51}.z-loading-loader{--z-loading-size: 1.5rem;--z-loading-stroke: max(2px, calc(var(--z-loading-size) / 12));display:inline-block;flex:none;box-sizing:border-box}.z-loading-loader *,.z-loading-loader *:before,.z-loading-loader *:after{box-sizing:border-box}.z-loading-size-2xs{--z-loading-size: .75rem}.z-loading-size-xs{--z-loading-size: 1rem}.z-loading-size-default{--z-loading-size: 1.5rem}.z-loading-size-lg{--z-loading-size: 2rem}.z-loading-size-xl{--z-loading-size: 3rem}.z-loading-orbit{position:relative;width:var(--z-loading-size);height:var(--z-loading-size);animation:z-loading-spin 1.2s linear infinite}.z-loading-orbit>div{width:calc(var(--z-loading-size) / 4);height:calc(var(--z-loading-size) / 4)}.z-loading-matrix{width:var(--z-loading-size);height:calc(var(--z-loading-size) * .875);background:linear-gradient(transparent 16.6666666667%,currentColor 0 50%,transparent 0),linear-gradient(transparent 33.3333333333%,currentColor 0 66.6666666667%,transparent 0),linear-gradient(transparent 50%,currentColor 0 83.3333333333%,transparent 0);background-size:calc(var(--z-loading-size) / 4) 400%;background-repeat:no-repeat;animation:z-loading-matrix 1s infinite linear}.z-loading-conic{width:var(--z-loading-size);padding:calc(var(--z-loading-size) / 6);aspect-ratio:1;background:currentColor;-webkit-mask:conic-gradient(transparent 10%,#000),linear-gradient(#000 0 0) content-box;mask:conic-gradient(transparent 10%,#000),linear-gradient(#000 0 0) content-box;-webkit-mask-composite:source-out;mask-composite:subtract;animation:z-loading-conic 1s infinite linear}.z-loading-polygon{width:var(--z-loading-size);aspect-ratio:1;border:max(2px,var(--z-loading-size) / 6) solid currentColor;animation:z-loading-polygon-1 .8s infinite linear alternate,z-loading-polygon-2 1.6s infinite linear}.z-loading-triple{width:var(--z-loading-size);aspect-ratio:1;border:var(--z-loading-stroke) solid transparent;border-right-color:currentColor;position:relative;animation:z-loading-triple 1s infinite linear}.z-loading-triple:before,.z-loading-triple:after{content:\"\";position:absolute;inset:calc(var(--z-loading-stroke) * -1);border-radius:50%;border:inherit;animation:inherit}.z-loading-triple:before{animation-duration:2s;opacity:.6}.z-loading-triple:after{animation-duration:4s;opacity:.3}.z-loading-bar{position:relative;width:calc(var(--z-loading-size) * 3);height:var(--z-loading-stroke);overflow:hidden;border-radius:999px;background:color-mix(in srgb,currentColor 20%,transparent)}.z-loading-bar i{position:absolute;inset-block:0;display:block;border-radius:inherit;background:currentColor;will-change:left,right}.z-loading-bar i:first-child{animation:z-loading-bar-long 2.1s infinite cubic-bezier(.65,.815,.735,.395)}.z-loading-bar i:last-child{animation:z-loading-bar-short 2.1s 1.15s infinite cubic-bezier(.165,.84,.44,1)}.z-loading-beat,.z-loading-pulse,.z-loading-sync,.z-loading-rise{display:inline-flex;align-items:center;gap:calc(var(--z-loading-size) / 8)}.z-loading-beat i,.z-loading-pulse i,.z-loading-sync i,.z-loading-rise i{width:calc(var(--z-loading-size) * .38);height:calc(var(--z-loading-size) * .38);border-radius:50%;background:currentColor}.z-loading-beat i{animation:z-loading-beat .7s infinite linear both}.z-loading-beat i:nth-child(2){animation-delay:.35s}.z-loading-bounce,.z-loading-dot,.z-loading-puff,.z-loading-ring{position:relative;width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-bounce i{position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:.6;animation:z-loading-bounce 2.1s infinite ease-in-out both}.z-loading-bounce i:first-child{animation-delay:1s}.z-loading-circle{position:relative;width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-circle i{--z-ring-inset: calc(var(--z-index) * var(--z-loading-size) * .035);position:absolute;inset:var(--z-ring-inset);border-top:max(1px,var(--z-loading-stroke) / 2) solid currentColor;border-left:max(1px,var(--z-loading-stroke) / 2) solid currentColor;border-radius:50%;animation:z-loading-circle 1s calc(var(--z-index) * .2s) infinite linear}.z-loading-climbing-box{position:relative;width:calc(var(--z-loading-size) * 1.35);height:var(--z-loading-size);overflow:hidden}.z-loading-climbing-box i{position:absolute;left:8%;bottom:7%;width:22%;height:22%;border:var(--z-loading-stroke) solid currentColor;border-radius:15%;animation:z-loading-climbing-box 2.5s infinite cubic-bezier(.79,0,.47,.97) both}.z-loading-climbing-box b{position:absolute;right:2%;bottom:-48%;width:92%;height:92%;border-left:var(--z-loading-stroke) solid currentColor;transform:rotate(45deg)}.z-loading-clip{width:var(--z-loading-size);height:var(--z-loading-size);border:var(--z-loading-stroke) solid currentColor;border-bottom-color:transparent;border-radius:50%;animation:z-loading-clip .75s infinite linear both}.z-loading-clock{position:relative;width:var(--z-loading-size);height:var(--z-loading-size);border:var(--z-loading-stroke) solid currentColor;border-radius:50%}.z-loading-clock i{position:absolute;top:50%;left:50%;width:40%;height:var(--z-loading-stroke);border-radius:999px;background:currentColor;transform-origin:left center;animation:z-loading-clock 2s linear infinite}.z-loading-clock i:last-child{width:28%;animation-duration:8s}.z-loading-dot{animation:z-loading-spin 2s infinite linear}.z-loading-dot i{position:absolute;width:50%;height:50%;border-radius:50%;background:currentColor;animation:z-loading-dot 2s infinite linear both}.z-loading-dot i:first-child{top:0;left:0}.z-loading-dot i:last-child{right:0;bottom:0;animation-delay:1s}.z-loading-fade{position:relative;width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-fade i{position:absolute;top:8%;left:44%;width:12%;height:32%;border-radius:999px;background:currentColor;transform:rotate(calc(var(--z-index) * 45deg));transform-origin:50% 132%;animation:z-loading-fade 1.2s calc(var(--z-index) * .12s) infinite ease-in-out both}.z-loading-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--z-loading-size) / 12);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-grid i{border-radius:50%;background:currentColor;animation:z-loading-grid .9s calc(var(--z-index) * -.07s) infinite ease both}.z-loading-hash{position:relative;width:var(--z-loading-size);height:var(--z-loading-size);transform:rotate(165deg)}.z-loading-hash i{position:absolute;top:50%;left:50%;width:20%;height:20%;border-radius:999px;transform:translate(-50%,-50%)}.z-loading-hash i:first-child{animation:z-loading-hash-horizontal 2s infinite}.z-loading-hash i:last-child{animation:z-loading-hash-vertical 2s infinite}.z-loading-moon{position:relative;width:var(--z-loading-size);height:var(--z-loading-size);animation:z-loading-spin .6s infinite linear}.z-loading-moon i:first-child{position:absolute;top:42%;left:-8%;width:22%;height:22%;border-radius:50%;background:currentColor;opacity:.8}.z-loading-moon i:last-child{position:absolute;inset:8%;border:calc(var(--z-loading-size) / 8) solid currentColor;border-radius:50%;opacity:.12}.z-loading-pacman{position:relative;width:calc(var(--z-loading-size) * 2.6);height:var(--z-loading-size)}.z-loading-pacman>i{position:absolute;left:0;width:0;height:0;border:calc(var(--z-loading-size) / 2) solid currentColor;border-right-color:transparent;border-radius:50%;animation:z-loading-pacman-top .8s infinite ease-in-out both}.z-loading-pacman>i:nth-child(2){border-top-color:transparent;border-right-color:transparent;animation-name:z-loading-pacman-bottom}.z-loading-pacman b{--z-pacman-dot-size: calc(var(--z-loading-size) / 6);position:absolute;top:calc(50% - var(--z-pacman-dot-size) / 2);left:calc(var(--z-loading-size) * 2.35);width:var(--z-pacman-dot-size);height:var(--z-pacman-dot-size);border-radius:50%;background:currentColor;animation:z-loading-pacman-dot 1s calc(var(--z-index) * .25s) infinite linear both}.z-loading-propagate{position:relative;width:var(--z-loading-size);height:calc(var(--z-loading-size) / 3)}.z-loading-propagate i{position:absolute;left:calc(50% - var(--z-loading-size) / 6);width:calc(var(--z-loading-size) / 3);height:calc(var(--z-loading-size) / 3);border-radius:50%;background:currentColor;animation:z-loading-propagate 1.5s infinite both}.z-loading-propagate i:nth-child(1){--z-propagate-distance: -750%}.z-loading-propagate i:nth-child(2){--z-propagate-distance: -450%}.z-loading-propagate i:nth-child(3){--z-propagate-distance: -150%}.z-loading-propagate i:nth-child(4){--z-propagate-distance: 150%}.z-loading-propagate i:nth-child(5){--z-propagate-distance: 450%}.z-loading-propagate i:nth-child(6){--z-propagate-distance: 750%}.z-loading-puff i{position:absolute;inset:0;border:var(--z-loading-stroke) solid currentColor;border-radius:50%;animation:z-loading-puff-scale 2s infinite cubic-bezier(.165,.84,.44,1) both,z-loading-puff-opacity 2s infinite cubic-bezier(.3,.61,.355,1) both}.z-loading-puff i:first-child{animation-delay:-1s}.z-loading-pulse i{animation:z-loading-pulse .75s infinite cubic-bezier(.2,.68,.18,1.08) both}.z-loading-pulse i:nth-child(2){animation-delay:.12s}.z-loading-pulse i:nth-child(3){animation-delay:.24s}.z-loading-ring{perspective:800px}.z-loading-ring i{position:absolute;inset:0;border:calc(var(--z-loading-size) / 10) solid currentColor;border-radius:50%;opacity:.4;animation:z-loading-ring-right 2s infinite linear both}.z-loading-ring i:last-child{animation-name:z-loading-ring-left}.z-loading-rise i{animation:z-loading-rise-odd 1s infinite cubic-bezier(.15,.46,.9,.6) both}.z-loading-rise i:nth-child(2n){animation-name:z-loading-rise-even}.z-loading-rotate{position:relative;width:calc(var(--z-loading-size) / 3);height:calc(var(--z-loading-size) / 3);border-radius:50%;background:currentColor;animation:z-loading-spin 1s infinite cubic-bezier(.7,-.13,.22,.86) both}.z-loading-rotate i{position:absolute;top:0;width:100%;height:100%;border-radius:inherit;background:currentColor;opacity:.8}.z-loading-rotate i:first-child{left:calc(var(--z-loading-size) * -.75)}.z-loading-rotate i:last-child{right:calc(var(--z-loading-size) * -.75)}.z-loading-scale{display:inline-flex;align-items:center;gap:calc(var(--z-loading-size) / 10);height:var(--z-loading-size)}.z-loading-scale i{width:calc(var(--z-loading-size) / 9);height:100%;border-radius:999px;background:currentColor;animation:z-loading-scale 1s calc((var(--z-index) + 1) * .1s) infinite cubic-bezier(.2,.68,.18,1.08) both}.z-loading-skew{width:0;height:0;border-right:calc(var(--z-loading-size) / 2) solid transparent;border-bottom:var(--z-loading-size) solid currentColor;border-left:calc(var(--z-loading-size) / 2) solid transparent;animation:z-loading-skew 3s infinite cubic-bezier(.09,.57,.49,.9) both}.z-loading-square{width:var(--z-loading-size);height:var(--z-loading-size);background:currentColor;animation:z-loading-square 3s infinite cubic-bezier(.09,.57,.49,.9) both}.z-loading-sync i{animation:z-loading-sync .6s infinite ease-in-out both}.z-loading-sync i:nth-child(2){animation-delay:.07s}.z-loading-sync i:nth-child(3){animation-delay:.14s}.z-loading-orbit-chase{position:relative;width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-orbit-chase i{position:absolute;top:50%;left:50%;width:calc(var(--z-loading-size) * .146);height:calc(var(--z-loading-size) * .146);margin:calc(var(--z-loading-size) * -.073) 0 0 calc(var(--z-loading-size) * -.073);border-radius:999px;background:currentColor;transform:rotate(calc(var(--z-index) * 45deg)) translateY(calc(var(--z-loading-size) * -.375));animation:z-loading-orbit-chase-node .96s ease-in-out calc(var(--z-index) * .12s) infinite}.z-loading-bars{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--z-loading-size) / 12);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-bars i{width:calc(var(--z-loading-size) / 12);border-radius:999px;background:currentColor;opacity:.22;scale:1 .56;animation:z-loading-bars-bar .98s cubic-bezier(.45,0,.25,1) calc(var(--z-index) * .09s) infinite}.z-loading-bars i:nth-child(1),.z-loading-bars i:nth-child(5){height:calc(var(--z-loading-size) * .458)}.z-loading-bars i:nth-child(2),.z-loading-bars i:nth-child(4){height:calc(var(--z-loading-size) * .375)}.z-loading-bars i:nth-child(3){height:calc(var(--z-loading-size) * .292)}.z-loading-matrix-grid{display:grid;grid-template-columns:repeat(3,1fr);place-items:center;gap:calc(var(--z-loading-size) / 8);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-matrix-grid i{width:calc(var(--z-loading-size) / 8);height:calc(var(--z-loading-size) / 8);border-radius:999px;background:currentColor;opacity:.2;scale:.68;animation:z-loading-matrix-grid-node 1.04s cubic-bezier(.45,0,.25,1) infinite}.z-loading-matrix-grid i:nth-child(2),.z-loading-matrix-grid i:nth-child(4){animation-delay:.09s}.z-loading-matrix-grid i:nth-child(3),.z-loading-matrix-grid i:nth-child(5),.z-loading-matrix-grid i:nth-child(7){animation-delay:.18s}.z-loading-matrix-grid i:nth-child(6),.z-loading-matrix-grid i:nth-child(8){animation-delay:.27s}.z-loading-matrix-grid i:nth-child(9){animation-delay:.36s}.z-loading-merge{display:grid;grid-template-columns:repeat(2,1fr);place-items:center;gap:calc(var(--z-loading-size) / 8);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-merge i{--z-cell-x: calc(var(--z-loading-size) * .083);--z-cell-y: calc(var(--z-loading-size) * .083);width:calc(var(--z-loading-size) / 4);height:calc(var(--z-loading-size) / 4);border-radius:calc(var(--z-loading-size) / 16);background:currentColor;opacity:.2;scale:.7;animation:z-loading-merge-cell 1.12s cubic-bezier(.45,0,.25,1) calc(var(--z-index) * .1s) infinite}.z-loading-merge i:nth-child(2){--z-cell-x: calc(var(--z-loading-size) * -.083)}.z-loading-merge i:nth-child(3){--z-cell-y: calc(var(--z-loading-size) * -.083)}.z-loading-merge i:nth-child(4){--z-cell-x: calc(var(--z-loading-size) * -.083);--z-cell-y: calc(var(--z-loading-size) * -.083)}.z-loading-encode{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--z-loading-size) / 12);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-encode i{width:calc(var(--z-loading-size) / 12);height:calc(var(--z-loading-size) * .375);border-radius:999px;background:currentColor;opacity:.2;scale:1 .42;animation:z-loading-encode-bit 1.04s cubic-bezier(.45,0,.25,1) calc(var(--z-index) * .09s) infinite}.z-loading-encode i:nth-child(odd){translate:0 calc(var(--z-loading-size) * -.125)}.z-loading-encode i:nth-child(2n){translate:0 calc(var(--z-loading-size) * .125)}.z-loading-scan{display:grid;align-content:center;gap:calc(var(--z-loading-size) / 6);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-scan b{position:relative;display:block;width:calc(var(--z-loading-size) * .833);height:calc(var(--z-loading-size) / 12);margin-inline:auto;overflow:hidden;border-radius:calc(var(--z-loading-size) / 24);background:color-mix(in srgb,currentColor 20%,transparent)}.z-loading-scan i{position:absolute;inset:0;display:block;width:calc(var(--z-loading-size) * .292);border-radius:inherit;background:currentColor;opacity:.26;translate:calc(var(--z-loading-size) * -.333) 0;animation:z-loading-scan-segment 1.06s cubic-bezier(.45,0,.25,1) calc(var(--z-index) * .18s) infinite}.z-loading-lift{position:relative;width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-lift:before{position:absolute;top:calc(var(--z-loading-size) * .125);bottom:calc(var(--z-loading-size) * .125);left:calc(var(--z-loading-size) * .479);width:max(1px,var(--z-loading-size) / 48);background:color-mix(in srgb,currentColor 20%,transparent);content:\"\"}.z-loading-lift i{position:absolute;bottom:calc(var(--z-loading-size) * (.125 + var(--z-index) * .208));left:calc(var(--z-loading-size) * (.375 - var(--z-index) * .027));width:calc(var(--z-loading-size) * (.25 + var(--z-index) * .054));height:calc(var(--z-loading-size) / 8);border-radius:calc(var(--z-loading-size) / 16);background:currentColor;opacity:.18;animation:z-loading-lift-rise 1.24s cubic-bezier(.34,1.4,.55,1) calc(var(--z-index) * .12s) infinite}@keyframes z-loading-matrix{0%{background-position:0% 100%,50% 100%,100% 100%}to{background-position:0% 0%,50% 0%,100% 0%}}@keyframes z-loading-conic{to{transform:rotate(1turn)}}@keyframes z-loading-polygon-1{0%{clip-path:polygon(50% 50%,0 0,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}25%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0% 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%)}}@keyframes z-loading-polygon-2{0%{transform:scaleY(1) rotate(0)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0)}to{transform:scaleY(-1) rotate(-135deg)}}@keyframes z-loading-triple{to{transform:rotate(1turn)}}@keyframes z-loading-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes z-loading-bar-long{0%{right:100%;left:-35%}60%,to{right:-90%;left:100%}}@keyframes z-loading-bar-short{0%{right:100%;left:-200%}60%,to{right:-8%;left:107%}}@keyframes z-loading-beat{50%{opacity:.2;transform:scale(.75)}to{opacity:1;transform:scale(1)}}@keyframes z-loading-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes z-loading-circle{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}@keyframes z-loading-climbing-box{0%{transform:translate(0) rotate(-45deg)}20%{transform:translate(85%,-85%) rotate(47deg)}45%{transform:translate(170%,-170%) rotate(137deg)}70%{transform:translate(255%,-255%) rotate(217deg)}to{transform:translate(0) rotate(-225deg)}}@keyframes z-loading-clip{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.8)}to{transform:rotate(360deg) scale(1)}}@keyframes z-loading-clock{to{transform:rotate(360deg)}}@keyframes z-loading-dot{0%,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes z-loading-fade{50%{opacity:.3}to{opacity:1}}@keyframes z-loading-grid{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.5)}}@keyframes z-loading-hash-horizontal{0%,to{width:20%;box-shadow:calc(var(--z-loading-size) * .4) calc(var(--z-loading-size) * -.2) color-mix(in srgb,currentColor 75%,transparent),calc(var(--z-loading-size) * -.4) calc(var(--z-loading-size) * .2) color-mix(in srgb,currentColor 75%,transparent)}35%{width:100%;box-shadow:0 calc(var(--z-loading-size) * -.2) color-mix(in srgb,currentColor 75%,transparent),0 calc(var(--z-loading-size) * .2) color-mix(in srgb,currentColor 75%,transparent)}70%{width:20%;box-shadow:calc(var(--z-loading-size) * -.4) calc(var(--z-loading-size) * -.2) color-mix(in srgb,currentColor 75%,transparent),calc(var(--z-loading-size) * .4) calc(var(--z-loading-size) * .2) color-mix(in srgb,currentColor 75%,transparent)}}@keyframes z-loading-hash-vertical{0%,to{height:20%;box-shadow:calc(var(--z-loading-size) * .2) calc(var(--z-loading-size) * .4) currentColor,calc(var(--z-loading-size) * -.2) calc(var(--z-loading-size) * -.4) currentColor}35%{height:100%;box-shadow:calc(var(--z-loading-size) * .2) 0 currentColor,calc(var(--z-loading-size) * -.2) 0 currentColor}70%{height:20%;box-shadow:calc(var(--z-loading-size) * .2) calc(var(--z-loading-size) * -.4) currentColor,calc(var(--z-loading-size) * -.2) calc(var(--z-loading-size) * .4) currentColor}}@keyframes z-loading-pacman-top{0%,to{transform:rotate(0)}50%{transform:rotate(-44deg)}}@keyframes z-loading-pacman-bottom{0%,to{transform:rotate(0)}50%{transform:rotate(44deg)}}@keyframes z-loading-pacman-dot{75%{opacity:.7}to{transform:translate(calc(var(--z-loading-size) * -2.2))}}@keyframes z-loading-propagate{0%,95%,to{transform:translate(0) scale(1)}50%{transform:translate(var(--z-propagate-distance)) scale(.6)}}@keyframes z-loading-puff-scale{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes z-loading-puff-opacity{0%{opacity:1}to{opacity:0}}@keyframes z-loading-pulse{0%,80%{opacity:1;transform:scale(1)}45%{opacity:.7;transform:scale(.1)}}@keyframes z-loading-ring-right{0%{transform:rotateX(0) rotateY(0) rotate(0)}to{transform:rotateX(180deg) rotateY(360deg) rotate(360deg)}}@keyframes z-loading-ring-left{0%{transform:rotateX(0) rotateY(0) rotate(0)}to{transform:rotateX(360deg) rotateY(180deg) rotate(360deg)}}@keyframes z-loading-rise-even{0%{transform:scale(1.1)}25%{transform:translateY(calc(var(--z-loading-size) * -.4))}50%{transform:scale(.4)}75%{transform:translateY(calc(var(--z-loading-size) * .4))}to{transform:translateY(0) scale(1)}}@keyframes z-loading-rise-odd{0%{transform:scale(.4)}25%{transform:translateY(calc(var(--z-loading-size) * .4))}50%{transform:scale(1.1)}75%{transform:translateY(calc(var(--z-loading-size) * -.4))}to{transform:translateY(0) scale(.75)}}@keyframes z-loading-scale{0%,to{transform:scaleY(1)}50%{transform:scaleY(.4)}}@keyframes z-loading-skew{25%{transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{transform:perspective(100px) rotateX(0) rotateY(180deg)}to{transform:perspective(100px) rotateX(0) rotateY(0)}}@keyframes z-loading-square{25%{transform:rotateX(180deg) rotateY(0)}50%{transform:rotateX(180deg) rotateY(180deg)}75%{transform:rotateX(0) rotateY(180deg)}to{transform:rotateX(0) rotateY(0)}}@keyframes z-loading-sync{33%{transform:translateY(calc(var(--z-loading-size) * .3))}66%{transform:translateY(calc(var(--z-loading-size) * -.3))}to{transform:translateY(0)}}@keyframes z-loading-orbit-chase-node{0%,to{opacity:.18;scale:.72}20%{opacity:1;scale:1.2}42%{opacity:.7;scale:1}65%{opacity:.18;scale:.72}}@keyframes z-loading-bars-bar{0%,to{opacity:.22;scale:1 .56}28%{opacity:.52;scale:1 .82}48%{opacity:1;scale:1 1}72%{opacity:.34;scale:1 .68}}@keyframes z-loading-matrix-grid-node{0%,to{opacity:.2;scale:.68}30%{opacity:.46;scale:.82}48%{opacity:1;scale:1.18}72%{opacity:.3;scale:.74}}@keyframes z-loading-merge-cell{0%,to{opacity:.2;scale:.7;translate:0 0}44%,62%{opacity:1;scale:1;translate:var(--z-cell-x) var(--z-cell-y)}78%{opacity:.36;scale:.78;translate:0 0}}@keyframes z-loading-encode-bit{0%,to{opacity:.2;scale:1 .42}32%{opacity:.5;scale:1 .72}50%{opacity:1;scale:1 1}74%{opacity:.32;scale:1 .52}}@keyframes z-loading-scan-segment{0%,to{opacity:.2;translate:calc(var(--z-loading-size) * -.333) 0}42%{opacity:1;translate:calc(var(--z-loading-size) * .292) 0}70%{opacity:.36;translate:calc(var(--z-loading-size) * .583) 0}}@keyframes z-loading-lift-rise{0%,to{opacity:.16;translate:0 calc(var(--z-loading-size) * .083);scale:.72}32%{opacity:.5;translate:0 0;scale:.9}50%{opacity:1;translate:0 calc(var(--z-loading-size) * -.083);scale:1.08}74%{opacity:.3;translate:0 calc(var(--z-loading-size) * -.125);scale:.82}}\n/*! Spinner animations adapted from react-spinners, Copyright (c) 2017 David Hu, MIT License. */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
117
117
|
}
|
|
118
118
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZLoadingComponent, decorators: [{
|
|
119
119
|
type: Component,
|
|
120
120
|
args: [{ selector: 'z-loading', imports: [CommonModule, NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
121
121
|
class: 'z-loading inline-flex',
|
|
122
|
-
}, template: "@if (!zOverlay() && !zFullscreen()) {\n <div\n class=\"z-loading-wrapper inline-flex items-center justify-center transition-opacity duration-150\"\n [class.opacity-0]=\"!zLoading()\"\n [class.pointer-events-none]=\"!zLoading()\">\n <ng-container *ngTemplateOutlet=\"spinnerContent\" />\n </div>\n}\n\n@if ((zOverlay() || zFullscreen()) && isVisible()) {\n <div\n class=\"z-loading-wrapper inline-flex items-center justify-center\"\n [class.z-loading-overlay]=\"zOverlay()\"\n [class.z-loading-fullscreen]=\"zFullscreen()\"\n [class.z-loading-leaving]=\"isLeaving()\"\n [class]=\"overlayClasses()\">\n <ng-container *ngTemplateOutlet=\"spinnerContent\" />\n </div>\n}\n\n<ng-template #spinnerContent>\n <div\n class=\"z-loading-content flex flex-col items-center justify-center gap-3\"\n [attr.data-z-loading-spinner]=\"zSpinner()\">\n @switch (zSpinner()) {\n @case ('spinner') {\n <svg [class]=\"spinnerClasses()\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n </svg>\n }\n @case ('orbit') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-orbit\">\n <div class=\"absolute top-1/2 left-0 h-2 w-2 -translate-y-1/2 rounded-full bg-current\"></div>\n <div class=\"absolute top-1/2 right-0 h-2 w-2 -translate-y-1/2 rounded-full bg-current opacity-30\"></div>\n </div>\n }\n @case ('matrix') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-matrix\"></div>\n }\n @case ('conic') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-conic rounded-full\"></div>\n }\n @case ('polygon') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-polygon rounded-full\"></div>\n }\n @case ('triple') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-triple rounded-full\"></div>\n }\n @case ('bar') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-bar\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('beat') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-beat\">\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('bounce') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-bounce\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('circle') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-circle\">\n @for (ring of circleRings; track ring) {\n <i [style.--z-index]=\"ring\"></i>\n }\n </span>\n }\n @case ('climbing-box') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-climbing-box\">\n <i></i>\n <b></b>\n </span>\n }\n @case ('clip') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-clip\"></span>\n }\n @case ('clock') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-clock\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('dot') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-dot\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('fade') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-fade\">\n @for (bar of fadeBars; track bar) {\n <i [style.--z-index]=\"bar\"></i>\n }\n </span>\n }\n @case ('grid') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-grid\">\n @for (dot of gridDots; track dot) {\n <i [style.--z-index]=\"dot\"></i>\n }\n </span>\n }\n @case ('hash') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-hash\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('moon') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-moon\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('pacman') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-pacman\">\n <i></i>\n <i></i>\n @for (dot of pacmanDots; track dot) {\n <b [style.--z-index]=\"dot\"></b>\n }\n </span>\n }\n @case ('propagate') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-propagate\">\n @for (dot of propagateDots; track dot) {\n <i [style.--z-index]=\"dot\"></i>\n }\n </span>\n }\n @case ('puff') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-puff\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('pulse') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-pulse\">\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('ring') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-ring\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('rise') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-rise\">\n <i></i>\n <i></i>\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('rotate') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-rotate\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('scale') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-scale\">\n @for (bar of scaleBars; track bar) {\n <i [style.--z-index]=\"bar\"></i>\n }\n </span>\n }\n @case ('skew') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-skew\"></span>\n }\n @case ('square') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-square\"></span>\n }\n @case ('sync') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-sync\">\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('orbit-chase') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-orbit-chase\">\n @for (node of orbitChaseNodes; track node) {\n <i [style.--z-index]=\"node\"></i>\n }\n </span>\n }\n @case ('bars') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-bars\">\n @for (column of barsColumns; track column) {\n <i [style.--z-index]=\"column\"></i>\n }\n </span>\n }\n @case ('matrix-grid') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-matrix-grid\">\n @for (dot of matrixDots; track dot) {\n <i></i>\n }\n </span>\n }\n @case ('merge') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-merge\">\n @for (cell of mergeCells; track cell) {\n <i [style.--z-index]=\"cell\"></i>\n }\n </span>\n }\n @case ('encode') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-encode\">\n @for (bit of encodeBits; track bit) {\n <i [style.--z-index]=\"bit\"></i>\n }\n </span>\n }\n @case ('scan') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-scan\">\n @for (row of scanRows; track row) {\n <b><i [style.--z-index]=\"row\"></i></b>\n }\n </span>\n }\n @case ('lift') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-lift\">\n @for (level of liftLevels; track level) {\n <i [style.--z-index]=\"level\"></i>\n }\n </span>\n }\n }\n\n @if (zText()) {\n <p [class]=\"textSizeClasses()\" class=\"z-loading-text font-medium\" [style.color]=\"'currentColor'\">\n {{ zText() }}\n </p>\n }\n </div>\n</ng-template>\n", styles: [".z-loading:has(.z-loading-overlay),.z-loading:has(.z-loading-fullscreen){display:contents}.z-loading-overlay,.z-loading-fullscreen{position:absolute;inset:0;z-index:150;display:flex;align-items:center;justify-content:center}.z-loading-fullscreen{position:fixed;z-index:9999}.z-loading-overlay-dark{background-color:#0009;animation:z-backdrop-enter .15s ease-out forwards}.z-loading-overlay-blur{background-color:#0000000d;backdrop-filter:blur(2px);animation:z-backdrop-enter .15s ease-out forwards}.z-loading-overlay-default{background-color:var(--loading-overlay-bg, rgba(255, 255, 255, .85));animation:z-backdrop-enter .15s ease-out forwards}.dark .z-loading-overlay-default{background-color:#000000d9}.z-loading-leaving.z-loading-overlay-dark,.z-loading-leaving.z-loading-overlay-blur,.z-loading-leaving.z-loading-overlay-default{animation:z-backdrop-exit .12s ease-in forwards}.z-loading-content{position:relative;z-index:51}.z-loading-loader{--z-loading-size: 1.5rem;--z-loading-stroke: max(2px, calc(var(--z-loading-size) / 12));display:inline-block;flex:none;box-sizing:border-box}.z-loading-loader *,.z-loading-loader *:before,.z-loading-loader *:after{box-sizing:border-box}.z-loading-size-2xs{--z-loading-size: .75rem}.z-loading-size-xs{--z-loading-size: 1rem}.z-loading-size-default{--z-loading-size: 1.5rem}.z-loading-size-lg{--z-loading-size: 2rem}.z-loading-size-xl{--z-loading-size: 3rem}.z-loading-orbit{position:relative;width:var(--z-loading-size);height:var(--z-loading-size);animation:z-loading-spin 1.2s linear infinite}.z-loading-orbit>div{width:calc(var(--z-loading-size) / 4);height:calc(var(--z-loading-size) / 4)}.z-loading-matrix{width:var(--z-loading-size);height:calc(var(--z-loading-size) * .875);background:linear-gradient(transparent 16.6666666667%,currentColor 0 50%,transparent 0),linear-gradient(transparent 33.3333333333%,currentColor 0 66.6666666667%,transparent 0),linear-gradient(transparent 50%,currentColor 0 83.3333333333%,transparent 0);background-size:calc(var(--z-loading-size) / 4) 400%;background-repeat:no-repeat;animation:z-loading-matrix 1s infinite linear}.z-loading-conic{width:var(--z-loading-size);padding:calc(var(--z-loading-size) / 6);aspect-ratio:1;background:currentColor;-webkit-mask:conic-gradient(transparent 10%,#000),linear-gradient(#000 0 0) content-box;mask:conic-gradient(transparent 10%,#000),linear-gradient(#000 0 0) content-box;-webkit-mask-composite:source-out;mask-composite:subtract;animation:z-loading-conic 1s infinite linear}.z-loading-polygon{width:var(--z-loading-size);aspect-ratio:1;border:max(2px,var(--z-loading-size) / 6) solid currentColor;animation:z-loading-polygon-1 .8s infinite linear alternate,z-loading-polygon-2 1.6s infinite linear}.z-loading-triple{width:var(--z-loading-size);aspect-ratio:1;border:var(--z-loading-stroke) solid transparent;border-right-color:currentColor;position:relative;animation:z-loading-triple 1s infinite linear}.z-loading-triple:before,.z-loading-triple:after{content:\"\";position:absolute;inset:calc(var(--z-loading-stroke) * -1);border-radius:50%;border:inherit;animation:inherit}.z-loading-triple:before{animation-duration:2s;opacity:.6}.z-loading-triple:after{animation-duration:4s;opacity:.3}.z-loading-bar{position:relative;width:calc(var(--z-loading-size) * 3);height:var(--z-loading-stroke);overflow:hidden;border-radius:999px;background:color-mix(in srgb,currentColor 20%,transparent)}.z-loading-bar i{position:absolute;inset-block:0;display:block;border-radius:inherit;background:currentColor;will-change:left,right}.z-loading-bar i:first-child{animation:z-loading-bar-long 2.1s infinite cubic-bezier(.65,.815,.735,.395)}.z-loading-bar i:last-child{animation:z-loading-bar-short 2.1s 1.15s infinite cubic-bezier(.165,.84,.44,1)}.z-loading-beat,.z-loading-pulse,.z-loading-sync,.z-loading-rise{display:inline-flex;align-items:center;gap:calc(var(--z-loading-size) / 8)}.z-loading-beat i,.z-loading-pulse i,.z-loading-sync i,.z-loading-rise i{width:calc(var(--z-loading-size) * .38);height:calc(var(--z-loading-size) * .38);border-radius:50%;background:currentColor}.z-loading-beat i{animation:z-loading-beat .7s infinite linear both}.z-loading-beat i:nth-child(2){animation-delay:.35s}.z-loading-bounce,.z-loading-dot,.z-loading-puff,.z-loading-ring{position:relative;width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-bounce i{position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:.6;animation:z-loading-bounce 2.1s infinite ease-in-out both}.z-loading-bounce i:first-child{animation-delay:1s}.z-loading-circle{position:relative;width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-circle i{--z-ring-inset: calc(var(--z-index) * var(--z-loading-size) * .035);position:absolute;inset:var(--z-ring-inset);border-top:max(1px,var(--z-loading-stroke) / 2) solid currentColor;border-left:max(1px,var(--z-loading-stroke) / 2) solid currentColor;border-radius:50%;animation:z-loading-circle 1s calc(var(--z-index) * .2s) infinite linear}.z-loading-climbing-box{position:relative;width:calc(var(--z-loading-size) * 1.35);height:var(--z-loading-size);overflow:hidden}.z-loading-climbing-box i{position:absolute;left:8%;bottom:7%;width:22%;height:22%;border:var(--z-loading-stroke) solid currentColor;border-radius:15%;animation:z-loading-climbing-box 2.5s infinite cubic-bezier(.79,0,.47,.97) both}.z-loading-climbing-box b{position:absolute;right:2%;bottom:-48%;width:92%;height:92%;border-left:var(--z-loading-stroke) solid currentColor;transform:rotate(45deg)}.z-loading-clip{width:var(--z-loading-size);height:var(--z-loading-size);border:var(--z-loading-stroke) solid currentColor;border-bottom-color:transparent;border-radius:50%;animation:z-loading-clip .75s infinite linear both}.z-loading-clock{position:relative;width:var(--z-loading-size);height:var(--z-loading-size);border:var(--z-loading-stroke) solid currentColor;border-radius:50%}.z-loading-clock i{position:absolute;top:50%;left:50%;width:40%;height:var(--z-loading-stroke);border-radius:999px;background:currentColor;transform-origin:left center;animation:z-loading-clock 2s linear infinite}.z-loading-clock i:last-child{width:28%;animation-duration:8s}.z-loading-dot{animation:z-loading-spin 2s infinite linear}.z-loading-dot i{position:absolute;width:50%;height:50%;border-radius:50%;background:currentColor;animation:z-loading-dot 2s infinite linear both}.z-loading-dot i:first-child{top:0;left:0}.z-loading-dot i:last-child{right:0;bottom:0;animation-delay:1s}.z-loading-fade{position:relative;width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-fade i{position:absolute;top:8%;left:44%;width:12%;height:32%;border-radius:999px;background:currentColor;transform:rotate(calc(var(--z-index) * 45deg));transform-origin:50% 132%;animation:z-loading-fade 1.2s calc(var(--z-index) * .12s) infinite ease-in-out both}.z-loading-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--z-loading-size) / 12);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-grid i{border-radius:50%;background:currentColor;animation:z-loading-grid .9s calc(var(--z-index) * -.07s) infinite ease both}.z-loading-hash{position:relative;width:var(--z-loading-size);height:var(--z-loading-size);transform:rotate(165deg)}.z-loading-hash i{position:absolute;top:50%;left:50%;width:20%;height:20%;border-radius:999px;transform:translate(-50%,-50%)}.z-loading-hash i:first-child{animation:z-loading-hash-horizontal 2s infinite}.z-loading-hash i:last-child{animation:z-loading-hash-vertical 2s infinite}.z-loading-moon{position:relative;width:var(--z-loading-size);height:var(--z-loading-size);animation:z-loading-spin .6s infinite linear}.z-loading-moon i:first-child{position:absolute;top:42%;left:-8%;width:22%;height:22%;border-radius:50%;background:currentColor;opacity:.8}.z-loading-moon i:last-child{position:absolute;inset:8%;border:calc(var(--z-loading-size) / 8) solid currentColor;border-radius:50%;opacity:.12}.z-loading-pacman{position:relative;width:calc(var(--z-loading-size) * 2.6);height:var(--z-loading-size)}.z-loading-pacman>i{position:absolute;left:0;width:0;height:0;border:calc(var(--z-loading-size) / 2) solid currentColor;border-right-color:transparent;border-radius:50%;animation:z-loading-pacman-top .8s infinite ease-in-out both}.z-loading-pacman>i:nth-child(2){border-top-color:transparent;border-right-color:transparent;animation-name:z-loading-pacman-bottom}.z-loading-pacman b{--z-pacman-dot-size: calc(var(--z-loading-size) / 6);position:absolute;top:calc(50% - var(--z-pacman-dot-size) / 2);left:calc(var(--z-loading-size) * 2.35);width:var(--z-pacman-dot-size);height:var(--z-pacman-dot-size);border-radius:50%;background:currentColor;animation:z-loading-pacman-dot 1s calc(var(--z-index) * .25s) infinite linear both}.z-loading-propagate{position:relative;width:var(--z-loading-size);height:calc(var(--z-loading-size) / 3)}.z-loading-propagate i{position:absolute;left:calc(50% - var(--z-loading-size) / 6);width:calc(var(--z-loading-size) / 3);height:calc(var(--z-loading-size) / 3);border-radius:50%;background:currentColor;animation:z-loading-propagate 1.5s infinite both}.z-loading-propagate i:nth-child(1){--z-propagate-distance: -750%}.z-loading-propagate i:nth-child(2){--z-propagate-distance: -450%}.z-loading-propagate i:nth-child(3){--z-propagate-distance: -150%}.z-loading-propagate i:nth-child(4){--z-propagate-distance: 150%}.z-loading-propagate i:nth-child(5){--z-propagate-distance: 450%}.z-loading-propagate i:nth-child(6){--z-propagate-distance: 750%}.z-loading-puff i{position:absolute;inset:0;border:var(--z-loading-stroke) solid currentColor;border-radius:50%;animation:z-loading-puff-scale 2s infinite cubic-bezier(.165,.84,.44,1) both,z-loading-puff-opacity 2s infinite cubic-bezier(.3,.61,.355,1) both}.z-loading-puff i:first-child{animation-delay:-1s}.z-loading-pulse i{animation:z-loading-pulse .75s infinite cubic-bezier(.2,.68,.18,1.08) both}.z-loading-pulse i:nth-child(2){animation-delay:.12s}.z-loading-pulse i:nth-child(3){animation-delay:.24s}.z-loading-ring{perspective:800px}.z-loading-ring i{position:absolute;inset:0;border:calc(var(--z-loading-size) / 10) solid currentColor;border-radius:50%;opacity:.4;animation:z-loading-ring-right 2s infinite linear both}.z-loading-ring i:last-child{animation-name:z-loading-ring-left}.z-loading-rise i{animation:z-loading-rise-odd 1s infinite cubic-bezier(.15,.46,.9,.6) both}.z-loading-rise i:nth-child(2n){animation-name:z-loading-rise-even}.z-loading-rotate{position:relative;width:calc(var(--z-loading-size) / 3);height:calc(var(--z-loading-size) / 3);border-radius:50%;background:currentColor;animation:z-loading-spin 1s infinite cubic-bezier(.7,-.13,.22,.86) both}.z-loading-rotate i{position:absolute;top:0;width:100%;height:100%;border-radius:inherit;background:currentColor;opacity:.8}.z-loading-rotate i:first-child{left:calc(var(--z-loading-size) * -.75)}.z-loading-rotate i:last-child{right:calc(var(--z-loading-size) * -.75)}.z-loading-scale{display:inline-flex;align-items:center;gap:calc(var(--z-loading-size) / 10);height:var(--z-loading-size)}.z-loading-scale i{width:calc(var(--z-loading-size) / 9);height:100%;border-radius:999px;background:currentColor;animation:z-loading-scale 1s calc((var(--z-index) + 1) * .1s) infinite cubic-bezier(.2,.68,.18,1.08) both}.z-loading-skew{width:0;height:0;border-right:calc(var(--z-loading-size) / 2) solid transparent;border-bottom:var(--z-loading-size) solid currentColor;border-left:calc(var(--z-loading-size) / 2) solid transparent;animation:z-loading-skew 3s infinite cubic-bezier(.09,.57,.49,.9) both}.z-loading-square{width:var(--z-loading-size);height:var(--z-loading-size);background:currentColor;animation:z-loading-square 3s infinite cubic-bezier(.09,.57,.49,.9) both}.z-loading-sync i{animation:z-loading-sync .6s infinite ease-in-out both}.z-loading-sync i:nth-child(2){animation-delay:.07s}.z-loading-sync i:nth-child(3){animation-delay:.14s}.z-loading-orbit-chase{position:relative;width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-orbit-chase i{position:absolute;top:50%;left:50%;width:calc(var(--z-loading-size) * .146);height:calc(var(--z-loading-size) * .146);margin:calc(var(--z-loading-size) * -.073) 0 0 calc(var(--z-loading-size) * -.073);border-radius:999px;background:currentColor;transform:rotate(calc(var(--z-index) * 45deg)) translateY(calc(var(--z-loading-size) * -.375));animation:z-loading-orbit-chase-node .96s ease-in-out calc(var(--z-index) * .12s) infinite}.z-loading-bars{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--z-loading-size) / 12);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-bars i{width:calc(var(--z-loading-size) / 12);border-radius:999px;background:currentColor;opacity:.22;scale:1 .56;animation:z-loading-bars-bar .98s cubic-bezier(.45,0,.25,1) calc(var(--z-index) * .09s) infinite}.z-loading-bars i:nth-child(1),.z-loading-bars i:nth-child(5){height:calc(var(--z-loading-size) * .458)}.z-loading-bars i:nth-child(2),.z-loading-bars i:nth-child(4){height:calc(var(--z-loading-size) * .375)}.z-loading-bars i:nth-child(3){height:calc(var(--z-loading-size) * .292)}.z-loading-matrix-grid{display:grid;grid-template-columns:repeat(3,1fr);place-items:center;gap:calc(var(--z-loading-size) / 8);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-matrix-grid i{width:calc(var(--z-loading-size) / 8);height:calc(var(--z-loading-size) / 8);border-radius:999px;background:currentColor;opacity:.2;scale:.68;animation:z-loading-matrix-grid-node 1.04s cubic-bezier(.45,0,.25,1) infinite}.z-loading-matrix-grid i:nth-child(2),.z-loading-matrix-grid i:nth-child(4){animation-delay:.09s}.z-loading-matrix-grid i:nth-child(3),.z-loading-matrix-grid i:nth-child(5),.z-loading-matrix-grid i:nth-child(7){animation-delay:.18s}.z-loading-matrix-grid i:nth-child(6),.z-loading-matrix-grid i:nth-child(8){animation-delay:.27s}.z-loading-matrix-grid i:nth-child(9){animation-delay:.36s}.z-loading-merge{display:grid;grid-template-columns:repeat(2,1fr);place-items:center;gap:calc(var(--z-loading-size) / 8);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-merge i{--z-cell-x: calc(var(--z-loading-size) * .083);--z-cell-y: calc(var(--z-loading-size) * .083);width:calc(var(--z-loading-size) / 4);height:calc(var(--z-loading-size) / 4);border-radius:calc(var(--z-loading-size) / 16);background:currentColor;opacity:.2;scale:.7;animation:z-loading-merge-cell 1.12s cubic-bezier(.45,0,.25,1) calc(var(--z-index) * .1s) infinite}.z-loading-merge i:nth-child(2){--z-cell-x: calc(var(--z-loading-size) * -.083)}.z-loading-merge i:nth-child(3){--z-cell-y: calc(var(--z-loading-size) * -.083)}.z-loading-merge i:nth-child(4){--z-cell-x: calc(var(--z-loading-size) * -.083);--z-cell-y: calc(var(--z-loading-size) * -.083)}.z-loading-encode{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--z-loading-size) / 12);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-encode i{width:calc(var(--z-loading-size) / 12);height:calc(var(--z-loading-size) * .375);border-radius:999px;background:currentColor;opacity:.2;scale:1 .42;animation:z-loading-encode-bit 1.04s cubic-bezier(.45,0,.25,1) calc(var(--z-index) * .09s) infinite}.z-loading-encode i:nth-child(odd){translate:0 calc(var(--z-loading-size) * -.125)}.z-loading-encode i:nth-child(2n){translate:0 calc(var(--z-loading-size) * .125)}.z-loading-scan{display:grid;align-content:center;gap:calc(var(--z-loading-size) / 6);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-scan b{position:relative;display:block;width:calc(var(--z-loading-size) * .833);height:calc(var(--z-loading-size) / 12);margin-inline:auto;overflow:hidden;border-radius:calc(var(--z-loading-size) / 24);background:color-mix(in srgb,currentColor 20%,transparent)}.z-loading-scan i{position:absolute;inset:0;display:block;width:calc(var(--z-loading-size) * .292);border-radius:inherit;background:currentColor;opacity:.26;translate:calc(var(--z-loading-size) * -.333) 0;animation:z-loading-scan-segment 1.06s cubic-bezier(.45,0,.25,1) calc(var(--z-index) * .18s) infinite}.z-loading-lift{position:relative;width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-lift:before{position:absolute;top:calc(var(--z-loading-size) * .125);bottom:calc(var(--z-loading-size) * .125);left:calc(var(--z-loading-size) * .479);width:max(1px,var(--z-loading-size) / 48);background:color-mix(in srgb,currentColor 20%,transparent);content:\"\"}.z-loading-lift i{position:absolute;bottom:calc(var(--z-loading-size) * (.125 + var(--z-index) * .208));left:calc(var(--z-loading-size) * (.375 - var(--z-index) * .027));width:calc(var(--z-loading-size) * (.25 + var(--z-index) * .054));height:calc(var(--z-loading-size) / 8);border-radius:calc(var(--z-loading-size) / 16);background:currentColor;opacity:.18;animation:z-loading-lift-rise 1.24s cubic-bezier(.34,1.4,.55,1) calc(var(--z-index) * .12s) infinite}@keyframes z-loading-matrix{0%{background-position:0% 100%,50% 100%,100% 100%}to{background-position:0% 0%,50% 0%,100% 0%}}@keyframes z-loading-conic{to{transform:rotate(1turn)}}@keyframes z-loading-polygon-1{0%{clip-path:polygon(50% 50%,0 0,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}25%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0% 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%)}}@keyframes z-loading-polygon-2{0%{transform:scaleY(1) rotate(0)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0)}to{transform:scaleY(-1) rotate(-135deg)}}@keyframes z-loading-triple{to{transform:rotate(1turn)}}@keyframes z-loading-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes z-loading-bar-long{0%{right:100%;left:-35%}60%,to{right:-90%;left:100%}}@keyframes z-loading-bar-short{0%{right:100%;left:-200%}60%,to{right:-8%;left:107%}}@keyframes z-loading-beat{50%{opacity:.2;transform:scale(.75)}to{opacity:1;transform:scale(1)}}@keyframes z-loading-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes z-loading-circle{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}@keyframes z-loading-climbing-box{0%{transform:translate(0) rotate(-45deg)}20%{transform:translate(85%,-85%) rotate(47deg)}45%{transform:translate(170%,-170%) rotate(137deg)}70%{transform:translate(255%,-255%) rotate(217deg)}to{transform:translate(0) rotate(-225deg)}}@keyframes z-loading-clip{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.8)}to{transform:rotate(360deg) scale(1)}}@keyframes z-loading-clock{to{transform:rotate(360deg)}}@keyframes z-loading-dot{0%,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes z-loading-fade{50%{opacity:.3}to{opacity:1}}@keyframes z-loading-grid{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.5)}}@keyframes z-loading-hash-horizontal{0%,to{width:20%;box-shadow:calc(var(--z-loading-size) * .4) calc(var(--z-loading-size) * -.2) color-mix(in srgb,currentColor 75%,transparent),calc(var(--z-loading-size) * -.4) calc(var(--z-loading-size) * .2) color-mix(in srgb,currentColor 75%,transparent)}35%{width:100%;box-shadow:0 calc(var(--z-loading-size) * -.2) color-mix(in srgb,currentColor 75%,transparent),0 calc(var(--z-loading-size) * .2) color-mix(in srgb,currentColor 75%,transparent)}70%{width:20%;box-shadow:calc(var(--z-loading-size) * -.4) calc(var(--z-loading-size) * -.2) color-mix(in srgb,currentColor 75%,transparent),calc(var(--z-loading-size) * .4) calc(var(--z-loading-size) * .2) color-mix(in srgb,currentColor 75%,transparent)}}@keyframes z-loading-hash-vertical{0%,to{height:20%;box-shadow:calc(var(--z-loading-size) * .2) calc(var(--z-loading-size) * .4) currentColor,calc(var(--z-loading-size) * -.2) calc(var(--z-loading-size) * -.4) currentColor}35%{height:100%;box-shadow:calc(var(--z-loading-size) * .2) 0 currentColor,calc(var(--z-loading-size) * -.2) 0 currentColor}70%{height:20%;box-shadow:calc(var(--z-loading-size) * .2) calc(var(--z-loading-size) * -.4) currentColor,calc(var(--z-loading-size) * -.2) calc(var(--z-loading-size) * .4) currentColor}}@keyframes z-loading-pacman-top{0%,to{transform:rotate(0)}50%{transform:rotate(-44deg)}}@keyframes z-loading-pacman-bottom{0%,to{transform:rotate(0)}50%{transform:rotate(44deg)}}@keyframes z-loading-pacman-dot{75%{opacity:.7}to{transform:translate(calc(var(--z-loading-size) * -2.2))}}@keyframes z-loading-propagate{0%,95%,to{transform:translate(0) scale(1)}50%{transform:translate(var(--z-propagate-distance)) scale(.6)}}@keyframes z-loading-puff-scale{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes z-loading-puff-opacity{0%{opacity:1}to{opacity:0}}@keyframes z-loading-pulse{0%,80%{opacity:1;transform:scale(1)}45%{opacity:.7;transform:scale(.1)}}@keyframes z-loading-ring-right{0%{transform:rotateX(0) rotateY(0) rotate(0)}to{transform:rotateX(180deg) rotateY(360deg) rotate(360deg)}}@keyframes z-loading-ring-left{0%{transform:rotateX(0) rotateY(0) rotate(0)}to{transform:rotateX(360deg) rotateY(180deg) rotate(360deg)}}@keyframes z-loading-rise-even{0%{transform:scale(1.1)}25%{transform:translateY(calc(var(--z-loading-size) * -.4))}50%{transform:scale(.4)}75%{transform:translateY(calc(var(--z-loading-size) * .4))}to{transform:translateY(0) scale(1)}}@keyframes z-loading-rise-odd{0%{transform:scale(.4)}25%{transform:translateY(calc(var(--z-loading-size) * .4))}50%{transform:scale(1.1)}75%{transform:translateY(calc(var(--z-loading-size) * -.4))}to{transform:translateY(0) scale(.75)}}@keyframes z-loading-scale{0%,to{transform:scaleY(1)}50%{transform:scaleY(.4)}}@keyframes z-loading-skew{25%{transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{transform:perspective(100px) rotateX(0) rotateY(180deg)}to{transform:perspective(100px) rotateX(0) rotateY(0)}}@keyframes z-loading-square{25%{transform:rotateX(180deg) rotateY(0)}50%{transform:rotateX(180deg) rotateY(180deg)}75%{transform:rotateX(0) rotateY(180deg)}to{transform:rotateX(0) rotateY(0)}}@keyframes z-loading-sync{33%{transform:translateY(calc(var(--z-loading-size) * .3))}66%{transform:translateY(calc(var(--z-loading-size) * -.3))}to{transform:translateY(0)}}@keyframes z-loading-orbit-chase-node{0%,to{opacity:.18;scale:.72}20%{opacity:1;scale:1.2}42%{opacity:.7;scale:1}65%{opacity:.18;scale:.72}}@keyframes z-loading-bars-bar{0%,to{opacity:.22;scale:1 .56}28%{opacity:.52;scale:1 .82}48%{opacity:1;scale:1 1}72%{opacity:.34;scale:1 .68}}@keyframes z-loading-matrix-grid-node{0%,to{opacity:.2;scale:.68}30%{opacity:.46;scale:.82}48%{opacity:1;scale:1.18}72%{opacity:.3;scale:.74}}@keyframes z-loading-merge-cell{0%,to{opacity:.2;scale:.7;translate:0 0}44%,62%{opacity:1;scale:1;translate:var(--z-cell-x) var(--z-cell-y)}78%{opacity:.36;scale:.78;translate:0 0}}@keyframes z-loading-encode-bit{0%,to{opacity:.2;scale:1 .42}32%{opacity:.5;scale:1 .72}50%{opacity:1;scale:1 1}74%{opacity:.32;scale:1 .52}}@keyframes z-loading-scan-segment{0%,to{opacity:.2;translate:calc(var(--z-loading-size) * -.333) 0}42%{opacity:1;translate:calc(var(--z-loading-size) * .292) 0}70%{opacity:.36;translate:calc(var(--z-loading-size) * .583) 0}}@keyframes z-loading-lift-rise{0%,to{opacity:.16;translate:0 calc(var(--z-loading-size) * .083);scale:.72}32%{opacity:.5;translate:0 0;scale:.9}50%{opacity:1;translate:0 calc(var(--z-loading-size) * -.083);scale:1.08}74%{opacity:.3;translate:0 calc(var(--z-loading-size) * -.125);scale:.82}}\n/*! Spinner animations adapted from react-spinners, Copyright (c) 2017 David Hu, MIT License. */\n"] }]
|
|
122
|
+
}, template: "@if (!zOverlay() && !zFullscreen()) {\n <div\n class=\"z-loading-wrapper inline-flex items-center justify-center transition-opacity duration-150\"\n [class.opacity-0]=\"!zLoading()\"\n [class.pointer-events-none]=\"!zLoading()\">\n <ng-container *ngTemplateOutlet=\"spinnerContent\" />\n </div>\n}\n\n@if ((zOverlay() || zFullscreen()) && isVisible()) {\n <div\n class=\"z-loading-wrapper inline-flex items-center justify-center\"\n [class.z-loading-overlay]=\"zOverlay()\"\n [class.z-loading-fullscreen]=\"zFullscreen()\"\n [class.z-loading-leaving]=\"isLeaving()\"\n [class]=\"overlayClasses()\">\n <ng-container *ngTemplateOutlet=\"spinnerContent\" />\n </div>\n}\n\n<ng-template #spinnerContent>\n <div\n class=\"z-loading-content flex flex-col items-center justify-center gap-3\"\n [attr.data-z-loading-spinner]=\"zSpinner()\">\n @switch (zSpinner()) {\n @case ('spinner') {\n <svg [class]=\"spinnerClasses()\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n </svg>\n }\n @case ('orbit') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-orbit\">\n <div class=\"absolute top-1/2 left-0 h-2 w-2 -translate-y-1/2 rounded-full bg-current\"></div>\n <div class=\"absolute top-1/2 right-0 h-2 w-2 -translate-y-1/2 rounded-full bg-current opacity-30\"></div>\n </div>\n }\n @case ('matrix') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-matrix\"></div>\n }\n @case ('conic') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-conic rounded-full\"></div>\n }\n @case ('polygon') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-polygon rounded-full\"></div>\n }\n @case ('triple') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-triple rounded-full\"></div>\n }\n @case ('bar') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-bar\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('beat') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-beat\">\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('bounce') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-bounce\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('circle') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-circle\">\n @for (ring of circleRings; track ring) {\n <i [style.--z-index]=\"ring\"></i>\n }\n </span>\n }\n @case ('climbing-box') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-climbing-box\">\n <i></i>\n <b></b>\n </span>\n }\n @case ('clip') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-clip\"></span>\n }\n @case ('clock') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-clock\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('dot') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-dot\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('fade') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-fade\">\n @for (bar of fadeBars; track bar) {\n <i [style.--z-index]=\"bar\"></i>\n }\n </span>\n }\n @case ('grid') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-grid\">\n @for (dot of gridDots; track dot) {\n <i [style.--z-index]=\"dot\"></i>\n }\n </span>\n }\n @case ('hash') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-hash\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('moon') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-moon\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('pacman') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-pacman\">\n <i></i>\n <i></i>\n @for (dot of pacmanDots; track dot) {\n <b [style.--z-index]=\"dot\"></b>\n }\n </span>\n }\n @case ('propagate') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-propagate\">\n @for (dot of propagateDots; track dot) {\n <i [style.--z-index]=\"dot\"></i>\n }\n </span>\n }\n @case ('puff') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-puff\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('pulse') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-pulse\">\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('ring') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-ring\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('rise') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-rise\">\n <i></i>\n <i></i>\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('rotate') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-rotate\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('scale') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-scale\">\n @for (bar of scaleBars; track bar) {\n <i [style.--z-index]=\"bar\"></i>\n }\n </span>\n }\n @case ('skew') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-skew\"></span>\n }\n @case ('square') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-square\"></span>\n }\n @case ('sync') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-sync\">\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('orbit-chase') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-orbit-chase\">\n @for (node of orbitChaseNodes; track node) {\n <i [style.--z-index]=\"node\"></i>\n }\n </span>\n }\n @case ('bars') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-bars\">\n @for (column of barsColumns; track column) {\n <i [style.--z-index]=\"column\"></i>\n }\n </span>\n }\n @case ('matrix-grid') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-matrix-grid\">\n @for (dot of matrixDots; track dot) {\n <i></i>\n }\n </span>\n }\n @case ('merge') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-merge\">\n @for (cell of mergeCells; track cell) {\n <i [style.--z-index]=\"cell\"></i>\n }\n </span>\n }\n @case ('encode') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-encode\">\n @for (bit of encodeBits; track bit) {\n <i [style.--z-index]=\"bit\"></i>\n }\n </span>\n }\n @case ('scan') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-scan\">\n @for (row of scanRows; track row) {\n <b><i [style.--z-index]=\"row\"></i></b>\n }\n </span>\n }\n @case ('lift') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-lift\">\n @for (level of liftLevels; track level) {\n <i [style.--z-index]=\"level\"></i>\n }\n </span>\n }\n }\n\n @if (zText()) {\n <p [class]=\"textSizeClasses()\" class=\"z-loading-text font-medium\" [style.color]=\"'currentColor'\">\n {{ zText() }}\n </p>\n }\n </div>\n</ng-template>\n", styles: [".z-loading:has(.z-loading-overlay),.z-loading:has(.z-loading-fullscreen){display:contents}.z-loading-overlay,.z-loading-fullscreen{position:absolute;inset:0;z-index:150;display:flex;align-items:center;justify-content:center}.z-loading-fullscreen{position:fixed;z-index:9999}.z-loading-overlay-dark{background-color:#0009;animation:z-backdrop-enter .15s ease-out forwards}.z-loading-overlay-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:z-backdrop-enter .15s ease-out forwards}.z-loading-overlay-default{background-color:var(--loading-overlay-bg, rgba(255, 255, 255, .85));animation:z-backdrop-enter .15s ease-out forwards}.dark .z-loading-overlay-default{background-color:#000000d9}.z-loading-leaving.z-loading-overlay-dark,.z-loading-leaving.z-loading-overlay-blur,.z-loading-leaving.z-loading-overlay-default{animation:z-backdrop-exit .12s ease-in forwards}.z-loading-content{position:relative;z-index:51}.z-loading-loader{--z-loading-size: 1.5rem;--z-loading-stroke: max(2px, calc(var(--z-loading-size) / 12));display:inline-block;flex:none;box-sizing:border-box}.z-loading-loader *,.z-loading-loader *:before,.z-loading-loader *:after{box-sizing:border-box}.z-loading-size-2xs{--z-loading-size: .75rem}.z-loading-size-xs{--z-loading-size: 1rem}.z-loading-size-default{--z-loading-size: 1.5rem}.z-loading-size-lg{--z-loading-size: 2rem}.z-loading-size-xl{--z-loading-size: 3rem}.z-loading-orbit{position:relative;width:var(--z-loading-size);height:var(--z-loading-size);animation:z-loading-spin 1.2s linear infinite}.z-loading-orbit>div{width:calc(var(--z-loading-size) / 4);height:calc(var(--z-loading-size) / 4)}.z-loading-matrix{width:var(--z-loading-size);height:calc(var(--z-loading-size) * .875);background:linear-gradient(transparent 16.6666666667%,currentColor 0 50%,transparent 0),linear-gradient(transparent 33.3333333333%,currentColor 0 66.6666666667%,transparent 0),linear-gradient(transparent 50%,currentColor 0 83.3333333333%,transparent 0);background-size:calc(var(--z-loading-size) / 4) 400%;background-repeat:no-repeat;animation:z-loading-matrix 1s infinite linear}.z-loading-conic{width:var(--z-loading-size);padding:calc(var(--z-loading-size) / 6);aspect-ratio:1;background:currentColor;-webkit-mask:conic-gradient(transparent 10%,#000),linear-gradient(#000 0 0) content-box;mask:conic-gradient(transparent 10%,#000),linear-gradient(#000 0 0) content-box;-webkit-mask-composite:source-out;mask-composite:subtract;animation:z-loading-conic 1s infinite linear}.z-loading-polygon{width:var(--z-loading-size);aspect-ratio:1;border:max(2px,var(--z-loading-size) / 6) solid currentColor;animation:z-loading-polygon-1 .8s infinite linear alternate,z-loading-polygon-2 1.6s infinite linear}.z-loading-triple{width:var(--z-loading-size);aspect-ratio:1;border:var(--z-loading-stroke) solid transparent;border-right-color:currentColor;position:relative;animation:z-loading-triple 1s infinite linear}.z-loading-triple:before,.z-loading-triple:after{content:\"\";position:absolute;inset:calc(var(--z-loading-stroke) * -1);border-radius:50%;border:inherit;animation:inherit}.z-loading-triple:before{animation-duration:2s;opacity:.6}.z-loading-triple:after{animation-duration:4s;opacity:.3}.z-loading-bar{position:relative;width:calc(var(--z-loading-size) * 3);height:var(--z-loading-stroke);overflow:hidden;border-radius:999px;background:color-mix(in srgb,currentColor 20%,transparent)}.z-loading-bar i{position:absolute;inset-block:0;display:block;border-radius:inherit;background:currentColor;will-change:left,right}.z-loading-bar i:first-child{animation:z-loading-bar-long 2.1s infinite cubic-bezier(.65,.815,.735,.395)}.z-loading-bar i:last-child{animation:z-loading-bar-short 2.1s 1.15s infinite cubic-bezier(.165,.84,.44,1)}.z-loading-beat,.z-loading-pulse,.z-loading-sync,.z-loading-rise{display:inline-flex;align-items:center;gap:calc(var(--z-loading-size) / 8)}.z-loading-beat i,.z-loading-pulse i,.z-loading-sync i,.z-loading-rise i{width:calc(var(--z-loading-size) * .38);height:calc(var(--z-loading-size) * .38);border-radius:50%;background:currentColor}.z-loading-beat i{animation:z-loading-beat .7s infinite linear both}.z-loading-beat i:nth-child(2){animation-delay:.35s}.z-loading-bounce,.z-loading-dot,.z-loading-puff,.z-loading-ring{position:relative;width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-bounce i{position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:.6;animation:z-loading-bounce 2.1s infinite ease-in-out both}.z-loading-bounce i:first-child{animation-delay:1s}.z-loading-circle{position:relative;width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-circle i{--z-ring-inset: calc(var(--z-index) * var(--z-loading-size) * .035);position:absolute;inset:var(--z-ring-inset);border-top:max(1px,var(--z-loading-stroke) / 2) solid currentColor;border-left:max(1px,var(--z-loading-stroke) / 2) solid currentColor;border-radius:50%;animation:z-loading-circle 1s calc(var(--z-index) * .2s) infinite linear}.z-loading-climbing-box{position:relative;width:calc(var(--z-loading-size) * 1.35);height:var(--z-loading-size);overflow:hidden}.z-loading-climbing-box i{position:absolute;left:8%;bottom:7%;width:22%;height:22%;border:var(--z-loading-stroke) solid currentColor;border-radius:15%;animation:z-loading-climbing-box 2.5s infinite cubic-bezier(.79,0,.47,.97) both}.z-loading-climbing-box b{position:absolute;right:2%;bottom:-48%;width:92%;height:92%;border-left:var(--z-loading-stroke) solid currentColor;transform:rotate(45deg)}.z-loading-clip{width:var(--z-loading-size);height:var(--z-loading-size);border:var(--z-loading-stroke) solid currentColor;border-bottom-color:transparent;border-radius:50%;animation:z-loading-clip .75s infinite linear both}.z-loading-clock{position:relative;width:var(--z-loading-size);height:var(--z-loading-size);border:var(--z-loading-stroke) solid currentColor;border-radius:50%}.z-loading-clock i{position:absolute;top:50%;left:50%;width:40%;height:var(--z-loading-stroke);border-radius:999px;background:currentColor;transform-origin:left center;animation:z-loading-clock 2s linear infinite}.z-loading-clock i:last-child{width:28%;animation-duration:8s}.z-loading-dot{animation:z-loading-spin 2s infinite linear}.z-loading-dot i{position:absolute;width:50%;height:50%;border-radius:50%;background:currentColor;animation:z-loading-dot 2s infinite linear both}.z-loading-dot i:first-child{top:0;left:0}.z-loading-dot i:last-child{right:0;bottom:0;animation-delay:1s}.z-loading-fade{position:relative;width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-fade i{position:absolute;top:8%;left:44%;width:12%;height:32%;border-radius:999px;background:currentColor;transform:rotate(calc(var(--z-index) * 45deg));transform-origin:50% 132%;animation:z-loading-fade 1.2s calc(var(--z-index) * .12s) infinite ease-in-out both}.z-loading-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--z-loading-size) / 12);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-grid i{border-radius:50%;background:currentColor;animation:z-loading-grid .9s calc(var(--z-index) * -.07s) infinite ease both}.z-loading-hash{position:relative;width:var(--z-loading-size);height:var(--z-loading-size);transform:rotate(165deg)}.z-loading-hash i{position:absolute;top:50%;left:50%;width:20%;height:20%;border-radius:999px;transform:translate(-50%,-50%)}.z-loading-hash i:first-child{animation:z-loading-hash-horizontal 2s infinite}.z-loading-hash i:last-child{animation:z-loading-hash-vertical 2s infinite}.z-loading-moon{position:relative;width:var(--z-loading-size);height:var(--z-loading-size);animation:z-loading-spin .6s infinite linear}.z-loading-moon i:first-child{position:absolute;top:42%;left:-8%;width:22%;height:22%;border-radius:50%;background:currentColor;opacity:.8}.z-loading-moon i:last-child{position:absolute;inset:8%;border:calc(var(--z-loading-size) / 8) solid currentColor;border-radius:50%;opacity:.12}.z-loading-pacman{position:relative;width:calc(var(--z-loading-size) * 2.6);height:var(--z-loading-size)}.z-loading-pacman>i{position:absolute;left:0;width:0;height:0;border:calc(var(--z-loading-size) / 2) solid currentColor;border-right-color:transparent;border-radius:50%;animation:z-loading-pacman-top .8s infinite ease-in-out both}.z-loading-pacman>i:nth-child(2){border-top-color:transparent;border-right-color:transparent;animation-name:z-loading-pacman-bottom}.z-loading-pacman b{--z-pacman-dot-size: calc(var(--z-loading-size) / 6);position:absolute;top:calc(50% - var(--z-pacman-dot-size) / 2);left:calc(var(--z-loading-size) * 2.35);width:var(--z-pacman-dot-size);height:var(--z-pacman-dot-size);border-radius:50%;background:currentColor;animation:z-loading-pacman-dot 1s calc(var(--z-index) * .25s) infinite linear both}.z-loading-propagate{position:relative;width:var(--z-loading-size);height:calc(var(--z-loading-size) / 3)}.z-loading-propagate i{position:absolute;left:calc(50% - var(--z-loading-size) / 6);width:calc(var(--z-loading-size) / 3);height:calc(var(--z-loading-size) / 3);border-radius:50%;background:currentColor;animation:z-loading-propagate 1.5s infinite both}.z-loading-propagate i:nth-child(1){--z-propagate-distance: -750%}.z-loading-propagate i:nth-child(2){--z-propagate-distance: -450%}.z-loading-propagate i:nth-child(3){--z-propagate-distance: -150%}.z-loading-propagate i:nth-child(4){--z-propagate-distance: 150%}.z-loading-propagate i:nth-child(5){--z-propagate-distance: 450%}.z-loading-propagate i:nth-child(6){--z-propagate-distance: 750%}.z-loading-puff i{position:absolute;inset:0;border:var(--z-loading-stroke) solid currentColor;border-radius:50%;animation:z-loading-puff-scale 2s infinite cubic-bezier(.165,.84,.44,1) both,z-loading-puff-opacity 2s infinite cubic-bezier(.3,.61,.355,1) both}.z-loading-puff i:first-child{animation-delay:-1s}.z-loading-pulse i{animation:z-loading-pulse .75s infinite cubic-bezier(.2,.68,.18,1.08) both}.z-loading-pulse i:nth-child(2){animation-delay:.12s}.z-loading-pulse i:nth-child(3){animation-delay:.24s}.z-loading-ring{perspective:800px}.z-loading-ring i{position:absolute;inset:0;border:calc(var(--z-loading-size) / 10) solid currentColor;border-radius:50%;opacity:.4;animation:z-loading-ring-right 2s infinite linear both}.z-loading-ring i:last-child{animation-name:z-loading-ring-left}.z-loading-rise i{animation:z-loading-rise-odd 1s infinite cubic-bezier(.15,.46,.9,.6) both}.z-loading-rise i:nth-child(2n){animation-name:z-loading-rise-even}.z-loading-rotate{position:relative;width:calc(var(--z-loading-size) / 3);height:calc(var(--z-loading-size) / 3);border-radius:50%;background:currentColor;animation:z-loading-spin 1s infinite cubic-bezier(.7,-.13,.22,.86) both}.z-loading-rotate i{position:absolute;top:0;width:100%;height:100%;border-radius:inherit;background:currentColor;opacity:.8}.z-loading-rotate i:first-child{left:calc(var(--z-loading-size) * -.75)}.z-loading-rotate i:last-child{right:calc(var(--z-loading-size) * -.75)}.z-loading-scale{display:inline-flex;align-items:center;gap:calc(var(--z-loading-size) / 10);height:var(--z-loading-size)}.z-loading-scale i{width:calc(var(--z-loading-size) / 9);height:100%;border-radius:999px;background:currentColor;animation:z-loading-scale 1s calc((var(--z-index) + 1) * .1s) infinite cubic-bezier(.2,.68,.18,1.08) both}.z-loading-skew{width:0;height:0;border-right:calc(var(--z-loading-size) / 2) solid transparent;border-bottom:var(--z-loading-size) solid currentColor;border-left:calc(var(--z-loading-size) / 2) solid transparent;animation:z-loading-skew 3s infinite cubic-bezier(.09,.57,.49,.9) both}.z-loading-square{width:var(--z-loading-size);height:var(--z-loading-size);background:currentColor;animation:z-loading-square 3s infinite cubic-bezier(.09,.57,.49,.9) both}.z-loading-sync i{animation:z-loading-sync .6s infinite ease-in-out both}.z-loading-sync i:nth-child(2){animation-delay:.07s}.z-loading-sync i:nth-child(3){animation-delay:.14s}.z-loading-orbit-chase{position:relative;width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-orbit-chase i{position:absolute;top:50%;left:50%;width:calc(var(--z-loading-size) * .146);height:calc(var(--z-loading-size) * .146);margin:calc(var(--z-loading-size) * -.073) 0 0 calc(var(--z-loading-size) * -.073);border-radius:999px;background:currentColor;transform:rotate(calc(var(--z-index) * 45deg)) translateY(calc(var(--z-loading-size) * -.375));animation:z-loading-orbit-chase-node .96s ease-in-out calc(var(--z-index) * .12s) infinite}.z-loading-bars{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--z-loading-size) / 12);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-bars i{width:calc(var(--z-loading-size) / 12);border-radius:999px;background:currentColor;opacity:.22;scale:1 .56;animation:z-loading-bars-bar .98s cubic-bezier(.45,0,.25,1) calc(var(--z-index) * .09s) infinite}.z-loading-bars i:nth-child(1),.z-loading-bars i:nth-child(5){height:calc(var(--z-loading-size) * .458)}.z-loading-bars i:nth-child(2),.z-loading-bars i:nth-child(4){height:calc(var(--z-loading-size) * .375)}.z-loading-bars i:nth-child(3){height:calc(var(--z-loading-size) * .292)}.z-loading-matrix-grid{display:grid;grid-template-columns:repeat(3,1fr);place-items:center;gap:calc(var(--z-loading-size) / 8);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-matrix-grid i{width:calc(var(--z-loading-size) / 8);height:calc(var(--z-loading-size) / 8);border-radius:999px;background:currentColor;opacity:.2;scale:.68;animation:z-loading-matrix-grid-node 1.04s cubic-bezier(.45,0,.25,1) infinite}.z-loading-matrix-grid i:nth-child(2),.z-loading-matrix-grid i:nth-child(4){animation-delay:.09s}.z-loading-matrix-grid i:nth-child(3),.z-loading-matrix-grid i:nth-child(5),.z-loading-matrix-grid i:nth-child(7){animation-delay:.18s}.z-loading-matrix-grid i:nth-child(6),.z-loading-matrix-grid i:nth-child(8){animation-delay:.27s}.z-loading-matrix-grid i:nth-child(9){animation-delay:.36s}.z-loading-merge{display:grid;grid-template-columns:repeat(2,1fr);place-items:center;gap:calc(var(--z-loading-size) / 8);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-merge i{--z-cell-x: calc(var(--z-loading-size) * .083);--z-cell-y: calc(var(--z-loading-size) * .083);width:calc(var(--z-loading-size) / 4);height:calc(var(--z-loading-size) / 4);border-radius:calc(var(--z-loading-size) / 16);background:currentColor;opacity:.2;scale:.7;animation:z-loading-merge-cell 1.12s cubic-bezier(.45,0,.25,1) calc(var(--z-index) * .1s) infinite}.z-loading-merge i:nth-child(2){--z-cell-x: calc(var(--z-loading-size) * -.083)}.z-loading-merge i:nth-child(3){--z-cell-y: calc(var(--z-loading-size) * -.083)}.z-loading-merge i:nth-child(4){--z-cell-x: calc(var(--z-loading-size) * -.083);--z-cell-y: calc(var(--z-loading-size) * -.083)}.z-loading-encode{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--z-loading-size) / 12);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-encode i{width:calc(var(--z-loading-size) / 12);height:calc(var(--z-loading-size) * .375);border-radius:999px;background:currentColor;opacity:.2;scale:1 .42;animation:z-loading-encode-bit 1.04s cubic-bezier(.45,0,.25,1) calc(var(--z-index) * .09s) infinite}.z-loading-encode i:nth-child(odd){translate:0 calc(var(--z-loading-size) * -.125)}.z-loading-encode i:nth-child(2n){translate:0 calc(var(--z-loading-size) * .125)}.z-loading-scan{display:grid;align-content:center;gap:calc(var(--z-loading-size) / 6);width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-scan b{position:relative;display:block;width:calc(var(--z-loading-size) * .833);height:calc(var(--z-loading-size) / 12);margin-inline:auto;overflow:hidden;border-radius:calc(var(--z-loading-size) / 24);background:color-mix(in srgb,currentColor 20%,transparent)}.z-loading-scan i{position:absolute;inset:0;display:block;width:calc(var(--z-loading-size) * .292);border-radius:inherit;background:currentColor;opacity:.26;translate:calc(var(--z-loading-size) * -.333) 0;animation:z-loading-scan-segment 1.06s cubic-bezier(.45,0,.25,1) calc(var(--z-index) * .18s) infinite}.z-loading-lift{position:relative;width:var(--z-loading-size);height:var(--z-loading-size)}.z-loading-lift:before{position:absolute;top:calc(var(--z-loading-size) * .125);bottom:calc(var(--z-loading-size) * .125);left:calc(var(--z-loading-size) * .479);width:max(1px,var(--z-loading-size) / 48);background:color-mix(in srgb,currentColor 20%,transparent);content:\"\"}.z-loading-lift i{position:absolute;bottom:calc(var(--z-loading-size) * (.125 + var(--z-index) * .208));left:calc(var(--z-loading-size) * (.375 - var(--z-index) * .027));width:calc(var(--z-loading-size) * (.25 + var(--z-index) * .054));height:calc(var(--z-loading-size) / 8);border-radius:calc(var(--z-loading-size) / 16);background:currentColor;opacity:.18;animation:z-loading-lift-rise 1.24s cubic-bezier(.34,1.4,.55,1) calc(var(--z-index) * .12s) infinite}@keyframes z-loading-matrix{0%{background-position:0% 100%,50% 100%,100% 100%}to{background-position:0% 0%,50% 0%,100% 0%}}@keyframes z-loading-conic{to{transform:rotate(1turn)}}@keyframes z-loading-polygon-1{0%{clip-path:polygon(50% 50%,0 0,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}25%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0% 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%)}}@keyframes z-loading-polygon-2{0%{transform:scaleY(1) rotate(0)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0)}to{transform:scaleY(-1) rotate(-135deg)}}@keyframes z-loading-triple{to{transform:rotate(1turn)}}@keyframes z-loading-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes z-loading-bar-long{0%{right:100%;left:-35%}60%,to{right:-90%;left:100%}}@keyframes z-loading-bar-short{0%{right:100%;left:-200%}60%,to{right:-8%;left:107%}}@keyframes z-loading-beat{50%{opacity:.2;transform:scale(.75)}to{opacity:1;transform:scale(1)}}@keyframes z-loading-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes z-loading-circle{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}@keyframes z-loading-climbing-box{0%{transform:translate(0) rotate(-45deg)}20%{transform:translate(85%,-85%) rotate(47deg)}45%{transform:translate(170%,-170%) rotate(137deg)}70%{transform:translate(255%,-255%) rotate(217deg)}to{transform:translate(0) rotate(-225deg)}}@keyframes z-loading-clip{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.8)}to{transform:rotate(360deg) scale(1)}}@keyframes z-loading-clock{to{transform:rotate(360deg)}}@keyframes z-loading-dot{0%,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes z-loading-fade{50%{opacity:.3}to{opacity:1}}@keyframes z-loading-grid{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.5)}}@keyframes z-loading-hash-horizontal{0%,to{width:20%;box-shadow:calc(var(--z-loading-size) * .4) calc(var(--z-loading-size) * -.2) color-mix(in srgb,currentColor 75%,transparent),calc(var(--z-loading-size) * -.4) calc(var(--z-loading-size) * .2) color-mix(in srgb,currentColor 75%,transparent)}35%{width:100%;box-shadow:0 calc(var(--z-loading-size) * -.2) color-mix(in srgb,currentColor 75%,transparent),0 calc(var(--z-loading-size) * .2) color-mix(in srgb,currentColor 75%,transparent)}70%{width:20%;box-shadow:calc(var(--z-loading-size) * -.4) calc(var(--z-loading-size) * -.2) color-mix(in srgb,currentColor 75%,transparent),calc(var(--z-loading-size) * .4) calc(var(--z-loading-size) * .2) color-mix(in srgb,currentColor 75%,transparent)}}@keyframes z-loading-hash-vertical{0%,to{height:20%;box-shadow:calc(var(--z-loading-size) * .2) calc(var(--z-loading-size) * .4) currentColor,calc(var(--z-loading-size) * -.2) calc(var(--z-loading-size) * -.4) currentColor}35%{height:100%;box-shadow:calc(var(--z-loading-size) * .2) 0 currentColor,calc(var(--z-loading-size) * -.2) 0 currentColor}70%{height:20%;box-shadow:calc(var(--z-loading-size) * .2) calc(var(--z-loading-size) * -.4) currentColor,calc(var(--z-loading-size) * -.2) calc(var(--z-loading-size) * .4) currentColor}}@keyframes z-loading-pacman-top{0%,to{transform:rotate(0)}50%{transform:rotate(-44deg)}}@keyframes z-loading-pacman-bottom{0%,to{transform:rotate(0)}50%{transform:rotate(44deg)}}@keyframes z-loading-pacman-dot{75%{opacity:.7}to{transform:translate(calc(var(--z-loading-size) * -2.2))}}@keyframes z-loading-propagate{0%,95%,to{transform:translate(0) scale(1)}50%{transform:translate(var(--z-propagate-distance)) scale(.6)}}@keyframes z-loading-puff-scale{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes z-loading-puff-opacity{0%{opacity:1}to{opacity:0}}@keyframes z-loading-pulse{0%,80%{opacity:1;transform:scale(1)}45%{opacity:.7;transform:scale(.1)}}@keyframes z-loading-ring-right{0%{transform:rotateX(0) rotateY(0) rotate(0)}to{transform:rotateX(180deg) rotateY(360deg) rotate(360deg)}}@keyframes z-loading-ring-left{0%{transform:rotateX(0) rotateY(0) rotate(0)}to{transform:rotateX(360deg) rotateY(180deg) rotate(360deg)}}@keyframes z-loading-rise-even{0%{transform:scale(1.1)}25%{transform:translateY(calc(var(--z-loading-size) * -.4))}50%{transform:scale(.4)}75%{transform:translateY(calc(var(--z-loading-size) * .4))}to{transform:translateY(0) scale(1)}}@keyframes z-loading-rise-odd{0%{transform:scale(.4)}25%{transform:translateY(calc(var(--z-loading-size) * .4))}50%{transform:scale(1.1)}75%{transform:translateY(calc(var(--z-loading-size) * -.4))}to{transform:translateY(0) scale(.75)}}@keyframes z-loading-scale{0%,to{transform:scaleY(1)}50%{transform:scaleY(.4)}}@keyframes z-loading-skew{25%{transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{transform:perspective(100px) rotateX(0) rotateY(180deg)}to{transform:perspective(100px) rotateX(0) rotateY(0)}}@keyframes z-loading-square{25%{transform:rotateX(180deg) rotateY(0)}50%{transform:rotateX(180deg) rotateY(180deg)}75%{transform:rotateX(0) rotateY(180deg)}to{transform:rotateX(0) rotateY(0)}}@keyframes z-loading-sync{33%{transform:translateY(calc(var(--z-loading-size) * .3))}66%{transform:translateY(calc(var(--z-loading-size) * -.3))}to{transform:translateY(0)}}@keyframes z-loading-orbit-chase-node{0%,to{opacity:.18;scale:.72}20%{opacity:1;scale:1.2}42%{opacity:.7;scale:1}65%{opacity:.18;scale:.72}}@keyframes z-loading-bars-bar{0%,to{opacity:.22;scale:1 .56}28%{opacity:.52;scale:1 .82}48%{opacity:1;scale:1 1}72%{opacity:.34;scale:1 .68}}@keyframes z-loading-matrix-grid-node{0%,to{opacity:.2;scale:.68}30%{opacity:.46;scale:.82}48%{opacity:1;scale:1.18}72%{opacity:.3;scale:.74}}@keyframes z-loading-merge-cell{0%,to{opacity:.2;scale:.7;translate:0 0}44%,62%{opacity:1;scale:1;translate:var(--z-cell-x) var(--z-cell-y)}78%{opacity:.36;scale:.78;translate:0 0}}@keyframes z-loading-encode-bit{0%,to{opacity:.2;scale:1 .42}32%{opacity:.5;scale:1 .72}50%{opacity:1;scale:1 1}74%{opacity:.32;scale:1 .52}}@keyframes z-loading-scan-segment{0%,to{opacity:.2;translate:calc(var(--z-loading-size) * -.333) 0}42%{opacity:1;translate:calc(var(--z-loading-size) * .292) 0}70%{opacity:.36;translate:calc(var(--z-loading-size) * .583) 0}}@keyframes z-loading-lift-rise{0%,to{opacity:.16;translate:0 calc(var(--z-loading-size) * .083);scale:.72}32%{opacity:.5;translate:0 0;scale:.9}50%{opacity:1;translate:0 calc(var(--z-loading-size) * -.083);scale:1.08}74%{opacity:.3;translate:0 calc(var(--z-loading-size) * -.125);scale:.82}}\n/*! Spinner animations adapted from react-spinners, Copyright (c) 2017 David Hu, MIT License. */\n"] }]
|
|
123
123
|
}], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zSpinner: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSpinner", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColor", required: false }] }], zText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zText", required: false }] }], zOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOverlay", required: false }] }], zOverlayType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOverlayType", required: false }] }], zFullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFullscreen", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }] } });
|
|
124
124
|
|
|
125
125
|
const Z_LOADING_SPINNERS = [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shival99-z-ui-components-z-loading.mjs","sources":["../../../../libs/core-ui/components/z-loading/z-loading.variants.ts","../../../../libs/core-ui/components/z-loading/z-loading.component.ts","../../../../libs/core-ui/components/z-loading/z-loading.component.html","../../../../libs/core-ui/components/z-loading/z-loading.define.ts","../../../../libs/core-ui/components/z-loading/shival99-z-ui-components-z-loading.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zLoadingVariants = cva('inline-block animate-spin', {\n variants: {\n zSize: {\n '2xs': 'size-3',\n xs: 'size-4',\n default: 'size-6',\n lg: 'size-8',\n xl: 'size-12',\n },\n zColor: {\n primary: 'text-primary',\n secondary: 'text-secondary-foreground',\n white: 'text-white',\n current: 'text-current',\n },\n },\n defaultVariants: {\n zSize: 'default',\n zColor: 'primary',\n },\n});\n\nexport type ZLoadingVariants = VariantProps<typeof zLoadingVariants>;\n","import { NgTemplateOutlet, CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, effect, input, signal, ViewEncapsulation } from '@angular/core';\nimport { zTransform, zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport type { ZLoadingSpinner, ZLoadingSize, ZLoadingColor, ZLoadingOverlayType } from './z-loading.types';\nimport { zLoadingVariants } from './z-loading.variants';\n\n@Component({\n selector: 'z-loading',\n imports: [CommonModule, NgTemplateOutlet],\n standalone: true,\n templateUrl: './z-loading.component.html',\n styleUrl: './z-loading.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n class: 'z-loading inline-flex',\n },\n})\nexport class ZLoadingComponent {\n public readonly class = input<ClassValue>('');\n public readonly zSpinner = input<ZLoadingSpinner>('spinner');\n public readonly zSize = input<ZLoadingSize>('default');\n public readonly zColor = input<ZLoadingColor>('primary');\n public readonly zText = input<string>('');\n public readonly zOverlay = input(false, { transform: zTransform });\n public readonly zOverlayType = input<ZLoadingOverlayType>('dark');\n public readonly zFullscreen = input(false, { transform: zTransform });\n public readonly zLoading = input(false, { transform: zTransform });\n\n protected readonly isVisible = signal(false);\n protected readonly isLeaving = signal(false);\n\n private _leaveTimeout: ReturnType<typeof setTimeout> | null = null;\n\n constructor() {\n effect(() => {\n this._handleLoadingChange();\n });\n }\n\n protected readonly spinnerClasses = computed(() =>\n zMergeClasses(\n zLoadingVariants({\n zSize: this.zSize(),\n zColor: this.zColor(),\n }),\n this.class()\n )\n );\n\n protected readonly loaderClasses = computed(() =>\n zMergeClasses(\n 'z-loading-loader',\n {\n 'z-loading-size-2xs': this.zSize() === '2xs',\n 'z-loading-size-xs': this.zSize() === 'xs',\n 'z-loading-size-default': this.zSize() === 'default',\n 'z-loading-size-lg': this.zSize() === 'lg',\n 'z-loading-size-xl': this.zSize() === 'xl',\n 'text-primary': this.zColor() === 'primary',\n 'text-secondary-foreground': this.zColor() === 'secondary',\n 'text-white': this.zColor() === 'white',\n 'text-current': this.zColor() === 'current',\n },\n this.class()\n )\n );\n\n protected readonly circleRings = [0, 1, 2, 3, 4] as const;\n protected readonly fadeBars = [0, 1, 2, 3, 4, 5, 6, 7] as const;\n protected readonly gridDots = [0, 1, 2, 3, 4, 5, 6, 7, 8] as const;\n protected readonly pacmanDots = [0, 1, 2, 3] as const;\n protected readonly propagateDots = [0, 1, 2, 3, 4, 5] as const;\n protected readonly scaleBars = [0, 1, 2, 3, 4] as const;\n protected readonly orbitChaseNodes = [0, 1, 2, 3, 4, 5, 6, 7] as const;\n protected readonly barsColumns = [0, 1, 2, 3, 4] as const;\n protected readonly matrixDots = [0, 1, 2, 3, 4, 5, 6, 7, 8] as const;\n protected readonly mergeCells = [0, 1, 2, 3] as const;\n protected readonly encodeBits = [0, 1, 2, 3, 4, 5] as const;\n protected readonly scanRows = [0, 1, 2] as const;\n protected readonly liftLevels = [0, 1, 2, 3] as const;\n\n protected readonly overlayClasses = computed(() => `z-loading-overlay-${this.zOverlayType()}`);\n\n protected readonly textSizeClasses = computed(() => {\n const size = this.zSize();\n return {\n 'text-xs': size === '2xs' || size === 'xs',\n 'text-sm': size === 'default',\n 'text-base': size === 'lg',\n 'text-lg': size === 'xl',\n };\n });\n\n private _handleLoadingChange(): void {\n const loading = this.zLoading();\n if (loading) {\n if (this._leaveTimeout) {\n clearTimeout(this._leaveTimeout);\n this._leaveTimeout = null;\n }\n this.isLeaving.set(false);\n this.isVisible.set(true);\n return;\n }\n\n this.isLeaving.set(true);\n this._leaveTimeout = setTimeout(() => {\n this.isVisible.set(false);\n this.isLeaving.set(false);\n }, 100);\n }\n}\n","@if (!zOverlay() && !zFullscreen()) {\n <div\n class=\"z-loading-wrapper inline-flex items-center justify-center transition-opacity duration-150\"\n [class.opacity-0]=\"!zLoading()\"\n [class.pointer-events-none]=\"!zLoading()\">\n <ng-container *ngTemplateOutlet=\"spinnerContent\" />\n </div>\n}\n\n@if ((zOverlay() || zFullscreen()) && isVisible()) {\n <div\n class=\"z-loading-wrapper inline-flex items-center justify-center\"\n [class.z-loading-overlay]=\"zOverlay()\"\n [class.z-loading-fullscreen]=\"zFullscreen()\"\n [class.z-loading-leaving]=\"isLeaving()\"\n [class]=\"overlayClasses()\">\n <ng-container *ngTemplateOutlet=\"spinnerContent\" />\n </div>\n}\n\n<ng-template #spinnerContent>\n <div\n class=\"z-loading-content flex flex-col items-center justify-center gap-3\"\n [attr.data-z-loading-spinner]=\"zSpinner()\">\n @switch (zSpinner()) {\n @case ('spinner') {\n <svg [class]=\"spinnerClasses()\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n </svg>\n }\n @case ('orbit') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-orbit\">\n <div class=\"absolute top-1/2 left-0 h-2 w-2 -translate-y-1/2 rounded-full bg-current\"></div>\n <div class=\"absolute top-1/2 right-0 h-2 w-2 -translate-y-1/2 rounded-full bg-current opacity-30\"></div>\n </div>\n }\n @case ('matrix') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-matrix\"></div>\n }\n @case ('conic') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-conic rounded-full\"></div>\n }\n @case ('polygon') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-polygon rounded-full\"></div>\n }\n @case ('triple') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-triple rounded-full\"></div>\n }\n @case ('bar') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-bar\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('beat') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-beat\">\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('bounce') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-bounce\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('circle') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-circle\">\n @for (ring of circleRings; track ring) {\n <i [style.--z-index]=\"ring\"></i>\n }\n </span>\n }\n @case ('climbing-box') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-climbing-box\">\n <i></i>\n <b></b>\n </span>\n }\n @case ('clip') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-clip\"></span>\n }\n @case ('clock') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-clock\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('dot') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-dot\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('fade') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-fade\">\n @for (bar of fadeBars; track bar) {\n <i [style.--z-index]=\"bar\"></i>\n }\n </span>\n }\n @case ('grid') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-grid\">\n @for (dot of gridDots; track dot) {\n <i [style.--z-index]=\"dot\"></i>\n }\n </span>\n }\n @case ('hash') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-hash\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('moon') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-moon\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('pacman') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-pacman\">\n <i></i>\n <i></i>\n @for (dot of pacmanDots; track dot) {\n <b [style.--z-index]=\"dot\"></b>\n }\n </span>\n }\n @case ('propagate') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-propagate\">\n @for (dot of propagateDots; track dot) {\n <i [style.--z-index]=\"dot\"></i>\n }\n </span>\n }\n @case ('puff') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-puff\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('pulse') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-pulse\">\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('ring') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-ring\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('rise') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-rise\">\n <i></i>\n <i></i>\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('rotate') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-rotate\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('scale') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-scale\">\n @for (bar of scaleBars; track bar) {\n <i [style.--z-index]=\"bar\"></i>\n }\n </span>\n }\n @case ('skew') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-skew\"></span>\n }\n @case ('square') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-square\"></span>\n }\n @case ('sync') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-sync\">\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('orbit-chase') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-orbit-chase\">\n @for (node of orbitChaseNodes; track node) {\n <i [style.--z-index]=\"node\"></i>\n }\n </span>\n }\n @case ('bars') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-bars\">\n @for (column of barsColumns; track column) {\n <i [style.--z-index]=\"column\"></i>\n }\n </span>\n }\n @case ('matrix-grid') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-matrix-grid\">\n @for (dot of matrixDots; track dot) {\n <i></i>\n }\n </span>\n }\n @case ('merge') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-merge\">\n @for (cell of mergeCells; track cell) {\n <i [style.--z-index]=\"cell\"></i>\n }\n </span>\n }\n @case ('encode') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-encode\">\n @for (bit of encodeBits; track bit) {\n <i [style.--z-index]=\"bit\"></i>\n }\n </span>\n }\n @case ('scan') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-scan\">\n @for (row of scanRows; track row) {\n <b><i [style.--z-index]=\"row\"></i></b>\n }\n </span>\n }\n @case ('lift') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-lift\">\n @for (level of liftLevels; track level) {\n <i [style.--z-index]=\"level\"></i>\n }\n </span>\n }\n }\n\n @if (zText()) {\n <p [class]=\"textSizeClasses()\" class=\"z-loading-text font-medium\" [style.color]=\"'currentColor'\">\n {{ zText() }}\n </p>\n }\n </div>\n</ng-template>\n","export const Z_LOADING_SPINNERS = [\n 'spinner',\n 'orbit',\n 'matrix',\n 'conic',\n 'polygon',\n 'triple',\n 'bar',\n 'beat',\n 'bounce',\n 'circle',\n 'climbing-box',\n 'clip',\n 'clock',\n 'dot',\n 'fade',\n 'grid',\n 'hash',\n 'moon',\n 'pacman',\n 'propagate',\n 'puff',\n 'pulse',\n 'ring',\n 'rise',\n 'rotate',\n 'scale',\n 'skew',\n 'square',\n 'sync',\n 'orbit-chase',\n 'bars',\n 'matrix-grid',\n 'merge',\n 'encode',\n 'scan',\n 'lift',\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"shival99-z-ui-components-z-loading.mjs","sources":["../../../../libs/core-ui/components/z-loading/z-loading.variants.ts","../../../../libs/core-ui/components/z-loading/z-loading.component.ts","../../../../libs/core-ui/components/z-loading/z-loading.component.html","../../../../libs/core-ui/components/z-loading/z-loading.define.ts","../../../../libs/core-ui/components/z-loading/shival99-z-ui-components-z-loading.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zLoadingVariants = cva('inline-block animate-spin', {\n variants: {\n zSize: {\n '2xs': 'size-3',\n xs: 'size-4',\n default: 'size-6',\n lg: 'size-8',\n xl: 'size-12',\n },\n zColor: {\n primary: 'text-primary',\n secondary: 'text-secondary-foreground',\n white: 'text-white',\n current: 'text-current',\n },\n },\n defaultVariants: {\n zSize: 'default',\n zColor: 'primary',\n },\n});\n\nexport type ZLoadingVariants = VariantProps<typeof zLoadingVariants>;\n","import { NgTemplateOutlet, CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, effect, input, signal, ViewEncapsulation } from '@angular/core';\nimport { zTransform, zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport type { ZLoadingSpinner, ZLoadingSize, ZLoadingColor, ZLoadingOverlayType } from './z-loading.types';\nimport { zLoadingVariants } from './z-loading.variants';\n\n@Component({\n selector: 'z-loading',\n imports: [CommonModule, NgTemplateOutlet],\n standalone: true,\n templateUrl: './z-loading.component.html',\n styleUrl: './z-loading.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n class: 'z-loading inline-flex',\n },\n})\nexport class ZLoadingComponent {\n public readonly class = input<ClassValue>('');\n public readonly zSpinner = input<ZLoadingSpinner>('spinner');\n public readonly zSize = input<ZLoadingSize>('default');\n public readonly zColor = input<ZLoadingColor>('primary');\n public readonly zText = input<string>('');\n public readonly zOverlay = input(false, { transform: zTransform });\n public readonly zOverlayType = input<ZLoadingOverlayType>('dark');\n public readonly zFullscreen = input(false, { transform: zTransform });\n public readonly zLoading = input(false, { transform: zTransform });\n\n protected readonly isVisible = signal(false);\n protected readonly isLeaving = signal(false);\n\n private _leaveTimeout: ReturnType<typeof setTimeout> | null = null;\n\n constructor() {\n effect(() => {\n this._handleLoadingChange();\n });\n }\n\n protected readonly spinnerClasses = computed(() =>\n zMergeClasses(\n zLoadingVariants({\n zSize: this.zSize(),\n zColor: this.zColor(),\n }),\n this.class()\n )\n );\n\n protected readonly loaderClasses = computed(() =>\n zMergeClasses(\n 'z-loading-loader',\n {\n 'z-loading-size-2xs': this.zSize() === '2xs',\n 'z-loading-size-xs': this.zSize() === 'xs',\n 'z-loading-size-default': this.zSize() === 'default',\n 'z-loading-size-lg': this.zSize() === 'lg',\n 'z-loading-size-xl': this.zSize() === 'xl',\n 'text-primary': this.zColor() === 'primary',\n 'text-secondary-foreground': this.zColor() === 'secondary',\n 'text-white': this.zColor() === 'white',\n 'text-current': this.zColor() === 'current',\n },\n this.class()\n )\n );\n\n protected readonly circleRings = [0, 1, 2, 3, 4] as const;\n protected readonly fadeBars = [0, 1, 2, 3, 4, 5, 6, 7] as const;\n protected readonly gridDots = [0, 1, 2, 3, 4, 5, 6, 7, 8] as const;\n protected readonly pacmanDots = [0, 1, 2, 3] as const;\n protected readonly propagateDots = [0, 1, 2, 3, 4, 5] as const;\n protected readonly scaleBars = [0, 1, 2, 3, 4] as const;\n protected readonly orbitChaseNodes = [0, 1, 2, 3, 4, 5, 6, 7] as const;\n protected readonly barsColumns = [0, 1, 2, 3, 4] as const;\n protected readonly matrixDots = [0, 1, 2, 3, 4, 5, 6, 7, 8] as const;\n protected readonly mergeCells = [0, 1, 2, 3] as const;\n protected readonly encodeBits = [0, 1, 2, 3, 4, 5] as const;\n protected readonly scanRows = [0, 1, 2] as const;\n protected readonly liftLevels = [0, 1, 2, 3] as const;\n\n protected readonly overlayClasses = computed(() => `z-loading-overlay-${this.zOverlayType()}`);\n\n protected readonly textSizeClasses = computed(() => {\n const size = this.zSize();\n return {\n 'text-xs': size === '2xs' || size === 'xs',\n 'text-sm': size === 'default',\n 'text-base': size === 'lg',\n 'text-lg': size === 'xl',\n };\n });\n\n private _handleLoadingChange(): void {\n const loading = this.zLoading();\n if (loading) {\n if (this._leaveTimeout) {\n clearTimeout(this._leaveTimeout);\n this._leaveTimeout = null;\n }\n this.isLeaving.set(false);\n this.isVisible.set(true);\n return;\n }\n\n this.isLeaving.set(true);\n this._leaveTimeout = setTimeout(() => {\n this.isVisible.set(false);\n this.isLeaving.set(false);\n }, 100);\n }\n}\n","@if (!zOverlay() && !zFullscreen()) {\n <div\n class=\"z-loading-wrapper inline-flex items-center justify-center transition-opacity duration-150\"\n [class.opacity-0]=\"!zLoading()\"\n [class.pointer-events-none]=\"!zLoading()\">\n <ng-container *ngTemplateOutlet=\"spinnerContent\" />\n </div>\n}\n\n@if ((zOverlay() || zFullscreen()) && isVisible()) {\n <div\n class=\"z-loading-wrapper inline-flex items-center justify-center\"\n [class.z-loading-overlay]=\"zOverlay()\"\n [class.z-loading-fullscreen]=\"zFullscreen()\"\n [class.z-loading-leaving]=\"isLeaving()\"\n [class]=\"overlayClasses()\">\n <ng-container *ngTemplateOutlet=\"spinnerContent\" />\n </div>\n}\n\n<ng-template #spinnerContent>\n <div\n class=\"z-loading-content flex flex-col items-center justify-center gap-3\"\n [attr.data-z-loading-spinner]=\"zSpinner()\">\n @switch (zSpinner()) {\n @case ('spinner') {\n <svg [class]=\"spinnerClasses()\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n </svg>\n }\n @case ('orbit') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-orbit\">\n <div class=\"absolute top-1/2 left-0 h-2 w-2 -translate-y-1/2 rounded-full bg-current\"></div>\n <div class=\"absolute top-1/2 right-0 h-2 w-2 -translate-y-1/2 rounded-full bg-current opacity-30\"></div>\n </div>\n }\n @case ('matrix') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-matrix\"></div>\n }\n @case ('conic') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-conic rounded-full\"></div>\n }\n @case ('polygon') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-polygon rounded-full\"></div>\n }\n @case ('triple') {\n <div [class]=\"loaderClasses()\" class=\"z-loading-triple rounded-full\"></div>\n }\n @case ('bar') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-bar\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('beat') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-beat\">\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('bounce') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-bounce\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('circle') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-circle\">\n @for (ring of circleRings; track ring) {\n <i [style.--z-index]=\"ring\"></i>\n }\n </span>\n }\n @case ('climbing-box') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-climbing-box\">\n <i></i>\n <b></b>\n </span>\n }\n @case ('clip') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-clip\"></span>\n }\n @case ('clock') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-clock\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('dot') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-dot\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('fade') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-fade\">\n @for (bar of fadeBars; track bar) {\n <i [style.--z-index]=\"bar\"></i>\n }\n </span>\n }\n @case ('grid') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-grid\">\n @for (dot of gridDots; track dot) {\n <i [style.--z-index]=\"dot\"></i>\n }\n </span>\n }\n @case ('hash') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-hash\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('moon') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-moon\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('pacman') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-pacman\">\n <i></i>\n <i></i>\n @for (dot of pacmanDots; track dot) {\n <b [style.--z-index]=\"dot\"></b>\n }\n </span>\n }\n @case ('propagate') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-propagate\">\n @for (dot of propagateDots; track dot) {\n <i [style.--z-index]=\"dot\"></i>\n }\n </span>\n }\n @case ('puff') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-puff\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('pulse') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-pulse\">\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('ring') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-ring\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('rise') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-rise\">\n <i></i>\n <i></i>\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('rotate') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-rotate\">\n <i></i>\n <i></i>\n </span>\n }\n @case ('scale') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-scale\">\n @for (bar of scaleBars; track bar) {\n <i [style.--z-index]=\"bar\"></i>\n }\n </span>\n }\n @case ('skew') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-skew\"></span>\n }\n @case ('square') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-square\"></span>\n }\n @case ('sync') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-sync\">\n <i></i>\n <i></i>\n <i></i>\n </span>\n }\n @case ('orbit-chase') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-orbit-chase\">\n @for (node of orbitChaseNodes; track node) {\n <i [style.--z-index]=\"node\"></i>\n }\n </span>\n }\n @case ('bars') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-bars\">\n @for (column of barsColumns; track column) {\n <i [style.--z-index]=\"column\"></i>\n }\n </span>\n }\n @case ('matrix-grid') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-matrix-grid\">\n @for (dot of matrixDots; track dot) {\n <i></i>\n }\n </span>\n }\n @case ('merge') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-merge\">\n @for (cell of mergeCells; track cell) {\n <i [style.--z-index]=\"cell\"></i>\n }\n </span>\n }\n @case ('encode') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-encode\">\n @for (bit of encodeBits; track bit) {\n <i [style.--z-index]=\"bit\"></i>\n }\n </span>\n }\n @case ('scan') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-scan\">\n @for (row of scanRows; track row) {\n <b><i [style.--z-index]=\"row\"></i></b>\n }\n </span>\n }\n @case ('lift') {\n <span [class]=\"loaderClasses()\" class=\"z-loading-lift\">\n @for (level of liftLevels; track level) {\n <i [style.--z-index]=\"level\"></i>\n }\n </span>\n }\n }\n\n @if (zText()) {\n <p [class]=\"textSizeClasses()\" class=\"z-loading-text font-medium\" [style.color]=\"'currentColor'\">\n {{ zText() }}\n </p>\n }\n </div>\n</ng-template>\n","export const Z_LOADING_SPINNERS = [\n 'spinner',\n 'orbit',\n 'matrix',\n 'conic',\n 'polygon',\n 'triple',\n 'bar',\n 'beat',\n 'bounce',\n 'circle',\n 'climbing-box',\n 'clip',\n 'clock',\n 'dot',\n 'fade',\n 'grid',\n 'hash',\n 'moon',\n 'pacman',\n 'propagate',\n 'puff',\n 'pulse',\n 'ring',\n 'rise',\n 'rotate',\n 'scale',\n 'skew',\n 'square',\n 'sync',\n 'orbit-chase',\n 'bars',\n 'matrix-grid',\n 'merge',\n 'encode',\n 'scan',\n 'lift',\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|