@shival99/z-ui 2.4.2 → 2.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/css/base.css +2 -1
- package/assets/css/global.css +23 -2
- package/assets/css/tailwind.css +7 -4
- package/fesm2022/shival99-z-ui-components-z-accordion.mjs +6 -6
- package/fesm2022/shival99-z-ui-components-z-accordion.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-audio-player.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-audio-player.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-autocomplete.mjs +27 -12
- package/fesm2022/shival99-z-ui-components-z-autocomplete.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-avatar.mjs +6 -6
- package/fesm2022/shival99-z-ui-components-z-avatar.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-breadcrumb.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-breadcrumb.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-button-group.mjs +11 -11
- package/fesm2022/shival99-z-ui-components-z-button-group.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-button.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-button.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-calendar.mjs +40 -40
- package/fesm2022/shival99-z-ui-components-z-calendar.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-card.mjs +7 -7
- package/fesm2022/shival99-z-ui-components-z-card.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-chat.mjs +4 -4
- package/fesm2022/shival99-z-ui-components-z-chat.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-checkbox.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-checkbox.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-code.mjs +58 -19
- package/fesm2022/shival99-z-ui-components-z-code.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-command.mjs +6 -5
- package/fesm2022/shival99-z-ui-components-z-command.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-drawer.mjs +17 -17
- package/fesm2022/shival99-z-ui-components-z-drawer.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-dropdown-menu.mjs +12 -4
- package/fesm2022/shival99-z-ui-components-z-dropdown-menu.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-editor.mjs +6 -6
- package/fesm2022/shival99-z-ui-components-z-editor.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-empty.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-empty.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-filter.mjs +27 -27
- package/fesm2022/shival99-z-ui-components-z-filter.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-gallery.mjs +42 -34
- package/fesm2022/shival99-z-ui-components-z-gallery.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-hover-glide.mjs +221 -0
- package/fesm2022/shival99-z-ui-components-z-hover-glide.mjs.map +1 -0
- package/fesm2022/shival99-z-ui-components-z-icon.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-icon.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-input.mjs +5 -5
- package/fesm2022/shival99-z-ui-components-z-input.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-kanban.mjs +4 -4
- package/fesm2022/shival99-z-ui-components-z-kanban.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-loading.mjs +18 -4
- package/fesm2022/shival99-z-ui-components-z-loading.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-marquee.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-marquee.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-media-player.mjs +346 -956
- package/fesm2022/shival99-z-ui-components-z-media-player.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-menu.mjs +8 -8
- package/fesm2022/shival99-z-ui-components-z-menu.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-metric-card.mjs +5 -5
- package/fesm2022/shival99-z-ui-components-z-metric-card.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-modal.mjs +17 -17
- package/fesm2022/shival99-z-ui-components-z-modal.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-number-ticker.mjs +352 -0
- package/fesm2022/shival99-z-ui-components-z-number-ticker.mjs.map +1 -0
- package/fesm2022/shival99-z-ui-components-z-overlay.mjs +9 -9
- package/fesm2022/shival99-z-ui-components-z-overlay.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-pagination.mjs +4 -4
- package/fesm2022/shival99-z-ui-components-z-pagination.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-popover.mjs +14 -14
- package/fesm2022/shival99-z-ui-components-z-popover.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-qrcode.mjs +32 -8
- package/fesm2022/shival99-z-ui-components-z-qrcode.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-radio.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-radio.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-scrollarea.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-scrollarea.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-select.mjs +181 -26
- package/fesm2022/shival99-z-ui-components-z-select.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-show-more.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-show-more.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-skeleton-auto.mjs +4 -4
- package/fesm2022/shival99-z-ui-components-z-skeleton-auto.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-skeleton.mjs +5 -5
- package/fesm2022/shival99-z-ui-components-z-skeleton.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-steps.mjs +4 -4
- package/fesm2022/shival99-z-ui-components-z-steps.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-switch.mjs +5 -5
- package/fesm2022/shival99-z-ui-components-z-switch.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-table.mjs +107 -105
- package/fesm2022/shival99-z-ui-components-z-table.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-tabs.mjs +327 -31
- package/fesm2022/shival99-z-ui-components-z-tabs.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-tags.mjs +15 -15
- package/fesm2022/shival99-z-ui-components-z-tags.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-timeline.mjs +4 -4
- package/fesm2022/shival99-z-ui-components-z-timeline.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-toast.mjs +10 -9
- package/fesm2022/shival99-z-ui-components-z-toast.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-tooltip.mjs +11 -11
- package/fesm2022/shival99-z-ui-components-z-tooltip.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-upload.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-upload.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-i18n.mjs +6 -26
- package/fesm2022/shival99-z-ui-i18n.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-pipes.mjs +18 -18
- package/fesm2022/shival99-z-ui-pipes.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-services.mjs +31 -31
- package/fesm2022/shival99-z-ui-services.mjs.map +1 -1
- package/package.json +21 -1
- package/types/shival99-z-ui-components-z-autocomplete.d.ts +6 -2
- package/types/shival99-z-ui-components-z-calendar.d.ts +4 -4
- package/types/shival99-z-ui-components-z-card.d.ts +21 -21
- package/types/shival99-z-ui-components-z-code.d.ts +16 -3
- package/types/shival99-z-ui-components-z-drawer.d.ts +1 -1
- package/types/shival99-z-ui-components-z-editor.d.ts +8 -8
- package/types/shival99-z-ui-components-z-gallery.d.ts +8 -5
- package/types/shival99-z-ui-components-z-hover-glide.d.ts +48 -0
- package/types/shival99-z-ui-components-z-loading.d.ts +9 -2
- package/types/shival99-z-ui-components-z-media-player.d.ts +102 -172
- package/types/shival99-z-ui-components-z-metric-card.d.ts +19 -19
- package/types/shival99-z-ui-components-z-modal.d.ts +1 -1
- package/types/shival99-z-ui-components-z-number-ticker.d.ts +110 -0
- package/types/shival99-z-ui-components-z-overlay.d.ts +3 -3
- package/types/shival99-z-ui-components-z-popover.d.ts +11 -8
- package/types/shival99-z-ui-components-z-qrcode.d.ts +4 -1
- package/types/shival99-z-ui-components-z-select.d.ts +45 -7
- package/types/shival99-z-ui-components-z-switch.d.ts +22 -21
- package/types/shival99-z-ui-components-z-table.d.ts +1 -1
- package/types/shival99-z-ui-components-z-tabs.d.ts +59 -7
- package/types/shival99-z-ui-components-z-toast.d.ts +1 -1
- package/types/shival99-z-ui-components-z-tooltip.d.ts +2 -2
- package/types/shival99-z-ui-components-z-upload.d.ts +3 -3
- package/types/shival99-z-ui-services.d.ts +10 -10
|
@@ -71,12 +71,12 @@ class ZGalleryOfficePreviewComponent {
|
|
|
71
71
|
this._render?.dispose();
|
|
72
72
|
this._render = null;
|
|
73
73
|
}
|
|
74
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
75
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: ZGalleryOfficePreviewComponent, isStandalone: true, selector: "z-gallery-office-preview", inputs: { zSource: { classPropertyName: "zSource", publicName: "zSource", isSignal: true, isRequired: true, transformFunction: null }, zKind: { classPropertyName: "zKind", publicName: "zKind", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { zLoaded: "zLoaded", zError: "zError" }, viewQueries: [{ propertyName: "_host", first: true, predicate: ["host"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #host\n class=\"z-gallery-office-preview\"\n [class.z-gallery-office-preview--sheet]=\"zKind() === 'excel'\"\n [class.z-gallery-office-preview--slide]=\"zKind() === 'powerpoint'\"></div>\n", styles: ["*,:before,:after,::backdrop{--univer-tw-border-spacing-x: 0;--univer-tw-border-spacing-y: 0;--univer-tw-translate-x: 0;--univer-tw-translate-y: 0;--univer-tw-rotate: 0;--univer-tw-skew-x: 0;--univer-tw-skew-y: 0;--univer-tw-scale-x: 1;--univer-tw-scale-y: 1;--univer-tw-pan-x: ;--univer-tw-pan-y: ;--univer-tw-pinch-zoom: ;--univer-tw-scroll-snap-strictness: proximity;--univer-tw-gradient-from-position: ;--univer-tw-gradient-via-position: ;--univer-tw-gradient-to-position: ;--univer-tw-ordinal: ;--univer-tw-slashed-zero: ;--univer-tw-numeric-figure: ;--univer-tw-numeric-spacing: ;--univer-tw-numeric-fraction: ;--univer-tw-ring-inset: ;--univer-tw-ring-offset-width: 0px;--univer-tw-ring-offset-color: #fff;--univer-tw-ring-color: #93c5fd80;--univer-tw-ring-offset-shadow: 0 0 #0000;--univer-tw-ring-shadow: 0 0 #0000;--univer-tw-shadow: 0 0 #0000;--univer-tw-shadow-colored: 0 0 #0000;--univer-tw-blur: ;--univer-tw-brightness: ;--univer-tw-contrast: ;--univer-tw-grayscale: ;--univer-tw-hue-rotate: ;--univer-tw-invert: ;--univer-tw-saturate: ;--univer-tw-sepia: ;--univer-tw-drop-shadow: ;--univer-tw-backdrop-blur: ;--univer-tw-backdrop-brightness: ;--univer-tw-backdrop-contrast: ;--univer-tw-backdrop-grayscale: ;--univer-tw-backdrop-hue-rotate: ;--univer-tw-backdrop-invert: ;--univer-tw-backdrop-opacity: ;--univer-tw-backdrop-saturate: ;--univer-tw-backdrop-sepia: ;--univer-tw-contain-size: ;--univer-tw-contain-layout: ;--univer-tw-contain-paint: ;--univer-tw-contain-style: }*{scrollbar-color:initial;scrollbar-width:initial}.univer-sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.univer-inset-x-0{left:0;right:0}.univer-bottom-0\\.5{bottom:.125rem}.univer-bottom-6{bottom:1.5rem}.univer-left-0\\.5{left:.125rem}.univer-left-2{left:.5rem}.univer-left-\\[-16px\\]{left:-16px}.univer-right-4{right:1rem}.univer-right-px{right:1px}.univer-top-px{top:1px}.univer-z-0{z-index:0}.univer-z-\\[1081\\]{z-index:1081}.-univer-mx-1{margin-left:-.25rem;margin-right:-.25rem}.univer-my-0{margin-top:0;margin-bottom:0}.univer-ml-auto{margin-left:auto}.univer-inline-block{display:inline-block}.\\!univer-hidden{display:none!important}.univer-size-2{width:.5rem;height:.5rem}.univer-size-2\\.5{width:.625rem;height:.625rem}.univer-h-1\\/2{height:50%}.univer-h-12{height:3rem}.univer-h-2{height:.5rem}.univer-h-32{height:8rem}.univer-h-48{height:12rem}.univer-h-\\[150px\\]{height:150px}.univer-h-\\[calc\\(100\\%-2px\\)\\]{height:calc(100% - 2px)}.univer-max-h-0{max-height:0}.univer-max-h-80{max-height:20rem}.univer-max-h-\\[--radix-popper-available-height\\]{max-height:var(--radix-popper-available-height)}.univer-max-h-\\[1000px\\]{max-height:1000px}.univer-max-h-\\[40vh\\]{max-height:40vh}.univer-max-h-full{max-height:100%}.univer-max-h-screen{max-height:100vh}.univer-min-h-3\\.5{min-height:.875rem}.univer-min-h-\\[520px\\]{min-height:520px}.\\!univer-w-fit{width:fit-content!important}.univer-w-64{width:16rem}.univer-w-72{width:18rem}.univer-w-80{width:20rem}.univer-w-\\[--radix-popper-anchor-width\\]{width:var(--radix-popper-anchor-width)}.univer-w-\\[calc\\(100\\%-16px\\)\\]{width:calc(100% - 16px)}.univer-min-w-36{min-width:9rem}.univer-min-w-\\[320px\\]{min-width:320px}.univer-max-w-2xl{max-width:42rem}.univer-max-w-\\[520px\\]{max-width:520px}.univer-max-w-\\[60vw\\]{max-width:60vw}.univer-max-w-sm{max-width:24rem}.univer-max-w-xs{max-width:20rem}.univer-shrink{flex-shrink:1}.univer-shrink-0{flex-shrink:0}.univer-origin-\\[--radix-hover-card-content-transform-origin\\]{transform-origin:var(--radix-hover-card-content-transform-origin)}.-univer-translate-y-1\\/2,.univer--translate-y-1\\/2{--univer-tw-translate-y: -50%;transform:translate(var(--univer-tw-translate-x),-50%) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-translate-x-3{--univer-tw-translate-x: .75rem;transform:translate(.75rem,var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.-univer-rotate-90{--univer-tw-rotate: -90deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(-90deg) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-rotate-0{--univer-tw-rotate: 0deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(0) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-rotate-45{--univer-tw-rotate: 45deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(45deg) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-rotate-\\[-90deg\\]{--univer-tw-rotate: -90deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(-90deg) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.\\!univer-animate-none{animation:none!important}.univer-cursor-crosshair{cursor:crosshair}.univer-cursor-grabbing{cursor:grabbing}.univer-resize{resize:both}.univer-grid-flow-row{grid-auto-flow:row}.univer-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.univer-flex-col-reverse{flex-direction:column-reverse}.univer-content-center{align-content:center}.univer-gap-5{gap:1.25rem}.univer-space-y-1\\.5>:not([hidden])~:not([hidden]){--univer-tw-space-y-reverse: 0;margin-top:calc(.375rem * (1 - var(--univer-tw-space-y-reverse)));margin-top:.375rem;margin-top:calc(.375rem * calc(1 - var(--univer-tw-space-y-reverse)));margin-bottom:0;margin-bottom:calc(.375rem * var(--univer-tw-space-y-reverse))}.univer-divide-x>:not([hidden])~:not([hidden]){--univer-tw-divide-x-reverse: 0;border-right-width:0;border-right-width:calc(1px * var(--univer-tw-divide-x-reverse));border-left-width:calc(1px * (1 - var(--univer-tw-divide-x-reverse)));border-left-width:1px;border-left-width:calc(1px * calc(1 - var(--univer-tw-divide-x-reverse)))}.univer-divide-y-0>:not([hidden])~:not([hidden]){--univer-tw-divide-y-reverse: 0;border-top-width:calc(0px * (1 - var(--univer-tw-divide-y-reverse)));border-top-width:0;border-top-width:calc(0px * calc(1 - var(--univer-tw-divide-y-reverse)));border-bottom-width:0;border-bottom-width:calc(0px * var(--univer-tw-divide-y-reverse))}.univer-text-ellipsis{text-overflow:ellipsis}.univer-text-balance{text-wrap:balance}.\\!univer-rounded-b-none{border-bottom-right-radius:0!important;border-bottom-left-radius:0!important}.\\!univer-rounded-l-none{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.\\!univer-rounded-r-none{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.\\!univer-rounded-t-none{border-top-left-radius:0!important;border-top-right-radius:0!important}.univer-rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.\\!univer-border-l-0{border-left-width:0!important}.\\!univer-border-t-0{border-top-width:0!important}.univer-border-b-0{border-bottom-width:0}.univer-border-l{border-left-width:1px}.univer-border-l-0{border-left-width:0}.univer-border-r{border-right-width:1px}.univer-border-t{border-top-width:1px}.univer-border-t-0{border-top-width:0}.univer-border-dashed{border-style:dashed}.\\!univer-border-gray-200{border-color:var(--univer-gray-200)!important}.univer-border-gray-300{border-color:var(--univer-gray-300)}.univer-border-primary-200{border-color:var(--univer-primary-200)}.univer-border-primary-300{border-color:var(--univer-primary-300)}.univer-border-red-300{border-color:var(--univer-red-300)}.univer-border-red-500{border-color:var(--univer-red-500)}.univer-border-white{border-color:var(--univer-white)}.\\!univer-bg-primary-600{background-color:var(--univer-primary-600)!important}.univer-bg-\\[rgba\\(0\\,0\\,0\\,0\\.8\\)\\]{background-color:#000c}.univer-bg-gray-800{background-color:var(--univer-gray-800)}.univer-bg-gray-900{background-color:var(--univer-gray-900)}.univer-bg-primary-500{background-color:var(--univer-primary-500)}.univer-bg-red-500{background-color:var(--univer-red-500)}.univer-bg-sky-100\\/70{background-color:#e0f2feb3}.univer-bg-slate-100\\/80{background-color:#f1f5f9cc}.univer-bg-slate-900\\/90{background-color:#0f172ae6}.univer-bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--univer-tw-gradient-stops))}.univer-from-slate-100{--univer-tw-gradient-from: #f1f5f9 var(--univer-tw-gradient-from-position);--univer-tw-gradient-to: #f1f5f900 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to)}.univer-via-cyan-50{--univer-tw-gradient-to: #ecfeff00 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), #ecfeff var(--univer-tw-gradient-via-position), var(--univer-tw-gradient-to)}.univer-to-blue-100{--univer-tw-gradient-to: var(--univer-blue-100) var(--univer-tw-gradient-to-position)}.univer-fill-current{fill:currentColor}.\\!univer-p-2\\.5{padding:.625rem!important}.univer-p-6{padding:1.5rem}.\\!univer-pl-4{padding-left:1rem!important}.univer-pb-2\\.5{padding-bottom:.625rem}.univer-pl-8{padding-left:2rem}.univer-pr-32{padding-right:8rem}.univer-pr-8{padding-right:2rem}.univer-pt-4{padding-top:1rem}.univer-align-middle{vertical-align:middle}.univer-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.univer-text-\\[13px\\]{font-size:13px}.univer-text-\\[8px\\]{font-size:8px}.univer-text-sm\\/8{font-size:.875rem;line-height:2rem}.univer-text-xs\\/6{font-size:.75rem;line-height:1.5rem}.univer-leading-9{line-height:2.25rem}.univer-leading-normal{line-height:1.5}.univer-tracking-wide{letter-spacing:.025em}.univer-tracking-widest{letter-spacing:.1em}.\\!univer-text-primary-500{color:var(--univer-primary-500)!important}.univer-text-amber-500{--univer-tw-text-opacity: 1;color:rgba(245,158,11,var(--univer-tw-text-opacity, 1))}.univer-text-cyan-700{--univer-tw-text-opacity: 1;color:rgba(14,116,144,var(--univer-tw-text-opacity, 1))}.univer-text-green-500{color:var(--univer-green-500)}.univer-text-sky-500{--univer-tw-text-opacity: 1;color:rgba(14,165,233,var(--univer-tw-text-opacity, 1))}.univer-text-sky-700{--univer-tw-text-opacity: 1;color:rgba(3,105,161,var(--univer-tw-text-opacity, 1))}.univer-text-sky-900{--univer-tw-text-opacity: 1;color:rgba(12,74,110,var(--univer-tw-text-opacity, 1))}.univer-text-slate-500{--univer-tw-text-opacity: 1;color:rgba(100,116,139,var(--univer-tw-text-opacity, 1))}.univer-text-slate-600{--univer-tw-text-opacity: 1;color:rgba(71,85,105,var(--univer-tw-text-opacity, 1))}.univer-text-slate-700{--univer-tw-text-opacity: 1;color:rgba(51,65,85,var(--univer-tw-text-opacity, 1))}.univer-text-slate-800{--univer-tw-text-opacity: 1;color:rgba(30,41,59,var(--univer-tw-text-opacity, 1))}.univer-text-violet-500{--univer-tw-text-opacity: 1;color:rgba(139,92,246,var(--univer-tw-text-opacity, 1))}.univer-underline-offset-4{text-underline-offset:4px}.univer-opacity-100{opacity:1}.univer-opacity-50{opacity:.5}.univer-opacity-80{opacity:.8}.univer-shadow-\\[0_30px_60px_-35px_rgba\\(15\\,23\\,42\\,0\\.55\\)\\]{--univer-tw-shadow: 0 30px 60px -35px #0f172a8c;--univer-tw-shadow-colored: 0 30px 60px -35px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 30px 60px -35px #0f172a8c;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-shadow-inner{--univer-tw-shadow: inset 0 2px 4px 0 #0000000d;--univer-tw-shadow-colored: inset 0 2px 4px 0 var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,inset 0 2px 4px #0000000d;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-ring-2{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.\\!univer-ring-primary-900{--univer-tw-ring-color: var(--univer-primary-900) !important}.univer-ring-primary-50{--univer-tw-ring-color: var(--univer-primary-50)}.univer-ring-white{--univer-tw-ring-color: var(--univer-white)}.univer-ring-offset-2{--univer-tw-ring-offset-width: 2px}.\\!univer-ring-offset-gray-600{--univer-tw-ring-offset-color: var(--univer-gray-600) !important}.univer-ring-offset-white{--univer-tw-ring-offset-color: var(--univer-white)}.univer-drop-shadow-sm{--univer-tw-drop-shadow: drop-shadow(0 1px 1px #0000000d);filter:var(--univer-tw-blur) var(--univer-tw-brightness) var(--univer-tw-contrast) var(--univer-tw-grayscale) var(--univer-tw-hue-rotate) var(--univer-tw-invert) var(--univer-tw-saturate) var(--univer-tw-sepia) var(--univer-tw-drop-shadow)}.univer-transition-\\[color\\,box-shadow\\]{transition-property:color,box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-\\[max-height\\,opacity\\]{transition-property:max-height,opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-shadow{transition-property:box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-duration-150{transition-duration:.15s}.univer-duration-500{transition-duration:.5s}.univer-duration-75{transition-duration:75ms}.univer-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.univer-will-change-transform{will-change:transform}.univer-scrollbar-thin::-webkit-scrollbar-track{background-color:var(--scrollbar-track);border-radius:var(--scrollbar-track-radius)}.univer-scrollbar-thin::-webkit-scrollbar-track:hover{background-color:var(--scrollbar-track-hover, var(--scrollbar-track))}.univer-scrollbar-thin::-webkit-scrollbar-track:active{background-color:var(--scrollbar-track-active, var(--scrollbar-track-hover, var(--scrollbar-track)))}.univer-scrollbar-thin::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);border-radius:var(--scrollbar-thumb-radius)}.univer-scrollbar-thin::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover, var(--scrollbar-thumb))}.univer-scrollbar-thin::-webkit-scrollbar-thumb:active{background-color:var(--scrollbar-thumb-active, var(--scrollbar-thumb-hover, var(--scrollbar-thumb)))}.univer-scrollbar-thin::-webkit-scrollbar-corner{background-color:var(--scrollbar-corner);border-radius:var(--scrollbar-corner-radius)}.univer-scrollbar-thin::-webkit-scrollbar-corner:hover{background-color:var(--scrollbar-corner-hover, var(--scrollbar-corner))}.univer-scrollbar-thin::-webkit-scrollbar-corner:active{background-color:var(--scrollbar-corner-active, var(--scrollbar-corner-hover, var(--scrollbar-corner)))}.univer-scrollbar-thin{scrollbar-width:thin;scrollbar-color:initial initial;scrollbar-color:var(--scrollbar-thumb, initial) var(--scrollbar-track, initial)}.univer-scrollbar-thin::-webkit-scrollbar{width:8px;height:8px;display:block}.univer-scrollbar-track-gray-50{--scrollbar-track: var(--univer-gray-50) !important}.univer-scrollbar-thumb-gray-300{--scrollbar-thumb: var(--univer-gray-300) !important}.univer-animate-out{--univer-tw-exit-opacity: initial;--univer-tw-exit-scale: initial;--univer-tw-exit-rotate: initial;--univer-tw-exit-translate-x: initial;--univer-tw-exit-translate-y: initial;animation-name:exit;animation-duration:.15s}.univer-fade-in,.univer-fade-in-0{--univer-tw-enter-opacity: 0}.univer-fade-out{--univer-tw-exit-opacity: 0}.univer-zoom-in-95{--univer-tw-enter-scale: .95}.univer-duration-150{animation-duration:.15s}.univer-duration-200{animation-duration:.2s}.univer-duration-300{animation-duration:.3s}.univer-duration-500{animation-duration:.5s}.univer-duration-75{animation-duration:75ms}.univer-ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.univer-ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.placeholder\\:univer-text-gray-200::placeholder{color:var(--univer-gray-200)}.placeholder\\:univer-text-gray-400::placeholder{color:var(--univer-gray-400)}.before\\:univer-absolute:before{content:var(--univer-tw-content);position:absolute}.before\\:univer-top-1\\/2:before{content:var(--univer-tw-content);top:50%}.before\\:univer-block:before{content:var(--univer-tw-content);display:block}.before\\:univer-h-px:before{content:var(--univer-tw-content);height:1px}.before\\:univer-w-full:before{content:var(--univer-tw-content);width:100%}.before\\:-univer-translate-y-1\\/2:before{content:var(--univer-tw-content);--univer-tw-translate-y: -50%;transform:translate(var(--univer-tw-translate-x),-50%) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.before\\:univer-bg-gray-200:before{content:var(--univer-tw-content);background-color:var(--univer-gray-200)}.before\\:univer-content-\\[\\\"\\\"\\]:before{--univer-tw-content: \"\";content:\"\";content:var(--univer-tw-content)}.data-\\[disabled\\]\\:univer-pointer-events-none[data-disabled]{pointer-events:none}.data-\\[orientation\\=horizontal\\]\\:univer-h-px[data-orientation=horizontal]{height:1px}.data-\\[orientation\\=vertical\\]\\:univer-h-full[data-orientation=vertical]{height:100%}.data-\\[orientation\\=horizontal\\]\\:univer-w-full[data-orientation=horizontal]{width:100%}.data-\\[orientation\\=vertical\\]\\:univer-w-px[data-orientation=vertical]{width:1px}.data-\\[state\\=open\\]\\:univer-bg-gray-100[data-state=open]{background-color:var(--univer-gray-100)}.data-\\[disabled\\]\\:univer-opacity-50[data-disabled]{opacity:.5}.data-\\[state\\=open\\]\\:univer-animate-in[data-state=open]{--univer-tw-enter-opacity: initial;--univer-tw-enter-scale: initial;--univer-tw-enter-rotate: initial;--univer-tw-enter-translate-x: initial;--univer-tw-enter-translate-y: initial;animation-name:enter;animation-duration:.15s}.data-\\[state\\=closed\\]\\:univer-animate-out[data-state=closed]{--univer-tw-exit-opacity: initial;--univer-tw-exit-scale: initial;--univer-tw-exit-rotate: initial;--univer-tw-exit-translate-x: initial;--univer-tw-exit-translate-y: initial;animation-name:exit;animation-duration:.15s}.data-\\[state\\=closed\\]\\:univer-fade-out-0[data-state=closed]{--univer-tw-exit-opacity: 0}.data-\\[state\\=open\\]\\:univer-fade-in-0[data-state=open]{--univer-tw-enter-opacity: 0}.data-\\[state\\=closed\\]\\:univer-zoom-out-95[data-state=closed]{--univer-tw-exit-scale: .95}.data-\\[state\\=open\\]\\:univer-zoom-in-95[data-state=open]{--univer-tw-enter-scale: .95}.data-\\[side\\=bottom\\]\\:univer-slide-in-from-top-2[data-side=bottom]{--univer-tw-enter-translate-y: -.5rem}.data-\\[side\\=left\\]\\:univer-slide-in-from-right-2[data-side=left]{--univer-tw-enter-translate-x: .5rem}.data-\\[side\\=right\\]\\:univer-slide-in-from-left-2[data-side=right]{--univer-tw-enter-translate-x: -.5rem}.data-\\[side\\=top\\]\\:univer-slide-in-from-bottom-2[data-side=top]{--univer-tw-enter-translate-y: .5rem}.data-\\[state\\=closed\\]\\:univer-slide-out-to-left-1\\/2[data-state=closed]{--univer-tw-exit-translate-x: -50%}.data-\\[state\\=closed\\]\\:univer-slide-out-to-top-\\[48\\%\\][data-state=closed]{--univer-tw-exit-translate-y: -48%}.data-\\[state\\=open\\]\\:univer-slide-in-from-left-1\\/2[data-state=open]{--univer-tw-enter-translate-x: -50%}.data-\\[state\\=open\\]\\:univer-slide-in-from-top-\\[48\\%\\][data-state=open]{--univer-tw-enter-translate-y: -48%}.hover\\:univer-border-red-400:hover{border-color:var(--univer-red-400)}.hover\\:univer-border-transparent:hover{border-color:#0000}.hover\\:univer-bg-primary-500:hover{background-color:var(--univer-primary-500)}.hover\\:univer-bg-red-400:hover{background-color:var(--univer-red-400)}.hover\\:univer-text-gray-500:hover{color:var(--univer-gray-500)}.hover\\:univer-text-primary-500:hover{color:var(--univer-primary-500)}.hover\\:univer-text-white:hover{color:var(--univer-white)}.hover\\:univer-underline:hover{text-decoration-line:underline}.hover\\:univer-opacity-100:hover{opacity:1}.hover\\:univer-opacity-70:hover{opacity:.7}.hover\\:univer-opacity-80:hover{opacity:.8}.focus\\:univer-border-primary-600:focus{border-color:var(--univer-primary-600)}.focus\\:univer-bg-gray-100:focus{background-color:var(--univer-gray-100)}.focus\\:univer-ring-primary-50:focus{--univer-tw-ring-color: var(--univer-primary-50)}.active\\:univer-border-red-600:active{border-color:var(--univer-red-600)}.active\\:univer-bg-primary-700:active{background-color:var(--univer-primary-700)}.active\\:univer-bg-red-600:active{background-color:var(--univer-red-600)}.active\\:univer-text-primary-700:active{color:var(--univer-primary-700)}.disabled\\:univer-pointer-events-none:disabled{pointer-events:none}.disabled\\:univer-opacity-50:disabled{opacity:.5}@media(min-width:640px){.sm\\:\\!univer-flex-row{flex-direction:row!important}.sm\\:\\!univer-justify-end{justify-content:flex-end!important}.sm\\:\\!univer-space-x-2>:not([hidden])~:not([hidden]){--univer-tw-space-x-reverse: 0 !important;margin-right:0!important;margin-right:calc(.5rem * var(--univer-tw-space-x-reverse))!important;margin-left:calc(.5rem * (1 - var(--univer-tw-space-x-reverse)))!important;margin-left:.5rem!important;margin-left:calc(.5rem * calc(1 - var(--univer-tw-space-x-reverse)))!important}.sm\\:\\!univer-rounded-lg{border-radius:.5rem!important}.sm\\:\\!univer-text-left{text-align:left!important}}@media(min-width:768px){.md\\:univer-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}.rtl\\:univer-left-px:where([dir=rtl],[dir=rtl] *){left:1px}.rtl\\:univer-right-auto:where([dir=rtl],[dir=rtl] *){right:auto}.rtl\\:univer-rounded-l-md:where([dir=rtl],[dir=rtl] *){border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.rtl\\:univer-rounded-r-none:where([dir=rtl],[dir=rtl] *){border-top-right-radius:0;border-bottom-right-radius:0}.rtl\\:univer-border-l-0:where([dir=rtl],[dir=rtl] *){border-left-width:0}.rtl\\:univer-border-r:where([dir=rtl],[dir=rtl] *){border-right-width:1px}.dark\\:\\!univer-border-gray-500:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-500)!important}.dark\\:\\!univer-border-primary-700:where(.univer-dark,.univer-dark *){border-color:var(--univer-primary-700)!important}.dark\\:\\!univer-bg-gray-100:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-100)!important}.dark\\:\\!univer-bg-primary-600:where(.univer-dark,.univer-dark *){background-color:var(--univer-primary-600)!important}.dark\\:\\!univer-text-gray-900:where(.univer-dark,.univer-dark *){color:var(--univer-gray-900)!important}.dark\\:\\!univer-text-primary-500:where(.univer-dark,.univer-dark *){color:var(--univer-primary-500)!important}.dark\\:\\!univer-text-sky-400:where(.univer-dark,.univer-dark *){--univer-tw-text-opacity: 1 !important;color:rgba(56,189,248,var(--univer-tw-text-opacity, 1))!important}.dark\\:\\!univer-ring-primary-600:where(.univer-dark,.univer-dark *){--univer-tw-ring-color: var(--univer-primary-600) !important}.dark\\:\\!univer-ring-primary-900:where(.univer-dark,.univer-dark *){--univer-tw-ring-color: var(--univer-primary-900) !important}.dark\\:\\!univer-ring-offset-gray-600:where(.univer-dark,.univer-dark *){--univer-tw-ring-offset-color: var(--univer-gray-600) !important}.dark\\:\\!univer-scrollbar-track-gray-900:where(.univer-dark,.univer-dark *){--scrollbar-track: var(--univer-gray-900) !important}.dark\\:\\!univer-scrollbar-thumb-gray-700:where(.univer-dark,.univer-dark *){--scrollbar-thumb: var(--univer-gray-700) !important}.dark\\:before\\:\\!univer-bg-gray-600:where(.univer-dark,.univer-dark *):before{content:var(--univer-tw-content);background-color:var(--univer-gray-600)!important}.dark\\:data-\\[state\\=open\\]\\:\\!univer-bg-gray-600[data-state=open]:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.dark\\:hover\\:\\!univer-text-white:hover:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.dark\\:focus\\:\\!univer-border-primary-500:focus:where(.univer-dark,.univer-dark *){border-color:var(--univer-primary-500)!important}.dark\\:focus\\:\\!univer-bg-gray-600:focus:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.dark\\:focus\\:\\!univer-ring-primary-900:focus:where(.univer-dark,.univer-dark *){--univer-tw-ring-color: var(--univer-primary-900) !important}.dark\\:focus-visible\\:\\!univer-border-gray-600:focus-visible:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.dark\\:active\\:\\!univer-bg-gray-700:active:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}.\\[\\&\\:\\:-webkit-calendar-picker-indicator\\]\\:univer-hidden::-webkit-calendar-picker-indicator{display:none}.\\[\\&\\:\\:-webkit-calendar-picker-indicator\\]\\:univer-appearance-none::-webkit-calendar-picker-indicator{-webkit-appearance:none;appearance:none}.\\[\\&\\>input\\]\\:univer-w-11>input{width:2.75rem}.\\[\\&\\>input\\]\\:univer-border-gray-200>input{border-color:var(--univer-gray-200)}.\\[\\&\\>input\\]\\:focus\\:univer-border-primary-500:focus>input{border-color:var(--univer-primary-500)}.dark\\:\\[\\&\\>input\\]\\:\\!univer-border-gray-600>input:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.dark\\:\\[\\&\\>input\\]\\:\\!univer-text-white>input:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.\\[\\&\\>svg\\]\\:univer-block>svg{display:block}.\\[\\&\\>svg\\]\\:univer-size-4>svg{width:1rem;height:1rem}.\\[\\&\\>ul\\:not\\(\\:last-child\\)\\]\\:univer-border-0>ul:not(:last-child){border-width:0}.\\[\\&\\>ul\\:not\\(\\:last-child\\)\\]\\:univer-border-r>ul:not(:last-child){border-right-width:1px}.\\[\\&\\>ul\\:not\\(\\:last-child\\)\\]\\:univer-border-solid>ul:not(:last-child){border-style:solid}.\\[\\&\\>ul\\:not\\(\\:last-child\\)\\]\\:univer-border-r-gray-200>ul:not(:last-child){border-right-color:var(--univer-gray-200)}.\\[\\&_\\[data-description\\]\\]\\:univer-text-sm [data-description]{font-size:.875rem;line-height:1.25rem}.\\[\\&_\\[data-description\\]\\]\\:univer-text-gray-200 [data-description]{color:var(--univer-gray-200)}.\\[\\&_\\[data-description\\]\\]\\:univer-text-gray-600 [data-description]{color:var(--univer-gray-600)}.\\[\\&_\\[data-icon\\]\\>svg\\]\\:univer-relative [data-icon]>svg{position:relative}.\\[\\&_\\[data-icon\\]\\>svg\\]\\:univer-top-1 [data-icon]>svg{top:.25rem}.\\[\\&_\\[data-icon\\]\\]\\:univer-self-baseline [data-icon]{align-self:baseline}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-amber-500 [data-icon]{--univer-tw-text-opacity: 1;color:rgba(245,158,11,var(--univer-tw-text-opacity, 1))}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-green-500 [data-icon]{color:var(--univer-green-500)}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-primary-600 [data-icon]{color:var(--univer-primary-600)}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-red-500 [data-icon]{color:var(--univer-red-500)}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-sky-500 [data-icon]{--univer-tw-text-opacity: 1;color:rgba(14,165,233,var(--univer-tw-text-opacity, 1))}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-violet-500 [data-icon]{--univer-tw-text-opacity: 1;color:rgba(139,92,246,var(--univer-tw-text-opacity, 1))}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-yellow-500 [data-icon]{color:var(--univer-yellow-500)}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-rounded-2xl [data-sonner-toast]{border-radius:1rem}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-border [data-sonner-toast]{border-width:1px}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-border-solid [data-sonner-toast]{border-style:solid}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-border-gray-200 [data-sonner-toast]{border-color:var(--univer-gray-200)}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-shadow-\\[0_16px_40px_-20px_rgba\\(15\\,23\\,42\\,0\\.55\\)\\] [data-sonner-toast]{--univer-tw-shadow: 0 16px 40px -20px #0f172a8c;--univer-tw-shadow-colored: 0 16px 40px -20px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 16px 40px -20px #0f172a8c;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-shadow-md [data-sonner-toast]{--univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;--univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 6px -2px #1e284d14,0 2px 6px -1px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-backdrop-blur-sm [data-sonner-toast]{--univer-tw-backdrop-blur: blur(4px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.dark\\:\\[\\&_\\[data-sonner-toast\\]\\]\\:\\!univer-border-gray-600 [data-sonner-toast]:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.\\[\\&_\\[data-title\\]\\]\\:univer-text-sm [data-title]{font-size:.875rem;line-height:1.25rem}.\\[\\&_\\[data-title\\]\\]\\:univer-text-gray-900 [data-title]{color:var(--univer-gray-900)}.\\[\\&_\\[data-u-comp\\=form-layout\\]\\]\\:univer-max-w-\\[calc\\(50\\%-8px\\)\\] [data-u-comp=form-layout]{max-width:calc(50% - 8px)}.\\[\\&_\\[data-u-comp\\=form-layout\\]\\]\\:univer-shrink [data-u-comp=form-layout]{flex-shrink:1}.\\[\\&_\\[data-u-comp\\=form-layout\\]\\]\\:univer-grow [data-u-comp=form-layout]{flex-grow:1}.\\[\\&_\\[data-u-comp\\=input\\]\\]\\:univer-w-full [data-u-comp=input]{width:100%}.\\[\\&_\\[data-u-comp\\=input\\]\\]\\:univer-border-red-500 [data-u-comp=input]{border-color:var(--univer-red-500)}.\\[\\&_\\[data-u-comp\\=pager-left-arrow\\]\\:hover\\]\\:\\!univer-bg-gray-600 [data-u-comp=pager-left-arrow]:hover,.\\[\\&_\\[data-u-comp\\=pager-right-arrow\\]\\:hover\\]\\:\\!univer-bg-gray-600 [data-u-comp=pager-right-arrow]:hover{background-color:var(--univer-gray-600)!important}.\\[\\&_\\[data-u-comp\\=select\\]\\]\\:univer-w-full [data-u-comp=select]{width:100%}.\\[\\&_\\[data-u-comp\\=select\\]\\]\\:univer-border-red-500 [data-u-comp=select]{border-color:var(--univer-red-500)}.\\[\\&_input\\]\\:univer-box-border input{box-sizing:border-box}.\\[\\&_input\\]\\:univer-flex input{display:flex}.\\[\\&_input\\]\\:univer-h-7 input{height:1.75rem}.\\[\\&_input\\]\\:univer-items-center input{align-items:center}.\\[\\&_input\\]\\:univer-rounded input{border-radius:.25rem}.\\[\\&_input\\]\\:univer-border input{border-width:1px}.\\[\\&_input\\]\\:univer-border-solid input{border-style:solid}.\\[\\&_input\\]\\:univer-border-gray-200 input{border-color:var(--univer-gray-200)}.\\[\\&_input\\]\\:univer-border-gray-600 input{border-color:var(--univer-gray-600)}.\\[\\&_input\\]\\:univer-bg-transparent input{background-color:#0000}.\\[\\&_input\\]\\:univer-px-1\\.5 input{padding-left:.375rem;padding-right:.375rem}.\\[\\&_input\\]\\:univer-text-gray-700 input{color:var(--univer-gray-700)}.\\[\\&_input\\]\\:univer-text-white input{color:var(--univer-white)}.\\[\\&_input\\]\\:univer-outline-none input{outline-offset:2px;outline:2px solid #0000}.\\[\\&_svg\\]\\:univer-pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:univer-size-4 svg{width:1rem;height:1rem}.\\[\\&_svg\\]\\:univer-shrink-0 svg{flex-shrink:0}.univer-popup{z-index:1070;--univer-tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--univer-tw-shadow-colored: 0 1px 3px 0 var(--univer-tw-shadow-color), 0 1px 2px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 3px #0000001a,0 1px 2px -1px #0000001a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow);border-radius:6px;position:fixed;top:-9999px;left:-9999px;overflow:hidden}.univer-popup-enter{transform-origin:0 0;opacity:0;animation-duration:.15s;animation-timing-function:cubic-bezier(.08,.82,.17,1);animation-play-state:paused;animation-fill-mode:both}.univer-popup-enter-active{animation-name:popup-slide-up-in;animation-play-state:running}.univer-popup-exit{transform-origin:0 0;opacity:1;animation-name:popup-slide-up-out;animation-duration:.15s;animation-timing-function:cubic-bezier(.6,.04,.98,.34);animation-play-state:running;animation-fill-mode:both}.univer-popup-exit-active{display:none}@keyframes popup-slide-up-in{0%{transform-origin:0 0;opacity:0;transform:scaleY(0)}to{transform-origin:0 0;opacity:1;transform:scaleY(1)}}@keyframes popup-slide-up-out{0%{transform-origin:0 0;opacity:1;transform:scaleY(1)}to{transform-origin:0 0;opacity:0;transform:scaleY(0)}}.univer-popup-mask{z-index:1060;position:fixed;inset:0}.univer-pointer-events-auto{pointer-events:auto}.univer-invisible{visibility:hidden}.univer-sticky{position:sticky}.-univer-left-\\[99999\\]{left:-99999px}.-univer-top-\\[99999\\]{top:-99999px}.univer-left-1\\/2{left:50%}.univer-left-\\[-9999px\\]{left:-9999px}.univer-right-2{right:.5rem}.univer-top-\\[-9999px\\]{top:-9999px}.univer-top-\\[calc\\(50\\%-6px\\)\\]{top:calc(50% - 6px)}.univer-z-20{z-index:20}.univer-z-\\[-1\\]{z-index:-1}.univer-z-\\[1020\\]{z-index:1020}.univer-z-\\[1080\\]{z-index:1080}.univer-z-\\[1\\]{z-index:1}.univer-mx-2{margin-left:.5rem;margin-right:.5rem}.univer-mx-auto{margin-left:auto;margin-right:auto}.univer-mt-6{margin-top:1.5rem}.univer-line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.\\!univer-size-3\\.5{width:.875rem!important;height:.875rem!important}.univer-size-12{width:3rem;height:3rem}.univer-size-3\\.5{width:.875rem;height:.875rem}.univer-size-7{width:1.75rem;height:1.75rem}.univer-size-9{width:2.25rem;height:2.25rem}.univer-h-0{height:0}.univer-h-1\\.5{height:.375rem}.univer-max-h-\\[80vh\\]{max-height:80vh}.univer-max-h-\\[min\\(72vh\\,560px\\)\\]{max-height:min(72vh,560px)}.univer-min-h-\\[560px\\]{min-height:560px}.univer-min-h-\\[56px\\]{min-height:56px}.univer-min-h-full{min-height:100%}.univer-w-0{width:0}.univer-w-1{width:.25rem}.univer-w-10{width:2.5rem}.univer-w-40{width:10rem}.univer-w-7{width:1.75rem}.univer-w-8{width:2rem}.univer-w-96{width:24rem}.univer-w-max{width:max-content}.univer-w-screen{width:100vw}.univer-min-w-52{min-width:13rem}.univer-min-w-6{min-width:1.5rem}.univer-min-w-min{min-width:min-content}.univer-max-w-3xl{max-width:48rem}.univer-max-w-5xl{max-width:64rem}.univer-max-w-96{max-width:24rem}.univer-max-w-\\[--radix-popper-available-width\\]{max-width:var(--radix-popper-available-width)}.univer-max-w-\\[32\\%\\]{max-width:32%}.univer-max-w-\\[560px\\]{max-width:560px}.univer-max-w-\\[calc\\(100vw-16px\\)\\]{max-width:calc(100vw - 16px)}.univer-max-w-full{max-width:100%}.univer-origin-center{transform-origin:center}.-univer-translate-x-1\\/2{--univer-tw-translate-x: -50%;transform:translate(-50%,var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-translate-x-0{--univer-tw-translate-x: 0px;transform:translateY(var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-translate-x-full{--univer-tw-translate-x: 100%;transform:translate(100%,var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-cursor-col-resize{cursor:col-resize}.univer-grid-cols-\\[1fr\\]{grid-template-columns:1fr}.univer-grid-cols-\\[22px_minmax\\(0\\,1fr\\)_22px\\]{grid-template-columns:22px minmax(0,1fr) 22px}.univer-grid-cols-\\[28px_minmax\\(0\\,1fr\\)_auto\\]{grid-template-columns:28px minmax(0,1fr) auto}.univer-grid-cols-\\[32px_minmax\\(0\\,1fr\\)_32px\\]{grid-template-columns:32px minmax(0,1fr) 32px}.univer-grid-cols-\\[auto\\,1fr\\]{grid-template-columns:auto 1fr}.univer-grid-cols-\\[auto_1fr_auto\\]{grid-template-columns:auto 1fr auto}.univer-grid-rows-\\[100\\%\\]{grid-template-rows:100%}.univer-grid-rows-\\[auto_1fr\\]{grid-template-rows:auto 1fr}.univer-grid-rows-\\[auto_1fr_auto\\]{grid-template-rows:auto 1fr auto}.univer-flex-wrap{flex-wrap:wrap}.univer-items-end{align-items:flex-end}.univer-gap-0\\.5{gap:.125rem}.univer-overscroll-contain{overscroll-behavior:contain}.univer-scroll-smooth{scroll-behavior:smooth}.\\!univer-rounded-full{border-radius:9999px!important}.\\!univer-rounded-xl{border-radius:.75rem!important}.univer-rounded-2xl{border-radius:1rem}.univer-rounded-3xl{border-radius:1.5rem}.univer-rounded-xl{border-radius:.75rem}.univer-rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.univer-rounded-t-\\[28px\\]{border-top-left-radius:28px;border-top-right-radius:28px}.univer-border-0{border-width:0}.\\!univer-bg-gray-200{background-color:var(--univer-gray-200)!important}.\\!univer-bg-gray-500{background-color:var(--univer-gray-500)!important}.univer-bg-\\[rgba\\(15\\,23\\,42\\,0\\.32\\)\\]{background-color:#0f172a52}.univer-bg-gray-300{background-color:var(--univer-gray-300)}.univer-bg-gray-50{background-color:var(--univer-gray-50)}.univer-bg-gray-700{background-color:var(--univer-gray-700)}.univer-bg-primary-50{background-color:var(--univer-primary-50)}.univer-bg-gradient-to-tr{background-image:linear-gradient(to top right,var(--univer-tw-gradient-stops))}.univer-from-slate-950{--univer-tw-gradient-from: #020617 var(--univer-tw-gradient-from-position);--univer-tw-gradient-to: #02061700 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to)}.univer-via-blue-950{--univer-tw-gradient-to: #17255400 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), #172554 var(--univer-tw-gradient-via-position), var(--univer-tw-gradient-to)}.univer-to-cyan-900{--univer-tw-gradient-to: #164e63 var(--univer-tw-gradient-to-position)}.univer-p-8{padding:2rem}.univer-px-0{padding-left:0;padding-right:0}.univer-px-0\\.5{padding-left:.125rem;padding-right:.125rem}.univer-px-3{padding-left:.75rem;padding-right:.75rem}.univer-pb-2{padding-bottom:.5rem}.univer-pl-2{padding-left:.5rem}.univer-pl-4{padding-left:1rem}.univer-pr-1\\.5{padding-right:.375rem}.univer-pt-3{padding-top:.75rem}.univer-text-left{text-align:left}.univer-text-right{text-align:right}.univer-font-sans{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.univer-text-2xl{font-size:1.5rem;line-height:2rem}.univer-uppercase{text-transform:uppercase}.univer-leading-4{line-height:1rem}.univer-leading-none{line-height:1}.univer-tracking-\\[0\\.08em\\]{letter-spacing:.08em}.univer-tracking-tight{letter-spacing:-.025em}.\\!univer-text-gray-600{color:var(--univer-gray-600)!important}.univer-text-current{color:currentColor}.univer-text-slate-200{--univer-tw-text-opacity: 1;color:rgba(226,232,240,var(--univer-tw-text-opacity, 1))}.univer-underline{text-decoration-line:underline}.univer-opacity-0{opacity:0}.univer-opacity-30{opacity:.3}.univer-opacity-40{opacity:.4}.univer-opacity-60{opacity:.6}.univer-shadow-\\[0_-16px_48px_rgba\\(15\\,23\\,42\\,0\\.18\\)\\]{--univer-tw-shadow: 0 -16px 48px #0f172a2e;--univer-tw-shadow-colored: 0 -16px 48px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 -16px 48px #0f172a2e;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-ring-0{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(0px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.univer-ring-primary-600{--univer-tw-ring-color: var(--univer-primary-600)}.univer-backdrop-blur-\\[2px\\]{--univer-tw-backdrop-blur: blur(2px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.univer-backdrop-blur-xl{--univer-tw-backdrop-blur: blur(24px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.univer-transition-\\[width\\]{transition-property:width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}@keyframes enter{0%{opacity:1;opacity:var(--univer-tw-enter-opacity, 1);transform:translateZ(0) scaleZ(1) rotate(0);transform:translate3d(var(--univer-tw-enter-translate-x, 0),var(--univer-tw-enter-translate-y, 0),0) scale3d(var(--univer-tw-enter-scale, 1),var(--univer-tw-enter-scale, 1),var(--univer-tw-enter-scale, 1)) rotate(var(--univer-tw-enter-rotate, 0))}}@keyframes exit{to{opacity:1;opacity:var(--univer-tw-exit-opacity, 1);transform:translateZ(0) scaleZ(1) rotate(0);transform:translate3d(var(--univer-tw-exit-translate-x, 0),var(--univer-tw-exit-translate-y, 0),0) scale3d(var(--univer-tw-exit-scale, 1),var(--univer-tw-exit-scale, 1),var(--univer-tw-exit-scale, 1)) rotate(var(--univer-tw-exit-rotate, 0))}}.univer-animate-in{--univer-tw-enter-opacity: initial;--univer-tw-enter-scale: initial;--univer-tw-enter-rotate: initial;--univer-tw-enter-translate-x: initial;--univer-tw-enter-translate-y: initial;animation-name:enter;animation-duration:.15s}.univer-fade-in{--univer-tw-enter-opacity: 0}.univer-fade-in-70{--univer-tw-enter-opacity: .7}.last\\:univer-border-b-0:last-child{border-bottom-width:0}.empty\\:univer-hidden:empty{display:none}.hover\\:univer-opacity-50:hover{opacity:.5}.focus\\:univer-bg-white:focus{background-color:var(--univer-white)}.focus\\:univer-ring-2:focus{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.focus-visible\\:univer-ring-primary-600:focus-visible{--univer-tw-ring-color: var(--univer-primary-600)}.focus-visible\\:univer-ring-offset-0:focus-visible{--univer-tw-ring-offset-width: 0px}.active\\:univer-bg-gray-200:active{background-color:var(--univer-gray-200)}.enabled\\:hover\\:univer-bg-gray-50:hover:enabled{background-color:var(--univer-gray-50)}.enabled\\:active\\:univer-bg-gray-100:active:enabled{background-color:var(--univer-gray-100)}.disabled\\:univer-cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:univer-text-gray-300:disabled{color:var(--univer-gray-300)}.disabled\\:univer-opacity-40:disabled{opacity:.4}.disabled\\:hover\\:univer-bg-transparent:hover:disabled{background-color:#0000}@media(min-width:640px){.sm\\:\\!univer-block{display:block!important}}.rtl\\:univer-pl-1\\.5:where([dir=rtl],[dir=rtl] *){padding-left:.375rem}.rtl\\:univer-pr-0:where([dir=rtl],[dir=rtl] *){padding-right:0}.rtl\\:univer-pr-2:where([dir=rtl],[dir=rtl] *){padding-right:.5rem}.dark\\:\\!univer-bg-gray-200:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-200)!important}.dark\\:\\!univer-bg-primary-400:where(.univer-dark,.univer-dark *){background-color:var(--univer-primary-400)!important}.dark\\:\\!univer-text-gray-500:where(.univer-dark,.univer-dark *){color:var(--univer-gray-500)!important}.dark\\:\\!univer-text-gray-600:where(.univer-dark,.univer-dark *){color:var(--univer-gray-600)!important}.dark\\:\\!univer-text-gray-800:where(.univer-dark,.univer-dark *){color:var(--univer-gray-800)!important}.dark\\:\\!univer-text-primary-100:where(.univer-dark,.univer-dark *){color:var(--univer-primary-100)!important}.dark\\:\\!univer-text-primary-300:where(.univer-dark,.univer-dark *){color:var(--univer-primary-300)!important}.dark\\:\\!univer-text-primary-400:where(.univer-dark,.univer-dark *){color:var(--univer-primary-400)!important}.dark\\:hover\\:\\!univer-bg-gray-900:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-900)!important}.dark\\:hover\\:\\!univer-bg-transparent:hover:where(.univer-dark,.univer-dark *){background-color:#0000!important}.dark\\:active\\:\\!univer-bg-gray-600:active:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.dark\\:disabled\\:\\!univer-text-gray-600:disabled:where(.univer-dark,.univer-dark *){color:var(--univer-gray-600)!important}.\\[\\&\\:\\:-webkit-scrollbar\\]\\:univer-hidden::-webkit-scrollbar{display:none}.\\[\\&\\>\\*\\]\\:univer-m-0>*{margin:0}.\\[\\&\\>\\*\\]\\:univer-inline-flex>*{display:inline-flex}.\\[\\&\\>\\*\\]\\:univer-h-6>*{height:1.5rem}.\\[\\&\\>\\*\\]\\:univer-min-h-7>*{min-height:1.75rem}.\\[\\&\\>\\*\\]\\:univer-min-w-7>*{min-width:1.75rem}.\\[\\&\\>\\*\\]\\:univer-appearance-none>*{-webkit-appearance:none;appearance:none}.\\[\\&\\>\\*\\]\\:univer-items-center>*{align-items:center}.\\[\\&\\>\\*\\]\\:univer-justify-center>*{justify-content:center}.\\[\\&\\>\\*\\]\\:univer-rounded>*{border-radius:.25rem}.\\[\\&\\>\\*\\]\\:univer-rounded-md>*{border-radius:.375rem}.\\[\\&\\>\\*\\]\\:univer-border-0>*{border-width:0}.\\[\\&\\>\\*\\]\\:univer-px-1>*{padding-left:.25rem;padding-right:.25rem}.\\[\\&\\>\\*\\]\\:univer-px-1\\.5>*{padding-left:.375rem;padding-right:.375rem}.\\[\\&\\>\\*\\]\\:univer-leading-none>*{line-height:1}.\\[\\&\\>\\*\\]\\:univer-outline-none>*{outline-offset:2px;outline:2px solid #0000}.\\[\\&\\>\\*\\]\\:univer-transition-colors>*{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:\\[\\&\\>\\*\\]\\:univer-bg-gray-100>:hover{background-color:var(--univer-gray-100)}.\\[\\&\\>span\\]\\:univer-truncate>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.\\[\\&\\>span\\]\\:univer-text-sm>span{font-size:.875rem;line-height:1.25rem}.\\[\\&\\>span\\]\\:univer-font-medium>span{font-weight:500}.\\[\\&\\>svg\\]\\:univer-shrink-0>svg{flex-shrink:0}.\\[\\&\\>svg\\]\\:univer-text-lg>svg{font-size:1.125rem;line-height:1.75rem}.\\[\\&\\>svg\\]\\:univer-text-gray-700>svg{color:var(--univer-gray-700)}.\\[\\&_\\*\\]\\:univer-box-border *{box-sizing:border-box}.\\[\\&_\\.univer-custom-label\\]\\:univer-text-sm .univer-custom-label{font-size:.875rem;line-height:1.25rem}.\\[\\&_\\.univer-custom-label\\]\\:univer-leading-none .univer-custom-label{line-height:1}.\\[\\&_\\.univer-toolbar-button-selector-main\\]\\:\\!univer-h-8 .univer-toolbar-button-selector-main{height:2rem!important}.\\[\\&_\\.univer-toolbar-button-selector-main\\]\\:\\!univer-rounded-none .univer-toolbar-button-selector-main{border-radius:0!important}.\\[\\&_\\.univer-toolbar-button-selector-main\\]\\:\\!univer-rounded-l-md .univer-toolbar-button-selector-main{border-top-left-radius:.375rem!important;border-bottom-left-radius:.375rem!important}.\\[\\&_\\.univer-toolbar-button-selector-main\\]\\:\\!univer-px-1\\.5 .univer-toolbar-button-selector-main{padding-left:.375rem!important;padding-right:.375rem!important}.\\[\\&_\\.univer-toolbar-button-selector-root\\]\\:\\!univer-h-8 .univer-toolbar-button-selector-root{height:2rem!important}.\\[\\&_\\.univer-toolbar-button-selector-root\\]\\:univer-overflow-hidden .univer-toolbar-button-selector-root{overflow:hidden}.\\[\\&_\\.univer-toolbar-button-selector-root\\]\\:\\!univer-rounded-md .univer-toolbar-button-selector-root{border-radius:.375rem!important}.\\[\\&_\\.univer-toolbar-button-selector-root\\]\\:\\!univer-pr-0 .univer-toolbar-button-selector-root{padding-right:0!important}.\\[\\&_\\.univer-toolbar-button-selector-trigger\\]\\:\\!univer-static .univer-toolbar-button-selector-trigger{position:static!important}.\\[\\&_\\.univer-toolbar-button-selector-trigger\\]\\:\\!univer-h-8 .univer-toolbar-button-selector-trigger{height:2rem!important}.\\[\\&_\\.univer-toolbar-button-selector-trigger\\]\\:\\!univer-w-6 .univer-toolbar-button-selector-trigger{width:1.5rem!important}.\\[\\&_\\.univer-toolbar-button-selector-trigger\\]\\:\\!univer-rounded-none .univer-toolbar-button-selector-trigger{border-radius:0!important}.\\[\\&_\\.univer-toolbar-button-selector-trigger\\]\\:\\!univer-rounded-r-md .univer-toolbar-button-selector-trigger{border-top-right-radius:.375rem!important;border-bottom-right-radius:.375rem!important}.\\[\\&_\\.univer-toolbar-selector-root\\]\\:\\!univer-h-8 .univer-toolbar-selector-root{height:2rem!important}.\\[\\&_\\.univer-toolbar-selector-root\\]\\:\\!univer-gap-1 .univer-toolbar-selector-root{gap:.25rem!important}.\\[\\&_\\.univer-toolbar-selector-root\\]\\:\\!univer-rounded-md .univer-toolbar-selector-root{border-radius:.375rem!important}.\\[\\&_\\.univer-toolbar-selector-root\\]\\:\\!univer-px-1\\.5 .univer-toolbar-selector-root{padding-left:.375rem!important;padding-right:.375rem!important}.\\[\\&_\\.univer-toolbar-selector-trigger\\]\\:\\!univer-pl-0\\.5 .univer-toolbar-selector-trigger{padding-left:.125rem!important}.\\[\\&_\\.univer-tooltip\\]\\:univer-inline-flex .univer-tooltip{display:inline-flex}.\\[\\&_\\.univer-tooltip\\]\\:univer-h-full .univer-tooltip{height:100%}.\\[\\&_\\.univer-tooltip\\]\\:univer-items-center .univer-tooltip{align-items:center}.\\[\\&_\\[data-u-command\\]\\]\\:\\!univer-h-8 [data-u-command]{height:2rem!important}.\\[\\&_\\[data-u-command\\]\\]\\:\\!univer-min-h-8 [data-u-command]{min-height:2rem!important}.\\[\\&_\\[data-u-command\\]\\]\\:\\!univer-rounded-md [data-u-command]{border-radius:.375rem!important}.\\[\\&_\\[data-u-command\\]\\]\\:\\!univer-px-1\\.5 [data-u-command]{padding-left:.375rem!important;padding-right:.375rem!important}.\\[\\&_button\\]\\:\\!univer-m-0 button{margin:0!important}.\\[\\&_button\\]\\:\\!univer-h-8 button{height:2rem!important}.\\[\\&_button\\]\\:\\!univer-min-w-8 button{min-width:2rem!important}.\\[\\&_button\\]\\:\\!univer-appearance-none button{-webkit-appearance:none!important;appearance:none!important}.\\[\\&_button\\]\\:\\!univer-rounded-md button{border-radius:.375rem!important}.\\[\\&_button\\]\\:\\!univer-border-0 button{border-width:0!important}.\\[\\&_button\\]\\:\\!univer-bg-transparent button{background-color:#0000!important}.\\[\\&_button\\]\\:\\!univer-p-0 button{padding:0!important}.\\[\\&_button\\]\\:\\!univer-px-1\\.5 button{padding-left:.375rem!important;padding-right:.375rem!important}.\\[\\&_button\\]\\:\\!univer-leading-none button{line-height:1!important}.\\[\\&_button\\]\\:\\!univer-outline-none button{outline-offset:2px!important;outline:2px solid #0000!important}.\\[\\&_input\\:focus\\]\\:\\!univer-ring-0 input:focus{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color) !important;--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(0px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color) !important;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000!important;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)!important}.\\[\\&_input\\]\\:\\!univer-m-0 input{margin:0!important}.\\[\\&_input\\]\\:univer-h-6 input{height:1.5rem}.\\[\\&_input\\]\\:univer-w-7 input{width:1.75rem}.\\[\\&_input\\]\\:\\!univer-appearance-none input{-webkit-appearance:none!important;appearance:none!important}.\\[\\&_input\\]\\:\\!univer-border-0 input{border-width:0!important}.\\[\\&_input\\]\\:univer-border-none input{border-style:none}.\\[\\&_input\\]\\:\\!univer-bg-transparent input{background-color:#0000!important}.\\[\\&_input\\]\\:\\!univer-p-0 input{padding:0!important}.\\[\\&_input\\]\\:univer-p-0 input{padding:0}.\\[\\&_input\\]\\:univer-text-sm input{font-size:.875rem;line-height:1.25rem}.\\[\\&_input\\]\\:\\!univer-leading-none input{line-height:1!important}.\\[\\&_input\\]\\:\\!univer-outline-none input{outline-offset:2px!important;outline:2px solid #0000!important}.univer-fixed{position:fixed}.univer-bottom-0{bottom:0}.univer-left-5{left:1.25rem}.univer-left-\\[5px\\]{left:5px}.univer-top-4{top:1rem}.univer-top-\\[5px\\]{top:5px}.univer-z-\\[10000\\]{z-index:10000}.univer-mb-1{margin-bottom:.25rem}.univer-mr-1{margin-right:.25rem}.univer-mt-1\\.5{margin-top:.375rem}.univer-mt-12{margin-top:3rem}.univer-mt-5{margin-top:1.25rem}.univer-size-0\\.5{width:.125rem;height:.125rem}.univer-size-3{width:.75rem;height:.75rem}.univer-size-5{width:1.25rem;height:1.25rem}.univer-size-8{width:2rem;height:2rem}.univer-h-16{height:4rem}.univer-h-3\\.5{height:.875rem}.univer-h-\\[24px\\]{height:24px}.univer-min-h-8{min-height:2rem}.univer-w-2{width:.5rem}.univer-w-2\\.5{width:.625rem}.univer-w-28{width:7rem}.univer-w-4\\/5{width:80%}.univer-w-\\[0px\\]{width:0}.univer-w-\\[212px\\]{width:212px}.univer-w-\\[72px\\]{width:72px}.univer-min-w-\\[180px\\]{min-width:180px}.univer-flex-shrink-0{flex-shrink:0}.univer-cursor-grab{cursor:grab}.univer-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.univer-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.univer-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.univer-place-items-center{place-items:center}.univer-items-stretch{align-items:stretch}.univer-gap-2\\.5{gap:.625rem}.univer-gap-3{gap:.75rem}.univer-gap-x-0\\.5{-moz-column-gap:.125rem;column-gap:.125rem}.univer-gap-y-px{row-gap:1px}.univer-overflow-x-hidden{overflow-x:hidden}.univer-rounded-r-2xl{border-top-right-radius:1rem;border-bottom-right-radius:1rem}.\\!univer-border-primary-500{border-color:var(--univer-primary-500)!important}.univer-border-primary-500{border-color:var(--univer-primary-500)}.\\!univer-bg-primary-50{background-color:var(--univer-primary-50)!important}.\\!univer-bg-primary-900{background-color:var(--univer-primary-900)!important}.univer-bg-gray-400{background-color:var(--univer-gray-400)}.univer-px-2\\.5{padding-left:.625rem;padding-right:.625rem}.univer-py-0{padding-top:0;padding-bottom:0}.univer-pb-0\\.5{padding-bottom:.125rem}.univer-pb-4{padding-bottom:1rem}.univer-pr-1{padding-right:.25rem}.univer-pr-2{padding-right:.5rem}.univer-pt-1\\.5{padding-top:.375rem}.univer-pt-14{padding-top:3.5rem}.univer-text-lg{font-size:1.125rem;line-height:1.75rem}.univer-font-\\[500\\],.univer-font-medium{font-weight:500}.univer-font-normal{font-weight:400}.univer-leading-\\[24px\\]{line-height:24px}.\\!univer-text-gray-200{color:var(--univer-gray-200)!important}.\\!univer-text-gray-400{color:var(--univer-gray-400)!important}.\\!univer-text-primary-600{color:var(--univer-primary-600)!important}.univer-text-gray-800{color:var(--univer-gray-800)}.univer-shadow-sm{--univer-tw-shadow: 0px 1px 2px 0px #1e284d14;--univer-tw-shadow-colored: 0px 1px 2px 0px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 2px #1e284d14;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-backdrop-blur-\\[10px\\]{--univer-tw-backdrop-blur: blur(10px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.univer-duration-300{transition-duration:.3s}.univer-group:hover .group-hover\\:univer-bg-gray-500{background-color:var(--univer-gray-500)}.hover\\:univer-border-primary-500:hover{border-color:var(--univer-primary-500)}.hover\\:univer-bg-white:hover{background-color:var(--univer-white)}.hover\\:univer-text-gray-900:hover{color:var(--univer-gray-900)}.hover\\:univer-text-primary-600:hover{color:var(--univer-primary-600)}.hover\\:univer-shadow-md:hover{--univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;--univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 6px -2px #1e284d14,0 2px 6px -1px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.active\\:univer-cursor-grabbing:active{cursor:grabbing}.dark\\:\\!univer-border-gray-600:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.dark\\:\\!univer-bg-gray-500:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-500)!important}.dark\\:\\!univer-bg-primary-900:where(.univer-dark,.univer-dark *){background-color:var(--univer-primary-900)!important}.dark\\:\\!univer-text-gray-100:where(.univer-dark,.univer-dark *){color:var(--univer-gray-100)!important}.univer-group:hover .dark\\:group-hover\\:\\!univer-bg-gray-300:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-300)!important}.univer-pointer-events-none{pointer-events:none}.univer-inset-0{inset:0}.-univer-bottom-0\\.5{bottom:-.125rem}.-univer-left-0\\.5{left:-.125rem}.-univer-right-0\\.5{right:-.125rem}.-univer-top-0\\.5{top:-.125rem}.univer-left-0{left:0}.univer-left-1{left:.25rem}.univer-left-3{left:.75rem}.univer-right-0{right:0}.univer-right-5{right:1.25rem}.univer-top-0{top:0}.univer-top-0\\.5{top:.125rem}.univer-z-10{z-index:10}.univer-z-\\[1001\\]{z-index:1001}.univer-z-\\[100\\]{z-index:100}.univer-mx-1{margin-left:.25rem;margin-right:.25rem}.univer-mx-1\\.5{margin-left:.375rem;margin-right:.375rem}.univer-mb-1\\.5{margin-bottom:.375rem}.univer-mb-3{margin-bottom:.75rem}.univer-mb-4{margin-bottom:1rem}.univer-ml-1{margin-left:.25rem}.univer-ml-1\\.5{margin-left:.375rem}.univer-ml-3{margin-left:.75rem}.univer-ml-6{margin-left:1.5rem}.univer-ml-px{margin-left:1px}.univer-mr-1\\.5{margin-right:.375rem}.univer-mr-2{margin-right:.5rem}.univer-mr-5{margin-right:1.25rem}.univer-mt-auto{margin-top:auto}.univer-hidden{display:none}.univer-size-0{width:0;height:0}.univer-size-10{width:2.5rem;height:2.5rem}.univer-size-4{width:1rem;height:1rem}.univer-h-0\\.5{height:.125rem}.univer-h-1{height:.25rem}.univer-h-10{height:2.5rem}.univer-h-20{height:5rem}.univer-h-4{height:1rem}.univer-h-5{height:1.25rem}.univer-h-6{height:1.5rem}.univer-h-60{height:15rem}.univer-h-8{height:2rem}.univer-h-9{height:2.25rem}.univer-h-\\[270px\\]{height:270px}.univer-h-\\[30px\\]{height:30px}.univer-h-\\[calc\\(100\\%-16px\\)\\]{height:calc(100% - 16px)}.univer-h-\\[calc\\(100\\%-8px\\)\\]{height:calc(100% - 8px)}.univer-h-px{height:1px}.univer-max-h-52{max-height:13rem}.univer-max-h-\\[100px\\]{max-height:100px}.univer-max-h-\\[360px\\]{max-height:360px}.univer-min-h-0{min-height:0}.univer-min-h-\\[30px\\]{min-height:30px}.\\!univer-w-\\[90px\\]{width:90px!important}.univer-w-16{width:4rem}.univer-w-20{width:5rem}.univer-w-24{width:6rem}.univer-w-5{width:1.25rem}.univer-w-6{width:1.5rem}.univer-w-60{width:15rem}.univer-w-\\[100px\\]{width:100px}.univer-w-\\[130px\\]{width:130px}.univer-w-\\[156px\\]{width:156px}.univer-w-\\[300px\\]{width:300px}.univer-w-\\[50\\%\\]{width:50%}.univer-w-fit{width:fit-content}.univer-min-w-0{min-width:0}.univer-min-w-72{min-width:18rem}.univer-max-w-32{max-width:8rem}.univer-max-w-36{max-width:9rem}.univer-max-w-64{max-width:16rem}.univer-max-w-\\[190px\\]{max-width:190px}.univer-max-w-\\[200px\\]{max-width:200px}.univer-max-w-\\[calc\\(100\\%-112px\\)\\]{max-width:calc(100% - 112px)}.univer-max-w-fit{max-width:fit-content}.univer-max-w-lg{max-width:32rem}.univer-flex-shrink-0,.univer-shrink-0{flex-shrink:0}.univer-flex-grow{flex-grow:1}.univer-flex-grow-0{flex-grow:0}.univer-rotate-180{--univer-tw-rotate: 180deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(180deg) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}@keyframes univer-spin{to{transform:rotate(360deg)}}.univer-animate-spin{animation:1s linear infinite univer-spin}.univer-cursor-not-allowed{cursor:not-allowed}.univer-appearance-none{-webkit-appearance:none;appearance:none}.univer-grid-flow-col{grid-auto-flow:column}.univer-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.univer-grid-cols-\\[1fr\\,auto\\,auto\\,auto\\]{grid-template-columns:1fr auto auto auto}.univer-flex-row{flex-direction:row}.univer-flex-row-reverse{flex-direction:row-reverse}.univer-flex-nowrap{flex-wrap:nowrap}.univer-gap-7{gap:1.75rem}.univer-gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.univer-space-y-2>:not([hidden])~:not([hidden]){--univer-tw-space-y-reverse: 0;margin-top:calc(.5rem * (1 - var(--univer-tw-space-y-reverse)));margin-top:.5rem;margin-top:calc(.5rem * calc(1 - var(--univer-tw-space-y-reverse)));margin-bottom:0;margin-bottom:calc(.5rem * var(--univer-tw-space-y-reverse))}.univer-divide-x-0>:not([hidden])~:not([hidden]){--univer-tw-divide-x-reverse: 0;border-right-width:0;border-right-width:calc(0px * var(--univer-tw-divide-x-reverse));border-left-width:calc(0px * (1 - var(--univer-tw-divide-x-reverse)));border-left-width:0;border-left-width:calc(0px * calc(1 - var(--univer-tw-divide-x-reverse)))}.univer-divide-y>:not([hidden])~:not([hidden]){--univer-tw-divide-y-reverse: 0;border-top-width:calc(1px * (1 - var(--univer-tw-divide-y-reverse)));border-top-width:1px;border-top-width:calc(1px * calc(1 - var(--univer-tw-divide-y-reverse)));border-bottom-width:0;border-bottom-width:calc(1px * var(--univer-tw-divide-y-reverse))}.univer-divide-solid>:not([hidden])~:not([hidden]){border-style:solid}.univer-divide-gray-200>:not([hidden])~:not([hidden]){border-color:var(--univer-gray-200)}.univer-justify-self-center{justify-self:center}.univer-overflow-hidden{overflow:hidden}.univer-overflow-x-auto{overflow-x:auto}.univer-overflow-y-hidden{overflow-y:hidden}.univer-rounded-full{border-radius:9999px}.univer-rounded-md{border-radius:.375rem}.univer-rounded-sm{border-radius:.125rem}.univer-border-2{border-width:2px}.univer-border-4{border-width:4px}.univer-border-b{border-bottom-width:1px}.univer-border-solid{border-style:solid}.univer-border-none{border-style:none}.univer-border-\\[rgba\\(13\\,13\\,13\\,0\\.12\\)\\]{border-color:#0d0d0d1f}.univer-border-gray-100{border-color:var(--univer-gray-100)}.univer-border-gray-200{border-color:var(--univer-gray-200)}.univer-border-transparent{border-color:#0000}.univer-border-r-gray-200{border-right-color:var(--univer-gray-200)}.univer-border-t-primary-500{border-top-color:var(--univer-primary-500)}.\\!univer-bg-gray-700{background-color:var(--univer-gray-700)!important}.\\!univer-bg-gray-800{background-color:var(--univer-gray-800)!important}.\\!univer-bg-gray-900{background-color:var(--univer-gray-900)!important}.univer-bg-blue-500{background-color:var(--univer-blue-500)}.univer-bg-blue-600{background-color:var(--univer-blue-600)}.univer-bg-gray-100{background-color:var(--univer-gray-100)}.univer-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--univer-tw-gradient-stops))}.univer-from-gray-50{--univer-tw-gradient-from: var(--univer-gray-50) var(--univer-tw-gradient-from-position);--univer-tw-gradient-to: #fff0 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to)}.univer-to-gray-100{--univer-tw-gradient-to: var(--univer-gray-100) var(--univer-tw-gradient-to-position)}.univer-fill-gray-900{fill:var(--univer-gray-900)}.univer-fill-primary-600{fill:var(--univer-primary-600)}.univer-p-1{padding:.25rem}.univer-p-4{padding:1rem}.univer-px-1{padding-left:.25rem;padding-right:.25rem}.univer-px-1\\.5{padding-left:.375rem;padding-right:.375rem}.univer-px-3\\.5{padding-left:.875rem;padding-right:.875rem}.univer-px-5{padding-left:1.25rem;padding-right:1.25rem}.univer-py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.univer-py-5{padding-top:1.25rem;padding-bottom:1.25rem}.univer-pb-1{padding-bottom:.25rem}.univer-pl-1\\.5{padding-left:.375rem}.univer-pl-3{padding-left:.75rem}.univer-pl-6{padding-left:1.5rem}.univer-pr-5{padding-right:1.25rem}.univer-pt-1{padding-top:.25rem}.univer-pt-2{padding-top:.5rem}.univer-text-center{text-align:center}.univer-font-semibold{font-weight:600}.univer-leading-6{line-height:1.5rem}.univer-leading-7{line-height:1.75rem}.\\!univer-text-blue-400{color:var(--univer-blue-400)!important}.\\!univer-text-gray-700{color:var(--univer-gray-700)!important}.\\!univer-text-white{color:var(--univer-white)!important}.univer-text-blue-500{color:var(--univer-blue-500)}.univer-text-blue-600{color:var(--univer-blue-600)}.univer-text-gray-200{color:var(--univer-gray-200)}.univer-text-gray-300{color:var(--univer-gray-300)}.univer-text-gray-700{color:var(--univer-gray-700)}.univer-text-green-600{color:var(--univer-green-600)}.univer-text-primary-700{color:var(--univer-primary-700)}.univer-text-red-600{color:var(--univer-red-600)}.univer-text-rose-600{--univer-tw-text-opacity: 1;color:rgba(225,29,72,var(--univer-tw-text-opacity, 1))}.univer-text-yellow-500{color:var(--univer-yellow-500)}.univer-shadow{--univer-tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--univer-tw-shadow-colored: 0 1px 3px 0 var(--univer-tw-shadow-color), 0 1px 2px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 3px #0000001a,0 1px 2px -1px #0000001a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-shadow-lg{--univer-tw-shadow: 0px 4px 6px 0px #1e284d0d, 0px 10px 15px -3px #1e284d1a;--univer-tw-shadow-colored: 0px 4px 6px 0px var(--univer-tw-shadow-color), 0px 10px 15px -3px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 4px 6px #1e284d0d,0 10px 15px -3px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-blur-sm{--univer-tw-blur: blur(4px);filter:var(--univer-tw-blur) var(--univer-tw-brightness) var(--univer-tw-contrast) var(--univer-tw-grayscale) var(--univer-tw-hue-rotate) var(--univer-tw-invert) var(--univer-tw-saturate) var(--univer-tw-sepia) var(--univer-tw-drop-shadow)}.univer-backdrop-blur{--univer-tw-backdrop-blur: blur(8px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.univer-transition-\\[colors\\,box-shadow\\]{transition-property:colors,box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-\\[height\\]{transition-property:height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-duration-200{transition-duration:.2s}.univer-ease-linear{transition-timing-function:linear}.after\\:univer-absolute:after{content:var(--univer-tw-content);position:absolute}.after\\:univer-right-0:after{content:var(--univer-tw-content);right:0}.after\\:univer-top-1\\/2:after{content:var(--univer-tw-content);top:50%}.after\\:univer-block:after{content:var(--univer-tw-content);display:block}.after\\:univer-h-4:after{content:var(--univer-tw-content);height:1rem}.after\\:univer-w-px:after{content:var(--univer-tw-content);width:1px}.after\\:-univer-translate-y-1\\/2:after{content:var(--univer-tw-content);--univer-tw-translate-y: -50%;transform:translate(var(--univer-tw-translate-x),-50%) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.after\\:univer-bg-gray-200:after{content:var(--univer-tw-content);background-color:var(--univer-gray-200)}.after\\:univer-content-\\[\\\"\\\"\\]:after{--univer-tw-content: \"\";content:\"\";content:var(--univer-tw-content)}.last\\:univer-mb-0:last-child{margin-bottom:0}.univer-group:hover .group-hover\\:univer-flex{display:flex}.hover\\:univer-border-primary-600:hover{border-color:var(--univer-primary-600)}.hover\\:univer-bg-gray-50:hover{background-color:var(--univer-gray-50)}.hover\\:univer-bg-transparent:hover{background-color:#0000}.focus\\:univer-border-primary-500:focus{border-color:var(--univer-primary-500)}.focus\\:univer-outline-none:focus{outline-offset:2px;outline:2px solid #0000}.focus-visible\\:univer-ring-2:focus-visible{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.focus-visible\\:univer-ring-primary-500:focus-visible{--univer-tw-ring-color: var(--univer-primary-500)}.active\\:univer-bg-gray-100:active{background-color:var(--univer-gray-100)}.dark\\:\\!univer-divide-gray-600:where(.univer-dark,.univer-dark *)>:not([hidden])~:not([hidden]){border-color:var(--univer-gray-600)!important}.dark\\:\\!univer-border-gray-700:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-700)!important}.dark\\:\\!univer-border-r-gray-700:where(.univer-dark,.univer-dark *){border-right-color:var(--univer-gray-700)!important}.dark\\:\\!univer-bg-black:where(.univer-dark,.univer-dark *){background-color:var(--univer-black)!important}.dark\\:\\!univer-bg-blue-400:where(.univer-dark,.univer-dark *){background-color:var(--univer-blue-400)!important}.dark\\:\\!univer-bg-gray-700:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}.dark\\:\\!univer-bg-gray-800:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-800)!important}.dark\\:\\!univer-from-gray-800:where(.univer-dark,.univer-dark *){--univer-tw-gradient-from: var(--univer-gray-800) var(--univer-tw-gradient-from-position) !important;--univer-tw-gradient-to: #fff0 var(--univer-tw-gradient-to-position) !important;--univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to) !important}.dark\\:\\!univer-to-gray-900:where(.univer-dark,.univer-dark *){--univer-tw-gradient-to: var(--univer-gray-900) var(--univer-tw-gradient-to-position) !important}.dark\\:\\!univer-fill-white:where(.univer-dark,.univer-dark *){fill:var(--univer-white)!important}.dark\\:\\!univer-text-blue-400:where(.univer-dark,.univer-dark *){color:var(--univer-blue-400)!important}.dark\\:\\!univer-text-gray-700:where(.univer-dark,.univer-dark *){color:var(--univer-gray-700)!important}.dark\\:\\!univer-text-green-400:where(.univer-dark,.univer-dark *){color:var(--univer-green-400)!important}.dark\\:\\!univer-text-red-400:where(.univer-dark,.univer-dark *){color:var(--univer-red-400)!important}.dark\\:hover\\:\\!univer-bg-gray-800:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-800)!important}.\\[\\&\\>div\\:first-child\\]\\:univer-px-2\\.5>div:first-child{padding-left:.625rem;padding-right:.625rem}.\\[\\&\\>div\\]\\:univer-h-5>div{height:1.25rem}.\\[\\&\\>div\\]\\:univer-ring-transparent>div{--univer-tw-ring-color: transparent}.\\[\\&_canvas\\]\\:univer-absolute canvas{position:absolute}.univer-absolute{position:absolute}.univer-relative{position:relative}.univer-left-1\\.5{left:.375rem}.univer-top-1\\/2{top:50%}.univer-z-\\[15\\]{z-index:15}.univer-m-0{margin:0}.-univer-mx-6{margin-left:-1.5rem;margin-right:-1.5rem}.univer-mx-0{margin-left:0;margin-right:0}.univer-my-1{margin-top:.25rem;margin-bottom:.25rem}.univer-my-2{margin-top:.5rem;margin-bottom:.5rem}.univer-mb-0{margin-bottom:0}.univer-mb-2{margin-bottom:.5rem}.univer-ml-2{margin-left:.5rem}.univer-ml-4{margin-left:1rem}.univer-mr-0{margin-right:0}.univer-mt-0{margin-top:0}.univer-mt-1{margin-top:.25rem}.univer-box-border{box-sizing:border-box}.univer-block{display:block}.univer-inline-flex{display:inline-flex}.univer-size-6{width:1.5rem;height:1.5rem}.univer-size-full{width:100%;height:100%}.univer-h-\\[18px\\]{height:18px}.univer-h-\\[364px\\]{height:364px}.univer-max-h-60{max-height:15rem}.univer-max-h-72{max-height:18rem}.univer-max-h-\\[350px\\]{max-height:350px}.univer-w-\\[250px\\]{width:250px}.univer-flex-1{flex:1}.-univer-translate-y-1\\/2{--univer-tw-translate-y: -50%;transform:translate(var(--univer-tw-translate-x),-50%) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-select-none{-webkit-user-select:none;user-select:none}.univer-list-none{list-style-type:none}.univer-justify-center{justify-content:center}.univer-justify-around{justify-content:space-around}.univer-gap-2{gap:.5rem}.univer-gap-4{gap:1rem}.univer-overflow-visible{overflow:visible}.univer-truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.univer-whitespace-nowrap{white-space:nowrap}.univer-whitespace-pre-wrap{white-space:pre-wrap}.univer-break-words{word-wrap:break-word}.univer-break-all{word-break:break-all}.univer-rounded-none{border-radius:0}.univer-rounded-l{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.univer-border{border-width:1px}.univer-border-r-0{border-right-width:0}.univer-border-gray-600{border-color:var(--univer-gray-600)}.univer-border-primary-600{border-color:var(--univer-primary-600)}.\\!univer-bg-gray-600{background-color:var(--univer-gray-600)!important}.univer-bg-gray-200{background-color:var(--univer-gray-200)}.univer-bg-primary-600{background-color:var(--univer-primary-600)}.univer-bg-transparent{background-color:#0000}.univer-bg-white{background-color:var(--univer-white)}.univer-p-0{padding:0}.univer-p-0\\.5{padding:.125rem}.univer-p-3{padding:.75rem}.univer-px-4{padding-left:1rem;padding-right:1rem}.univer-px-6{padding-left:1.5rem;padding-right:1.5rem}.univer-px-7{padding-left:1.75rem;padding-right:1.75rem}.univer-py-1{padding-top:.25rem;padding-bottom:.25rem}.univer-py-2{padding-top:.5rem;padding-bottom:.5rem}.univer-py-3{padding-top:.75rem;padding-bottom:.75rem}.univer-pb-3{padding-bottom:.75rem}.univer-pt-0{padding-top:0}.univer-text-base{font-size:1rem;line-height:1.5rem}.univer-text-sm{font-size:.875rem;line-height:1.25rem}.univer-font-bold{font-weight:700}.univer-font-medium{font-weight:500}.univer-leading-5{line-height:1.25rem}.univer-leading-\\[13px\\]{line-height:13px}.univer-text-gray-900{color:var(--univer-gray-900)}.univer-text-primary-500{color:var(--univer-primary-500)}.univer-text-red-500{color:var(--univer-red-500)}.univer-text-white{color:var(--univer-white)}.univer-shadow-md{--univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;--univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 6px -2px #1e284d14,0 2px 6px -1px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-outline-none{outline-offset:2px;outline:2px solid #0000}.univer-ring-1{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(1px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.univer-ring-primary-500{--univer-tw-ring-color: var(--univer-primary-500)}.univer-ring-red-500{--univer-tw-ring-color: var(--univer-red-500)}.univer-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:univer-bg-gray-200:hover{background-color:var(--univer-gray-200)}.hover\\:univer-bg-gray-300:hover{background-color:var(--univer-gray-300)}.dark\\:\\!univer-bg-gray-600:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.dark\\:\\!univer-bg-gray-900:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-900)!important}.dark\\:\\!univer-text-gray-300:where(.univer-dark,.univer-dark *){color:var(--univer-gray-300)!important}.dark\\:\\!univer-text-white:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.dark\\:hover\\:\\!univer-bg-gray-600:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.univer-mb-5{margin-bottom:1.25rem}.univer-mr-3{margin-right:.75rem}.univer-mt-2{margin-top:.5rem}.univer-mt-3{margin-top:.75rem}.univer-mt-3\\.5{margin-top:.875rem}.univer-mt-4{margin-top:1rem}.univer-flex{display:flex}.univer-grid{display:grid}.univer-h-7{height:1.75rem}.univer-h-full{height:100%}.univer-max-h-\\[400px\\]{max-height:400px}.univer-w-32{width:8rem}.univer-w-36{width:9rem}.univer-w-4{width:1rem}.univer-w-\\[340px\\]{width:340px}.univer-w-full{width:100%}.univer-cursor-default{cursor:default}.univer-cursor-pointer{cursor:pointer}.univer-flex-col{flex-direction:column}.univer-items-center{align-items:center}.univer-justify-end{justify-content:flex-end}.univer-justify-between{justify-content:space-between}.univer-gap-1{gap:.25rem}.univer-gap-1\\.5{gap:.375rem}.univer-gap-6{gap:1.5rem}.univer-overflow-auto{overflow:auto}.univer-overflow-y-auto{overflow-y:auto}.univer-rounded{border-radius:.25rem}.univer-rounded-lg{border-radius:.5rem}.univer-p-1\\.5{padding:.375rem}.univer-p-2{padding:.5rem}.univer-px-2{padding-left:.5rem;padding-right:.5rem}.univer-py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.univer-pb-5{padding-bottom:1.25rem}.univer-text-sm,.univer-text-sm\\/5{font-size:.875rem;line-height:1.25rem}.univer-text-xs{font-size:.75rem;line-height:1rem}.univer-text-gray-400{color:var(--univer-gray-400)}.univer-text-gray-500{color:var(--univer-gray-500)}.univer-text-gray-600{color:var(--univer-gray-600)}.univer-text-primary-600{color:var(--univer-primary-600)}.hover\\:univer-bg-gray-100:hover{background-color:var(--univer-gray-100)}.dark\\:\\!univer-text-gray-200:where(.univer-dark,.univer-dark *){color:var(--univer-gray-200)!important}.dark\\:\\!univer-text-gray-400:where(.univer-dark,.univer-dark *){color:var(--univer-gray-400)!important}.dark\\:hover\\:\\!univer-bg-gray-700:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}:host{display:block;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}.z-gallery-office-preview{width:100%;height:100%;overflow:auto;padding:0;background:var(--muted)}.z-gallery-office-preview--sheet{overflow:hidden}.z-gallery-office-preview--slide{display:flex;align-items:center;justify-content:center;padding:0}:host ::ng-deep .docx-wrapper{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:0;background:transparent}:host ::ng-deep .docx{max-width:100%;box-shadow:0 .5rem 2rem #0000001f}:host ::ng-deep .z-gallery-office-preview--sheet>div{width:100%;min-width:45rem;height:100%}:host ::ng-deep .z-gallery-office-preview--slide canvas{max-width:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
74
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZGalleryOfficePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
75
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: ZGalleryOfficePreviewComponent, isStandalone: true, selector: "z-gallery-office-preview", inputs: { zSource: { classPropertyName: "zSource", publicName: "zSource", isSignal: true, isRequired: true, transformFunction: null }, zKind: { classPropertyName: "zKind", publicName: "zKind", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { zLoaded: "zLoaded", zError: "zError" }, viewQueries: [{ propertyName: "_host", first: true, predicate: ["host"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #host\n class=\"z-gallery-office-preview\"\n [class.z-gallery-office-preview--sheet]=\"zKind() === 'excel'\"\n [class.z-gallery-office-preview--slide]=\"zKind() === 'powerpoint'\"></div>\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}.z-gallery-office-preview{width:100%;height:100%;overflow:auto;padding:0;background:var(--muted)}.z-gallery-office-preview--sheet{overflow:hidden}.z-gallery-office-preview--slide{display:flex;align-items:center;justify-content:center;padding:0}:host ::ng-deep .docx-wrapper{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:0;background:transparent}:host ::ng-deep .docx{max-width:100%;box-shadow:0 .5rem 2rem #0000001f}:host ::ng-deep .z-gallery-office-preview--sheet>div{width:100%;min-width:45rem;height:100%}:host ::ng-deep .z-gallery-office-preview--slide canvas{max-width:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
76
76
|
}
|
|
77
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
77
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZGalleryOfficePreviewComponent, decorators: [{
|
|
78
78
|
type: Component,
|
|
79
|
-
args: [{ selector: 'z-gallery-office-preview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n #host\n class=\"z-gallery-office-preview\"\n [class.z-gallery-office-preview--sheet]=\"zKind() === 'excel'\"\n [class.z-gallery-office-preview--slide]=\"zKind() === 'powerpoint'\"></div>\n", styles: ["*,:before,:after,::backdrop{--univer-tw-border-spacing-x: 0;--univer-tw-border-spacing-y: 0;--univer-tw-translate-x: 0;--univer-tw-translate-y: 0;--univer-tw-rotate: 0;--univer-tw-skew-x: 0;--univer-tw-skew-y: 0;--univer-tw-scale-x: 1;--univer-tw-scale-y: 1;--univer-tw-pan-x: ;--univer-tw-pan-y: ;--univer-tw-pinch-zoom: ;--univer-tw-scroll-snap-strictness: proximity;--univer-tw-gradient-from-position: ;--univer-tw-gradient-via-position: ;--univer-tw-gradient-to-position: ;--univer-tw-ordinal: ;--univer-tw-slashed-zero: ;--univer-tw-numeric-figure: ;--univer-tw-numeric-spacing: ;--univer-tw-numeric-fraction: ;--univer-tw-ring-inset: ;--univer-tw-ring-offset-width: 0px;--univer-tw-ring-offset-color: #fff;--univer-tw-ring-color: #93c5fd80;--univer-tw-ring-offset-shadow: 0 0 #0000;--univer-tw-ring-shadow: 0 0 #0000;--univer-tw-shadow: 0 0 #0000;--univer-tw-shadow-colored: 0 0 #0000;--univer-tw-blur: ;--univer-tw-brightness: ;--univer-tw-contrast: ;--univer-tw-grayscale: ;--univer-tw-hue-rotate: ;--univer-tw-invert: ;--univer-tw-saturate: ;--univer-tw-sepia: ;--univer-tw-drop-shadow: ;--univer-tw-backdrop-blur: ;--univer-tw-backdrop-brightness: ;--univer-tw-backdrop-contrast: ;--univer-tw-backdrop-grayscale: ;--univer-tw-backdrop-hue-rotate: ;--univer-tw-backdrop-invert: ;--univer-tw-backdrop-opacity: ;--univer-tw-backdrop-saturate: ;--univer-tw-backdrop-sepia: ;--univer-tw-contain-size: ;--univer-tw-contain-layout: ;--univer-tw-contain-paint: ;--univer-tw-contain-style: }*{scrollbar-color:initial;scrollbar-width:initial}.univer-sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.univer-inset-x-0{left:0;right:0}.univer-bottom-0\\.5{bottom:.125rem}.univer-bottom-6{bottom:1.5rem}.univer-left-0\\.5{left:.125rem}.univer-left-2{left:.5rem}.univer-left-\\[-16px\\]{left:-16px}.univer-right-4{right:1rem}.univer-right-px{right:1px}.univer-top-px{top:1px}.univer-z-0{z-index:0}.univer-z-\\[1081\\]{z-index:1081}.-univer-mx-1{margin-left:-.25rem;margin-right:-.25rem}.univer-my-0{margin-top:0;margin-bottom:0}.univer-ml-auto{margin-left:auto}.univer-inline-block{display:inline-block}.\\!univer-hidden{display:none!important}.univer-size-2{width:.5rem;height:.5rem}.univer-size-2\\.5{width:.625rem;height:.625rem}.univer-h-1\\/2{height:50%}.univer-h-12{height:3rem}.univer-h-2{height:.5rem}.univer-h-32{height:8rem}.univer-h-48{height:12rem}.univer-h-\\[150px\\]{height:150px}.univer-h-\\[calc\\(100\\%-2px\\)\\]{height:calc(100% - 2px)}.univer-max-h-0{max-height:0}.univer-max-h-80{max-height:20rem}.univer-max-h-\\[--radix-popper-available-height\\]{max-height:var(--radix-popper-available-height)}.univer-max-h-\\[1000px\\]{max-height:1000px}.univer-max-h-\\[40vh\\]{max-height:40vh}.univer-max-h-full{max-height:100%}.univer-max-h-screen{max-height:100vh}.univer-min-h-3\\.5{min-height:.875rem}.univer-min-h-\\[520px\\]{min-height:520px}.\\!univer-w-fit{width:fit-content!important}.univer-w-64{width:16rem}.univer-w-72{width:18rem}.univer-w-80{width:20rem}.univer-w-\\[--radix-popper-anchor-width\\]{width:var(--radix-popper-anchor-width)}.univer-w-\\[calc\\(100\\%-16px\\)\\]{width:calc(100% - 16px)}.univer-min-w-36{min-width:9rem}.univer-min-w-\\[320px\\]{min-width:320px}.univer-max-w-2xl{max-width:42rem}.univer-max-w-\\[520px\\]{max-width:520px}.univer-max-w-\\[60vw\\]{max-width:60vw}.univer-max-w-sm{max-width:24rem}.univer-max-w-xs{max-width:20rem}.univer-shrink{flex-shrink:1}.univer-shrink-0{flex-shrink:0}.univer-origin-\\[--radix-hover-card-content-transform-origin\\]{transform-origin:var(--radix-hover-card-content-transform-origin)}.-univer-translate-y-1\\/2,.univer--translate-y-1\\/2{--univer-tw-translate-y: -50%;transform:translate(var(--univer-tw-translate-x),-50%) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-translate-x-3{--univer-tw-translate-x: .75rem;transform:translate(.75rem,var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.-univer-rotate-90{--univer-tw-rotate: -90deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(-90deg) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-rotate-0{--univer-tw-rotate: 0deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(0) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-rotate-45{--univer-tw-rotate: 45deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(45deg) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-rotate-\\[-90deg\\]{--univer-tw-rotate: -90deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(-90deg) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.\\!univer-animate-none{animation:none!important}.univer-cursor-crosshair{cursor:crosshair}.univer-cursor-grabbing{cursor:grabbing}.univer-resize{resize:both}.univer-grid-flow-row{grid-auto-flow:row}.univer-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.univer-flex-col-reverse{flex-direction:column-reverse}.univer-content-center{align-content:center}.univer-gap-5{gap:1.25rem}.univer-space-y-1\\.5>:not([hidden])~:not([hidden]){--univer-tw-space-y-reverse: 0;margin-top:calc(.375rem * (1 - var(--univer-tw-space-y-reverse)));margin-top:.375rem;margin-top:calc(.375rem * calc(1 - var(--univer-tw-space-y-reverse)));margin-bottom:0;margin-bottom:calc(.375rem * var(--univer-tw-space-y-reverse))}.univer-divide-x>:not([hidden])~:not([hidden]){--univer-tw-divide-x-reverse: 0;border-right-width:0;border-right-width:calc(1px * var(--univer-tw-divide-x-reverse));border-left-width:calc(1px * (1 - var(--univer-tw-divide-x-reverse)));border-left-width:1px;border-left-width:calc(1px * calc(1 - var(--univer-tw-divide-x-reverse)))}.univer-divide-y-0>:not([hidden])~:not([hidden]){--univer-tw-divide-y-reverse: 0;border-top-width:calc(0px * (1 - var(--univer-tw-divide-y-reverse)));border-top-width:0;border-top-width:calc(0px * calc(1 - var(--univer-tw-divide-y-reverse)));border-bottom-width:0;border-bottom-width:calc(0px * var(--univer-tw-divide-y-reverse))}.univer-text-ellipsis{text-overflow:ellipsis}.univer-text-balance{text-wrap:balance}.\\!univer-rounded-b-none{border-bottom-right-radius:0!important;border-bottom-left-radius:0!important}.\\!univer-rounded-l-none{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.\\!univer-rounded-r-none{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.\\!univer-rounded-t-none{border-top-left-radius:0!important;border-top-right-radius:0!important}.univer-rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.\\!univer-border-l-0{border-left-width:0!important}.\\!univer-border-t-0{border-top-width:0!important}.univer-border-b-0{border-bottom-width:0}.univer-border-l{border-left-width:1px}.univer-border-l-0{border-left-width:0}.univer-border-r{border-right-width:1px}.univer-border-t{border-top-width:1px}.univer-border-t-0{border-top-width:0}.univer-border-dashed{border-style:dashed}.\\!univer-border-gray-200{border-color:var(--univer-gray-200)!important}.univer-border-gray-300{border-color:var(--univer-gray-300)}.univer-border-primary-200{border-color:var(--univer-primary-200)}.univer-border-primary-300{border-color:var(--univer-primary-300)}.univer-border-red-300{border-color:var(--univer-red-300)}.univer-border-red-500{border-color:var(--univer-red-500)}.univer-border-white{border-color:var(--univer-white)}.\\!univer-bg-primary-600{background-color:var(--univer-primary-600)!important}.univer-bg-\\[rgba\\(0\\,0\\,0\\,0\\.8\\)\\]{background-color:#000c}.univer-bg-gray-800{background-color:var(--univer-gray-800)}.univer-bg-gray-900{background-color:var(--univer-gray-900)}.univer-bg-primary-500{background-color:var(--univer-primary-500)}.univer-bg-red-500{background-color:var(--univer-red-500)}.univer-bg-sky-100\\/70{background-color:#e0f2feb3}.univer-bg-slate-100\\/80{background-color:#f1f5f9cc}.univer-bg-slate-900\\/90{background-color:#0f172ae6}.univer-bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--univer-tw-gradient-stops))}.univer-from-slate-100{--univer-tw-gradient-from: #f1f5f9 var(--univer-tw-gradient-from-position);--univer-tw-gradient-to: #f1f5f900 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to)}.univer-via-cyan-50{--univer-tw-gradient-to: #ecfeff00 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), #ecfeff var(--univer-tw-gradient-via-position), var(--univer-tw-gradient-to)}.univer-to-blue-100{--univer-tw-gradient-to: var(--univer-blue-100) var(--univer-tw-gradient-to-position)}.univer-fill-current{fill:currentColor}.\\!univer-p-2\\.5{padding:.625rem!important}.univer-p-6{padding:1.5rem}.\\!univer-pl-4{padding-left:1rem!important}.univer-pb-2\\.5{padding-bottom:.625rem}.univer-pl-8{padding-left:2rem}.univer-pr-32{padding-right:8rem}.univer-pr-8{padding-right:2rem}.univer-pt-4{padding-top:1rem}.univer-align-middle{vertical-align:middle}.univer-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.univer-text-\\[13px\\]{font-size:13px}.univer-text-\\[8px\\]{font-size:8px}.univer-text-sm\\/8{font-size:.875rem;line-height:2rem}.univer-text-xs\\/6{font-size:.75rem;line-height:1.5rem}.univer-leading-9{line-height:2.25rem}.univer-leading-normal{line-height:1.5}.univer-tracking-wide{letter-spacing:.025em}.univer-tracking-widest{letter-spacing:.1em}.\\!univer-text-primary-500{color:var(--univer-primary-500)!important}.univer-text-amber-500{--univer-tw-text-opacity: 1;color:rgba(245,158,11,var(--univer-tw-text-opacity, 1))}.univer-text-cyan-700{--univer-tw-text-opacity: 1;color:rgba(14,116,144,var(--univer-tw-text-opacity, 1))}.univer-text-green-500{color:var(--univer-green-500)}.univer-text-sky-500{--univer-tw-text-opacity: 1;color:rgba(14,165,233,var(--univer-tw-text-opacity, 1))}.univer-text-sky-700{--univer-tw-text-opacity: 1;color:rgba(3,105,161,var(--univer-tw-text-opacity, 1))}.univer-text-sky-900{--univer-tw-text-opacity: 1;color:rgba(12,74,110,var(--univer-tw-text-opacity, 1))}.univer-text-slate-500{--univer-tw-text-opacity: 1;color:rgba(100,116,139,var(--univer-tw-text-opacity, 1))}.univer-text-slate-600{--univer-tw-text-opacity: 1;color:rgba(71,85,105,var(--univer-tw-text-opacity, 1))}.univer-text-slate-700{--univer-tw-text-opacity: 1;color:rgba(51,65,85,var(--univer-tw-text-opacity, 1))}.univer-text-slate-800{--univer-tw-text-opacity: 1;color:rgba(30,41,59,var(--univer-tw-text-opacity, 1))}.univer-text-violet-500{--univer-tw-text-opacity: 1;color:rgba(139,92,246,var(--univer-tw-text-opacity, 1))}.univer-underline-offset-4{text-underline-offset:4px}.univer-opacity-100{opacity:1}.univer-opacity-50{opacity:.5}.univer-opacity-80{opacity:.8}.univer-shadow-\\[0_30px_60px_-35px_rgba\\(15\\,23\\,42\\,0\\.55\\)\\]{--univer-tw-shadow: 0 30px 60px -35px #0f172a8c;--univer-tw-shadow-colored: 0 30px 60px -35px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 30px 60px -35px #0f172a8c;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-shadow-inner{--univer-tw-shadow: inset 0 2px 4px 0 #0000000d;--univer-tw-shadow-colored: inset 0 2px 4px 0 var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,inset 0 2px 4px #0000000d;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-ring-2{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.\\!univer-ring-primary-900{--univer-tw-ring-color: var(--univer-primary-900) !important}.univer-ring-primary-50{--univer-tw-ring-color: var(--univer-primary-50)}.univer-ring-white{--univer-tw-ring-color: var(--univer-white)}.univer-ring-offset-2{--univer-tw-ring-offset-width: 2px}.\\!univer-ring-offset-gray-600{--univer-tw-ring-offset-color: var(--univer-gray-600) !important}.univer-ring-offset-white{--univer-tw-ring-offset-color: var(--univer-white)}.univer-drop-shadow-sm{--univer-tw-drop-shadow: drop-shadow(0 1px 1px #0000000d);filter:var(--univer-tw-blur) var(--univer-tw-brightness) var(--univer-tw-contrast) var(--univer-tw-grayscale) var(--univer-tw-hue-rotate) var(--univer-tw-invert) var(--univer-tw-saturate) var(--univer-tw-sepia) var(--univer-tw-drop-shadow)}.univer-transition-\\[color\\,box-shadow\\]{transition-property:color,box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-\\[max-height\\,opacity\\]{transition-property:max-height,opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-shadow{transition-property:box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-duration-150{transition-duration:.15s}.univer-duration-500{transition-duration:.5s}.univer-duration-75{transition-duration:75ms}.univer-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.univer-will-change-transform{will-change:transform}.univer-scrollbar-thin::-webkit-scrollbar-track{background-color:var(--scrollbar-track);border-radius:var(--scrollbar-track-radius)}.univer-scrollbar-thin::-webkit-scrollbar-track:hover{background-color:var(--scrollbar-track-hover, var(--scrollbar-track))}.univer-scrollbar-thin::-webkit-scrollbar-track:active{background-color:var(--scrollbar-track-active, var(--scrollbar-track-hover, var(--scrollbar-track)))}.univer-scrollbar-thin::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);border-radius:var(--scrollbar-thumb-radius)}.univer-scrollbar-thin::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover, var(--scrollbar-thumb))}.univer-scrollbar-thin::-webkit-scrollbar-thumb:active{background-color:var(--scrollbar-thumb-active, var(--scrollbar-thumb-hover, var(--scrollbar-thumb)))}.univer-scrollbar-thin::-webkit-scrollbar-corner{background-color:var(--scrollbar-corner);border-radius:var(--scrollbar-corner-radius)}.univer-scrollbar-thin::-webkit-scrollbar-corner:hover{background-color:var(--scrollbar-corner-hover, var(--scrollbar-corner))}.univer-scrollbar-thin::-webkit-scrollbar-corner:active{background-color:var(--scrollbar-corner-active, var(--scrollbar-corner-hover, var(--scrollbar-corner)))}.univer-scrollbar-thin{scrollbar-width:thin;scrollbar-color:initial initial;scrollbar-color:var(--scrollbar-thumb, initial) var(--scrollbar-track, initial)}.univer-scrollbar-thin::-webkit-scrollbar{width:8px;height:8px;display:block}.univer-scrollbar-track-gray-50{--scrollbar-track: var(--univer-gray-50) !important}.univer-scrollbar-thumb-gray-300{--scrollbar-thumb: var(--univer-gray-300) !important}.univer-animate-out{--univer-tw-exit-opacity: initial;--univer-tw-exit-scale: initial;--univer-tw-exit-rotate: initial;--univer-tw-exit-translate-x: initial;--univer-tw-exit-translate-y: initial;animation-name:exit;animation-duration:.15s}.univer-fade-in,.univer-fade-in-0{--univer-tw-enter-opacity: 0}.univer-fade-out{--univer-tw-exit-opacity: 0}.univer-zoom-in-95{--univer-tw-enter-scale: .95}.univer-duration-150{animation-duration:.15s}.univer-duration-200{animation-duration:.2s}.univer-duration-300{animation-duration:.3s}.univer-duration-500{animation-duration:.5s}.univer-duration-75{animation-duration:75ms}.univer-ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.univer-ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.placeholder\\:univer-text-gray-200::placeholder{color:var(--univer-gray-200)}.placeholder\\:univer-text-gray-400::placeholder{color:var(--univer-gray-400)}.before\\:univer-absolute:before{content:var(--univer-tw-content);position:absolute}.before\\:univer-top-1\\/2:before{content:var(--univer-tw-content);top:50%}.before\\:univer-block:before{content:var(--univer-tw-content);display:block}.before\\:univer-h-px:before{content:var(--univer-tw-content);height:1px}.before\\:univer-w-full:before{content:var(--univer-tw-content);width:100%}.before\\:-univer-translate-y-1\\/2:before{content:var(--univer-tw-content);--univer-tw-translate-y: -50%;transform:translate(var(--univer-tw-translate-x),-50%) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.before\\:univer-bg-gray-200:before{content:var(--univer-tw-content);background-color:var(--univer-gray-200)}.before\\:univer-content-\\[\\\"\\\"\\]:before{--univer-tw-content: \"\";content:\"\";content:var(--univer-tw-content)}.data-\\[disabled\\]\\:univer-pointer-events-none[data-disabled]{pointer-events:none}.data-\\[orientation\\=horizontal\\]\\:univer-h-px[data-orientation=horizontal]{height:1px}.data-\\[orientation\\=vertical\\]\\:univer-h-full[data-orientation=vertical]{height:100%}.data-\\[orientation\\=horizontal\\]\\:univer-w-full[data-orientation=horizontal]{width:100%}.data-\\[orientation\\=vertical\\]\\:univer-w-px[data-orientation=vertical]{width:1px}.data-\\[state\\=open\\]\\:univer-bg-gray-100[data-state=open]{background-color:var(--univer-gray-100)}.data-\\[disabled\\]\\:univer-opacity-50[data-disabled]{opacity:.5}.data-\\[state\\=open\\]\\:univer-animate-in[data-state=open]{--univer-tw-enter-opacity: initial;--univer-tw-enter-scale: initial;--univer-tw-enter-rotate: initial;--univer-tw-enter-translate-x: initial;--univer-tw-enter-translate-y: initial;animation-name:enter;animation-duration:.15s}.data-\\[state\\=closed\\]\\:univer-animate-out[data-state=closed]{--univer-tw-exit-opacity: initial;--univer-tw-exit-scale: initial;--univer-tw-exit-rotate: initial;--univer-tw-exit-translate-x: initial;--univer-tw-exit-translate-y: initial;animation-name:exit;animation-duration:.15s}.data-\\[state\\=closed\\]\\:univer-fade-out-0[data-state=closed]{--univer-tw-exit-opacity: 0}.data-\\[state\\=open\\]\\:univer-fade-in-0[data-state=open]{--univer-tw-enter-opacity: 0}.data-\\[state\\=closed\\]\\:univer-zoom-out-95[data-state=closed]{--univer-tw-exit-scale: .95}.data-\\[state\\=open\\]\\:univer-zoom-in-95[data-state=open]{--univer-tw-enter-scale: .95}.data-\\[side\\=bottom\\]\\:univer-slide-in-from-top-2[data-side=bottom]{--univer-tw-enter-translate-y: -.5rem}.data-\\[side\\=left\\]\\:univer-slide-in-from-right-2[data-side=left]{--univer-tw-enter-translate-x: .5rem}.data-\\[side\\=right\\]\\:univer-slide-in-from-left-2[data-side=right]{--univer-tw-enter-translate-x: -.5rem}.data-\\[side\\=top\\]\\:univer-slide-in-from-bottom-2[data-side=top]{--univer-tw-enter-translate-y: .5rem}.data-\\[state\\=closed\\]\\:univer-slide-out-to-left-1\\/2[data-state=closed]{--univer-tw-exit-translate-x: -50%}.data-\\[state\\=closed\\]\\:univer-slide-out-to-top-\\[48\\%\\][data-state=closed]{--univer-tw-exit-translate-y: -48%}.data-\\[state\\=open\\]\\:univer-slide-in-from-left-1\\/2[data-state=open]{--univer-tw-enter-translate-x: -50%}.data-\\[state\\=open\\]\\:univer-slide-in-from-top-\\[48\\%\\][data-state=open]{--univer-tw-enter-translate-y: -48%}.hover\\:univer-border-red-400:hover{border-color:var(--univer-red-400)}.hover\\:univer-border-transparent:hover{border-color:#0000}.hover\\:univer-bg-primary-500:hover{background-color:var(--univer-primary-500)}.hover\\:univer-bg-red-400:hover{background-color:var(--univer-red-400)}.hover\\:univer-text-gray-500:hover{color:var(--univer-gray-500)}.hover\\:univer-text-primary-500:hover{color:var(--univer-primary-500)}.hover\\:univer-text-white:hover{color:var(--univer-white)}.hover\\:univer-underline:hover{text-decoration-line:underline}.hover\\:univer-opacity-100:hover{opacity:1}.hover\\:univer-opacity-70:hover{opacity:.7}.hover\\:univer-opacity-80:hover{opacity:.8}.focus\\:univer-border-primary-600:focus{border-color:var(--univer-primary-600)}.focus\\:univer-bg-gray-100:focus{background-color:var(--univer-gray-100)}.focus\\:univer-ring-primary-50:focus{--univer-tw-ring-color: var(--univer-primary-50)}.active\\:univer-border-red-600:active{border-color:var(--univer-red-600)}.active\\:univer-bg-primary-700:active{background-color:var(--univer-primary-700)}.active\\:univer-bg-red-600:active{background-color:var(--univer-red-600)}.active\\:univer-text-primary-700:active{color:var(--univer-primary-700)}.disabled\\:univer-pointer-events-none:disabled{pointer-events:none}.disabled\\:univer-opacity-50:disabled{opacity:.5}@media(min-width:640px){.sm\\:\\!univer-flex-row{flex-direction:row!important}.sm\\:\\!univer-justify-end{justify-content:flex-end!important}.sm\\:\\!univer-space-x-2>:not([hidden])~:not([hidden]){--univer-tw-space-x-reverse: 0 !important;margin-right:0!important;margin-right:calc(.5rem * var(--univer-tw-space-x-reverse))!important;margin-left:calc(.5rem * (1 - var(--univer-tw-space-x-reverse)))!important;margin-left:.5rem!important;margin-left:calc(.5rem * calc(1 - var(--univer-tw-space-x-reverse)))!important}.sm\\:\\!univer-rounded-lg{border-radius:.5rem!important}.sm\\:\\!univer-text-left{text-align:left!important}}@media(min-width:768px){.md\\:univer-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}.rtl\\:univer-left-px:where([dir=rtl],[dir=rtl] *){left:1px}.rtl\\:univer-right-auto:where([dir=rtl],[dir=rtl] *){right:auto}.rtl\\:univer-rounded-l-md:where([dir=rtl],[dir=rtl] *){border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.rtl\\:univer-rounded-r-none:where([dir=rtl],[dir=rtl] *){border-top-right-radius:0;border-bottom-right-radius:0}.rtl\\:univer-border-l-0:where([dir=rtl],[dir=rtl] *){border-left-width:0}.rtl\\:univer-border-r:where([dir=rtl],[dir=rtl] *){border-right-width:1px}.dark\\:\\!univer-border-gray-500:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-500)!important}.dark\\:\\!univer-border-primary-700:where(.univer-dark,.univer-dark *){border-color:var(--univer-primary-700)!important}.dark\\:\\!univer-bg-gray-100:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-100)!important}.dark\\:\\!univer-bg-primary-600:where(.univer-dark,.univer-dark *){background-color:var(--univer-primary-600)!important}.dark\\:\\!univer-text-gray-900:where(.univer-dark,.univer-dark *){color:var(--univer-gray-900)!important}.dark\\:\\!univer-text-primary-500:where(.univer-dark,.univer-dark *){color:var(--univer-primary-500)!important}.dark\\:\\!univer-text-sky-400:where(.univer-dark,.univer-dark *){--univer-tw-text-opacity: 1 !important;color:rgba(56,189,248,var(--univer-tw-text-opacity, 1))!important}.dark\\:\\!univer-ring-primary-600:where(.univer-dark,.univer-dark *){--univer-tw-ring-color: var(--univer-primary-600) !important}.dark\\:\\!univer-ring-primary-900:where(.univer-dark,.univer-dark *){--univer-tw-ring-color: var(--univer-primary-900) !important}.dark\\:\\!univer-ring-offset-gray-600:where(.univer-dark,.univer-dark *){--univer-tw-ring-offset-color: var(--univer-gray-600) !important}.dark\\:\\!univer-scrollbar-track-gray-900:where(.univer-dark,.univer-dark *){--scrollbar-track: var(--univer-gray-900) !important}.dark\\:\\!univer-scrollbar-thumb-gray-700:where(.univer-dark,.univer-dark *){--scrollbar-thumb: var(--univer-gray-700) !important}.dark\\:before\\:\\!univer-bg-gray-600:where(.univer-dark,.univer-dark *):before{content:var(--univer-tw-content);background-color:var(--univer-gray-600)!important}.dark\\:data-\\[state\\=open\\]\\:\\!univer-bg-gray-600[data-state=open]:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.dark\\:hover\\:\\!univer-text-white:hover:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.dark\\:focus\\:\\!univer-border-primary-500:focus:where(.univer-dark,.univer-dark *){border-color:var(--univer-primary-500)!important}.dark\\:focus\\:\\!univer-bg-gray-600:focus:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.dark\\:focus\\:\\!univer-ring-primary-900:focus:where(.univer-dark,.univer-dark *){--univer-tw-ring-color: var(--univer-primary-900) !important}.dark\\:focus-visible\\:\\!univer-border-gray-600:focus-visible:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.dark\\:active\\:\\!univer-bg-gray-700:active:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}.\\[\\&\\:\\:-webkit-calendar-picker-indicator\\]\\:univer-hidden::-webkit-calendar-picker-indicator{display:none}.\\[\\&\\:\\:-webkit-calendar-picker-indicator\\]\\:univer-appearance-none::-webkit-calendar-picker-indicator{-webkit-appearance:none;appearance:none}.\\[\\&\\>input\\]\\:univer-w-11>input{width:2.75rem}.\\[\\&\\>input\\]\\:univer-border-gray-200>input{border-color:var(--univer-gray-200)}.\\[\\&\\>input\\]\\:focus\\:univer-border-primary-500:focus>input{border-color:var(--univer-primary-500)}.dark\\:\\[\\&\\>input\\]\\:\\!univer-border-gray-600>input:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.dark\\:\\[\\&\\>input\\]\\:\\!univer-text-white>input:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.\\[\\&\\>svg\\]\\:univer-block>svg{display:block}.\\[\\&\\>svg\\]\\:univer-size-4>svg{width:1rem;height:1rem}.\\[\\&\\>ul\\:not\\(\\:last-child\\)\\]\\:univer-border-0>ul:not(:last-child){border-width:0}.\\[\\&\\>ul\\:not\\(\\:last-child\\)\\]\\:univer-border-r>ul:not(:last-child){border-right-width:1px}.\\[\\&\\>ul\\:not\\(\\:last-child\\)\\]\\:univer-border-solid>ul:not(:last-child){border-style:solid}.\\[\\&\\>ul\\:not\\(\\:last-child\\)\\]\\:univer-border-r-gray-200>ul:not(:last-child){border-right-color:var(--univer-gray-200)}.\\[\\&_\\[data-description\\]\\]\\:univer-text-sm [data-description]{font-size:.875rem;line-height:1.25rem}.\\[\\&_\\[data-description\\]\\]\\:univer-text-gray-200 [data-description]{color:var(--univer-gray-200)}.\\[\\&_\\[data-description\\]\\]\\:univer-text-gray-600 [data-description]{color:var(--univer-gray-600)}.\\[\\&_\\[data-icon\\]\\>svg\\]\\:univer-relative [data-icon]>svg{position:relative}.\\[\\&_\\[data-icon\\]\\>svg\\]\\:univer-top-1 [data-icon]>svg{top:.25rem}.\\[\\&_\\[data-icon\\]\\]\\:univer-self-baseline [data-icon]{align-self:baseline}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-amber-500 [data-icon]{--univer-tw-text-opacity: 1;color:rgba(245,158,11,var(--univer-tw-text-opacity, 1))}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-green-500 [data-icon]{color:var(--univer-green-500)}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-primary-600 [data-icon]{color:var(--univer-primary-600)}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-red-500 [data-icon]{color:var(--univer-red-500)}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-sky-500 [data-icon]{--univer-tw-text-opacity: 1;color:rgba(14,165,233,var(--univer-tw-text-opacity, 1))}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-violet-500 [data-icon]{--univer-tw-text-opacity: 1;color:rgba(139,92,246,var(--univer-tw-text-opacity, 1))}.\\[\\&_\\[data-icon\\]\\]\\:univer-text-yellow-500 [data-icon]{color:var(--univer-yellow-500)}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-rounded-2xl [data-sonner-toast]{border-radius:1rem}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-border [data-sonner-toast]{border-width:1px}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-border-solid [data-sonner-toast]{border-style:solid}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-border-gray-200 [data-sonner-toast]{border-color:var(--univer-gray-200)}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-shadow-\\[0_16px_40px_-20px_rgba\\(15\\,23\\,42\\,0\\.55\\)\\] [data-sonner-toast]{--univer-tw-shadow: 0 16px 40px -20px #0f172a8c;--univer-tw-shadow-colored: 0 16px 40px -20px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 16px 40px -20px #0f172a8c;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-shadow-md [data-sonner-toast]{--univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;--univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 6px -2px #1e284d14,0 2px 6px -1px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.\\[\\&_\\[data-sonner-toast\\]\\]\\:univer-backdrop-blur-sm [data-sonner-toast]{--univer-tw-backdrop-blur: blur(4px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.dark\\:\\[\\&_\\[data-sonner-toast\\]\\]\\:\\!univer-border-gray-600 [data-sonner-toast]:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.\\[\\&_\\[data-title\\]\\]\\:univer-text-sm [data-title]{font-size:.875rem;line-height:1.25rem}.\\[\\&_\\[data-title\\]\\]\\:univer-text-gray-900 [data-title]{color:var(--univer-gray-900)}.\\[\\&_\\[data-u-comp\\=form-layout\\]\\]\\:univer-max-w-\\[calc\\(50\\%-8px\\)\\] [data-u-comp=form-layout]{max-width:calc(50% - 8px)}.\\[\\&_\\[data-u-comp\\=form-layout\\]\\]\\:univer-shrink [data-u-comp=form-layout]{flex-shrink:1}.\\[\\&_\\[data-u-comp\\=form-layout\\]\\]\\:univer-grow [data-u-comp=form-layout]{flex-grow:1}.\\[\\&_\\[data-u-comp\\=input\\]\\]\\:univer-w-full [data-u-comp=input]{width:100%}.\\[\\&_\\[data-u-comp\\=input\\]\\]\\:univer-border-red-500 [data-u-comp=input]{border-color:var(--univer-red-500)}.\\[\\&_\\[data-u-comp\\=pager-left-arrow\\]\\:hover\\]\\:\\!univer-bg-gray-600 [data-u-comp=pager-left-arrow]:hover,.\\[\\&_\\[data-u-comp\\=pager-right-arrow\\]\\:hover\\]\\:\\!univer-bg-gray-600 [data-u-comp=pager-right-arrow]:hover{background-color:var(--univer-gray-600)!important}.\\[\\&_\\[data-u-comp\\=select\\]\\]\\:univer-w-full [data-u-comp=select]{width:100%}.\\[\\&_\\[data-u-comp\\=select\\]\\]\\:univer-border-red-500 [data-u-comp=select]{border-color:var(--univer-red-500)}.\\[\\&_input\\]\\:univer-box-border input{box-sizing:border-box}.\\[\\&_input\\]\\:univer-flex input{display:flex}.\\[\\&_input\\]\\:univer-h-7 input{height:1.75rem}.\\[\\&_input\\]\\:univer-items-center input{align-items:center}.\\[\\&_input\\]\\:univer-rounded input{border-radius:.25rem}.\\[\\&_input\\]\\:univer-border input{border-width:1px}.\\[\\&_input\\]\\:univer-border-solid input{border-style:solid}.\\[\\&_input\\]\\:univer-border-gray-200 input{border-color:var(--univer-gray-200)}.\\[\\&_input\\]\\:univer-border-gray-600 input{border-color:var(--univer-gray-600)}.\\[\\&_input\\]\\:univer-bg-transparent input{background-color:#0000}.\\[\\&_input\\]\\:univer-px-1\\.5 input{padding-left:.375rem;padding-right:.375rem}.\\[\\&_input\\]\\:univer-text-gray-700 input{color:var(--univer-gray-700)}.\\[\\&_input\\]\\:univer-text-white input{color:var(--univer-white)}.\\[\\&_input\\]\\:univer-outline-none input{outline-offset:2px;outline:2px solid #0000}.\\[\\&_svg\\]\\:univer-pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:univer-size-4 svg{width:1rem;height:1rem}.\\[\\&_svg\\]\\:univer-shrink-0 svg{flex-shrink:0}.univer-popup{z-index:1070;--univer-tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--univer-tw-shadow-colored: 0 1px 3px 0 var(--univer-tw-shadow-color), 0 1px 2px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 3px #0000001a,0 1px 2px -1px #0000001a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow);border-radius:6px;position:fixed;top:-9999px;left:-9999px;overflow:hidden}.univer-popup-enter{transform-origin:0 0;opacity:0;animation-duration:.15s;animation-timing-function:cubic-bezier(.08,.82,.17,1);animation-play-state:paused;animation-fill-mode:both}.univer-popup-enter-active{animation-name:popup-slide-up-in;animation-play-state:running}.univer-popup-exit{transform-origin:0 0;opacity:1;animation-name:popup-slide-up-out;animation-duration:.15s;animation-timing-function:cubic-bezier(.6,.04,.98,.34);animation-play-state:running;animation-fill-mode:both}.univer-popup-exit-active{display:none}@keyframes popup-slide-up-in{0%{transform-origin:0 0;opacity:0;transform:scaleY(0)}to{transform-origin:0 0;opacity:1;transform:scaleY(1)}}@keyframes popup-slide-up-out{0%{transform-origin:0 0;opacity:1;transform:scaleY(1)}to{transform-origin:0 0;opacity:0;transform:scaleY(0)}}.univer-popup-mask{z-index:1060;position:fixed;inset:0}.univer-pointer-events-auto{pointer-events:auto}.univer-invisible{visibility:hidden}.univer-sticky{position:sticky}.-univer-left-\\[99999\\]{left:-99999px}.-univer-top-\\[99999\\]{top:-99999px}.univer-left-1\\/2{left:50%}.univer-left-\\[-9999px\\]{left:-9999px}.univer-right-2{right:.5rem}.univer-top-\\[-9999px\\]{top:-9999px}.univer-top-\\[calc\\(50\\%-6px\\)\\]{top:calc(50% - 6px)}.univer-z-20{z-index:20}.univer-z-\\[-1\\]{z-index:-1}.univer-z-\\[1020\\]{z-index:1020}.univer-z-\\[1080\\]{z-index:1080}.univer-z-\\[1\\]{z-index:1}.univer-mx-2{margin-left:.5rem;margin-right:.5rem}.univer-mx-auto{margin-left:auto;margin-right:auto}.univer-mt-6{margin-top:1.5rem}.univer-line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.\\!univer-size-3\\.5{width:.875rem!important;height:.875rem!important}.univer-size-12{width:3rem;height:3rem}.univer-size-3\\.5{width:.875rem;height:.875rem}.univer-size-7{width:1.75rem;height:1.75rem}.univer-size-9{width:2.25rem;height:2.25rem}.univer-h-0{height:0}.univer-h-1\\.5{height:.375rem}.univer-max-h-\\[80vh\\]{max-height:80vh}.univer-max-h-\\[min\\(72vh\\,560px\\)\\]{max-height:min(72vh,560px)}.univer-min-h-\\[560px\\]{min-height:560px}.univer-min-h-\\[56px\\]{min-height:56px}.univer-min-h-full{min-height:100%}.univer-w-0{width:0}.univer-w-1{width:.25rem}.univer-w-10{width:2.5rem}.univer-w-40{width:10rem}.univer-w-7{width:1.75rem}.univer-w-8{width:2rem}.univer-w-96{width:24rem}.univer-w-max{width:max-content}.univer-w-screen{width:100vw}.univer-min-w-52{min-width:13rem}.univer-min-w-6{min-width:1.5rem}.univer-min-w-min{min-width:min-content}.univer-max-w-3xl{max-width:48rem}.univer-max-w-5xl{max-width:64rem}.univer-max-w-96{max-width:24rem}.univer-max-w-\\[--radix-popper-available-width\\]{max-width:var(--radix-popper-available-width)}.univer-max-w-\\[32\\%\\]{max-width:32%}.univer-max-w-\\[560px\\]{max-width:560px}.univer-max-w-\\[calc\\(100vw-16px\\)\\]{max-width:calc(100vw - 16px)}.univer-max-w-full{max-width:100%}.univer-origin-center{transform-origin:center}.-univer-translate-x-1\\/2{--univer-tw-translate-x: -50%;transform:translate(-50%,var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-translate-x-0{--univer-tw-translate-x: 0px;transform:translateY(var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-translate-x-full{--univer-tw-translate-x: 100%;transform:translate(100%,var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-cursor-col-resize{cursor:col-resize}.univer-grid-cols-\\[1fr\\]{grid-template-columns:1fr}.univer-grid-cols-\\[22px_minmax\\(0\\,1fr\\)_22px\\]{grid-template-columns:22px minmax(0,1fr) 22px}.univer-grid-cols-\\[28px_minmax\\(0\\,1fr\\)_auto\\]{grid-template-columns:28px minmax(0,1fr) auto}.univer-grid-cols-\\[32px_minmax\\(0\\,1fr\\)_32px\\]{grid-template-columns:32px minmax(0,1fr) 32px}.univer-grid-cols-\\[auto\\,1fr\\]{grid-template-columns:auto 1fr}.univer-grid-cols-\\[auto_1fr_auto\\]{grid-template-columns:auto 1fr auto}.univer-grid-rows-\\[100\\%\\]{grid-template-rows:100%}.univer-grid-rows-\\[auto_1fr\\]{grid-template-rows:auto 1fr}.univer-grid-rows-\\[auto_1fr_auto\\]{grid-template-rows:auto 1fr auto}.univer-flex-wrap{flex-wrap:wrap}.univer-items-end{align-items:flex-end}.univer-gap-0\\.5{gap:.125rem}.univer-overscroll-contain{overscroll-behavior:contain}.univer-scroll-smooth{scroll-behavior:smooth}.\\!univer-rounded-full{border-radius:9999px!important}.\\!univer-rounded-xl{border-radius:.75rem!important}.univer-rounded-2xl{border-radius:1rem}.univer-rounded-3xl{border-radius:1.5rem}.univer-rounded-xl{border-radius:.75rem}.univer-rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.univer-rounded-t-\\[28px\\]{border-top-left-radius:28px;border-top-right-radius:28px}.univer-border-0{border-width:0}.\\!univer-bg-gray-200{background-color:var(--univer-gray-200)!important}.\\!univer-bg-gray-500{background-color:var(--univer-gray-500)!important}.univer-bg-\\[rgba\\(15\\,23\\,42\\,0\\.32\\)\\]{background-color:#0f172a52}.univer-bg-gray-300{background-color:var(--univer-gray-300)}.univer-bg-gray-50{background-color:var(--univer-gray-50)}.univer-bg-gray-700{background-color:var(--univer-gray-700)}.univer-bg-primary-50{background-color:var(--univer-primary-50)}.univer-bg-gradient-to-tr{background-image:linear-gradient(to top right,var(--univer-tw-gradient-stops))}.univer-from-slate-950{--univer-tw-gradient-from: #020617 var(--univer-tw-gradient-from-position);--univer-tw-gradient-to: #02061700 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to)}.univer-via-blue-950{--univer-tw-gradient-to: #17255400 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), #172554 var(--univer-tw-gradient-via-position), var(--univer-tw-gradient-to)}.univer-to-cyan-900{--univer-tw-gradient-to: #164e63 var(--univer-tw-gradient-to-position)}.univer-p-8{padding:2rem}.univer-px-0{padding-left:0;padding-right:0}.univer-px-0\\.5{padding-left:.125rem;padding-right:.125rem}.univer-px-3{padding-left:.75rem;padding-right:.75rem}.univer-pb-2{padding-bottom:.5rem}.univer-pl-2{padding-left:.5rem}.univer-pl-4{padding-left:1rem}.univer-pr-1\\.5{padding-right:.375rem}.univer-pt-3{padding-top:.75rem}.univer-text-left{text-align:left}.univer-text-right{text-align:right}.univer-font-sans{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.univer-text-2xl{font-size:1.5rem;line-height:2rem}.univer-uppercase{text-transform:uppercase}.univer-leading-4{line-height:1rem}.univer-leading-none{line-height:1}.univer-tracking-\\[0\\.08em\\]{letter-spacing:.08em}.univer-tracking-tight{letter-spacing:-.025em}.\\!univer-text-gray-600{color:var(--univer-gray-600)!important}.univer-text-current{color:currentColor}.univer-text-slate-200{--univer-tw-text-opacity: 1;color:rgba(226,232,240,var(--univer-tw-text-opacity, 1))}.univer-underline{text-decoration-line:underline}.univer-opacity-0{opacity:0}.univer-opacity-30{opacity:.3}.univer-opacity-40{opacity:.4}.univer-opacity-60{opacity:.6}.univer-shadow-\\[0_-16px_48px_rgba\\(15\\,23\\,42\\,0\\.18\\)\\]{--univer-tw-shadow: 0 -16px 48px #0f172a2e;--univer-tw-shadow-colored: 0 -16px 48px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 -16px 48px #0f172a2e;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-ring-0{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(0px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.univer-ring-primary-600{--univer-tw-ring-color: var(--univer-primary-600)}.univer-backdrop-blur-\\[2px\\]{--univer-tw-backdrop-blur: blur(2px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.univer-backdrop-blur-xl{--univer-tw-backdrop-blur: blur(24px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.univer-transition-\\[width\\]{transition-property:width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}@keyframes enter{0%{opacity:1;opacity:var(--univer-tw-enter-opacity, 1);transform:translateZ(0) scaleZ(1) rotate(0);transform:translate3d(var(--univer-tw-enter-translate-x, 0),var(--univer-tw-enter-translate-y, 0),0) scale3d(var(--univer-tw-enter-scale, 1),var(--univer-tw-enter-scale, 1),var(--univer-tw-enter-scale, 1)) rotate(var(--univer-tw-enter-rotate, 0))}}@keyframes exit{to{opacity:1;opacity:var(--univer-tw-exit-opacity, 1);transform:translateZ(0) scaleZ(1) rotate(0);transform:translate3d(var(--univer-tw-exit-translate-x, 0),var(--univer-tw-exit-translate-y, 0),0) scale3d(var(--univer-tw-exit-scale, 1),var(--univer-tw-exit-scale, 1),var(--univer-tw-exit-scale, 1)) rotate(var(--univer-tw-exit-rotate, 0))}}.univer-animate-in{--univer-tw-enter-opacity: initial;--univer-tw-enter-scale: initial;--univer-tw-enter-rotate: initial;--univer-tw-enter-translate-x: initial;--univer-tw-enter-translate-y: initial;animation-name:enter;animation-duration:.15s}.univer-fade-in{--univer-tw-enter-opacity: 0}.univer-fade-in-70{--univer-tw-enter-opacity: .7}.last\\:univer-border-b-0:last-child{border-bottom-width:0}.empty\\:univer-hidden:empty{display:none}.hover\\:univer-opacity-50:hover{opacity:.5}.focus\\:univer-bg-white:focus{background-color:var(--univer-white)}.focus\\:univer-ring-2:focus{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.focus-visible\\:univer-ring-primary-600:focus-visible{--univer-tw-ring-color: var(--univer-primary-600)}.focus-visible\\:univer-ring-offset-0:focus-visible{--univer-tw-ring-offset-width: 0px}.active\\:univer-bg-gray-200:active{background-color:var(--univer-gray-200)}.enabled\\:hover\\:univer-bg-gray-50:hover:enabled{background-color:var(--univer-gray-50)}.enabled\\:active\\:univer-bg-gray-100:active:enabled{background-color:var(--univer-gray-100)}.disabled\\:univer-cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:univer-text-gray-300:disabled{color:var(--univer-gray-300)}.disabled\\:univer-opacity-40:disabled{opacity:.4}.disabled\\:hover\\:univer-bg-transparent:hover:disabled{background-color:#0000}@media(min-width:640px){.sm\\:\\!univer-block{display:block!important}}.rtl\\:univer-pl-1\\.5:where([dir=rtl],[dir=rtl] *){padding-left:.375rem}.rtl\\:univer-pr-0:where([dir=rtl],[dir=rtl] *){padding-right:0}.rtl\\:univer-pr-2:where([dir=rtl],[dir=rtl] *){padding-right:.5rem}.dark\\:\\!univer-bg-gray-200:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-200)!important}.dark\\:\\!univer-bg-primary-400:where(.univer-dark,.univer-dark *){background-color:var(--univer-primary-400)!important}.dark\\:\\!univer-text-gray-500:where(.univer-dark,.univer-dark *){color:var(--univer-gray-500)!important}.dark\\:\\!univer-text-gray-600:where(.univer-dark,.univer-dark *){color:var(--univer-gray-600)!important}.dark\\:\\!univer-text-gray-800:where(.univer-dark,.univer-dark *){color:var(--univer-gray-800)!important}.dark\\:\\!univer-text-primary-100:where(.univer-dark,.univer-dark *){color:var(--univer-primary-100)!important}.dark\\:\\!univer-text-primary-300:where(.univer-dark,.univer-dark *){color:var(--univer-primary-300)!important}.dark\\:\\!univer-text-primary-400:where(.univer-dark,.univer-dark *){color:var(--univer-primary-400)!important}.dark\\:hover\\:\\!univer-bg-gray-900:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-900)!important}.dark\\:hover\\:\\!univer-bg-transparent:hover:where(.univer-dark,.univer-dark *){background-color:#0000!important}.dark\\:active\\:\\!univer-bg-gray-600:active:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.dark\\:disabled\\:\\!univer-text-gray-600:disabled:where(.univer-dark,.univer-dark *){color:var(--univer-gray-600)!important}.\\[\\&\\:\\:-webkit-scrollbar\\]\\:univer-hidden::-webkit-scrollbar{display:none}.\\[\\&\\>\\*\\]\\:univer-m-0>*{margin:0}.\\[\\&\\>\\*\\]\\:univer-inline-flex>*{display:inline-flex}.\\[\\&\\>\\*\\]\\:univer-h-6>*{height:1.5rem}.\\[\\&\\>\\*\\]\\:univer-min-h-7>*{min-height:1.75rem}.\\[\\&\\>\\*\\]\\:univer-min-w-7>*{min-width:1.75rem}.\\[\\&\\>\\*\\]\\:univer-appearance-none>*{-webkit-appearance:none;appearance:none}.\\[\\&\\>\\*\\]\\:univer-items-center>*{align-items:center}.\\[\\&\\>\\*\\]\\:univer-justify-center>*{justify-content:center}.\\[\\&\\>\\*\\]\\:univer-rounded>*{border-radius:.25rem}.\\[\\&\\>\\*\\]\\:univer-rounded-md>*{border-radius:.375rem}.\\[\\&\\>\\*\\]\\:univer-border-0>*{border-width:0}.\\[\\&\\>\\*\\]\\:univer-px-1>*{padding-left:.25rem;padding-right:.25rem}.\\[\\&\\>\\*\\]\\:univer-px-1\\.5>*{padding-left:.375rem;padding-right:.375rem}.\\[\\&\\>\\*\\]\\:univer-leading-none>*{line-height:1}.\\[\\&\\>\\*\\]\\:univer-outline-none>*{outline-offset:2px;outline:2px solid #0000}.\\[\\&\\>\\*\\]\\:univer-transition-colors>*{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:\\[\\&\\>\\*\\]\\:univer-bg-gray-100>:hover{background-color:var(--univer-gray-100)}.\\[\\&\\>span\\]\\:univer-truncate>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.\\[\\&\\>span\\]\\:univer-text-sm>span{font-size:.875rem;line-height:1.25rem}.\\[\\&\\>span\\]\\:univer-font-medium>span{font-weight:500}.\\[\\&\\>svg\\]\\:univer-shrink-0>svg{flex-shrink:0}.\\[\\&\\>svg\\]\\:univer-text-lg>svg{font-size:1.125rem;line-height:1.75rem}.\\[\\&\\>svg\\]\\:univer-text-gray-700>svg{color:var(--univer-gray-700)}.\\[\\&_\\*\\]\\:univer-box-border *{box-sizing:border-box}.\\[\\&_\\.univer-custom-label\\]\\:univer-text-sm .univer-custom-label{font-size:.875rem;line-height:1.25rem}.\\[\\&_\\.univer-custom-label\\]\\:univer-leading-none .univer-custom-label{line-height:1}.\\[\\&_\\.univer-toolbar-button-selector-main\\]\\:\\!univer-h-8 .univer-toolbar-button-selector-main{height:2rem!important}.\\[\\&_\\.univer-toolbar-button-selector-main\\]\\:\\!univer-rounded-none .univer-toolbar-button-selector-main{border-radius:0!important}.\\[\\&_\\.univer-toolbar-button-selector-main\\]\\:\\!univer-rounded-l-md .univer-toolbar-button-selector-main{border-top-left-radius:.375rem!important;border-bottom-left-radius:.375rem!important}.\\[\\&_\\.univer-toolbar-button-selector-main\\]\\:\\!univer-px-1\\.5 .univer-toolbar-button-selector-main{padding-left:.375rem!important;padding-right:.375rem!important}.\\[\\&_\\.univer-toolbar-button-selector-root\\]\\:\\!univer-h-8 .univer-toolbar-button-selector-root{height:2rem!important}.\\[\\&_\\.univer-toolbar-button-selector-root\\]\\:univer-overflow-hidden .univer-toolbar-button-selector-root{overflow:hidden}.\\[\\&_\\.univer-toolbar-button-selector-root\\]\\:\\!univer-rounded-md .univer-toolbar-button-selector-root{border-radius:.375rem!important}.\\[\\&_\\.univer-toolbar-button-selector-root\\]\\:\\!univer-pr-0 .univer-toolbar-button-selector-root{padding-right:0!important}.\\[\\&_\\.univer-toolbar-button-selector-trigger\\]\\:\\!univer-static .univer-toolbar-button-selector-trigger{position:static!important}.\\[\\&_\\.univer-toolbar-button-selector-trigger\\]\\:\\!univer-h-8 .univer-toolbar-button-selector-trigger{height:2rem!important}.\\[\\&_\\.univer-toolbar-button-selector-trigger\\]\\:\\!univer-w-6 .univer-toolbar-button-selector-trigger{width:1.5rem!important}.\\[\\&_\\.univer-toolbar-button-selector-trigger\\]\\:\\!univer-rounded-none .univer-toolbar-button-selector-trigger{border-radius:0!important}.\\[\\&_\\.univer-toolbar-button-selector-trigger\\]\\:\\!univer-rounded-r-md .univer-toolbar-button-selector-trigger{border-top-right-radius:.375rem!important;border-bottom-right-radius:.375rem!important}.\\[\\&_\\.univer-toolbar-selector-root\\]\\:\\!univer-h-8 .univer-toolbar-selector-root{height:2rem!important}.\\[\\&_\\.univer-toolbar-selector-root\\]\\:\\!univer-gap-1 .univer-toolbar-selector-root{gap:.25rem!important}.\\[\\&_\\.univer-toolbar-selector-root\\]\\:\\!univer-rounded-md .univer-toolbar-selector-root{border-radius:.375rem!important}.\\[\\&_\\.univer-toolbar-selector-root\\]\\:\\!univer-px-1\\.5 .univer-toolbar-selector-root{padding-left:.375rem!important;padding-right:.375rem!important}.\\[\\&_\\.univer-toolbar-selector-trigger\\]\\:\\!univer-pl-0\\.5 .univer-toolbar-selector-trigger{padding-left:.125rem!important}.\\[\\&_\\.univer-tooltip\\]\\:univer-inline-flex .univer-tooltip{display:inline-flex}.\\[\\&_\\.univer-tooltip\\]\\:univer-h-full .univer-tooltip{height:100%}.\\[\\&_\\.univer-tooltip\\]\\:univer-items-center .univer-tooltip{align-items:center}.\\[\\&_\\[data-u-command\\]\\]\\:\\!univer-h-8 [data-u-command]{height:2rem!important}.\\[\\&_\\[data-u-command\\]\\]\\:\\!univer-min-h-8 [data-u-command]{min-height:2rem!important}.\\[\\&_\\[data-u-command\\]\\]\\:\\!univer-rounded-md [data-u-command]{border-radius:.375rem!important}.\\[\\&_\\[data-u-command\\]\\]\\:\\!univer-px-1\\.5 [data-u-command]{padding-left:.375rem!important;padding-right:.375rem!important}.\\[\\&_button\\]\\:\\!univer-m-0 button{margin:0!important}.\\[\\&_button\\]\\:\\!univer-h-8 button{height:2rem!important}.\\[\\&_button\\]\\:\\!univer-min-w-8 button{min-width:2rem!important}.\\[\\&_button\\]\\:\\!univer-appearance-none button{-webkit-appearance:none!important;appearance:none!important}.\\[\\&_button\\]\\:\\!univer-rounded-md button{border-radius:.375rem!important}.\\[\\&_button\\]\\:\\!univer-border-0 button{border-width:0!important}.\\[\\&_button\\]\\:\\!univer-bg-transparent button{background-color:#0000!important}.\\[\\&_button\\]\\:\\!univer-p-0 button{padding:0!important}.\\[\\&_button\\]\\:\\!univer-px-1\\.5 button{padding-left:.375rem!important;padding-right:.375rem!important}.\\[\\&_button\\]\\:\\!univer-leading-none button{line-height:1!important}.\\[\\&_button\\]\\:\\!univer-outline-none button{outline-offset:2px!important;outline:2px solid #0000!important}.\\[\\&_input\\:focus\\]\\:\\!univer-ring-0 input:focus{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color) !important;--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(0px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color) !important;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000!important;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)!important}.\\[\\&_input\\]\\:\\!univer-m-0 input{margin:0!important}.\\[\\&_input\\]\\:univer-h-6 input{height:1.5rem}.\\[\\&_input\\]\\:univer-w-7 input{width:1.75rem}.\\[\\&_input\\]\\:\\!univer-appearance-none input{-webkit-appearance:none!important;appearance:none!important}.\\[\\&_input\\]\\:\\!univer-border-0 input{border-width:0!important}.\\[\\&_input\\]\\:univer-border-none input{border-style:none}.\\[\\&_input\\]\\:\\!univer-bg-transparent input{background-color:#0000!important}.\\[\\&_input\\]\\:\\!univer-p-0 input{padding:0!important}.\\[\\&_input\\]\\:univer-p-0 input{padding:0}.\\[\\&_input\\]\\:univer-text-sm input{font-size:.875rem;line-height:1.25rem}.\\[\\&_input\\]\\:\\!univer-leading-none input{line-height:1!important}.\\[\\&_input\\]\\:\\!univer-outline-none input{outline-offset:2px!important;outline:2px solid #0000!important}.univer-fixed{position:fixed}.univer-bottom-0{bottom:0}.univer-left-5{left:1.25rem}.univer-left-\\[5px\\]{left:5px}.univer-top-4{top:1rem}.univer-top-\\[5px\\]{top:5px}.univer-z-\\[10000\\]{z-index:10000}.univer-mb-1{margin-bottom:.25rem}.univer-mr-1{margin-right:.25rem}.univer-mt-1\\.5{margin-top:.375rem}.univer-mt-12{margin-top:3rem}.univer-mt-5{margin-top:1.25rem}.univer-size-0\\.5{width:.125rem;height:.125rem}.univer-size-3{width:.75rem;height:.75rem}.univer-size-5{width:1.25rem;height:1.25rem}.univer-size-8{width:2rem;height:2rem}.univer-h-16{height:4rem}.univer-h-3\\.5{height:.875rem}.univer-h-\\[24px\\]{height:24px}.univer-min-h-8{min-height:2rem}.univer-w-2{width:.5rem}.univer-w-2\\.5{width:.625rem}.univer-w-28{width:7rem}.univer-w-4\\/5{width:80%}.univer-w-\\[0px\\]{width:0}.univer-w-\\[212px\\]{width:212px}.univer-w-\\[72px\\]{width:72px}.univer-min-w-\\[180px\\]{min-width:180px}.univer-flex-shrink-0{flex-shrink:0}.univer-cursor-grab{cursor:grab}.univer-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.univer-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.univer-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.univer-place-items-center{place-items:center}.univer-items-stretch{align-items:stretch}.univer-gap-2\\.5{gap:.625rem}.univer-gap-3{gap:.75rem}.univer-gap-x-0\\.5{-moz-column-gap:.125rem;column-gap:.125rem}.univer-gap-y-px{row-gap:1px}.univer-overflow-x-hidden{overflow-x:hidden}.univer-rounded-r-2xl{border-top-right-radius:1rem;border-bottom-right-radius:1rem}.\\!univer-border-primary-500{border-color:var(--univer-primary-500)!important}.univer-border-primary-500{border-color:var(--univer-primary-500)}.\\!univer-bg-primary-50{background-color:var(--univer-primary-50)!important}.\\!univer-bg-primary-900{background-color:var(--univer-primary-900)!important}.univer-bg-gray-400{background-color:var(--univer-gray-400)}.univer-px-2\\.5{padding-left:.625rem;padding-right:.625rem}.univer-py-0{padding-top:0;padding-bottom:0}.univer-pb-0\\.5{padding-bottom:.125rem}.univer-pb-4{padding-bottom:1rem}.univer-pr-1{padding-right:.25rem}.univer-pr-2{padding-right:.5rem}.univer-pt-1\\.5{padding-top:.375rem}.univer-pt-14{padding-top:3.5rem}.univer-text-lg{font-size:1.125rem;line-height:1.75rem}.univer-font-\\[500\\],.univer-font-medium{font-weight:500}.univer-font-normal{font-weight:400}.univer-leading-\\[24px\\]{line-height:24px}.\\!univer-text-gray-200{color:var(--univer-gray-200)!important}.\\!univer-text-gray-400{color:var(--univer-gray-400)!important}.\\!univer-text-primary-600{color:var(--univer-primary-600)!important}.univer-text-gray-800{color:var(--univer-gray-800)}.univer-shadow-sm{--univer-tw-shadow: 0px 1px 2px 0px #1e284d14;--univer-tw-shadow-colored: 0px 1px 2px 0px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 2px #1e284d14;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-backdrop-blur-\\[10px\\]{--univer-tw-backdrop-blur: blur(10px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.univer-duration-300{transition-duration:.3s}.univer-group:hover .group-hover\\:univer-bg-gray-500{background-color:var(--univer-gray-500)}.hover\\:univer-border-primary-500:hover{border-color:var(--univer-primary-500)}.hover\\:univer-bg-white:hover{background-color:var(--univer-white)}.hover\\:univer-text-gray-900:hover{color:var(--univer-gray-900)}.hover\\:univer-text-primary-600:hover{color:var(--univer-primary-600)}.hover\\:univer-shadow-md:hover{--univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;--univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 6px -2px #1e284d14,0 2px 6px -1px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.active\\:univer-cursor-grabbing:active{cursor:grabbing}.dark\\:\\!univer-border-gray-600:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.dark\\:\\!univer-bg-gray-500:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-500)!important}.dark\\:\\!univer-bg-primary-900:where(.univer-dark,.univer-dark *){background-color:var(--univer-primary-900)!important}.dark\\:\\!univer-text-gray-100:where(.univer-dark,.univer-dark *){color:var(--univer-gray-100)!important}.univer-group:hover .dark\\:group-hover\\:\\!univer-bg-gray-300:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-300)!important}.univer-pointer-events-none{pointer-events:none}.univer-inset-0{inset:0}.-univer-bottom-0\\.5{bottom:-.125rem}.-univer-left-0\\.5{left:-.125rem}.-univer-right-0\\.5{right:-.125rem}.-univer-top-0\\.5{top:-.125rem}.univer-left-0{left:0}.univer-left-1{left:.25rem}.univer-left-3{left:.75rem}.univer-right-0{right:0}.univer-right-5{right:1.25rem}.univer-top-0{top:0}.univer-top-0\\.5{top:.125rem}.univer-z-10{z-index:10}.univer-z-\\[1001\\]{z-index:1001}.univer-z-\\[100\\]{z-index:100}.univer-mx-1{margin-left:.25rem;margin-right:.25rem}.univer-mx-1\\.5{margin-left:.375rem;margin-right:.375rem}.univer-mb-1\\.5{margin-bottom:.375rem}.univer-mb-3{margin-bottom:.75rem}.univer-mb-4{margin-bottom:1rem}.univer-ml-1{margin-left:.25rem}.univer-ml-1\\.5{margin-left:.375rem}.univer-ml-3{margin-left:.75rem}.univer-ml-6{margin-left:1.5rem}.univer-ml-px{margin-left:1px}.univer-mr-1\\.5{margin-right:.375rem}.univer-mr-2{margin-right:.5rem}.univer-mr-5{margin-right:1.25rem}.univer-mt-auto{margin-top:auto}.univer-hidden{display:none}.univer-size-0{width:0;height:0}.univer-size-10{width:2.5rem;height:2.5rem}.univer-size-4{width:1rem;height:1rem}.univer-h-0\\.5{height:.125rem}.univer-h-1{height:.25rem}.univer-h-10{height:2.5rem}.univer-h-20{height:5rem}.univer-h-4{height:1rem}.univer-h-5{height:1.25rem}.univer-h-6{height:1.5rem}.univer-h-60{height:15rem}.univer-h-8{height:2rem}.univer-h-9{height:2.25rem}.univer-h-\\[270px\\]{height:270px}.univer-h-\\[30px\\]{height:30px}.univer-h-\\[calc\\(100\\%-16px\\)\\]{height:calc(100% - 16px)}.univer-h-\\[calc\\(100\\%-8px\\)\\]{height:calc(100% - 8px)}.univer-h-px{height:1px}.univer-max-h-52{max-height:13rem}.univer-max-h-\\[100px\\]{max-height:100px}.univer-max-h-\\[360px\\]{max-height:360px}.univer-min-h-0{min-height:0}.univer-min-h-\\[30px\\]{min-height:30px}.\\!univer-w-\\[90px\\]{width:90px!important}.univer-w-16{width:4rem}.univer-w-20{width:5rem}.univer-w-24{width:6rem}.univer-w-5{width:1.25rem}.univer-w-6{width:1.5rem}.univer-w-60{width:15rem}.univer-w-\\[100px\\]{width:100px}.univer-w-\\[130px\\]{width:130px}.univer-w-\\[156px\\]{width:156px}.univer-w-\\[300px\\]{width:300px}.univer-w-\\[50\\%\\]{width:50%}.univer-w-fit{width:fit-content}.univer-min-w-0{min-width:0}.univer-min-w-72{min-width:18rem}.univer-max-w-32{max-width:8rem}.univer-max-w-36{max-width:9rem}.univer-max-w-64{max-width:16rem}.univer-max-w-\\[190px\\]{max-width:190px}.univer-max-w-\\[200px\\]{max-width:200px}.univer-max-w-\\[calc\\(100\\%-112px\\)\\]{max-width:calc(100% - 112px)}.univer-max-w-fit{max-width:fit-content}.univer-max-w-lg{max-width:32rem}.univer-flex-shrink-0,.univer-shrink-0{flex-shrink:0}.univer-flex-grow{flex-grow:1}.univer-flex-grow-0{flex-grow:0}.univer-rotate-180{--univer-tw-rotate: 180deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(180deg) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}@keyframes univer-spin{to{transform:rotate(360deg)}}.univer-animate-spin{animation:1s linear infinite univer-spin}.univer-cursor-not-allowed{cursor:not-allowed}.univer-appearance-none{-webkit-appearance:none;appearance:none}.univer-grid-flow-col{grid-auto-flow:column}.univer-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.univer-grid-cols-\\[1fr\\,auto\\,auto\\,auto\\]{grid-template-columns:1fr auto auto auto}.univer-flex-row{flex-direction:row}.univer-flex-row-reverse{flex-direction:row-reverse}.univer-flex-nowrap{flex-wrap:nowrap}.univer-gap-7{gap:1.75rem}.univer-gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.univer-space-y-2>:not([hidden])~:not([hidden]){--univer-tw-space-y-reverse: 0;margin-top:calc(.5rem * (1 - var(--univer-tw-space-y-reverse)));margin-top:.5rem;margin-top:calc(.5rem * calc(1 - var(--univer-tw-space-y-reverse)));margin-bottom:0;margin-bottom:calc(.5rem * var(--univer-tw-space-y-reverse))}.univer-divide-x-0>:not([hidden])~:not([hidden]){--univer-tw-divide-x-reverse: 0;border-right-width:0;border-right-width:calc(0px * var(--univer-tw-divide-x-reverse));border-left-width:calc(0px * (1 - var(--univer-tw-divide-x-reverse)));border-left-width:0;border-left-width:calc(0px * calc(1 - var(--univer-tw-divide-x-reverse)))}.univer-divide-y>:not([hidden])~:not([hidden]){--univer-tw-divide-y-reverse: 0;border-top-width:calc(1px * (1 - var(--univer-tw-divide-y-reverse)));border-top-width:1px;border-top-width:calc(1px * calc(1 - var(--univer-tw-divide-y-reverse)));border-bottom-width:0;border-bottom-width:calc(1px * var(--univer-tw-divide-y-reverse))}.univer-divide-solid>:not([hidden])~:not([hidden]){border-style:solid}.univer-divide-gray-200>:not([hidden])~:not([hidden]){border-color:var(--univer-gray-200)}.univer-justify-self-center{justify-self:center}.univer-overflow-hidden{overflow:hidden}.univer-overflow-x-auto{overflow-x:auto}.univer-overflow-y-hidden{overflow-y:hidden}.univer-rounded-full{border-radius:9999px}.univer-rounded-md{border-radius:.375rem}.univer-rounded-sm{border-radius:.125rem}.univer-border-2{border-width:2px}.univer-border-4{border-width:4px}.univer-border-b{border-bottom-width:1px}.univer-border-solid{border-style:solid}.univer-border-none{border-style:none}.univer-border-\\[rgba\\(13\\,13\\,13\\,0\\.12\\)\\]{border-color:#0d0d0d1f}.univer-border-gray-100{border-color:var(--univer-gray-100)}.univer-border-gray-200{border-color:var(--univer-gray-200)}.univer-border-transparent{border-color:#0000}.univer-border-r-gray-200{border-right-color:var(--univer-gray-200)}.univer-border-t-primary-500{border-top-color:var(--univer-primary-500)}.\\!univer-bg-gray-700{background-color:var(--univer-gray-700)!important}.\\!univer-bg-gray-800{background-color:var(--univer-gray-800)!important}.\\!univer-bg-gray-900{background-color:var(--univer-gray-900)!important}.univer-bg-blue-500{background-color:var(--univer-blue-500)}.univer-bg-blue-600{background-color:var(--univer-blue-600)}.univer-bg-gray-100{background-color:var(--univer-gray-100)}.univer-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--univer-tw-gradient-stops))}.univer-from-gray-50{--univer-tw-gradient-from: var(--univer-gray-50) var(--univer-tw-gradient-from-position);--univer-tw-gradient-to: #fff0 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to)}.univer-to-gray-100{--univer-tw-gradient-to: var(--univer-gray-100) var(--univer-tw-gradient-to-position)}.univer-fill-gray-900{fill:var(--univer-gray-900)}.univer-fill-primary-600{fill:var(--univer-primary-600)}.univer-p-1{padding:.25rem}.univer-p-4{padding:1rem}.univer-px-1{padding-left:.25rem;padding-right:.25rem}.univer-px-1\\.5{padding-left:.375rem;padding-right:.375rem}.univer-px-3\\.5{padding-left:.875rem;padding-right:.875rem}.univer-px-5{padding-left:1.25rem;padding-right:1.25rem}.univer-py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.univer-py-5{padding-top:1.25rem;padding-bottom:1.25rem}.univer-pb-1{padding-bottom:.25rem}.univer-pl-1\\.5{padding-left:.375rem}.univer-pl-3{padding-left:.75rem}.univer-pl-6{padding-left:1.5rem}.univer-pr-5{padding-right:1.25rem}.univer-pt-1{padding-top:.25rem}.univer-pt-2{padding-top:.5rem}.univer-text-center{text-align:center}.univer-font-semibold{font-weight:600}.univer-leading-6{line-height:1.5rem}.univer-leading-7{line-height:1.75rem}.\\!univer-text-blue-400{color:var(--univer-blue-400)!important}.\\!univer-text-gray-700{color:var(--univer-gray-700)!important}.\\!univer-text-white{color:var(--univer-white)!important}.univer-text-blue-500{color:var(--univer-blue-500)}.univer-text-blue-600{color:var(--univer-blue-600)}.univer-text-gray-200{color:var(--univer-gray-200)}.univer-text-gray-300{color:var(--univer-gray-300)}.univer-text-gray-700{color:var(--univer-gray-700)}.univer-text-green-600{color:var(--univer-green-600)}.univer-text-primary-700{color:var(--univer-primary-700)}.univer-text-red-600{color:var(--univer-red-600)}.univer-text-rose-600{--univer-tw-text-opacity: 1;color:rgba(225,29,72,var(--univer-tw-text-opacity, 1))}.univer-text-yellow-500{color:var(--univer-yellow-500)}.univer-shadow{--univer-tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--univer-tw-shadow-colored: 0 1px 3px 0 var(--univer-tw-shadow-color), 0 1px 2px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 3px #0000001a,0 1px 2px -1px #0000001a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-shadow-lg{--univer-tw-shadow: 0px 4px 6px 0px #1e284d0d, 0px 10px 15px -3px #1e284d1a;--univer-tw-shadow-colored: 0px 4px 6px 0px var(--univer-tw-shadow-color), 0px 10px 15px -3px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 4px 6px #1e284d0d,0 10px 15px -3px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-blur-sm{--univer-tw-blur: blur(4px);filter:var(--univer-tw-blur) var(--univer-tw-brightness) var(--univer-tw-contrast) var(--univer-tw-grayscale) var(--univer-tw-hue-rotate) var(--univer-tw-invert) var(--univer-tw-saturate) var(--univer-tw-sepia) var(--univer-tw-drop-shadow)}.univer-backdrop-blur{--univer-tw-backdrop-blur: blur(8px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.univer-transition-\\[colors\\,box-shadow\\]{transition-property:colors,box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-\\[height\\]{transition-property:height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-duration-200{transition-duration:.2s}.univer-ease-linear{transition-timing-function:linear}.after\\:univer-absolute:after{content:var(--univer-tw-content);position:absolute}.after\\:univer-right-0:after{content:var(--univer-tw-content);right:0}.after\\:univer-top-1\\/2:after{content:var(--univer-tw-content);top:50%}.after\\:univer-block:after{content:var(--univer-tw-content);display:block}.after\\:univer-h-4:after{content:var(--univer-tw-content);height:1rem}.after\\:univer-w-px:after{content:var(--univer-tw-content);width:1px}.after\\:-univer-translate-y-1\\/2:after{content:var(--univer-tw-content);--univer-tw-translate-y: -50%;transform:translate(var(--univer-tw-translate-x),-50%) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.after\\:univer-bg-gray-200:after{content:var(--univer-tw-content);background-color:var(--univer-gray-200)}.after\\:univer-content-\\[\\\"\\\"\\]:after{--univer-tw-content: \"\";content:\"\";content:var(--univer-tw-content)}.last\\:univer-mb-0:last-child{margin-bottom:0}.univer-group:hover .group-hover\\:univer-flex{display:flex}.hover\\:univer-border-primary-600:hover{border-color:var(--univer-primary-600)}.hover\\:univer-bg-gray-50:hover{background-color:var(--univer-gray-50)}.hover\\:univer-bg-transparent:hover{background-color:#0000}.focus\\:univer-border-primary-500:focus{border-color:var(--univer-primary-500)}.focus\\:univer-outline-none:focus{outline-offset:2px;outline:2px solid #0000}.focus-visible\\:univer-ring-2:focus-visible{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.focus-visible\\:univer-ring-primary-500:focus-visible{--univer-tw-ring-color: var(--univer-primary-500)}.active\\:univer-bg-gray-100:active{background-color:var(--univer-gray-100)}.dark\\:\\!univer-divide-gray-600:where(.univer-dark,.univer-dark *)>:not([hidden])~:not([hidden]){border-color:var(--univer-gray-600)!important}.dark\\:\\!univer-border-gray-700:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-700)!important}.dark\\:\\!univer-border-r-gray-700:where(.univer-dark,.univer-dark *){border-right-color:var(--univer-gray-700)!important}.dark\\:\\!univer-bg-black:where(.univer-dark,.univer-dark *){background-color:var(--univer-black)!important}.dark\\:\\!univer-bg-blue-400:where(.univer-dark,.univer-dark *){background-color:var(--univer-blue-400)!important}.dark\\:\\!univer-bg-gray-700:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}.dark\\:\\!univer-bg-gray-800:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-800)!important}.dark\\:\\!univer-from-gray-800:where(.univer-dark,.univer-dark *){--univer-tw-gradient-from: var(--univer-gray-800) var(--univer-tw-gradient-from-position) !important;--univer-tw-gradient-to: #fff0 var(--univer-tw-gradient-to-position) !important;--univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to) !important}.dark\\:\\!univer-to-gray-900:where(.univer-dark,.univer-dark *){--univer-tw-gradient-to: var(--univer-gray-900) var(--univer-tw-gradient-to-position) !important}.dark\\:\\!univer-fill-white:where(.univer-dark,.univer-dark *){fill:var(--univer-white)!important}.dark\\:\\!univer-text-blue-400:where(.univer-dark,.univer-dark *){color:var(--univer-blue-400)!important}.dark\\:\\!univer-text-gray-700:where(.univer-dark,.univer-dark *){color:var(--univer-gray-700)!important}.dark\\:\\!univer-text-green-400:where(.univer-dark,.univer-dark *){color:var(--univer-green-400)!important}.dark\\:\\!univer-text-red-400:where(.univer-dark,.univer-dark *){color:var(--univer-red-400)!important}.dark\\:hover\\:\\!univer-bg-gray-800:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-800)!important}.\\[\\&\\>div\\:first-child\\]\\:univer-px-2\\.5>div:first-child{padding-left:.625rem;padding-right:.625rem}.\\[\\&\\>div\\]\\:univer-h-5>div{height:1.25rem}.\\[\\&\\>div\\]\\:univer-ring-transparent>div{--univer-tw-ring-color: transparent}.\\[\\&_canvas\\]\\:univer-absolute canvas{position:absolute}.univer-absolute{position:absolute}.univer-relative{position:relative}.univer-left-1\\.5{left:.375rem}.univer-top-1\\/2{top:50%}.univer-z-\\[15\\]{z-index:15}.univer-m-0{margin:0}.-univer-mx-6{margin-left:-1.5rem;margin-right:-1.5rem}.univer-mx-0{margin-left:0;margin-right:0}.univer-my-1{margin-top:.25rem;margin-bottom:.25rem}.univer-my-2{margin-top:.5rem;margin-bottom:.5rem}.univer-mb-0{margin-bottom:0}.univer-mb-2{margin-bottom:.5rem}.univer-ml-2{margin-left:.5rem}.univer-ml-4{margin-left:1rem}.univer-mr-0{margin-right:0}.univer-mt-0{margin-top:0}.univer-mt-1{margin-top:.25rem}.univer-box-border{box-sizing:border-box}.univer-block{display:block}.univer-inline-flex{display:inline-flex}.univer-size-6{width:1.5rem;height:1.5rem}.univer-size-full{width:100%;height:100%}.univer-h-\\[18px\\]{height:18px}.univer-h-\\[364px\\]{height:364px}.univer-max-h-60{max-height:15rem}.univer-max-h-72{max-height:18rem}.univer-max-h-\\[350px\\]{max-height:350px}.univer-w-\\[250px\\]{width:250px}.univer-flex-1{flex:1}.-univer-translate-y-1\\/2{--univer-tw-translate-y: -50%;transform:translate(var(--univer-tw-translate-x),-50%) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-select-none{-webkit-user-select:none;user-select:none}.univer-list-none{list-style-type:none}.univer-justify-center{justify-content:center}.univer-justify-around{justify-content:space-around}.univer-gap-2{gap:.5rem}.univer-gap-4{gap:1rem}.univer-overflow-visible{overflow:visible}.univer-truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.univer-whitespace-nowrap{white-space:nowrap}.univer-whitespace-pre-wrap{white-space:pre-wrap}.univer-break-words{word-wrap:break-word}.univer-break-all{word-break:break-all}.univer-rounded-none{border-radius:0}.univer-rounded-l{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.univer-border{border-width:1px}.univer-border-r-0{border-right-width:0}.univer-border-gray-600{border-color:var(--univer-gray-600)}.univer-border-primary-600{border-color:var(--univer-primary-600)}.\\!univer-bg-gray-600{background-color:var(--univer-gray-600)!important}.univer-bg-gray-200{background-color:var(--univer-gray-200)}.univer-bg-primary-600{background-color:var(--univer-primary-600)}.univer-bg-transparent{background-color:#0000}.univer-bg-white{background-color:var(--univer-white)}.univer-p-0{padding:0}.univer-p-0\\.5{padding:.125rem}.univer-p-3{padding:.75rem}.univer-px-4{padding-left:1rem;padding-right:1rem}.univer-px-6{padding-left:1.5rem;padding-right:1.5rem}.univer-px-7{padding-left:1.75rem;padding-right:1.75rem}.univer-py-1{padding-top:.25rem;padding-bottom:.25rem}.univer-py-2{padding-top:.5rem;padding-bottom:.5rem}.univer-py-3{padding-top:.75rem;padding-bottom:.75rem}.univer-pb-3{padding-bottom:.75rem}.univer-pt-0{padding-top:0}.univer-text-base{font-size:1rem;line-height:1.5rem}.univer-text-sm{font-size:.875rem;line-height:1.25rem}.univer-font-bold{font-weight:700}.univer-font-medium{font-weight:500}.univer-leading-5{line-height:1.25rem}.univer-leading-\\[13px\\]{line-height:13px}.univer-text-gray-900{color:var(--univer-gray-900)}.univer-text-primary-500{color:var(--univer-primary-500)}.univer-text-red-500{color:var(--univer-red-500)}.univer-text-white{color:var(--univer-white)}.univer-shadow-md{--univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;--univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 6px -2px #1e284d14,0 2px 6px -1px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-outline-none{outline-offset:2px;outline:2px solid #0000}.univer-ring-1{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(1px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.univer-ring-primary-500{--univer-tw-ring-color: var(--univer-primary-500)}.univer-ring-red-500{--univer-tw-ring-color: var(--univer-red-500)}.univer-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:univer-bg-gray-200:hover{background-color:var(--univer-gray-200)}.hover\\:univer-bg-gray-300:hover{background-color:var(--univer-gray-300)}.dark\\:\\!univer-bg-gray-600:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.dark\\:\\!univer-bg-gray-900:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-900)!important}.dark\\:\\!univer-text-gray-300:where(.univer-dark,.univer-dark *){color:var(--univer-gray-300)!important}.dark\\:\\!univer-text-white:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.dark\\:hover\\:\\!univer-bg-gray-600:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.univer-mb-5{margin-bottom:1.25rem}.univer-mr-3{margin-right:.75rem}.univer-mt-2{margin-top:.5rem}.univer-mt-3{margin-top:.75rem}.univer-mt-3\\.5{margin-top:.875rem}.univer-mt-4{margin-top:1rem}.univer-flex{display:flex}.univer-grid{display:grid}.univer-h-7{height:1.75rem}.univer-h-full{height:100%}.univer-max-h-\\[400px\\]{max-height:400px}.univer-w-32{width:8rem}.univer-w-36{width:9rem}.univer-w-4{width:1rem}.univer-w-\\[340px\\]{width:340px}.univer-w-full{width:100%}.univer-cursor-default{cursor:default}.univer-cursor-pointer{cursor:pointer}.univer-flex-col{flex-direction:column}.univer-items-center{align-items:center}.univer-justify-end{justify-content:flex-end}.univer-justify-between{justify-content:space-between}.univer-gap-1{gap:.25rem}.univer-gap-1\\.5{gap:.375rem}.univer-gap-6{gap:1.5rem}.univer-overflow-auto{overflow:auto}.univer-overflow-y-auto{overflow-y:auto}.univer-rounded{border-radius:.25rem}.univer-rounded-lg{border-radius:.5rem}.univer-p-1\\.5{padding:.375rem}.univer-p-2{padding:.5rem}.univer-px-2{padding-left:.5rem;padding-right:.5rem}.univer-py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.univer-pb-5{padding-bottom:1.25rem}.univer-text-sm,.univer-text-sm\\/5{font-size:.875rem;line-height:1.25rem}.univer-text-xs{font-size:.75rem;line-height:1rem}.univer-text-gray-400{color:var(--univer-gray-400)}.univer-text-gray-500{color:var(--univer-gray-500)}.univer-text-gray-600{color:var(--univer-gray-600)}.univer-text-primary-600{color:var(--univer-primary-600)}.hover\\:univer-bg-gray-100:hover{background-color:var(--univer-gray-100)}.dark\\:\\!univer-text-gray-200:where(.univer-dark,.univer-dark *){color:var(--univer-gray-200)!important}.dark\\:\\!univer-text-gray-400:where(.univer-dark,.univer-dark *){color:var(--univer-gray-400)!important}.dark\\:hover\\:\\!univer-bg-gray-700:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}:host{display:block;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}.z-gallery-office-preview{width:100%;height:100%;overflow:auto;padding:0;background:var(--muted)}.z-gallery-office-preview--sheet{overflow:hidden}.z-gallery-office-preview--slide{display:flex;align-items:center;justify-content:center;padding:0}:host ::ng-deep .docx-wrapper{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:0;background:transparent}:host ::ng-deep .docx{max-width:100%;box-shadow:0 .5rem 2rem #0000001f}:host ::ng-deep .z-gallery-office-preview--sheet>div{width:100%;min-width:45rem;height:100%}:host ::ng-deep .z-gallery-office-preview--slide canvas{max-width:none}\n"] }]
|
|
79
|
+
args: [{ selector: 'z-gallery-office-preview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n #host\n class=\"z-gallery-office-preview\"\n [class.z-gallery-office-preview--sheet]=\"zKind() === 'excel'\"\n [class.z-gallery-office-preview--slide]=\"zKind() === 'powerpoint'\"></div>\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}.z-gallery-office-preview{width:100%;height:100%;overflow:auto;padding:0;background:var(--muted)}.z-gallery-office-preview--sheet{overflow:hidden}.z-gallery-office-preview--slide{display:flex;align-items:center;justify-content:center;padding:0}:host ::ng-deep .docx-wrapper{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:0;background:transparent}:host ::ng-deep .docx{max-width:100%;box-shadow:0 .5rem 2rem #0000001f}:host ::ng-deep .z-gallery-office-preview--sheet>div{width:100%;min-width:45rem;height:100%}:host ::ng-deep .z-gallery-office-preview--slide canvas{max-width:none}\n"] }]
|
|
80
80
|
}], ctorParameters: () => [], propDecorators: { zSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSource", required: true }] }], zKind: [{ type: i0.Input, args: [{ isSignal: true, alias: "zKind", required: true }] }], zLoaded: [{ type: i0.Output, args: ["zLoaded"] }], zError: [{ type: i0.Output, args: ["zError"] }], _host: [{ type: i0.ViewChild, args: ['host', { isSignal: true }] }] } });
|
|
81
81
|
|
|
82
82
|
class ZGalleryTextPreviewComponent {
|
|
@@ -93,10 +93,10 @@ class ZGalleryTextPreviewComponent {
|
|
|
93
93
|
return lines;
|
|
94
94
|
}, /* @ts-ignore */
|
|
95
95
|
...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
|
|
96
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
97
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
96
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZGalleryTextPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
97
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZGalleryTextPreviewComponent, isStandalone: true, selector: "z-gallery-text-preview", inputs: { zContent: { classPropertyName: "zContent", publicName: "zContent", isSignal: true, isRequired: true, transformFunction: null }, zLanguage: { classPropertyName: "zLanguage", publicName: "zLanguage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"z-gallery-text-preview\">\n <div class=\"z-gallery-text-preview__header\">\n <span>{{ zLanguage() }}</span>\n </div>\n <div class=\"z-gallery-text-preview__body\">\n @for (line of lines(); track $index) {\n <span class=\"z-gallery-text-preview__number\">{{ $index + 1 }}</span>\n <span class=\"z-gallery-text-preview__line\">{{ line }}</span>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}.z-gallery-text-preview{display:flex;width:100%;height:100%;min-width:0;min-height:0;flex-direction:column;overflow:hidden;background:var(--card);color:var(--foreground)}.z-gallery-text-preview__header{display:flex;flex:0 0 auto;justify-content:space-between;padding:.625rem 1rem;border-bottom:1px solid var(--border);background:var(--card);color:var(--muted-foreground);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase}.z-gallery-text-preview__body{flex:1 1 auto;display:grid;grid-template-columns:auto minmax(max-content,1fr);width:max-content;min-width:100%;min-height:0;align-content:start;gap:0 1rem;overflow:auto;padding:1rem 1.25rem 2rem .75rem;background:var(--card);color:var(--foreground);font-family:var(--font-mono);font-size:.75rem;line-height:1.625rem}.z-gallery-text-preview__body ::selection{background:var(--primary);color:var(--primary-foreground)}.z-gallery-text-preview__number{min-width:2rem;color:var(--muted-foreground);text-align:right;-webkit-user-select:none;user-select:none}.z-gallery-text-preview__line{min-width:0;color:var(--foreground);white-space:pre}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
98
98
|
}
|
|
99
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
99
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZGalleryTextPreviewComponent, decorators: [{
|
|
100
100
|
type: Component,
|
|
101
101
|
args: [{ selector: 'z-gallery-text-preview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"z-gallery-text-preview\">\n <div class=\"z-gallery-text-preview__header\">\n <span>{{ zLanguage() }}</span>\n </div>\n <div class=\"z-gallery-text-preview__body\">\n @for (line of lines(); track $index) {\n <span class=\"z-gallery-text-preview__number\">{{ $index + 1 }}</span>\n <span class=\"z-gallery-text-preview__line\">{{ line }}</span>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}.z-gallery-text-preview{display:flex;width:100%;height:100%;min-width:0;min-height:0;flex-direction:column;overflow:hidden;background:var(--card);color:var(--foreground)}.z-gallery-text-preview__header{display:flex;flex:0 0 auto;justify-content:space-between;padding:.625rem 1rem;border-bottom:1px solid var(--border);background:var(--card);color:var(--muted-foreground);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase}.z-gallery-text-preview__body{flex:1 1 auto;display:grid;grid-template-columns:auto minmax(max-content,1fr);width:max-content;min-width:100%;min-height:0;align-content:start;gap:0 1rem;overflow:auto;padding:1rem 1.25rem 2rem .75rem;background:var(--card);color:var(--foreground);font-family:var(--font-mono);font-size:.75rem;line-height:1.625rem}.z-gallery-text-preview__body ::selection{background:var(--primary);color:var(--primary-foreground)}.z-gallery-text-preview__number{min-width:2rem;color:var(--muted-foreground);text-align:right;-webkit-user-select:none;user-select:none}.z-gallery-text-preview__line{min-width:0;color:var(--foreground);white-space:pre}\n"] }]
|
|
102
102
|
}], propDecorators: { zContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContent", required: true }] }], zLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLanguage", required: false }] }] } });
|
|
@@ -840,6 +840,11 @@ class ZGalleryPreviewComponent {
|
|
|
840
840
|
onVideoLoad() {
|
|
841
841
|
this._completeLoading();
|
|
842
842
|
}
|
|
843
|
+
onVideoStateChange(change) {
|
|
844
|
+
if (change.event === 'loaded') {
|
|
845
|
+
this.onVideoLoad();
|
|
846
|
+
}
|
|
847
|
+
}
|
|
843
848
|
onOfficeLoad() {
|
|
844
849
|
this._completeLoading();
|
|
845
850
|
}
|
|
@@ -855,6 +860,9 @@ class ZGalleryPreviewComponent {
|
|
|
855
860
|
this.previewError.set(true);
|
|
856
861
|
this._completeLoading();
|
|
857
862
|
}
|
|
863
|
+
onVideoError(_error) {
|
|
864
|
+
this.onMediaError();
|
|
865
|
+
}
|
|
858
866
|
download() {
|
|
859
867
|
this.zOnDownload.emit(this.file());
|
|
860
868
|
}
|
|
@@ -882,10 +890,10 @@ class ZGalleryPreviewComponent {
|
|
|
882
890
|
defaultView.setTimeout(syncZoom, 120);
|
|
883
891
|
});
|
|
884
892
|
}
|
|
885
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
886
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZGalleryPreviewComponent, isStandalone: true, selector: "z-gallery-preview", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, zShowRemove: { classPropertyName: "zShowRemove", publicName: "zShowRemove", isSignal: true, isRequired: false, transformFunction: null }, zPdfViewerConfig: { classPropertyName: "zPdfViewerConfig", publicName: "zPdfViewerConfig", isSignal: true, isRequired: false, transformFunction: null }, zTrustedResourceOrigins: { classPropertyName: "zTrustedResourceOrigins", publicName: "zTrustedResourceOrigins", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnClose: "zOnClose", zOnDownload: "zOnDownload", zOnNavigate: "zOnNavigate", zOnRemove: "zOnRemove" }, host: { listeners: { "document:keydown": "onKeyDown($event)" }, classAttribute: "z-gallery-preview z-[9999]" }, viewQueries: [{ propertyName: "pdfViewer", first: true, predicate: ["pdfViewer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"animate-in fade-in fixed inset-0 z-50 flex items-center justify-center duration-200\"\n (click)=\"onBackdropClick($event)\">\n <button\n z-button\n zType=\"ghost\"\n zShape=\"circle\"\n class=\"absolute top-3 right-3 z-20 text-white hover:bg-white/20 lg:top-4 lg:right-4\"\n (click)=\"close()\">\n <i z-icon zType=\"lucideX\" zSize=\"24\"></i>\n </button>\n\n @if (hasPrev()) {\n <button\n z-button\n zType=\"ghost\"\n zShape=\"circle\"\n class=\"absolute left-4 z-10 text-white hover:bg-white/20\"\n (click)=\"navigate(-1)\">\n <i z-icon zType=\"lucideChevronLeft\" zSize=\"32\"></i>\n </button>\n }\n\n @if (hasNext()) {\n <button\n z-button\n zType=\"ghost\"\n zShape=\"circle\"\n class=\"absolute right-4 z-10 text-white hover:bg-white/20\"\n (click)=\"navigate(1)\">\n <i z-icon zType=\"lucideChevronRight\" zSize=\"32\"></i>\n </button>\n }\n\n <div class=\"flex h-full w-full flex-col items-center\" (click)=\"$event.stopPropagation()\">\n <div\n class=\"dark:!border-border absolute top-3 right-14 left-3 z-10 flex min-w-0 items-center justify-between gap-2 rounded-[0.375rem] border !border-transparent bg-black/70 px-2.5 py-1.5 text-xs text-white shadow-lg backdrop-blur-sm lg:top-4 lg:right-auto lg:left-1/2 lg:max-w-[calc(100vw-10rem)] lg:-translate-x-1/2 lg:justify-start lg:bg-black/60 lg:px-4 lg:py-2 lg:text-sm dark:border\">\n <div class=\"flex min-w-0 items-baseline gap-1.5\">\n <span class=\"min-w-0 truncate font-medium lg:max-w-[12.5rem]\">{{ file().name }}</span>\n <span class=\"hidden shrink-0 text-white/70 lg:inline\">({{ formattedSize() }})</span>\n </div>\n\n @if (files().length > 1) {\n <span class=\"hidden shrink-0 text-white/70 md:inline\">{{ currentIndex() + 1 }} / {{ files().length }}</span>\n }\n\n <div class=\"ml-1 flex shrink-0 items-center gap-0.5\">\n @if (isImageFile()) {\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n zShape=\"circle\"\n class=\"text-white hover:bg-white/20\"\n z-tooltip\n [zShowDelay]=\"300\"\n [zContent]=\"'i18n_z_ui_gallery_rotate_left' | translate\"\n (click)=\"rotateLeft()\">\n <i z-icon zType=\"lucideUndo\" zSize=\"14\"></i>\n </button>\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n zShape=\"circle\"\n class=\"text-white hover:bg-white/20\"\n z-tooltip\n [zShowDelay]=\"300\"\n [zContent]=\"'i18n_z_ui_gallery_rotate_right' | translate\"\n (click)=\"rotateRight()\">\n <i z-icon zType=\"lucideRedo\" zSize=\"14\"></i>\n </button>\n }\n\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n zShape=\"circle\"\n class=\"text-white hover:bg-white/20\"\n z-tooltip\n [zShowDelay]=\"300\"\n [zContent]=\"'i18n_z_ui_gallery_download' | translate\"\n (click)=\"download()\">\n <i z-icon zType=\"lucideDownload\" zSize=\"14\"></i>\n </button>\n\n @if (zShowRemove()) {\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n zShape=\"circle\"\n class=\"text-white hover:bg-white/20\"\n z-tooltip\n [zShowDelay]=\"300\"\n [zContent]=\"'i18n_z_ui_gallery_delete' | translate\"\n (click)=\"remove()\">\n <i z-icon zType=\"lucideTrash2\" zSize=\"14\"></i>\n </button>\n }\n </div>\n </div>\n\n <div class=\"relative flex flex-1 items-center justify-center pt-16\">\n @if (isImageFile()) {\n <div class=\"relative flex h-[60vh] w-[70vw] items-center justify-center rounded-lg\">\n @if (isLoading()) {\n <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (previewError()) {\n <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-8 shadow-2xl\">\n <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n </div>\n <span class=\"text-foreground text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n </span>\n </div>\n } @else {\n <img\n [src]=\"file().url || file().thumbnailUrl\"\n [alt]=\"file().name\"\n class=\"max-h-full max-w-full rounded-lg object-contain shadow-2xl transition-opacity duration-300\"\n [class.opacity-0]=\"isLoading()\"\n [class.opacity-100]=\"!isLoading()\"\n [class.cursor-zoom-in]=\"!zoomed()\"\n [class.cursor-zoom-out]=\"zoomed()\"\n [style.transform]=\"imageTransform()\"\n (load)=\"onImageLoad()\"\n (error)=\"onMediaError()\"\n (click)=\"toggleZoom()\" />\n }\n </div>\n } @else if (isPdf() && pdfUrl()) {\n <div\n class=\"z-gallery-pdf-frame dark:border-border relative h-[75vh] w-[85vw] max-w-[96vw] overflow-hidden rounded-sm border border-transparent shadow-xs\">\n @if (isLoading()) {\n <z-skeleton class=\"absolute inset-0 rounded-sm\" />\n <div\n class=\"text-muted-foreground absolute inset-0 z-10 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (previewError()) {\n <div class=\"bg-card flex size-full flex-col items-center justify-center p-8\">\n <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n </div>\n <span class=\"text-foreground text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n </span>\n </div>\n } @else {\n <div\n class=\"relative size-full bg-white transition-opacity duration-300\"\n [class.opacity-0]=\"isLoading()\"\n [class.opacity-100]=\"!isLoading()\">\n @let pdfConfig = pdfViewerConfig();\n <ng2-pdfjs-viewer\n #pdfViewer\n class=\"block size-full\"\n [viewerFolder]=\"pdfConfig.viewerFolder!\"\n [viewerId]=\"pdfViewerId()\"\n [pdfSrc]=\"pdfUrl()!\"\n [externalWindow]=\"false\"\n [downloadFileName]=\"file().name\"\n [locale]=\"pdfConfig.locale!\"\n [showSpinner]=\"pdfConfig.showSpinner!\"\n [useOnlyCssZoom]=\"pdfConfig.useOnlyCssZoom!\"\n [diagnosticLogs]=\"pdfConfig.diagnosticLogs!\"\n [showOpenFile]=\"pdfConfig.showOpenFile!\"\n [showAnnotations]=\"pdfConfig.showAnnotations!\"\n [showDownload]=\"pdfConfig.showDownload!\"\n [showViewBookmark]=\"pdfConfig.showViewBookmark!\"\n [showPrint]=\"pdfConfig.showPrint!\"\n [showFullScreen]=\"pdfConfig.showFullScreen!\"\n [showFind]=\"pdfConfig.showFind!\"\n [downloadOnLoad]=\"pdfConfig.downloadOnLoad!\"\n [printOnLoad]=\"pdfConfig.printOnLoad!\"\n [rotateCW]=\"pdfConfig.rotateCW!\"\n [rotateCCW]=\"pdfConfig.rotateCCW!\"\n [showLastPageOnLoad]=\"pdfConfig.showLastPageOnLoad!\"\n [showToolbarLeft]=\"pdfConfig.showToolbarLeft!\"\n [showToolbarMiddle]=\"pdfConfig.showToolbarMiddle!\"\n [showToolbarRight]=\"pdfConfig.showToolbarRight!\"\n [showSecondaryToolbarToggle]=\"pdfConfig.showSecondaryToolbarToggle!\"\n [showSidebar]=\"pdfConfig.showSidebar!\"\n [showSidebarLeft]=\"pdfConfig.showSidebarLeft!\"\n [showSidebarRight]=\"pdfConfig.showSidebarRight!\"\n [toolbarDensity]=\"pdfConfig.toolbarDensity!\"\n [sidebarWidth]=\"pdfConfig.sidebarWidth\"\n [toolbarPosition]=\"pdfConfig.toolbarPosition!\"\n [sidebarPosition]=\"pdfConfig.sidebarPosition!\"\n [responsiveBreakpoint]=\"pdfConfig.responsiveBreakpoint\"\n [zoom]=\"pdfConfig.zoom!\"\n [rotation]=\"pdfConfig.rotation!\"\n [cursor]=\"pdfConfig.cursor!\"\n [scroll]=\"pdfConfig.scroll!\"\n [spread]=\"pdfConfig.spread!\"\n [pageMode]=\"pdfConfig.pageMode!\"\n [page]=\"pdfConfig.page!\"\n [iframeBorder]=\"pdfConfig.iframeBorder!\"\n [theme]=\"pdfConfig.theme!\"\n [primaryColor]=\"pdfConfig.primaryColor\"\n [backgroundColor]=\"pdfConfig.backgroundColor\"\n [pageBorderColor]=\"pdfConfig.pageBorderColor\"\n [pageSpacing]=\"pdfConfig.pageSpacing\"\n [toolbarColor]=\"pdfConfig.toolbarColor\"\n [textColor]=\"pdfConfig.textColor\"\n [borderRadius]=\"pdfConfig.borderRadius\"\n [customCSS]=\"pdfConfig.customCSS\"\n [cspNonce]=\"pdfConfig.cspNonce\"\n [iframeTitle]=\"pdfConfig.iframeTitle || ('i18n_z_ui_gallery_pdf_preview' | translate)\"\n [urlValidation]=\"pdfConfig.urlValidation!\"\n [controlVisibility]=\"pdfConfig.controlVisibility!\"\n [groupVisibility]=\"pdfConfig.groupVisibility!\"\n [autoActions]=\"pdfConfig.autoActions!\"\n [viewerConfig]=\"pdfConfig.viewerConfig!\"\n [themeConfig]=\"pdfConfig.themeConfig!\"\n [layoutConfig]=\"pdfConfig.layoutConfig!\"\n (onDocumentLoad)=\"onPdfLoad()\"\n (onDocumentError)=\"onMediaError()\" />\n </div>\n }\n </div>\n } @else if (isVideo()) {\n <div\n class=\"dark:border-border relative flex h-[60vh] w-[70vw] items-center justify-center rounded-lg border border-transparent\">\n @if (isLoading()) {\n <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (previewError()) {\n <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-8 shadow-2xl\">\n <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n </div>\n <span class=\"text-foreground text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n </span>\n </div>\n } @else {\n @if (mediaUrl()) {\n <z-media-player\n class=\"size-full max-w-full rounded-lg shadow-2xl transition-opacity duration-300\"\n [class.opacity-0]=\"isLoading()\"\n [class.opacity-100]=\"!isLoading()\"\n [zSrc]=\"mediaUrl()!\"\n [zPoster]=\"file().thumbnailUrl ?? ''\"\n (zLoaded)=\"onVideoLoad()\"\n (zError)=\"onMediaError()\" />\n }\n }\n </div>\n } @else if (isAudio()) {\n <div\n class=\"dark:border-border relative flex w-[min(90vw,42rem)] items-center justify-center overflow-hidden rounded-sm border border-transparent p-2 shadow-lg\">\n @if (isLoading()) {\n <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (previewError()) {\n <div class=\"bg-card flex size-full items-center justify-center rounded-lg p-4 shadow-2xl\">\n <span class=\"text-foreground text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n </span>\n </div>\n } @else if (mediaUrl()) {\n <z-audio-player\n class=\"block w-full transition-opacity duration-300\"\n [class.opacity-0]=\"isLoading()\"\n [class.opacity-100]=\"!isLoading()\"\n [zSrc]=\"mediaUrl()!\"\n [zTitle]=\"file().name\"\n (zLoaded)=\"onVideoLoad()\"\n (zError)=\"onMediaError()\" />\n }\n </div>\n } @else if (isWordFile() || isExcelFile() || isPowerpointFile()) {\n <div class=\"dark:border-border relative h-[75vh] w-[85vw] overflow-hidden rounded-lg border border-transparent\">\n @if (isLoading() || isConverting()) {\n <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (conversionError()) {\n <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n </div>\n <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n <span class=\"text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30\">\n <span class=\"text-red-700 dark:text-red-300\">{{ conversionError() }}</span>\n </span>\n </div>\n } @else if (officeSource()) {\n <z-gallery-office-preview\n class=\"absolute inset-0 rounded-lg shadow-2xl\"\n [zSource]=\"officeSource()!\"\n [zKind]=\"documentPreviewKind()\"\n (zLoaded)=\"onOfficeLoad()\"\n (zError)=\"onOfficeError($event)\" />\n }\n </div>\n } @else if (isTextFile()) {\n <div class=\"dark:border-border relative h-[75vh] w-[85vw] overflow-hidden rounded-lg border border-transparent\">\n @if (isLoading() || isConverting()) {\n <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (conversionError()) {\n <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n </div>\n <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n <span class=\"text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30\">\n <span class=\"text-red-700 dark:text-red-300\">{{ conversionError() }}</span>\n </span>\n </div>\n } @else if (textContent()) {\n @if (isCodeFile()) {\n <z-code\n class=\"absolute inset-0 overflow-hidden rounded-lg shadow-2xl\"\n [zCode]=\"textContent()\"\n [zLanguage]=\"codeLanguage()\"\n [zTitle]=\"file().name\" />\n } @else {\n <z-gallery-text-preview\n class=\"absolute inset-0 rounded-lg shadow-2xl\"\n [zContent]=\"textContent()\"\n [zLanguage]=\"fileExtension()\" />\n }\n }\n </div>\n } @else {\n <div\n class=\"bg-card dark:border-border flex flex-col items-center justify-center rounded-lg border border-transparent p-12 shadow-2xl\">\n <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n </div>\n <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n <span class=\"text-muted-foreground mb-4 text-sm\">{{ formattedSize() }}</span>\n <span class=\"text-muted-foreground rounded-md bg-amber-100 px-3 py-1.5 text-xs dark:bg-amber-900/30\">\n <i\n z-icon\n zType=\"lucideInfo\"\n zSize=\"14\"\n class=\"mr-1 inline-block align-middle text-amber-600 dark:text-amber-400\"></i>\n <span class=\"align-middle text-amber-700 dark:text-amber-300\">\n {{ 'i18n_z_ui_gallery_preview_not_supported' | translate }}\n </span>\n </span>\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".z-gallery-preview-backdrop{background-color:#00000047;backdrop-filter:blur(3px);animation:z-gallery-backdrop-enter .15s ease-out forwards}.z-gallery-preview-backdrop.z-backdrop-leaving{animation:z-gallery-backdrop-exit .12s ease-in forwards}@keyframes z-gallery-backdrop-enter{0%{opacity:0}to{opacity:1}}@keyframes z-gallery-backdrop-exit{0%{opacity:1}to{opacity:0}}.z-gallery-pdf-frame *{border-color:#606060!important;outline-color:#606060!important}.z-gallery-pdf-frame{background:#606060}.z-gallery-preview .z-code ::selection{background:var(--primary);color:var(--primary-foreground)}.z-gallery-pdf-frame ng2-pdfjs-viewer,.z-gallery-pdf-frame ng2-pdfjs-viewer iframe{display:block;width:100%;height:100%;border:0!important;outline:0!important;box-shadow:none!important;background:#606060}\n"], dependencies: [{ kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZCodeComponent, selector: "z-code", inputs: ["class", "zTitle", "zLanguage", "zCode", "zTheme", "zShowLineNumbers"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZMediaPlayerComponent, selector: "z-media-player", inputs: ["class", "zSrc", "zSources", "zPoster", "zAutoplay", "zLoop", "zMuted", "zVolume", "zSubtitles", "zThumbnailsVtt", "zControls"], outputs: ["zLoaded", "zError", "zPlay", "zTimeUpdate", "zVolumeChange", "zFullscreenChange", "zTheaterModeChange", "zMiniplayerChange", "zQualityChange"] }, { kind: "component", type: ZAudioPlayerComponent, selector: "z-audio-player", inputs: ["zSrc", "zTitle", "zTags", "zDownload"], outputs: ["zLoaded", "zError", "zPlay"] }, { kind: "component", type: ZGalleryOfficePreviewComponent, selector: "z-gallery-office-preview", inputs: ["zSource", "zKind"], outputs: ["zLoaded", "zError"] }, { kind: "component", type: ZGalleryTextPreviewComponent, selector: "z-gallery-text-preview", inputs: ["zContent", "zLanguage"] }, { kind: "ngmodule", type: PdfJsViewerModule }, { kind: "component", type: i1.PdfJsViewerComponent, selector: "ng2-pdfjs-viewer", inputs: ["viewerId", "viewerFolder", "externalWindow", "target", "showSpinner", "downloadFileName", "locale", "useOnlyCssZoom", "externalLinkTarget", "rememberLastView", "annotationEditor", "highlightEditorColors", "enableSignatureEditor", "signatureStorage", "pageColors", "pdfJsOptions", "enableCommentEditor", "enablePageEditing", "showToolbar", "chromeless", "customToolbarTpl", "customSidebarTpl", "aiAssistantConfig", "pageOverlayTpl", "httpHeaders", "withCredentials", "formData", "contentProtection", "iframeSandbox", "diagnosticLogs", "showOpenFile", "showAnnotations", "showDownload", "showViewBookmark", "showPrint", "showFullScreen", "showFind", "downloadOnLoad", "printOnLoad", "rotateCW", "rotateCCW", "showLastPageOnLoad", "namedDest", "errorOverride", "errorAppend", "errorMessage", "urlValidation", "customSecurityTpl", "theme", "primaryColor", "backgroundColor", "pageBorderColor", "pageSpacing", "toolbarColor", "textColor", "borderRadius", "customCSS", "cspNonce", "iframeTitle", "customSpinnerTpl", "spinnerClass", "customErrorTpl", "errorClass", "showToolbarLeft", "showToolbarMiddle", "showToolbarRight", "showSecondaryToolbarToggle", "showSidebar", "showSidebarLeft", "showSidebarRight", "toolbarDensity", "sidebarWidth", "toolbarPosition", "sidebarPosition", "responsiveBreakpoint", "controlVisibility", "autoActions", "errorHandling", "viewerConfig", "themeConfig", "groupVisibility", "layoutConfig", "startDownload", "startPrint", "openFile", "download", "print", "fullScreen", "find", "viewBookmark", "lastPage", "externalWindowOptions", "iframeBorder", "zoom", "rotation", "cursor", "scroll", "spread", "pageMode", "page", "pdfSrc"], outputs: ["onBeforePrint", "onAfterPrint", "onDocumentLoad", "onPageChange", "onScaleChange", "onRotationChange", "onDocumentError", "onDocumentInit", "onPagesInit", "onPresentationModeChanged", "onOpenFile", "onFind", "onUpdateFindMatchesCount", "onMetadataLoaded", "onOutlineLoaded", "onPageRendered", "onAnnotationLayerRendered", "onBookmarkClick", "onIdle", "onPasswordPrompt", "onAnnotationEditorStateChange", "onPagesEdited", "onReadAloudStateChange", "onSidebarViewChanged", "onLayersChanged", "onNamedAction", "onDocumentProperties", "annotationEditorChange", "onProgress", "formDataChange", "zoomChange", "cursorChange", "scrollChange", "spreadChange", "pageModeChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
893
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZGalleryPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
894
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZGalleryPreviewComponent, isStandalone: true, selector: "z-gallery-preview", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, zShowRemove: { classPropertyName: "zShowRemove", publicName: "zShowRemove", isSignal: true, isRequired: false, transformFunction: null }, zPdfViewerConfig: { classPropertyName: "zPdfViewerConfig", publicName: "zPdfViewerConfig", isSignal: true, isRequired: false, transformFunction: null }, zTrustedResourceOrigins: { classPropertyName: "zTrustedResourceOrigins", publicName: "zTrustedResourceOrigins", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnClose: "zOnClose", zOnDownload: "zOnDownload", zOnNavigate: "zOnNavigate", zOnRemove: "zOnRemove" }, host: { listeners: { "document:keydown": "onKeyDown($event)" }, classAttribute: "z-gallery-preview z-[9999]" }, viewQueries: [{ propertyName: "pdfViewer", first: true, predicate: ["pdfViewer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"animate-in fade-in fixed inset-0 z-50 flex items-center justify-center duration-200\"\n (click)=\"onBackdropClick($event)\">\n <button\n z-button\n zType=\"ghost\"\n zShape=\"circle\"\n class=\"absolute top-3 right-3 z-20 text-white hover:bg-white/20 lg:top-4 lg:right-4\"\n (click)=\"close()\">\n <i z-icon zType=\"lucideX\" zSize=\"24\"></i>\n </button>\n\n @if (hasPrev()) {\n <button\n z-button\n zType=\"ghost\"\n zShape=\"circle\"\n class=\"absolute left-4 z-10 text-white hover:bg-white/20\"\n (click)=\"navigate(-1)\">\n <i z-icon zType=\"lucideChevronLeft\" zSize=\"32\"></i>\n </button>\n }\n\n @if (hasNext()) {\n <button\n z-button\n zType=\"ghost\"\n zShape=\"circle\"\n class=\"absolute right-4 z-10 text-white hover:bg-white/20\"\n (click)=\"navigate(1)\">\n <i z-icon zType=\"lucideChevronRight\" zSize=\"32\"></i>\n </button>\n }\n\n <div class=\"flex h-full w-full flex-col items-center\" (click)=\"$event.stopPropagation()\">\n <div\n class=\"dark:!border-border absolute top-3 right-14 left-3 z-10 flex min-w-0 items-center justify-between gap-2 rounded-md border !border-transparent bg-black/70 px-2.5 py-1.5 text-xs text-white shadow-lg backdrop-blur-sm lg:top-4 lg:right-auto lg:left-1/2 lg:max-w-[calc(100vw-10rem)] lg:-translate-x-1/2 lg:justify-start lg:bg-black/60 lg:px-4 lg:py-2 lg:text-sm dark:border\">\n <div class=\"flex min-w-0 items-baseline gap-1.5\">\n <span class=\"min-w-0 truncate font-medium lg:max-w-[12.5rem]\">{{ file().name }}</span>\n <span class=\"hidden shrink-0 text-white/70 lg:inline\">({{ formattedSize() }})</span>\n </div>\n\n @if (files().length > 1) {\n <span class=\"hidden shrink-0 text-white/70 md:inline\">{{ currentIndex() + 1 }} / {{ files().length }}</span>\n }\n\n <div class=\"ml-1 flex shrink-0 items-center gap-0.5\">\n @if (isImageFile()) {\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n zShape=\"circle\"\n class=\"text-white hover:bg-white/20\"\n z-tooltip\n [zShowDelay]=\"300\"\n [zContent]=\"'i18n_z_ui_gallery_rotate_left' | translate\"\n (click)=\"rotateLeft()\">\n <i z-icon zType=\"lucideUndo\" zSize=\"14\"></i>\n </button>\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n zShape=\"circle\"\n class=\"text-white hover:bg-white/20\"\n z-tooltip\n [zShowDelay]=\"300\"\n [zContent]=\"'i18n_z_ui_gallery_rotate_right' | translate\"\n (click)=\"rotateRight()\">\n <i z-icon zType=\"lucideRedo\" zSize=\"14\"></i>\n </button>\n }\n\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n zShape=\"circle\"\n class=\"text-white hover:bg-white/20\"\n z-tooltip\n [zShowDelay]=\"300\"\n [zContent]=\"'i18n_z_ui_gallery_download' | translate\"\n (click)=\"download()\">\n <i z-icon zType=\"lucideDownload\" zSize=\"14\"></i>\n </button>\n\n @if (zShowRemove()) {\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n zShape=\"circle\"\n class=\"text-white hover:bg-white/20\"\n z-tooltip\n [zShowDelay]=\"300\"\n [zContent]=\"'i18n_z_ui_gallery_delete' | translate\"\n (click)=\"remove()\">\n <i z-icon zType=\"lucideTrash2\" zSize=\"14\"></i>\n </button>\n }\n </div>\n </div>\n\n <div class=\"relative flex flex-1 items-center justify-center pt-16\">\n @if (isImageFile()) {\n <div class=\"relative flex h-[60vh] w-[70vw] items-center justify-center rounded-lg\">\n @if (isLoading()) {\n <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (previewError()) {\n <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-8 shadow-2xl\">\n <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n </div>\n <span class=\"text-foreground text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n </span>\n </div>\n } @else {\n <img\n [src]=\"file().url || file().thumbnailUrl\"\n [alt]=\"file().name\"\n class=\"max-h-full max-w-full rounded-lg object-contain shadow-2xl transition-opacity duration-300\"\n [class.opacity-0]=\"isLoading()\"\n [class.opacity-100]=\"!isLoading()\"\n [class.cursor-zoom-in]=\"!zoomed()\"\n [class.cursor-zoom-out]=\"zoomed()\"\n [style.transform]=\"imageTransform()\"\n (load)=\"onImageLoad()\"\n (error)=\"onMediaError()\"\n (click)=\"toggleZoom()\" />\n }\n </div>\n } @else if (isPdf() && pdfUrl()) {\n <div\n class=\"z-gallery-pdf-frame dark:border-border relative h-[75vh] w-[85vw] max-w-[96vw] overflow-hidden rounded-sm border border-transparent shadow-xs\">\n @if (isLoading()) {\n <z-skeleton class=\"absolute inset-0 rounded-sm\" />\n <div\n class=\"text-muted-foreground absolute inset-0 z-10 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (previewError()) {\n <div class=\"bg-card flex size-full flex-col items-center justify-center p-8\">\n <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n </div>\n <span class=\"text-foreground text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n </span>\n </div>\n } @else {\n <div\n class=\"relative size-full bg-white transition-opacity duration-300\"\n [class.opacity-0]=\"isLoading()\"\n [class.opacity-100]=\"!isLoading()\">\n @let pdfConfig = pdfViewerConfig();\n <ng2-pdfjs-viewer\n #pdfViewer\n class=\"block size-full\"\n [viewerFolder]=\"pdfConfig.viewerFolder!\"\n [viewerId]=\"pdfViewerId()\"\n [pdfSrc]=\"pdfUrl()!\"\n [externalWindow]=\"false\"\n [downloadFileName]=\"file().name\"\n [locale]=\"pdfConfig.locale!\"\n [showSpinner]=\"pdfConfig.showSpinner!\"\n [useOnlyCssZoom]=\"pdfConfig.useOnlyCssZoom!\"\n [diagnosticLogs]=\"pdfConfig.diagnosticLogs!\"\n [showOpenFile]=\"pdfConfig.showOpenFile!\"\n [showAnnotations]=\"pdfConfig.showAnnotations!\"\n [showDownload]=\"pdfConfig.showDownload!\"\n [showViewBookmark]=\"pdfConfig.showViewBookmark!\"\n [showPrint]=\"pdfConfig.showPrint!\"\n [showFullScreen]=\"pdfConfig.showFullScreen!\"\n [showFind]=\"pdfConfig.showFind!\"\n [downloadOnLoad]=\"pdfConfig.downloadOnLoad!\"\n [printOnLoad]=\"pdfConfig.printOnLoad!\"\n [rotateCW]=\"pdfConfig.rotateCW!\"\n [rotateCCW]=\"pdfConfig.rotateCCW!\"\n [showLastPageOnLoad]=\"pdfConfig.showLastPageOnLoad!\"\n [showToolbarLeft]=\"pdfConfig.showToolbarLeft!\"\n [showToolbarMiddle]=\"pdfConfig.showToolbarMiddle!\"\n [showToolbarRight]=\"pdfConfig.showToolbarRight!\"\n [showSecondaryToolbarToggle]=\"pdfConfig.showSecondaryToolbarToggle!\"\n [showSidebar]=\"pdfConfig.showSidebar!\"\n [showSidebarLeft]=\"pdfConfig.showSidebarLeft!\"\n [showSidebarRight]=\"pdfConfig.showSidebarRight!\"\n [toolbarDensity]=\"pdfConfig.toolbarDensity!\"\n [sidebarWidth]=\"pdfConfig.sidebarWidth\"\n [toolbarPosition]=\"pdfConfig.toolbarPosition!\"\n [sidebarPosition]=\"pdfConfig.sidebarPosition!\"\n [responsiveBreakpoint]=\"pdfConfig.responsiveBreakpoint\"\n [zoom]=\"pdfConfig.zoom!\"\n [rotation]=\"pdfConfig.rotation!\"\n [cursor]=\"pdfConfig.cursor!\"\n [scroll]=\"pdfConfig.scroll!\"\n [spread]=\"pdfConfig.spread!\"\n [pageMode]=\"pdfConfig.pageMode!\"\n [page]=\"pdfConfig.page!\"\n [iframeBorder]=\"pdfConfig.iframeBorder!\"\n [theme]=\"pdfConfig.theme!\"\n [primaryColor]=\"pdfConfig.primaryColor\"\n [backgroundColor]=\"pdfConfig.backgroundColor\"\n [pageBorderColor]=\"pdfConfig.pageBorderColor\"\n [pageSpacing]=\"pdfConfig.pageSpacing\"\n [toolbarColor]=\"pdfConfig.toolbarColor\"\n [textColor]=\"pdfConfig.textColor\"\n [borderRadius]=\"pdfConfig.borderRadius\"\n [customCSS]=\"pdfConfig.customCSS\"\n [cspNonce]=\"pdfConfig.cspNonce\"\n [iframeTitle]=\"pdfConfig.iframeTitle || ('i18n_z_ui_gallery_pdf_preview' | translate)\"\n [urlValidation]=\"pdfConfig.urlValidation!\"\n [controlVisibility]=\"pdfConfig.controlVisibility!\"\n [groupVisibility]=\"pdfConfig.groupVisibility!\"\n [autoActions]=\"pdfConfig.autoActions!\"\n [viewerConfig]=\"pdfConfig.viewerConfig!\"\n [themeConfig]=\"pdfConfig.themeConfig!\"\n [layoutConfig]=\"pdfConfig.layoutConfig!\"\n (onDocumentLoad)=\"onPdfLoad()\"\n (onDocumentError)=\"onMediaError()\" />\n </div>\n }\n </div>\n } @else if (isVideo()) {\n <div\n class=\"dark:border-border relative flex h-[60vh] w-[70vw] items-center justify-center rounded-lg border border-transparent\">\n @if (isLoading()) {\n <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (previewError()) {\n <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-8 shadow-2xl\">\n <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n </div>\n <span class=\"text-foreground text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n </span>\n </div>\n } @else {\n @if (mediaUrl()) {\n <z-media-player\n class=\"size-full max-w-full rounded-lg shadow-2xl transition-opacity duration-300\"\n [class.opacity-0]=\"isLoading()\"\n [class.opacity-100]=\"!isLoading()\"\n [zSources]=\"[{ kind: 'video', src: mediaUrl()!, label: 'Default', default: true }]\"\n [zConfig]=\"{ poster: file().thumbnailUrl ?? '' }\"\n [zDefaultLayoutConfig]=\"{ smallWhen: false }\"\n (zStateChange)=\"onVideoStateChange($event)\"\n (zError)=\"onVideoError($event)\" />\n }\n }\n </div>\n } @else if (isAudio()) {\n <div\n class=\"dark:border-border relative flex w-[min(90vw,42rem)] items-center justify-center overflow-hidden rounded-sm border border-transparent p-2 shadow-lg\">\n @if (isLoading()) {\n <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (previewError()) {\n <div class=\"bg-card flex size-full items-center justify-center rounded-lg p-4 shadow-2xl\">\n <span class=\"text-foreground text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n </span>\n </div>\n } @else if (mediaUrl()) {\n <z-audio-player\n class=\"block w-full transition-opacity duration-300\"\n [class.opacity-0]=\"isLoading()\"\n [class.opacity-100]=\"!isLoading()\"\n [zSrc]=\"mediaUrl()!\"\n [zTitle]=\"file().name\"\n (zLoaded)=\"onVideoLoad()\"\n (zError)=\"onMediaError()\" />\n }\n </div>\n } @else if (isWordFile() || isExcelFile() || isPowerpointFile()) {\n <div class=\"dark:border-border relative h-[75vh] w-[85vw] overflow-hidden rounded-lg border border-transparent\">\n @if (isLoading() || isConverting()) {\n <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (conversionError()) {\n <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n </div>\n <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n <span class=\"text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30\">\n <span class=\"text-red-700 dark:text-red-300\">{{ conversionError() }}</span>\n </span>\n </div>\n } @else if (officeSource()) {\n <z-gallery-office-preview\n class=\"absolute inset-0 rounded-lg shadow-2xl\"\n [zSource]=\"officeSource()!\"\n [zKind]=\"documentPreviewKind()\"\n (zLoaded)=\"onOfficeLoad()\"\n (zError)=\"onOfficeError($event)\" />\n }\n </div>\n } @else if (isTextFile()) {\n <div class=\"dark:border-border relative h-[75vh] w-[85vw] overflow-hidden rounded-lg border border-transparent\">\n @if (isLoading() || isConverting()) {\n <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (conversionError()) {\n <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n </div>\n <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n <span class=\"text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30\">\n <span class=\"text-red-700 dark:text-red-300\">{{ conversionError() }}</span>\n </span>\n </div>\n } @else if (textContent()) {\n @if (isCodeFile()) {\n <z-code\n class=\"absolute inset-0 overflow-hidden rounded-lg shadow-2xl\"\n [zCode]=\"textContent()\"\n [zLanguage]=\"codeLanguage()\"\n [zTitle]=\"file().name\" />\n } @else {\n <z-gallery-text-preview\n class=\"absolute inset-0 rounded-lg shadow-2xl\"\n [zContent]=\"textContent()\"\n [zLanguage]=\"fileExtension()\" />\n }\n }\n </div>\n } @else {\n <div\n class=\"bg-card dark:border-border flex flex-col items-center justify-center rounded-lg border border-transparent p-12 shadow-2xl\">\n <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n </div>\n <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n <span class=\"text-muted-foreground mb-4 text-sm\">{{ formattedSize() }}</span>\n <span class=\"text-muted-foreground rounded-md bg-amber-100 px-3 py-1.5 text-xs dark:bg-amber-900/30\">\n <i\n z-icon\n zType=\"lucideInfo\"\n zSize=\"14\"\n class=\"mr-1 inline-block align-middle text-amber-600 dark:text-amber-400\"></i>\n <span class=\"align-middle text-amber-700 dark:text-amber-300\">\n {{ 'i18n_z_ui_gallery_preview_not_supported' | translate }}\n </span>\n </span>\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".z-gallery-preview-backdrop{background-color:#00000047;backdrop-filter:blur(3px);animation:z-gallery-backdrop-enter .15s ease-out forwards}.z-gallery-preview-backdrop.z-backdrop-leaving{animation:z-gallery-backdrop-exit .12s ease-in forwards}@keyframes z-gallery-backdrop-enter{0%{opacity:0}to{opacity:1}}@keyframes z-gallery-backdrop-exit{0%{opacity:1}to{opacity:0}}.z-gallery-pdf-frame *{border-color:#606060!important;outline-color:#606060!important}.z-gallery-pdf-frame{background:#606060}.z-gallery-preview .z-code ::selection{background:var(--primary);color:var(--primary-foreground)}.z-gallery-pdf-frame ng2-pdfjs-viewer,.z-gallery-pdf-frame ng2-pdfjs-viewer iframe{display:block;width:100%;height:100%;border:0!important;outline:0!important;box-shadow:none!important;background:#606060}\n"], dependencies: [{ kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZCodeComponent, selector: "z-code", inputs: ["class", "zTitle", "zLanguage", "zCode", "zTheme", "zShowLineNumbers", "zHighlightLines", "zScrollable", "zMaxHeight"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZMediaPlayerComponent, selector: "z-media-player", inputs: ["class", "zSources", "zConfig", "zSkin", "zDefaultLayoutConfig", "zPlyrLayoutConfig"], outputs: ["zStateChange", "zError"] }, { kind: "component", type: ZAudioPlayerComponent, selector: "z-audio-player", inputs: ["zSrc", "zTitle", "zTags", "zDownload"], outputs: ["zLoaded", "zError", "zPlay"] }, { kind: "component", type: ZGalleryOfficePreviewComponent, selector: "z-gallery-office-preview", inputs: ["zSource", "zKind"], outputs: ["zLoaded", "zError"] }, { kind: "component", type: ZGalleryTextPreviewComponent, selector: "z-gallery-text-preview", inputs: ["zContent", "zLanguage"] }, { kind: "ngmodule", type: PdfJsViewerModule }, { kind: "component", type: i1.PdfJsViewerComponent, selector: "ng2-pdfjs-viewer", inputs: ["viewerId", "viewerFolder", "externalWindow", "target", "showSpinner", "downloadFileName", "locale", "useOnlyCssZoom", "externalLinkTarget", "rememberLastView", "annotationEditor", "highlightEditorColors", "enableSignatureEditor", "signatureStorage", "pageColors", "pdfJsOptions", "enableCommentEditor", "enablePageEditing", "showToolbar", "chromeless", "customToolbarTpl", "customSidebarTpl", "aiAssistantConfig", "pageOverlayTpl", "httpHeaders", "withCredentials", "formData", "contentProtection", "iframeSandbox", "diagnosticLogs", "showOpenFile", "showAnnotations", "showDownload", "showViewBookmark", "showPrint", "showFullScreen", "showFind", "downloadOnLoad", "printOnLoad", "rotateCW", "rotateCCW", "showLastPageOnLoad", "namedDest", "errorOverride", "errorAppend", "errorMessage", "urlValidation", "customSecurityTpl", "theme", "primaryColor", "backgroundColor", "pageBorderColor", "pageSpacing", "toolbarColor", "textColor", "borderRadius", "customCSS", "cspNonce", "iframeTitle", "customSpinnerTpl", "spinnerClass", "customErrorTpl", "errorClass", "showToolbarLeft", "showToolbarMiddle", "showToolbarRight", "showSecondaryToolbarToggle", "showSidebar", "showSidebarLeft", "showSidebarRight", "toolbarDensity", "sidebarWidth", "toolbarPosition", "sidebarPosition", "responsiveBreakpoint", "controlVisibility", "autoActions", "errorHandling", "viewerConfig", "themeConfig", "groupVisibility", "layoutConfig", "startDownload", "startPrint", "openFile", "download", "print", "fullScreen", "find", "viewBookmark", "lastPage", "externalWindowOptions", "iframeBorder", "zoom", "rotation", "cursor", "scroll", "spread", "pageMode", "page", "pdfSrc"], outputs: ["onBeforePrint", "onAfterPrint", "onDocumentLoad", "onPageChange", "onScaleChange", "onRotationChange", "onDocumentError", "onDocumentInit", "onPagesInit", "onPresentationModeChanged", "onOpenFile", "onFind", "onUpdateFindMatchesCount", "onMetadataLoaded", "onOutlineLoaded", "onPageRendered", "onAnnotationLayerRendered", "onBookmarkClick", "onIdle", "onPasswordPrompt", "onAnnotationEditorStateChange", "onPagesEdited", "onReadAloudStateChange", "onSidebarViewChanged", "onLayersChanged", "onNamedAction", "onDocumentProperties", "annotationEditorChange", "onProgress", "formDataChange", "zoomChange", "cursorChange", "scrollChange", "spreadChange", "pageModeChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
887
895
|
}
|
|
888
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
896
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZGalleryPreviewComponent, decorators: [{
|
|
889
897
|
type: Component,
|
|
890
898
|
args: [{ selector: 'z-gallery-preview', imports: [
|
|
891
899
|
ZButtonComponent,
|
|
@@ -902,7 +910,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
902
910
|
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
903
911
|
class: 'z-gallery-preview z-[9999]',
|
|
904
912
|
'(document:keydown)': 'onKeyDown($event)',
|
|
905
|
-
}, template: "<div\n class=\"animate-in fade-in fixed inset-0 z-50 flex items-center justify-center duration-200\"\n (click)=\"onBackdropClick($event)\">\n <button\n z-button\n zType=\"ghost\"\n zShape=\"circle\"\n class=\"absolute top-3 right-3 z-20 text-white hover:bg-white/20 lg:top-4 lg:right-4\"\n (click)=\"close()\">\n <i z-icon zType=\"lucideX\" zSize=\"24\"></i>\n </button>\n\n @if (hasPrev()) {\n <button\n z-button\n zType=\"ghost\"\n zShape=\"circle\"\n class=\"absolute left-4 z-10 text-white hover:bg-white/20\"\n (click)=\"navigate(-1)\">\n <i z-icon zType=\"lucideChevronLeft\" zSize=\"32\"></i>\n </button>\n }\n\n @if (hasNext()) {\n <button\n z-button\n zType=\"ghost\"\n zShape=\"circle\"\n class=\"absolute right-4 z-10 text-white hover:bg-white/20\"\n (click)=\"navigate(1)\">\n <i z-icon zType=\"lucideChevronRight\" zSize=\"32\"></i>\n </button>\n }\n\n <div class=\"flex h-full w-full flex-col items-center\" (click)=\"$event.stopPropagation()\">\n <div\n class=\"dark:!border-border absolute top-3 right-14 left-3 z-10 flex min-w-0 items-center justify-between gap-2 rounded-[0.375rem] border !border-transparent bg-black/70 px-2.5 py-1.5 text-xs text-white shadow-lg backdrop-blur-sm lg:top-4 lg:right-auto lg:left-1/2 lg:max-w-[calc(100vw-10rem)] lg:-translate-x-1/2 lg:justify-start lg:bg-black/60 lg:px-4 lg:py-2 lg:text-sm dark:border\">\n <div class=\"flex min-w-0 items-baseline gap-1.5\">\n <span class=\"min-w-0 truncate font-medium lg:max-w-[12.5rem]\">{{ file().name }}</span>\n <span class=\"hidden shrink-0 text-white/70 lg:inline\">({{ formattedSize() }})</span>\n </div>\n\n @if (files().length > 1) {\n <span class=\"hidden shrink-0 text-white/70 md:inline\">{{ currentIndex() + 1 }} / {{ files().length }}</span>\n }\n\n <div class=\"ml-1 flex shrink-0 items-center gap-0.5\">\n @if (isImageFile()) {\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n zShape=\"circle\"\n class=\"text-white hover:bg-white/20\"\n z-tooltip\n [zShowDelay]=\"300\"\n [zContent]=\"'i18n_z_ui_gallery_rotate_left' | translate\"\n (click)=\"rotateLeft()\">\n <i z-icon zType=\"lucideUndo\" zSize=\"14\"></i>\n </button>\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n zShape=\"circle\"\n class=\"text-white hover:bg-white/20\"\n z-tooltip\n [zShowDelay]=\"300\"\n [zContent]=\"'i18n_z_ui_gallery_rotate_right' | translate\"\n (click)=\"rotateRight()\">\n <i z-icon zType=\"lucideRedo\" zSize=\"14\"></i>\n </button>\n }\n\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n zShape=\"circle\"\n class=\"text-white hover:bg-white/20\"\n z-tooltip\n [zShowDelay]=\"300\"\n [zContent]=\"'i18n_z_ui_gallery_download' | translate\"\n (click)=\"download()\">\n <i z-icon zType=\"lucideDownload\" zSize=\"14\"></i>\n </button>\n\n @if (zShowRemove()) {\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n zShape=\"circle\"\n class=\"text-white hover:bg-white/20\"\n z-tooltip\n [zShowDelay]=\"300\"\n [zContent]=\"'i18n_z_ui_gallery_delete' | translate\"\n (click)=\"remove()\">\n <i z-icon zType=\"lucideTrash2\" zSize=\"14\"></i>\n </button>\n }\n </div>\n </div>\n\n <div class=\"relative flex flex-1 items-center justify-center pt-16\">\n @if (isImageFile()) {\n <div class=\"relative flex h-[60vh] w-[70vw] items-center justify-center rounded-lg\">\n @if (isLoading()) {\n <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (previewError()) {\n <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-8 shadow-2xl\">\n <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n </div>\n <span class=\"text-foreground text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n </span>\n </div>\n } @else {\n <img\n [src]=\"file().url || file().thumbnailUrl\"\n [alt]=\"file().name\"\n class=\"max-h-full max-w-full rounded-lg object-contain shadow-2xl transition-opacity duration-300\"\n [class.opacity-0]=\"isLoading()\"\n [class.opacity-100]=\"!isLoading()\"\n [class.cursor-zoom-in]=\"!zoomed()\"\n [class.cursor-zoom-out]=\"zoomed()\"\n [style.transform]=\"imageTransform()\"\n (load)=\"onImageLoad()\"\n (error)=\"onMediaError()\"\n (click)=\"toggleZoom()\" />\n }\n </div>\n } @else if (isPdf() && pdfUrl()) {\n <div\n class=\"z-gallery-pdf-frame dark:border-border relative h-[75vh] w-[85vw] max-w-[96vw] overflow-hidden rounded-sm border border-transparent shadow-xs\">\n @if (isLoading()) {\n <z-skeleton class=\"absolute inset-0 rounded-sm\" />\n <div\n class=\"text-muted-foreground absolute inset-0 z-10 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (previewError()) {\n <div class=\"bg-card flex size-full flex-col items-center justify-center p-8\">\n <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n </div>\n <span class=\"text-foreground text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n </span>\n </div>\n } @else {\n <div\n class=\"relative size-full bg-white transition-opacity duration-300\"\n [class.opacity-0]=\"isLoading()\"\n [class.opacity-100]=\"!isLoading()\">\n @let pdfConfig = pdfViewerConfig();\n <ng2-pdfjs-viewer\n #pdfViewer\n class=\"block size-full\"\n [viewerFolder]=\"pdfConfig.viewerFolder!\"\n [viewerId]=\"pdfViewerId()\"\n [pdfSrc]=\"pdfUrl()!\"\n [externalWindow]=\"false\"\n [downloadFileName]=\"file().name\"\n [locale]=\"pdfConfig.locale!\"\n [showSpinner]=\"pdfConfig.showSpinner!\"\n [useOnlyCssZoom]=\"pdfConfig.useOnlyCssZoom!\"\n [diagnosticLogs]=\"pdfConfig.diagnosticLogs!\"\n [showOpenFile]=\"pdfConfig.showOpenFile!\"\n [showAnnotations]=\"pdfConfig.showAnnotations!\"\n [showDownload]=\"pdfConfig.showDownload!\"\n [showViewBookmark]=\"pdfConfig.showViewBookmark!\"\n [showPrint]=\"pdfConfig.showPrint!\"\n [showFullScreen]=\"pdfConfig.showFullScreen!\"\n [showFind]=\"pdfConfig.showFind!\"\n [downloadOnLoad]=\"pdfConfig.downloadOnLoad!\"\n [printOnLoad]=\"pdfConfig.printOnLoad!\"\n [rotateCW]=\"pdfConfig.rotateCW!\"\n [rotateCCW]=\"pdfConfig.rotateCCW!\"\n [showLastPageOnLoad]=\"pdfConfig.showLastPageOnLoad!\"\n [showToolbarLeft]=\"pdfConfig.showToolbarLeft!\"\n [showToolbarMiddle]=\"pdfConfig.showToolbarMiddle!\"\n [showToolbarRight]=\"pdfConfig.showToolbarRight!\"\n [showSecondaryToolbarToggle]=\"pdfConfig.showSecondaryToolbarToggle!\"\n [showSidebar]=\"pdfConfig.showSidebar!\"\n [showSidebarLeft]=\"pdfConfig.showSidebarLeft!\"\n [showSidebarRight]=\"pdfConfig.showSidebarRight!\"\n [toolbarDensity]=\"pdfConfig.toolbarDensity!\"\n [sidebarWidth]=\"pdfConfig.sidebarWidth\"\n [toolbarPosition]=\"pdfConfig.toolbarPosition!\"\n [sidebarPosition]=\"pdfConfig.sidebarPosition!\"\n [responsiveBreakpoint]=\"pdfConfig.responsiveBreakpoint\"\n [zoom]=\"pdfConfig.zoom!\"\n [rotation]=\"pdfConfig.rotation!\"\n [cursor]=\"pdfConfig.cursor!\"\n [scroll]=\"pdfConfig.scroll!\"\n [spread]=\"pdfConfig.spread!\"\n [pageMode]=\"pdfConfig.pageMode!\"\n [page]=\"pdfConfig.page!\"\n [iframeBorder]=\"pdfConfig.iframeBorder!\"\n [theme]=\"pdfConfig.theme!\"\n [primaryColor]=\"pdfConfig.primaryColor\"\n [backgroundColor]=\"pdfConfig.backgroundColor\"\n [pageBorderColor]=\"pdfConfig.pageBorderColor\"\n [pageSpacing]=\"pdfConfig.pageSpacing\"\n [toolbarColor]=\"pdfConfig.toolbarColor\"\n [textColor]=\"pdfConfig.textColor\"\n [borderRadius]=\"pdfConfig.borderRadius\"\n [customCSS]=\"pdfConfig.customCSS\"\n [cspNonce]=\"pdfConfig.cspNonce\"\n [iframeTitle]=\"pdfConfig.iframeTitle || ('i18n_z_ui_gallery_pdf_preview' | translate)\"\n [urlValidation]=\"pdfConfig.urlValidation!\"\n [controlVisibility]=\"pdfConfig.controlVisibility!\"\n [groupVisibility]=\"pdfConfig.groupVisibility!\"\n [autoActions]=\"pdfConfig.autoActions!\"\n [viewerConfig]=\"pdfConfig.viewerConfig!\"\n [themeConfig]=\"pdfConfig.themeConfig!\"\n [layoutConfig]=\"pdfConfig.layoutConfig!\"\n (onDocumentLoad)=\"onPdfLoad()\"\n (onDocumentError)=\"onMediaError()\" />\n </div>\n }\n </div>\n } @else if (isVideo()) {\n <div\n class=\"dark:border-border relative flex h-[60vh] w-[70vw] items-center justify-center rounded-lg border border-transparent\">\n @if (isLoading()) {\n <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (previewError()) {\n <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-8 shadow-2xl\">\n <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n </div>\n <span class=\"text-foreground text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n </span>\n </div>\n } @else {\n @if (mediaUrl()) {\n <z-media-player\n class=\"size-full max-w-full rounded-lg shadow-2xl transition-opacity duration-300\"\n [class.opacity-0]=\"isLoading()\"\n [class.opacity-100]=\"!isLoading()\"\n [zSrc]=\"mediaUrl()!\"\n [zPoster]=\"file().thumbnailUrl ?? ''\"\n (zLoaded)=\"onVideoLoad()\"\n (zError)=\"onMediaError()\" />\n }\n }\n </div>\n } @else if (isAudio()) {\n <div\n class=\"dark:border-border relative flex w-[min(90vw,42rem)] items-center justify-center overflow-hidden rounded-sm border border-transparent p-2 shadow-lg\">\n @if (isLoading()) {\n <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (previewError()) {\n <div class=\"bg-card flex size-full items-center justify-center rounded-lg p-4 shadow-2xl\">\n <span class=\"text-foreground text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n </span>\n </div>\n } @else if (mediaUrl()) {\n <z-audio-player\n class=\"block w-full transition-opacity duration-300\"\n [class.opacity-0]=\"isLoading()\"\n [class.opacity-100]=\"!isLoading()\"\n [zSrc]=\"mediaUrl()!\"\n [zTitle]=\"file().name\"\n (zLoaded)=\"onVideoLoad()\"\n (zError)=\"onMediaError()\" />\n }\n </div>\n } @else if (isWordFile() || isExcelFile() || isPowerpointFile()) {\n <div class=\"dark:border-border relative h-[75vh] w-[85vw] overflow-hidden rounded-lg border border-transparent\">\n @if (isLoading() || isConverting()) {\n <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (conversionError()) {\n <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n </div>\n <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n <span class=\"text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30\">\n <span class=\"text-red-700 dark:text-red-300\">{{ conversionError() }}</span>\n </span>\n </div>\n } @else if (officeSource()) {\n <z-gallery-office-preview\n class=\"absolute inset-0 rounded-lg shadow-2xl\"\n [zSource]=\"officeSource()!\"\n [zKind]=\"documentPreviewKind()\"\n (zLoaded)=\"onOfficeLoad()\"\n (zError)=\"onOfficeError($event)\" />\n }\n </div>\n } @else if (isTextFile()) {\n <div class=\"dark:border-border relative h-[75vh] w-[85vw] overflow-hidden rounded-lg border border-transparent\">\n @if (isLoading() || isConverting()) {\n <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (conversionError()) {\n <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n </div>\n <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n <span class=\"text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30\">\n <span class=\"text-red-700 dark:text-red-300\">{{ conversionError() }}</span>\n </span>\n </div>\n } @else if (textContent()) {\n @if (isCodeFile()) {\n <z-code\n class=\"absolute inset-0 overflow-hidden rounded-lg shadow-2xl\"\n [zCode]=\"textContent()\"\n [zLanguage]=\"codeLanguage()\"\n [zTitle]=\"file().name\" />\n } @else {\n <z-gallery-text-preview\n class=\"absolute inset-0 rounded-lg shadow-2xl\"\n [zContent]=\"textContent()\"\n [zLanguage]=\"fileExtension()\" />\n }\n }\n </div>\n } @else {\n <div\n class=\"bg-card dark:border-border flex flex-col items-center justify-center rounded-lg border border-transparent p-12 shadow-2xl\">\n <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n </div>\n <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n <span class=\"text-muted-foreground mb-4 text-sm\">{{ formattedSize() }}</span>\n <span class=\"text-muted-foreground rounded-md bg-amber-100 px-3 py-1.5 text-xs dark:bg-amber-900/30\">\n <i\n z-icon\n zType=\"lucideInfo\"\n zSize=\"14\"\n class=\"mr-1 inline-block align-middle text-amber-600 dark:text-amber-400\"></i>\n <span class=\"align-middle text-amber-700 dark:text-amber-300\">\n {{ 'i18n_z_ui_gallery_preview_not_supported' | translate }}\n </span>\n </span>\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".z-gallery-preview-backdrop{background-color:#00000047;backdrop-filter:blur(3px);animation:z-gallery-backdrop-enter .15s ease-out forwards}.z-gallery-preview-backdrop.z-backdrop-leaving{animation:z-gallery-backdrop-exit .12s ease-in forwards}@keyframes z-gallery-backdrop-enter{0%{opacity:0}to{opacity:1}}@keyframes z-gallery-backdrop-exit{0%{opacity:1}to{opacity:0}}.z-gallery-pdf-frame *{border-color:#606060!important;outline-color:#606060!important}.z-gallery-pdf-frame{background:#606060}.z-gallery-preview .z-code ::selection{background:var(--primary);color:var(--primary-foreground)}.z-gallery-pdf-frame ng2-pdfjs-viewer,.z-gallery-pdf-frame ng2-pdfjs-viewer iframe{display:block;width:100%;height:100%;border:0!important;outline:0!important;box-shadow:none!important;background:#606060}\n"] }]
|
|
913
|
+
}, template: "<div\n class=\"animate-in fade-in fixed inset-0 z-50 flex items-center justify-center duration-200\"\n (click)=\"onBackdropClick($event)\">\n <button\n z-button\n zType=\"ghost\"\n zShape=\"circle\"\n class=\"absolute top-3 right-3 z-20 text-white hover:bg-white/20 lg:top-4 lg:right-4\"\n (click)=\"close()\">\n <i z-icon zType=\"lucideX\" zSize=\"24\"></i>\n </button>\n\n @if (hasPrev()) {\n <button\n z-button\n zType=\"ghost\"\n zShape=\"circle\"\n class=\"absolute left-4 z-10 text-white hover:bg-white/20\"\n (click)=\"navigate(-1)\">\n <i z-icon zType=\"lucideChevronLeft\" zSize=\"32\"></i>\n </button>\n }\n\n @if (hasNext()) {\n <button\n z-button\n zType=\"ghost\"\n zShape=\"circle\"\n class=\"absolute right-4 z-10 text-white hover:bg-white/20\"\n (click)=\"navigate(1)\">\n <i z-icon zType=\"lucideChevronRight\" zSize=\"32\"></i>\n </button>\n }\n\n <div class=\"flex h-full w-full flex-col items-center\" (click)=\"$event.stopPropagation()\">\n <div\n class=\"dark:!border-border absolute top-3 right-14 left-3 z-10 flex min-w-0 items-center justify-between gap-2 rounded-md border !border-transparent bg-black/70 px-2.5 py-1.5 text-xs text-white shadow-lg backdrop-blur-sm lg:top-4 lg:right-auto lg:left-1/2 lg:max-w-[calc(100vw-10rem)] lg:-translate-x-1/2 lg:justify-start lg:bg-black/60 lg:px-4 lg:py-2 lg:text-sm dark:border\">\n <div class=\"flex min-w-0 items-baseline gap-1.5\">\n <span class=\"min-w-0 truncate font-medium lg:max-w-[12.5rem]\">{{ file().name }}</span>\n <span class=\"hidden shrink-0 text-white/70 lg:inline\">({{ formattedSize() }})</span>\n </div>\n\n @if (files().length > 1) {\n <span class=\"hidden shrink-0 text-white/70 md:inline\">{{ currentIndex() + 1 }} / {{ files().length }}</span>\n }\n\n <div class=\"ml-1 flex shrink-0 items-center gap-0.5\">\n @if (isImageFile()) {\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n zShape=\"circle\"\n class=\"text-white hover:bg-white/20\"\n z-tooltip\n [zShowDelay]=\"300\"\n [zContent]=\"'i18n_z_ui_gallery_rotate_left' | translate\"\n (click)=\"rotateLeft()\">\n <i z-icon zType=\"lucideUndo\" zSize=\"14\"></i>\n </button>\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n zShape=\"circle\"\n class=\"text-white hover:bg-white/20\"\n z-tooltip\n [zShowDelay]=\"300\"\n [zContent]=\"'i18n_z_ui_gallery_rotate_right' | translate\"\n (click)=\"rotateRight()\">\n <i z-icon zType=\"lucideRedo\" zSize=\"14\"></i>\n </button>\n }\n\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n zShape=\"circle\"\n class=\"text-white hover:bg-white/20\"\n z-tooltip\n [zShowDelay]=\"300\"\n [zContent]=\"'i18n_z_ui_gallery_download' | translate\"\n (click)=\"download()\">\n <i z-icon zType=\"lucideDownload\" zSize=\"14\"></i>\n </button>\n\n @if (zShowRemove()) {\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n zShape=\"circle\"\n class=\"text-white hover:bg-white/20\"\n z-tooltip\n [zShowDelay]=\"300\"\n [zContent]=\"'i18n_z_ui_gallery_delete' | translate\"\n (click)=\"remove()\">\n <i z-icon zType=\"lucideTrash2\" zSize=\"14\"></i>\n </button>\n }\n </div>\n </div>\n\n <div class=\"relative flex flex-1 items-center justify-center pt-16\">\n @if (isImageFile()) {\n <div class=\"relative flex h-[60vh] w-[70vw] items-center justify-center rounded-lg\">\n @if (isLoading()) {\n <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (previewError()) {\n <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-8 shadow-2xl\">\n <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n </div>\n <span class=\"text-foreground text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n </span>\n </div>\n } @else {\n <img\n [src]=\"file().url || file().thumbnailUrl\"\n [alt]=\"file().name\"\n class=\"max-h-full max-w-full rounded-lg object-contain shadow-2xl transition-opacity duration-300\"\n [class.opacity-0]=\"isLoading()\"\n [class.opacity-100]=\"!isLoading()\"\n [class.cursor-zoom-in]=\"!zoomed()\"\n [class.cursor-zoom-out]=\"zoomed()\"\n [style.transform]=\"imageTransform()\"\n (load)=\"onImageLoad()\"\n (error)=\"onMediaError()\"\n (click)=\"toggleZoom()\" />\n }\n </div>\n } @else if (isPdf() && pdfUrl()) {\n <div\n class=\"z-gallery-pdf-frame dark:border-border relative h-[75vh] w-[85vw] max-w-[96vw] overflow-hidden rounded-sm border border-transparent shadow-xs\">\n @if (isLoading()) {\n <z-skeleton class=\"absolute inset-0 rounded-sm\" />\n <div\n class=\"text-muted-foreground absolute inset-0 z-10 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (previewError()) {\n <div class=\"bg-card flex size-full flex-col items-center justify-center p-8\">\n <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n </div>\n <span class=\"text-foreground text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n </span>\n </div>\n } @else {\n <div\n class=\"relative size-full bg-white transition-opacity duration-300\"\n [class.opacity-0]=\"isLoading()\"\n [class.opacity-100]=\"!isLoading()\">\n @let pdfConfig = pdfViewerConfig();\n <ng2-pdfjs-viewer\n #pdfViewer\n class=\"block size-full\"\n [viewerFolder]=\"pdfConfig.viewerFolder!\"\n [viewerId]=\"pdfViewerId()\"\n [pdfSrc]=\"pdfUrl()!\"\n [externalWindow]=\"false\"\n [downloadFileName]=\"file().name\"\n [locale]=\"pdfConfig.locale!\"\n [showSpinner]=\"pdfConfig.showSpinner!\"\n [useOnlyCssZoom]=\"pdfConfig.useOnlyCssZoom!\"\n [diagnosticLogs]=\"pdfConfig.diagnosticLogs!\"\n [showOpenFile]=\"pdfConfig.showOpenFile!\"\n [showAnnotations]=\"pdfConfig.showAnnotations!\"\n [showDownload]=\"pdfConfig.showDownload!\"\n [showViewBookmark]=\"pdfConfig.showViewBookmark!\"\n [showPrint]=\"pdfConfig.showPrint!\"\n [showFullScreen]=\"pdfConfig.showFullScreen!\"\n [showFind]=\"pdfConfig.showFind!\"\n [downloadOnLoad]=\"pdfConfig.downloadOnLoad!\"\n [printOnLoad]=\"pdfConfig.printOnLoad!\"\n [rotateCW]=\"pdfConfig.rotateCW!\"\n [rotateCCW]=\"pdfConfig.rotateCCW!\"\n [showLastPageOnLoad]=\"pdfConfig.showLastPageOnLoad!\"\n [showToolbarLeft]=\"pdfConfig.showToolbarLeft!\"\n [showToolbarMiddle]=\"pdfConfig.showToolbarMiddle!\"\n [showToolbarRight]=\"pdfConfig.showToolbarRight!\"\n [showSecondaryToolbarToggle]=\"pdfConfig.showSecondaryToolbarToggle!\"\n [showSidebar]=\"pdfConfig.showSidebar!\"\n [showSidebarLeft]=\"pdfConfig.showSidebarLeft!\"\n [showSidebarRight]=\"pdfConfig.showSidebarRight!\"\n [toolbarDensity]=\"pdfConfig.toolbarDensity!\"\n [sidebarWidth]=\"pdfConfig.sidebarWidth\"\n [toolbarPosition]=\"pdfConfig.toolbarPosition!\"\n [sidebarPosition]=\"pdfConfig.sidebarPosition!\"\n [responsiveBreakpoint]=\"pdfConfig.responsiveBreakpoint\"\n [zoom]=\"pdfConfig.zoom!\"\n [rotation]=\"pdfConfig.rotation!\"\n [cursor]=\"pdfConfig.cursor!\"\n [scroll]=\"pdfConfig.scroll!\"\n [spread]=\"pdfConfig.spread!\"\n [pageMode]=\"pdfConfig.pageMode!\"\n [page]=\"pdfConfig.page!\"\n [iframeBorder]=\"pdfConfig.iframeBorder!\"\n [theme]=\"pdfConfig.theme!\"\n [primaryColor]=\"pdfConfig.primaryColor\"\n [backgroundColor]=\"pdfConfig.backgroundColor\"\n [pageBorderColor]=\"pdfConfig.pageBorderColor\"\n [pageSpacing]=\"pdfConfig.pageSpacing\"\n [toolbarColor]=\"pdfConfig.toolbarColor\"\n [textColor]=\"pdfConfig.textColor\"\n [borderRadius]=\"pdfConfig.borderRadius\"\n [customCSS]=\"pdfConfig.customCSS\"\n [cspNonce]=\"pdfConfig.cspNonce\"\n [iframeTitle]=\"pdfConfig.iframeTitle || ('i18n_z_ui_gallery_pdf_preview' | translate)\"\n [urlValidation]=\"pdfConfig.urlValidation!\"\n [controlVisibility]=\"pdfConfig.controlVisibility!\"\n [groupVisibility]=\"pdfConfig.groupVisibility!\"\n [autoActions]=\"pdfConfig.autoActions!\"\n [viewerConfig]=\"pdfConfig.viewerConfig!\"\n [themeConfig]=\"pdfConfig.themeConfig!\"\n [layoutConfig]=\"pdfConfig.layoutConfig!\"\n (onDocumentLoad)=\"onPdfLoad()\"\n (onDocumentError)=\"onMediaError()\" />\n </div>\n }\n </div>\n } @else if (isVideo()) {\n <div\n class=\"dark:border-border relative flex h-[60vh] w-[70vw] items-center justify-center rounded-lg border border-transparent\">\n @if (isLoading()) {\n <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (previewError()) {\n <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-8 shadow-2xl\">\n <div class=\"bg-muted mb-4 flex size-16 items-center justify-center rounded-xl\">\n <i z-icon zType=\"lucideTriangleAlert\" zSize=\"28\" class=\"text-destructive\"></i>\n </div>\n <span class=\"text-foreground text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n </span>\n </div>\n } @else {\n @if (mediaUrl()) {\n <z-media-player\n class=\"size-full max-w-full rounded-lg shadow-2xl transition-opacity duration-300\"\n [class.opacity-0]=\"isLoading()\"\n [class.opacity-100]=\"!isLoading()\"\n [zSources]=\"[{ kind: 'video', src: mediaUrl()!, label: 'Default', default: true }]\"\n [zConfig]=\"{ poster: file().thumbnailUrl ?? '' }\"\n [zDefaultLayoutConfig]=\"{ smallWhen: false }\"\n (zStateChange)=\"onVideoStateChange($event)\"\n (zError)=\"onVideoError($event)\" />\n }\n }\n </div>\n } @else if (isAudio()) {\n <div\n class=\"dark:border-border relative flex w-[min(90vw,42rem)] items-center justify-center overflow-hidden rounded-sm border border-transparent p-2 shadow-lg\">\n @if (isLoading()) {\n <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (previewError()) {\n <div class=\"bg-card flex size-full items-center justify-center rounded-lg p-4 shadow-2xl\">\n <span class=\"text-foreground text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_preview_load_error' | translate }}\n </span>\n </div>\n } @else if (mediaUrl()) {\n <z-audio-player\n class=\"block w-full transition-opacity duration-300\"\n [class.opacity-0]=\"isLoading()\"\n [class.opacity-100]=\"!isLoading()\"\n [zSrc]=\"mediaUrl()!\"\n [zTitle]=\"file().name\"\n (zLoaded)=\"onVideoLoad()\"\n (zError)=\"onMediaError()\" />\n }\n </div>\n } @else if (isWordFile() || isExcelFile() || isPowerpointFile()) {\n <div class=\"dark:border-border relative h-[75vh] w-[85vw] overflow-hidden rounded-lg border border-transparent\">\n @if (isLoading() || isConverting()) {\n <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (conversionError()) {\n <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n </div>\n <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n <span class=\"text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30\">\n <span class=\"text-red-700 dark:text-red-300\">{{ conversionError() }}</span>\n </span>\n </div>\n } @else if (officeSource()) {\n <z-gallery-office-preview\n class=\"absolute inset-0 rounded-lg shadow-2xl\"\n [zSource]=\"officeSource()!\"\n [zKind]=\"documentPreviewKind()\"\n (zLoaded)=\"onOfficeLoad()\"\n (zError)=\"onOfficeError($event)\" />\n }\n </div>\n } @else if (isTextFile()) {\n <div class=\"dark:border-border relative h-[75vh] w-[85vw] overflow-hidden rounded-lg border border-transparent\">\n @if (isLoading() || isConverting()) {\n <z-skeleton class=\"absolute inset-0 rounded-lg\" />\n <div class=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-sm font-medium\">\n {{ 'i18n_z_ui_gallery_loading_preview' | translate }}\n </div>\n }\n @if (conversionError()) {\n <div class=\"bg-card flex size-full flex-col items-center justify-center rounded-lg p-12 shadow-2xl\">\n <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n </div>\n <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n <span class=\"text-muted-foreground rounded-md bg-red-100 px-3 py-1.5 text-xs dark:bg-red-900/30\">\n <span class=\"text-red-700 dark:text-red-300\">{{ conversionError() }}</span>\n </span>\n </div>\n } @else if (textContent()) {\n @if (isCodeFile()) {\n <z-code\n class=\"absolute inset-0 overflow-hidden rounded-lg shadow-2xl\"\n [zCode]=\"textContent()\"\n [zLanguage]=\"codeLanguage()\"\n [zTitle]=\"file().name\" />\n } @else {\n <z-gallery-text-preview\n class=\"absolute inset-0 rounded-lg shadow-2xl\"\n [zContent]=\"textContent()\"\n [zLanguage]=\"fileExtension()\" />\n }\n }\n </div>\n } @else {\n <div\n class=\"bg-card dark:border-border flex flex-col items-center justify-center rounded-lg border border-transparent p-12 shadow-2xl\">\n <div class=\"bg-muted mb-4 flex size-24 items-center justify-center rounded-xl\">\n <i z-icon [zType]=\"fileIcon()\" zSize=\"40\" class=\"text-muted-foreground\"></i>\n </div>\n <span class=\"text-foreground mb-2 text-lg font-medium\">{{ file().name }}</span>\n <span class=\"text-muted-foreground mb-4 text-sm\">{{ formattedSize() }}</span>\n <span class=\"text-muted-foreground rounded-md bg-amber-100 px-3 py-1.5 text-xs dark:bg-amber-900/30\">\n <i\n z-icon\n zType=\"lucideInfo\"\n zSize=\"14\"\n class=\"mr-1 inline-block align-middle text-amber-600 dark:text-amber-400\"></i>\n <span class=\"align-middle text-amber-700 dark:text-amber-300\">\n {{ 'i18n_z_ui_gallery_preview_not_supported' | translate }}\n </span>\n </span>\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".z-gallery-preview-backdrop{background-color:#00000047;backdrop-filter:blur(3px);animation:z-gallery-backdrop-enter .15s ease-out forwards}.z-gallery-preview-backdrop.z-backdrop-leaving{animation:z-gallery-backdrop-exit .12s ease-in forwards}@keyframes z-gallery-backdrop-enter{0%{opacity:0}to{opacity:1}}@keyframes z-gallery-backdrop-exit{0%{opacity:1}to{opacity:0}}.z-gallery-pdf-frame *{border-color:#606060!important;outline-color:#606060!important}.z-gallery-pdf-frame{background:#606060}.z-gallery-preview .z-code ::selection{background:var(--primary);color:var(--primary-foreground)}.z-gallery-pdf-frame ng2-pdfjs-viewer,.z-gallery-pdf-frame ng2-pdfjs-viewer iframe{display:block;width:100%;height:100%;border:0!important;outline:0!important;box-shadow:none!important;background:#606060}\n"] }]
|
|
906
914
|
}], ctorParameters: () => [], propDecorators: { file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], zShowRemove: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowRemove", required: false }] }], zPdfViewerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPdfViewerConfig", required: false }] }], zTrustedResourceOrigins: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTrustedResourceOrigins", required: false }] }], zOnClose: [{ type: i0.Output, args: ["zOnClose"] }], zOnDownload: [{ type: i0.Output, args: ["zOnDownload"] }], zOnNavigate: [{ type: i0.Output, args: ["zOnNavigate"] }], zOnRemove: [{ type: i0.Output, args: ["zOnRemove"] }], pdfViewer: [{ type: i0.ViewChild, args: ['pdfViewer', { isSignal: true }] }] } });
|
|
907
915
|
|
|
908
916
|
class ZGalleryPreviewRef {
|
|
@@ -995,10 +1003,10 @@ class ZGalleryPreviewService {
|
|
|
995
1003
|
link.click();
|
|
996
1004
|
this._document.body.removeChild(link);
|
|
997
1005
|
}
|
|
998
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
999
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.
|
|
1006
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZGalleryPreviewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1007
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZGalleryPreviewService, providedIn: 'root' });
|
|
1000
1008
|
}
|
|
1001
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
1009
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZGalleryPreviewService, decorators: [{
|
|
1002
1010
|
type: Injectable,
|
|
1003
1011
|
args: [{
|
|
1004
1012
|
providedIn: 'root',
|
|
@@ -1149,7 +1157,7 @@ class ZGalleryItemComponent {
|
|
|
1149
1157
|
};
|
|
1150
1158
|
}, /* @ts-ignore */
|
|
1151
1159
|
...(ngDevMode ? [{ debugName: "categoryStyle" }] : /* istanbul ignore next */ []));
|
|
1152
|
-
fileTypeClasses = computed(() => zMergeClasses('inline-flex min-w-14 items-center justify-center rounded-
|
|
1160
|
+
fileTypeClasses = computed(() => zMergeClasses('inline-flex min-w-14 items-center justify-center rounded-(--radius-pill) border border-current px-2.5 py-1 text-[0.6875rem] font-semibold tracking-wide shadow-2xs', this.categoryStyle().bg, this.categoryStyle().text), /* @ts-ignore */
|
|
1153
1161
|
...(ngDevMode ? [{ debugName: "fileTypeClasses" }] : /* istanbul ignore next */ []));
|
|
1154
1162
|
canPreview = computed(() => isPreviewable(this.file()), /* @ts-ignore */
|
|
1155
1163
|
...(ngDevMode ? [{ debugName: "canPreview" }] : /* istanbul ignore next */ []));
|
|
@@ -1187,8 +1195,8 @@ class ZGalleryItemComponent {
|
|
|
1187
1195
|
event.stopPropagation();
|
|
1188
1196
|
this.zOnSelect.emit(this.file());
|
|
1189
1197
|
}
|
|
1190
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
1191
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
1198
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZGalleryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1199
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZGalleryItemComponent, isStandalone: true, selector: "z-gallery-item", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zShowDownload: { classPropertyName: "zShowDownload", publicName: "zShowDownload", isSignal: true, isRequired: false, transformFunction: null }, zShowPreview: { classPropertyName: "zShowPreview", publicName: "zShowPreview", isSignal: true, isRequired: false, transformFunction: null }, zShowRemove: { classPropertyName: "zShowRemove", publicName: "zShowRemove", isSignal: true, isRequired: false, transformFunction: null }, zSelectable: { classPropertyName: "zSelectable", publicName: "zSelectable", isSignal: true, isRequired: false, transformFunction: null }, zSelected: { classPropertyName: "zSelected", publicName: "zSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnDownload: "zOnDownload", zOnPreview: "zOnPreview", zOnRemove: "zOnRemove", zOnSelect: "zOnSelect" }, host: { classAttribute: "z-gallery-item block" }, ngImport: i0, template: `
|
|
1192
1200
|
@if (zMode() === 'grid') {
|
|
1193
1201
|
<div
|
|
1194
1202
|
class="group border-border bg-card hover:border-primary/30 relative cursor-pointer overflow-hidden rounded-md border shadow-sm transition-all duration-300 hover:shadow-lg"
|
|
@@ -1247,12 +1255,12 @@ class ZGalleryItemComponent {
|
|
|
1247
1255
|
|
|
1248
1256
|
<div class="absolute inset-x-0 top-0 z-10 flex items-start justify-between p-3">
|
|
1249
1257
|
<span
|
|
1250
|
-
class="rounded-
|
|
1258
|
+
class="rounded-(--radius-pill) border border-current bg-black/45 px-2.5 py-1 text-[0.6875rem] font-semibold tracking-wide text-white shadow-2xs backdrop-blur-md"
|
|
1251
1259
|
>
|
|
1252
1260
|
{{ fileExtension() }}
|
|
1253
1261
|
</span>
|
|
1254
1262
|
<span
|
|
1255
|
-
class="rounded-
|
|
1263
|
+
class="rounded-(--radius-pill) border border-white/25 bg-black/35 px-2 py-1 text-[0.625rem] font-medium text-white/95 backdrop-blur-md"
|
|
1256
1264
|
>
|
|
1257
1265
|
{{ formattedSize() }}
|
|
1258
1266
|
</span>
|
|
@@ -1263,7 +1271,7 @@ class ZGalleryItemComponent {
|
|
|
1263
1271
|
></div>
|
|
1264
1272
|
|
|
1265
1273
|
<div
|
|
1266
|
-
class="absolute right-3 bottom-3 z-20 flex items-center gap-1.5 rounded-
|
|
1274
|
+
class="absolute right-3 bottom-3 z-20 flex items-center gap-1.5 rounded-(--radius-pill) border border-white/20 bg-black/40 p-1 opacity-0 backdrop-blur-md transition-all duration-200 group-hover:opacity-100"
|
|
1267
1275
|
>
|
|
1268
1276
|
@if (zShowPreview() && canPreview()) {
|
|
1269
1277
|
<button
|
|
@@ -1423,7 +1431,7 @@ class ZGalleryItemComponent {
|
|
|
1423
1431
|
}
|
|
1424
1432
|
`, isInline: true, dependencies: [{ kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zChange", "zGroupChange", "zOnBlur", "zOnFocus", "zControl", "zEvent", "zCheckedChange", "zGroupValueChange"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1425
1433
|
}
|
|
1426
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
1434
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZGalleryItemComponent, decorators: [{
|
|
1427
1435
|
type: Component,
|
|
1428
1436
|
args: [{
|
|
1429
1437
|
selector: 'z-gallery-item',
|
|
@@ -1488,12 +1496,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
1488
1496
|
|
|
1489
1497
|
<div class="absolute inset-x-0 top-0 z-10 flex items-start justify-between p-3">
|
|
1490
1498
|
<span
|
|
1491
|
-
class="rounded-
|
|
1499
|
+
class="rounded-(--radius-pill) border border-current bg-black/45 px-2.5 py-1 text-[0.6875rem] font-semibold tracking-wide text-white shadow-2xs backdrop-blur-md"
|
|
1492
1500
|
>
|
|
1493
1501
|
{{ fileExtension() }}
|
|
1494
1502
|
</span>
|
|
1495
1503
|
<span
|
|
1496
|
-
class="rounded-
|
|
1504
|
+
class="rounded-(--radius-pill) border border-white/25 bg-black/35 px-2 py-1 text-[0.625rem] font-medium text-white/95 backdrop-blur-md"
|
|
1497
1505
|
>
|
|
1498
1506
|
{{ formattedSize() }}
|
|
1499
1507
|
</span>
|
|
@@ -1504,7 +1512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
1504
1512
|
></div>
|
|
1505
1513
|
|
|
1506
1514
|
<div
|
|
1507
|
-
class="absolute right-3 bottom-3 z-20 flex items-center gap-1.5 rounded-
|
|
1515
|
+
class="absolute right-3 bottom-3 z-20 flex items-center gap-1.5 rounded-(--radius-pill) border border-white/20 bg-black/40 p-1 opacity-0 backdrop-blur-md transition-all duration-200 group-hover:opacity-100"
|
|
1508
1516
|
>
|
|
1509
1517
|
@if (zShowPreview() && canPreview()) {
|
|
1510
1518
|
<button
|
|
@@ -2047,10 +2055,10 @@ class ZGalleryComponent {
|
|
|
2047
2055
|
this.zOnAction.emit({ type: 'download', files: selectedFiles });
|
|
2048
2056
|
selectedFiles.forEach(file => this.onDownload(file));
|
|
2049
2057
|
}
|
|
2050
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
2051
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZGalleryComponent, isStandalone: true, selector: "z-gallery", inputs: { zFiles: { classPropertyName: "zFiles", publicName: "zFiles", isSignal: true, isRequired: false, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zColumns: { classPropertyName: "zColumns", publicName: "zColumns", isSignal: true, isRequired: false, transformFunction: null }, zItemWidth: { classPropertyName: "zItemWidth", publicName: "zItemWidth", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zSkeletonRows: { classPropertyName: "zSkeletonRows", publicName: "zSkeletonRows", isSignal: true, isRequired: false, transformFunction: null }, zSkeletonItems: { classPropertyName: "zSkeletonItems", publicName: "zSkeletonItems", isSignal: true, isRequired: false, transformFunction: null }, zShowDownload: { classPropertyName: "zShowDownload", publicName: "zShowDownload", isSignal: true, isRequired: false, transformFunction: null }, zShowPreview: { classPropertyName: "zShowPreview", publicName: "zShowPreview", isSignal: true, isRequired: false, transformFunction: null }, zShowRemove: { classPropertyName: "zShowRemove", publicName: "zShowRemove", isSignal: true, isRequired: false, transformFunction: null }, zPdfViewerConfig: { classPropertyName: "zPdfViewerConfig", publicName: "zPdfViewerConfig", isSignal: true, isRequired: false, transformFunction: null }, zTrustedResourceOrigins: { classPropertyName: "zTrustedResourceOrigins", publicName: "zTrustedResourceOrigins", isSignal: true, isRequired: false, transformFunction: null }, zShowModeToggle: { classPropertyName: "zShowModeToggle", publicName: "zShowModeToggle", isSignal: true, isRequired: false, transformFunction: null }, zShowSearch: { classPropertyName: "zShowSearch", publicName: "zShowSearch", isSignal: true, isRequired: false, transformFunction: null }, zServerSearch: { classPropertyName: "zServerSearch", publicName: "zServerSearch", isSignal: true, isRequired: false, transformFunction: null }, zSearchDebounce: { classPropertyName: "zSearchDebounce", publicName: "zSearchDebounce", isSignal: true, isRequired: false, transformFunction: null }, zSearchPlaceholder: { classPropertyName: "zSearchPlaceholder", publicName: "zSearchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zToggleSize: { classPropertyName: "zToggleSize", publicName: "zToggleSize", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zEmptyText: { classPropertyName: "zEmptyText", publicName: "zEmptyText", isSignal: true, isRequired: false, transformFunction: null }, zEmptyIcon: { classPropertyName: "zEmptyIcon", publicName: "zEmptyIcon", isSignal: true, isRequired: false, transformFunction: null }, zClass: { classPropertyName: "zClass", publicName: "zClass", isSignal: true, isRequired: false, transformFunction: null }, zSelectable: { classPropertyName: "zSelectable", publicName: "zSelectable", isSignal: true, isRequired: false, transformFunction: null }, zSelectedFiles: { classPropertyName: "zSelectedFiles", publicName: "zSelectedFiles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zMode: "zModeChange", zSelectedFiles: "zSelectedFilesChange", zOnDownload: "zOnDownload", zOnPreview: "zOnPreview", zOnRemove: "zOnRemove", zSearchChange: "zSearchChange", zControl: "zControl", zSelectionChange: "zSelectionChange", zOnAction: "zOnAction" }, host: { classAttribute: "z-gallery block" }, exportAs: ["zGallery"], ngImport: i0, template: "<div [class]=\"containerClasses()\">\n @if (showHeader()) {\n <div class=\"mb-4 flex flex-wrap items-center justify-between gap-3\">\n <div class=\"flex items-center gap-3\">\n @if (zTitle()) {\n @if (zLoading()) {\n <z-skeleton zWidth=\"7rem\" zHeight=\"1.25rem\" />\n } @else {\n <h3 class=\"text-sm font-medium\">{{ zTitle() }}</h3>\n }\n }\n\n @if (zShowSearch()) {\n @if (zLoading()) {\n <z-skeleton zWidth=\"16rem\" [zHeight]=\"headerControlHeight()\" zRadius=\"0.375rem\" />\n } @else {\n <z-input\n zSearch\n [zSize]=\"searchInputSize()\"\n [zPlaceholder]=\"zSearchPlaceholder() || ('i18n_z_ui_gallery_search_placeholder' | translate)\"\n [zDebounce]=\"zSearchDebounce()\"\n [ngModel]=\"searchInputQuery()\"\n (ngModelChange)=\"searchInputQuery.set($event)\"\n (zOnSearch)=\"onSearchChange($event)\"\n class=\"w-64\" />\n }\n }\n </div>\n\n @if (zShowModeToggle() && (zFiles().length > 0 || zLoading())) {\n @if (zLoading()) {\n <z-skeleton zWidth=\"5rem\" [zHeight]=\"headerControlHeight()\" zRadius=\"0.375rem\" />\n } @else {\n <z-button-group [(zActive)]=\"modeIndex\">\n <button z-button zType=\"outline\" [zSize]=\"zToggleSize()\" z-button-group-item>\n <i z-icon zType=\"lucideLayoutGrid\" [zSize]=\"toggleIconSize()\"></i>\n </button>\n <button z-button zType=\"outline\" [zSize]=\"zToggleSize()\" z-button-group-item>\n <i z-icon zType=\"lucideList\" [zSize]=\"toggleIconSize()\"></i>\n </button>\n </z-button-group>\n }\n }\n </div>\n }\n\n @if (zLoading()) {\n @if (currentMode() === 'grid') {\n <div class=\"grid gap-4\" [class]=\"gridColumnsClass()\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\n @for (item of skeletonItems(); track item) {\n <div class=\"border-border bg-card overflow-hidden rounded-md border shadow-sm\">\n <z-skeleton [zHeight]=\"skeletonMediaHeight()\" zRadius=\"0\" />\n <div class=\"p-3\">\n <z-skeleton zWidth=\"75%\" zHeight=\"1.25rem\" />\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"flex flex-col gap-2\">\n @for (item of skeletonItems(); track item) {\n <div class=\"border-border bg-card flex items-center gap-3 rounded-sm border px-3 py-2.5 shadow-sm\">\n <z-skeleton class=\"shrink-0\" zWidth=\"2.75rem\" zHeight=\"2.75rem\" zRadius=\"0.125rem\" />\n <div class=\"min-w-0 flex-1 space-y-2\">\n <z-skeleton zWidth=\"40%\" zHeight=\"0.875rem\" />\n <z-skeleton zWidth=\"25%\" zHeight=\"0.75rem\" />\n </div>\n <z-skeleton class=\"shrink-0\" zWidth=\"3.5rem\" zHeight=\"1.5rem\" zRadius=\"0.125rem\" />\n </div>\n }\n </div>\n }\n } @else if (zSelectable() && filteredFiles().length > 0) {\n <div\n class=\"bg-muted/30 shadow-card dark:!border-border mb-4 flex h-11 items-center justify-between gap-3 rounded-[0.375rem] border border-transparent px-3\">\n <div class=\"flex items-center gap-3\">\n <z-checkbox\n [zChecked]=\"isAllSelected()\"\n [zIndeterminate]=\"isIndeterminate()\"\n (zChange)=\"toggleSelectAll()\"\n zSize=\"sm\" />\n <span class=\"text-muted-foreground text-sm\">\n @if (selectedCount() > 0) {\n {{ selectedCount() }} {{ 'i18n_z_ui_gallery_selected' | translate }}\n } @else {\n {{ 'i18n_z_ui_gallery_select_all' | translate }}\n }\n </span>\n </div>\n\n @if (selectedCount() > 0) {\n <div class=\"flex items-center gap-1\">\n @if (zShowDownload()) {\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n (click)=\"onBulkDownload()\"\n class=\"text-muted-foreground hover:text-foreground\">\n <i z-icon zType=\"lucideDownload\" zSize=\"14\"></i>\n <span class=\"ml-1\">{{ 'i18n_z_ui_gallery_download' | translate }}</span>\n </button>\n }\n @if (zShowRemove()) {\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n (click)=\"onBulkDelete()\"\n class=\"text-destructive hover:text-destructive\">\n <i z-icon zType=\"lucideTrash2\" zSize=\"14\"></i>\n <span class=\"ml-1\">{{ 'i18n_z_ui_gallery_delete' | translate }}</span>\n </button>\n }\n <button z-button zType=\"ghost\" zSize=\"xs\" (click)=\"deselectAll()\">\n <i z-icon zType=\"lucideX\" zSize=\"14\"></i>\n </button>\n </div>\n }\n </div>\n }\n\n @if (!zLoading() && filteredFiles().length > 0) {\n @if (currentMode() === 'grid') {\n <div class=\"grid gap-4\" [class]=\"gridColumnsClass()\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\n @for (file of filteredFiles(); track file.id) {\n <z-gallery-item\n [file]=\"file\"\n zMode=\"grid\"\n [zSize]=\"zSize()\"\n [zShowDownload]=\"zShowDownload()\"\n [zShowPreview]=\"zShowPreview()\"\n [zShowRemove]=\"zShowRemove()\"\n [zSelectable]=\"zSelectable()\"\n [zSelected]=\"isFileSelected(file)\"\n (zOnDownload)=\"onDownload($event)\"\n (zOnPreview)=\"onPreview($event)\"\n (zOnRemove)=\"onRemove($event)\"\n (zOnSelect)=\"toggleSelection($event)\" />\n }\n </div>\n } @else {\n <div class=\"flex flex-col gap-2\">\n @for (file of filteredFiles(); track file.id) {\n <z-gallery-item\n [file]=\"file\"\n zMode=\"list\"\n [zSize]=\"zSize()\"\n [zShowDownload]=\"zShowDownload()\"\n [zShowPreview]=\"zShowPreview()\"\n [zShowRemove]=\"zShowRemove()\"\n [zSelectable]=\"zSelectable()\"\n [zSelected]=\"isFileSelected(file)\"\n (zOnDownload)=\"onDownload($event)\"\n (zOnPreview)=\"onPreview($event)\"\n (zOnRemove)=\"onRemove($event)\"\n (zOnSelect)=\"toggleSelection($event)\" />\n }\n </div>\n }\n } @else if (!zLoading() && zFiles().length > 0 && searchQuery()) {\n <z-empty zIcon=\"lucideSearchX\" [zMessage]=\"'i18n_z_ui_gallery_no_search_results' | translate\" zSize=\"sm\" />\n } @else if (!zLoading()) {\n <z-empty\n [zIcon]=\"zEmptyIcon()\"\n [zMessage]=\"zEmptyText() || ('i18n_z_ui_gallery_no_files' | translate)\"\n zSize=\"sm\" />\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZGalleryItemComponent, selector: "z-gallery-item", inputs: ["file", "zMode", "zSize", "zShowDownload", "zShowPreview", "zShowRemove", "zSelectable", "zSelected"], outputs: ["zOnDownload", "zOnPreview", "zOnRemove", "zOnSelect"] }, { kind: "component", type: ZButtonGroupComponent, selector: "z-button-group", inputs: ["zClass", "zOrientation", "zActive"], outputs: ["zActiveChange", "zActiveIndexChange", "zActiveValueChange"], exportAs: ["zButtonGroup"] }, { kind: "directive", type: ZButtonGroupItemDirective, selector: "[z-button-group-item]", inputs: ["zValue"], exportAs: ["zButtonGroupItem"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zChange", "zGroupChange", "zOnBlur", "zOnFocus", "zControl", "zEvent", "zCheckedChange", "zGroupValueChange"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zLoadingOutline", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2058
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2059
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZGalleryComponent, isStandalone: true, selector: "z-gallery", inputs: { zFiles: { classPropertyName: "zFiles", publicName: "zFiles", isSignal: true, isRequired: false, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zColumns: { classPropertyName: "zColumns", publicName: "zColumns", isSignal: true, isRequired: false, transformFunction: null }, zItemWidth: { classPropertyName: "zItemWidth", publicName: "zItemWidth", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zSkeletonRows: { classPropertyName: "zSkeletonRows", publicName: "zSkeletonRows", isSignal: true, isRequired: false, transformFunction: null }, zSkeletonItems: { classPropertyName: "zSkeletonItems", publicName: "zSkeletonItems", isSignal: true, isRequired: false, transformFunction: null }, zShowDownload: { classPropertyName: "zShowDownload", publicName: "zShowDownload", isSignal: true, isRequired: false, transformFunction: null }, zShowPreview: { classPropertyName: "zShowPreview", publicName: "zShowPreview", isSignal: true, isRequired: false, transformFunction: null }, zShowRemove: { classPropertyName: "zShowRemove", publicName: "zShowRemove", isSignal: true, isRequired: false, transformFunction: null }, zPdfViewerConfig: { classPropertyName: "zPdfViewerConfig", publicName: "zPdfViewerConfig", isSignal: true, isRequired: false, transformFunction: null }, zTrustedResourceOrigins: { classPropertyName: "zTrustedResourceOrigins", publicName: "zTrustedResourceOrigins", isSignal: true, isRequired: false, transformFunction: null }, zShowModeToggle: { classPropertyName: "zShowModeToggle", publicName: "zShowModeToggle", isSignal: true, isRequired: false, transformFunction: null }, zShowSearch: { classPropertyName: "zShowSearch", publicName: "zShowSearch", isSignal: true, isRequired: false, transformFunction: null }, zServerSearch: { classPropertyName: "zServerSearch", publicName: "zServerSearch", isSignal: true, isRequired: false, transformFunction: null }, zSearchDebounce: { classPropertyName: "zSearchDebounce", publicName: "zSearchDebounce", isSignal: true, isRequired: false, transformFunction: null }, zSearchPlaceholder: { classPropertyName: "zSearchPlaceholder", publicName: "zSearchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zToggleSize: { classPropertyName: "zToggleSize", publicName: "zToggleSize", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zEmptyText: { classPropertyName: "zEmptyText", publicName: "zEmptyText", isSignal: true, isRequired: false, transformFunction: null }, zEmptyIcon: { classPropertyName: "zEmptyIcon", publicName: "zEmptyIcon", isSignal: true, isRequired: false, transformFunction: null }, zClass: { classPropertyName: "zClass", publicName: "zClass", isSignal: true, isRequired: false, transformFunction: null }, zSelectable: { classPropertyName: "zSelectable", publicName: "zSelectable", isSignal: true, isRequired: false, transformFunction: null }, zSelectedFiles: { classPropertyName: "zSelectedFiles", publicName: "zSelectedFiles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zMode: "zModeChange", zSelectedFiles: "zSelectedFilesChange", zOnDownload: "zOnDownload", zOnPreview: "zOnPreview", zOnRemove: "zOnRemove", zSearchChange: "zSearchChange", zControl: "zControl", zSelectionChange: "zSelectionChange", zOnAction: "zOnAction" }, host: { classAttribute: "z-gallery block" }, exportAs: ["zGallery"], ngImport: i0, template: "<div [class]=\"containerClasses()\">\n @if (showHeader()) {\n <div class=\"mb-4 flex flex-wrap items-center justify-between gap-3\">\n <div class=\"flex items-center gap-3\">\n @if (zTitle()) {\n @if (zLoading()) {\n <z-skeleton zWidth=\"7rem\" zHeight=\"1.25rem\" />\n } @else {\n <h3 class=\"text-sm font-medium\">{{ zTitle() }}</h3>\n }\n }\n\n @if (zShowSearch()) {\n @if (zLoading()) {\n <z-skeleton zWidth=\"16rem\" [zHeight]=\"headerControlHeight()\" zRadius=\"var(--radius-sm)\" />\n } @else {\n <z-input\n zSearch\n [zSize]=\"searchInputSize()\"\n [zPlaceholder]=\"zSearchPlaceholder() || ('i18n_z_ui_gallery_search_placeholder' | translate)\"\n [zDebounce]=\"zSearchDebounce()\"\n [ngModel]=\"searchInputQuery()\"\n (ngModelChange)=\"searchInputQuery.set($event)\"\n (zOnSearch)=\"onSearchChange($event)\"\n class=\"w-64\" />\n }\n }\n </div>\n\n @if (zShowModeToggle() && (zFiles().length > 0 || zLoading())) {\n @if (zLoading()) {\n <z-skeleton zWidth=\"5rem\" [zHeight]=\"headerControlHeight()\" zRadius=\"var(--radius-sm)\" />\n } @else {\n <z-button-group [(zActive)]=\"modeIndex\">\n <button z-button zType=\"outline\" [zSize]=\"zToggleSize()\" z-button-group-item>\n <i z-icon zType=\"lucideLayoutGrid\" [zSize]=\"toggleIconSize()\"></i>\n </button>\n <button z-button zType=\"outline\" [zSize]=\"zToggleSize()\" z-button-group-item>\n <i z-icon zType=\"lucideList\" [zSize]=\"toggleIconSize()\"></i>\n </button>\n </z-button-group>\n }\n }\n </div>\n }\n\n @if (zLoading()) {\n @if (currentMode() === 'grid') {\n <div class=\"grid gap-4\" [class]=\"gridColumnsClass()\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\n @for (item of skeletonItems(); track item) {\n <div class=\"border-border bg-card overflow-hidden rounded-md border shadow-sm\">\n <z-skeleton [zHeight]=\"skeletonMediaHeight()\" zRadius=\"0\" />\n <div class=\"p-3\">\n <z-skeleton zWidth=\"75%\" zHeight=\"1.25rem\" />\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"flex flex-col gap-2\">\n @for (item of skeletonItems(); track item) {\n <div class=\"border-border bg-card flex items-center gap-3 rounded-sm border px-3 py-2.5 shadow-sm\">\n <z-skeleton class=\"shrink-0\" zWidth=\"2.75rem\" zHeight=\"2.75rem\" zRadius=\"var(--radius-xs)\" />\n <div class=\"min-w-0 flex-1 space-y-2\">\n <z-skeleton zWidth=\"40%\" zHeight=\"0.875rem\" />\n <z-skeleton zWidth=\"25%\" zHeight=\"0.75rem\" />\n </div>\n <z-skeleton class=\"shrink-0\" zWidth=\"3.5rem\" zHeight=\"1.5rem\" zRadius=\"var(--radius-xs)\" />\n </div>\n }\n </div>\n }\n } @else if (zSelectable() && filteredFiles().length > 0) {\n <div\n class=\"bg-muted/30 shadow-card dark:!border-border mb-4 flex h-11 items-center justify-between gap-3 rounded-md border border-transparent px-3\">\n <div class=\"flex items-center gap-3\">\n <z-checkbox\n [zChecked]=\"isAllSelected()\"\n [zIndeterminate]=\"isIndeterminate()\"\n (zChange)=\"toggleSelectAll()\"\n zSize=\"sm\" />\n <span class=\"text-muted-foreground text-sm\">\n @if (selectedCount() > 0) {\n {{ selectedCount() }} {{ 'i18n_z_ui_gallery_selected' | translate }}\n } @else {\n {{ 'i18n_z_ui_gallery_select_all' | translate }}\n }\n </span>\n </div>\n\n @if (selectedCount() > 0) {\n <div class=\"flex items-center gap-1\">\n @if (zShowDownload()) {\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n (click)=\"onBulkDownload()\"\n class=\"text-muted-foreground hover:text-foreground\">\n <i z-icon zType=\"lucideDownload\" zSize=\"14\"></i>\n <span class=\"ml-1\">{{ 'i18n_z_ui_gallery_download' | translate }}</span>\n </button>\n }\n @if (zShowRemove()) {\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n (click)=\"onBulkDelete()\"\n class=\"text-destructive hover:text-destructive\">\n <i z-icon zType=\"lucideTrash2\" zSize=\"14\"></i>\n <span class=\"ml-1\">{{ 'i18n_z_ui_gallery_delete' | translate }}</span>\n </button>\n }\n <button z-button zType=\"ghost\" zSize=\"xs\" (click)=\"deselectAll()\">\n <i z-icon zType=\"lucideX\" zSize=\"14\"></i>\n </button>\n </div>\n }\n </div>\n }\n\n @if (!zLoading() && filteredFiles().length > 0) {\n @if (currentMode() === 'grid') {\n <div class=\"grid gap-4\" [class]=\"gridColumnsClass()\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\n @for (file of filteredFiles(); track file.id) {\n <z-gallery-item\n [file]=\"file\"\n zMode=\"grid\"\n [zSize]=\"zSize()\"\n [zShowDownload]=\"zShowDownload()\"\n [zShowPreview]=\"zShowPreview()\"\n [zShowRemove]=\"zShowRemove()\"\n [zSelectable]=\"zSelectable()\"\n [zSelected]=\"isFileSelected(file)\"\n (zOnDownload)=\"onDownload($event)\"\n (zOnPreview)=\"onPreview($event)\"\n (zOnRemove)=\"onRemove($event)\"\n (zOnSelect)=\"toggleSelection($event)\" />\n }\n </div>\n } @else {\n <div class=\"flex flex-col gap-2\">\n @for (file of filteredFiles(); track file.id) {\n <z-gallery-item\n [file]=\"file\"\n zMode=\"list\"\n [zSize]=\"zSize()\"\n [zShowDownload]=\"zShowDownload()\"\n [zShowPreview]=\"zShowPreview()\"\n [zShowRemove]=\"zShowRemove()\"\n [zSelectable]=\"zSelectable()\"\n [zSelected]=\"isFileSelected(file)\"\n (zOnDownload)=\"onDownload($event)\"\n (zOnPreview)=\"onPreview($event)\"\n (zOnRemove)=\"onRemove($event)\"\n (zOnSelect)=\"toggleSelection($event)\" />\n }\n </div>\n }\n } @else if (!zLoading() && zFiles().length > 0 && searchQuery()) {\n <z-empty zIcon=\"lucideSearchX\" [zMessage]=\"'i18n_z_ui_gallery_no_search_results' | translate\" zSize=\"sm\" />\n } @else if (!zLoading()) {\n <z-empty\n [zIcon]=\"zEmptyIcon()\"\n [zMessage]=\"zEmptyText() || ('i18n_z_ui_gallery_no_files' | translate)\"\n zSize=\"sm\" />\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZGalleryItemComponent, selector: "z-gallery-item", inputs: ["file", "zMode", "zSize", "zShowDownload", "zShowPreview", "zShowRemove", "zSelectable", "zSelected"], outputs: ["zOnDownload", "zOnPreview", "zOnRemove", "zOnSelect"] }, { kind: "component", type: ZButtonGroupComponent, selector: "z-button-group", inputs: ["zClass", "zOrientation", "zActive"], outputs: ["zActiveChange", "zActiveIndexChange", "zActiveValueChange"], exportAs: ["zButtonGroup"] }, { kind: "directive", type: ZButtonGroupItemDirective, selector: "[z-button-group-item]", inputs: ["zValue"], exportAs: ["zButtonGroupItem"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zChange", "zGroupChange", "zOnBlur", "zOnFocus", "zControl", "zEvent", "zCheckedChange", "zGroupValueChange"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zLoadingOutline", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2052
2060
|
}
|
|
2053
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
2061
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZGalleryComponent, decorators: [{
|
|
2054
2062
|
type: Component,
|
|
2055
2063
|
args: [{ selector: 'z-gallery', imports: [
|
|
2056
2064
|
FormsModule,
|
|
@@ -2066,7 +2074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
2066
2074
|
ZSkeletonComponent,
|
|
2067
2075
|
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
2068
2076
|
class: 'z-gallery block',
|
|
2069
|
-
}, exportAs: 'zGallery', template: "<div [class]=\"containerClasses()\">\n @if (showHeader()) {\n <div class=\"mb-4 flex flex-wrap items-center justify-between gap-3\">\n <div class=\"flex items-center gap-3\">\n @if (zTitle()) {\n @if (zLoading()) {\n <z-skeleton zWidth=\"7rem\" zHeight=\"1.25rem\" />\n } @else {\n <h3 class=\"text-sm font-medium\">{{ zTitle() }}</h3>\n }\n }\n\n @if (zShowSearch()) {\n @if (zLoading()) {\n <z-skeleton zWidth=\"16rem\" [zHeight]=\"headerControlHeight()\" zRadius=\"
|
|
2077
|
+
}, exportAs: 'zGallery', template: "<div [class]=\"containerClasses()\">\n @if (showHeader()) {\n <div class=\"mb-4 flex flex-wrap items-center justify-between gap-3\">\n <div class=\"flex items-center gap-3\">\n @if (zTitle()) {\n @if (zLoading()) {\n <z-skeleton zWidth=\"7rem\" zHeight=\"1.25rem\" />\n } @else {\n <h3 class=\"text-sm font-medium\">{{ zTitle() }}</h3>\n }\n }\n\n @if (zShowSearch()) {\n @if (zLoading()) {\n <z-skeleton zWidth=\"16rem\" [zHeight]=\"headerControlHeight()\" zRadius=\"var(--radius-sm)\" />\n } @else {\n <z-input\n zSearch\n [zSize]=\"searchInputSize()\"\n [zPlaceholder]=\"zSearchPlaceholder() || ('i18n_z_ui_gallery_search_placeholder' | translate)\"\n [zDebounce]=\"zSearchDebounce()\"\n [ngModel]=\"searchInputQuery()\"\n (ngModelChange)=\"searchInputQuery.set($event)\"\n (zOnSearch)=\"onSearchChange($event)\"\n class=\"w-64\" />\n }\n }\n </div>\n\n @if (zShowModeToggle() && (zFiles().length > 0 || zLoading())) {\n @if (zLoading()) {\n <z-skeleton zWidth=\"5rem\" [zHeight]=\"headerControlHeight()\" zRadius=\"var(--radius-sm)\" />\n } @else {\n <z-button-group [(zActive)]=\"modeIndex\">\n <button z-button zType=\"outline\" [zSize]=\"zToggleSize()\" z-button-group-item>\n <i z-icon zType=\"lucideLayoutGrid\" [zSize]=\"toggleIconSize()\"></i>\n </button>\n <button z-button zType=\"outline\" [zSize]=\"zToggleSize()\" z-button-group-item>\n <i z-icon zType=\"lucideList\" [zSize]=\"toggleIconSize()\"></i>\n </button>\n </z-button-group>\n }\n }\n </div>\n }\n\n @if (zLoading()) {\n @if (currentMode() === 'grid') {\n <div class=\"grid gap-4\" [class]=\"gridColumnsClass()\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\n @for (item of skeletonItems(); track item) {\n <div class=\"border-border bg-card overflow-hidden rounded-md border shadow-sm\">\n <z-skeleton [zHeight]=\"skeletonMediaHeight()\" zRadius=\"0\" />\n <div class=\"p-3\">\n <z-skeleton zWidth=\"75%\" zHeight=\"1.25rem\" />\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"flex flex-col gap-2\">\n @for (item of skeletonItems(); track item) {\n <div class=\"border-border bg-card flex items-center gap-3 rounded-sm border px-3 py-2.5 shadow-sm\">\n <z-skeleton class=\"shrink-0\" zWidth=\"2.75rem\" zHeight=\"2.75rem\" zRadius=\"var(--radius-xs)\" />\n <div class=\"min-w-0 flex-1 space-y-2\">\n <z-skeleton zWidth=\"40%\" zHeight=\"0.875rem\" />\n <z-skeleton zWidth=\"25%\" zHeight=\"0.75rem\" />\n </div>\n <z-skeleton class=\"shrink-0\" zWidth=\"3.5rem\" zHeight=\"1.5rem\" zRadius=\"var(--radius-xs)\" />\n </div>\n }\n </div>\n }\n } @else if (zSelectable() && filteredFiles().length > 0) {\n <div\n class=\"bg-muted/30 shadow-card dark:!border-border mb-4 flex h-11 items-center justify-between gap-3 rounded-md border border-transparent px-3\">\n <div class=\"flex items-center gap-3\">\n <z-checkbox\n [zChecked]=\"isAllSelected()\"\n [zIndeterminate]=\"isIndeterminate()\"\n (zChange)=\"toggleSelectAll()\"\n zSize=\"sm\" />\n <span class=\"text-muted-foreground text-sm\">\n @if (selectedCount() > 0) {\n {{ selectedCount() }} {{ 'i18n_z_ui_gallery_selected' | translate }}\n } @else {\n {{ 'i18n_z_ui_gallery_select_all' | translate }}\n }\n </span>\n </div>\n\n @if (selectedCount() > 0) {\n <div class=\"flex items-center gap-1\">\n @if (zShowDownload()) {\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n (click)=\"onBulkDownload()\"\n class=\"text-muted-foreground hover:text-foreground\">\n <i z-icon zType=\"lucideDownload\" zSize=\"14\"></i>\n <span class=\"ml-1\">{{ 'i18n_z_ui_gallery_download' | translate }}</span>\n </button>\n }\n @if (zShowRemove()) {\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n (click)=\"onBulkDelete()\"\n class=\"text-destructive hover:text-destructive\">\n <i z-icon zType=\"lucideTrash2\" zSize=\"14\"></i>\n <span class=\"ml-1\">{{ 'i18n_z_ui_gallery_delete' | translate }}</span>\n </button>\n }\n <button z-button zType=\"ghost\" zSize=\"xs\" (click)=\"deselectAll()\">\n <i z-icon zType=\"lucideX\" zSize=\"14\"></i>\n </button>\n </div>\n }\n </div>\n }\n\n @if (!zLoading() && filteredFiles().length > 0) {\n @if (currentMode() === 'grid') {\n <div class=\"grid gap-4\" [class]=\"gridColumnsClass()\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\n @for (file of filteredFiles(); track file.id) {\n <z-gallery-item\n [file]=\"file\"\n zMode=\"grid\"\n [zSize]=\"zSize()\"\n [zShowDownload]=\"zShowDownload()\"\n [zShowPreview]=\"zShowPreview()\"\n [zShowRemove]=\"zShowRemove()\"\n [zSelectable]=\"zSelectable()\"\n [zSelected]=\"isFileSelected(file)\"\n (zOnDownload)=\"onDownload($event)\"\n (zOnPreview)=\"onPreview($event)\"\n (zOnRemove)=\"onRemove($event)\"\n (zOnSelect)=\"toggleSelection($event)\" />\n }\n </div>\n } @else {\n <div class=\"flex flex-col gap-2\">\n @for (file of filteredFiles(); track file.id) {\n <z-gallery-item\n [file]=\"file\"\n zMode=\"list\"\n [zSize]=\"zSize()\"\n [zShowDownload]=\"zShowDownload()\"\n [zShowPreview]=\"zShowPreview()\"\n [zShowRemove]=\"zShowRemove()\"\n [zSelectable]=\"zSelectable()\"\n [zSelected]=\"isFileSelected(file)\"\n (zOnDownload)=\"onDownload($event)\"\n (zOnPreview)=\"onPreview($event)\"\n (zOnRemove)=\"onRemove($event)\"\n (zOnSelect)=\"toggleSelection($event)\" />\n }\n </div>\n }\n } @else if (!zLoading() && zFiles().length > 0 && searchQuery()) {\n <z-empty zIcon=\"lucideSearchX\" [zMessage]=\"'i18n_z_ui_gallery_no_search_results' | translate\" zSize=\"sm\" />\n } @else if (!zLoading()) {\n <z-empty\n [zIcon]=\"zEmptyIcon()\"\n [zMessage]=\"zEmptyText() || ('i18n_z_ui_gallery_no_files' | translate)\"\n zSize=\"sm\" />\n }\n</div>\n" }]
|
|
2070
2078
|
}], propDecorators: { zFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFiles", required: false }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }, { type: i0.Output, args: ["zModeChange"] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColumns", required: false }] }], zItemWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zItemWidth", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zSkeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSkeletonRows", required: false }] }], zSkeletonItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSkeletonItems", required: false }] }], zShowDownload: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowDownload", required: false }] }], zShowPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowPreview", required: false }] }], zShowRemove: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowRemove", required: false }] }], zPdfViewerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPdfViewerConfig", required: false }] }], zTrustedResourceOrigins: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTrustedResourceOrigins", required: false }] }], zShowModeToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowModeToggle", required: false }] }], zShowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowSearch", required: false }] }], zServerSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zServerSearch", required: false }] }], zSearchDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearchDebounce", required: false }] }], zSearchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearchPlaceholder", required: false }] }], zToggleSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zToggleSize", required: false }] }], zTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTitle", required: false }] }], zEmptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyText", required: false }] }], zEmptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyIcon", required: false }] }], zClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClass", required: false }] }], zSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelectable", required: false }] }], zSelectedFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelectedFiles", required: false }] }, { type: i0.Output, args: ["zSelectedFilesChange"] }], zOnDownload: [{ type: i0.Output, args: ["zOnDownload"] }], zOnPreview: [{ type: i0.Output, args: ["zOnPreview"] }], zOnRemove: [{ type: i0.Output, args: ["zOnRemove"] }], zSearchChange: [{ type: i0.Output, args: ["zSearchChange"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zSelectionChange: [{ type: i0.Output, args: ["zSelectionChange"] }], zOnAction: [{ type: i0.Output, args: ["zOnAction"] }] } });
|
|
2071
2079
|
|
|
2072
2080
|
class ZGalleryFileIconComponent {
|
|
@@ -2108,8 +2116,8 @@ class ZGalleryFileIconComponent {
|
|
|
2108
2116
|
const img = event.target;
|
|
2109
2117
|
img.style.display = 'none';
|
|
2110
2118
|
}
|
|
2111
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
2112
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.
|
|
2119
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZGalleryFileIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2120
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZGalleryFileIconComponent, isStandalone: true, selector: "z-gallery-file-icon", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "z-gallery-file-icon block" }, ngImport: i0, template: `
|
|
2113
2121
|
<div [class]="containerClasses()" class="group/icon overflow-hidden">
|
|
2114
2122
|
@if (showThumbnail()) {
|
|
2115
2123
|
@if (isLoading()) {
|
|
@@ -2133,7 +2141,7 @@ class ZGalleryFileIconComponent {
|
|
|
2133
2141
|
</div>
|
|
2134
2142
|
`, isInline: true, dependencies: [{ kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2135
2143
|
}
|
|
2136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
2144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZGalleryFileIconComponent, decorators: [{
|
|
2137
2145
|
type: Component,
|
|
2138
2146
|
args: [{
|
|
2139
2147
|
selector: 'z-gallery-file-icon',
|
|
@@ -2217,10 +2225,10 @@ class ZGalleryPreviewItemDirective {
|
|
|
2217
2225
|
const tagName = this._elementRef.nativeElement.tagName.toLowerCase();
|
|
2218
2226
|
return tagName === 'button' || tagName === 'a';
|
|
2219
2227
|
}
|
|
2220
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.
|
|
2221
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.
|
|
2228
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZGalleryPreviewItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2229
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: ZGalleryPreviewItemDirective, isStandalone: true, selector: "[zGalleryPreviewItem], [z-gallery-preview-item]", inputs: { zGalleryPreviewItem: { classPropertyName: "zGalleryPreviewItem", publicName: "zGalleryPreviewItem", isSignal: true, isRequired: true, transformFunction: null }, zGalleryPreviewFiles: { classPropertyName: "zGalleryPreviewFiles", publicName: "zGalleryPreviewFiles", isSignal: true, isRequired: false, transformFunction: null }, zGalleryPreviewOptions: { classPropertyName: "zGalleryPreviewOptions", publicName: "zGalleryPreviewOptions", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnPreview: "zOnPreview" }, host: { listeners: { "click": "openPreview()", "keydown.enter": "openPreview($event)", "keydown.space": "openPreview($event)" }, properties: { "attr.role": "hostRole()", "attr.tabindex": "hostTabIndex()", "attr.aria-disabled": "hostAriaDisabled()" }, classAttribute: "z-gallery-preview-item" }, exportAs: ["zGalleryPreviewItem"], ngImport: i0 });
|
|
2222
2230
|
}
|
|
2223
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.
|
|
2231
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZGalleryPreviewItemDirective, decorators: [{
|
|
2224
2232
|
type: Directive,
|
|
2225
2233
|
args: [{
|
|
2226
2234
|
selector: '[zGalleryPreviewItem], [z-gallery-preview-item]',
|