s4y-ui 5.6.1 → 5.8.1
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/fesm2022/s4y-ui.mjs
CHANGED
|
@@ -3203,11 +3203,11 @@ class ImagePreviewComponent {
|
|
|
3203
3203
|
this.overlayRef.dispose();
|
|
3204
3204
|
}
|
|
3205
3205
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImagePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3206
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ImagePreviewComponent, isStandalone: true, selector: "s4y-image-preview", viewQueries: [{ propertyName: "imgEl", first: true, predicate: ["imgEl"], descendants: true, isSignal: true }], ngImport: i0, template: "\r\n<div class=\"preview-controls\">\r\n
|
|
3206
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ImagePreviewComponent, isStandalone: true, selector: "s4y-image-preview", viewQueries: [{ propertyName: "imgEl", first: true, predicate: ["imgEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"s4y-image-preview-container\">\r\n <div class=\"s4y-preview-controls\">\r\n <div class=\"flex gap-1 align-center\">\r\n <button\r\n class=\"btn-close s4y-action-btn gray-4\"\r\n type=\"button\"\r\n (click)=\"close()\"\r\n >\r\n \u2715\r\n </button>\r\n @if (name) {\r\n <p class=\"medium-text-regular fw-400\" style=\"color: var(--gray-400)\">\r\n {{ name }}\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"flex gap-2\">\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"zoomOut()\">\r\n <ng-container [ngTemplateOutlet]=\"zoomOutSvg\" />\r\n </button>\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"zoomIn()\">\r\n <ng-container [ngTemplateOutlet]=\"zoomInSvg\" />\r\n </button>\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"resetZoom()\">\r\n <ng-container [ngTemplateOutlet]=\"refreshSvg\" />\r\n </button>\r\n\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"toggleFullscreen()\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"\r\n fullScreenImage() ? fullScreenExitSvg : fullscreenSvg\r\n \"\r\n />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"s4y-preview-img-container\">\r\n <div class=\"s4y-img-preview\" [class.full-screen-img]=\"fullScreenImage()\">\r\n <img\r\n #imgEl\r\n style=\"transform-origin: center center\"\r\n [src]=\"src\"\r\n alt=\"Imagem\"\r\n (dblclick)=\"resetZoom()\"\r\n />\r\n </div>\r\n\r\n <div class=\"s4y-preview-clickable\" (click)=\"close()\"></div>\r\n </div>\r\n</div>\r\n\r\n<!-- SVG -->\r\n\r\n<ng-template #fullscreenSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #fullScreenExitSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18 7H22V9H16V3H18V7ZM8 9H2V7H6V3H8V9ZM18 17V21H16V15H22V17H18ZM8 15V21H6V17H2V15H8Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #zoomInSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM10 10V7H12V10H15V12H12V15H10V12H7V10H10Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n<ng-template #zoomOutSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM7 10H15V12H7V10Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #refreshSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-image-preview-container{width:100%;display:flex;flex-direction:column;gap:1.2rem;min-height:100dvh}.s4y-image-preview-container .s4y-action-btn{border-radius:50%;height:3rem;width:3rem}.s4y-image-preview-container .s4y-action-btn:hover{transition:.2s ease;background-color:var(--gray-700)}.s4y-image-preview-container .s4y-preview-controls{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;backdrop-filter:blur(6px);background:color-mix(in oklab,#000 45%,transparent);margin-bottom:.5rem;align-items:center;height:5rem;flex-shrink:0;padding:0 1.8rem}.s4y-image-preview-container .s4y-preview-controls button{line-height:0;color:#fff}.s4y-image-preview-container .s4y-preview-controls .btn-close{font-size:2rem;transition:.2s ease}.s4y-image-preview-container .s4y-preview-img-container{flex-grow:1;z-index:3;position:relative;display:flex;align-items:center;padding-bottom:1.2rem}.s4y-image-preview-container .s4y-img-preview{margin:0 auto;display:flex;align-items:center;justify-content:center;z-index:2;width:90%;max-width:70rem;transition:.5s ease}.s4y-image-preview-container .s4y-img-preview img{height:auto;border-radius:var(--radius);width:100%;transition:.5s ease}.s4y-image-preview-container .s4y-img-preview.full-screen-img{max-width:100%;height:auto}.s4y-image-preview-container .s4y-preview-clickable{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
3207
3207
|
}
|
|
3208
3208
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImagePreviewComponent, decorators: [{
|
|
3209
3209
|
type: Component,
|
|
3210
|
-
args: [{ selector: 's4y-image-preview', imports: [NgTemplateOutlet], template: "\r\n<div class=\"preview-controls\">\r\n
|
|
3210
|
+
args: [{ selector: 's4y-image-preview', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, template: "<div class=\"s4y-image-preview-container\">\r\n <div class=\"s4y-preview-controls\">\r\n <div class=\"flex gap-1 align-center\">\r\n <button\r\n class=\"btn-close s4y-action-btn gray-4\"\r\n type=\"button\"\r\n (click)=\"close()\"\r\n >\r\n \u2715\r\n </button>\r\n @if (name) {\r\n <p class=\"medium-text-regular fw-400\" style=\"color: var(--gray-400)\">\r\n {{ name }}\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"flex gap-2\">\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"zoomOut()\">\r\n <ng-container [ngTemplateOutlet]=\"zoomOutSvg\" />\r\n </button>\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"zoomIn()\">\r\n <ng-container [ngTemplateOutlet]=\"zoomInSvg\" />\r\n </button>\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"resetZoom()\">\r\n <ng-container [ngTemplateOutlet]=\"refreshSvg\" />\r\n </button>\r\n\r\n <button class=\"s4y-action-btn\" type=\"button\" (click)=\"toggleFullscreen()\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"\r\n fullScreenImage() ? fullScreenExitSvg : fullscreenSvg\r\n \"\r\n />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"s4y-preview-img-container\">\r\n <div class=\"s4y-img-preview\" [class.full-screen-img]=\"fullScreenImage()\">\r\n <img\r\n #imgEl\r\n style=\"transform-origin: center center\"\r\n [src]=\"src\"\r\n alt=\"Imagem\"\r\n (dblclick)=\"resetZoom()\"\r\n />\r\n </div>\r\n\r\n <div class=\"s4y-preview-clickable\" (click)=\"close()\"></div>\r\n </div>\r\n</div>\r\n\r\n<!-- SVG -->\r\n\r\n<ng-template #fullscreenSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #fullScreenExitSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18 7H22V9H16V3H18V7ZM8 9H2V7H6V3H8V9ZM18 17V21H16V15H22V17H18ZM8 15V21H6V17H2V15H8Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #zoomInSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM10 10V7H12V10H15V12H12V15H10V12H7V10H10Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n<ng-template #zoomOutSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM7 10H15V12H7V10Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n\r\n<ng-template #refreshSvg>\r\n <svg\r\n width=\"24px\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n d=\"M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z\"\r\n ></path>\r\n </svg>\r\n</ng-template>\r\n", styles: [".s4y-image-preview-container{width:100%;display:flex;flex-direction:column;gap:1.2rem;min-height:100dvh}.s4y-image-preview-container .s4y-action-btn{border-radius:50%;height:3rem;width:3rem}.s4y-image-preview-container .s4y-action-btn:hover{transition:.2s ease;background-color:var(--gray-700)}.s4y-image-preview-container .s4y-preview-controls{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;backdrop-filter:blur(6px);background:color-mix(in oklab,#000 45%,transparent);margin-bottom:.5rem;align-items:center;height:5rem;flex-shrink:0;padding:0 1.8rem}.s4y-image-preview-container .s4y-preview-controls button{line-height:0;color:#fff}.s4y-image-preview-container .s4y-preview-controls .btn-close{font-size:2rem;transition:.2s ease}.s4y-image-preview-container .s4y-preview-img-container{flex-grow:1;z-index:3;position:relative;display:flex;align-items:center;padding-bottom:1.2rem}.s4y-image-preview-container .s4y-img-preview{margin:0 auto;display:flex;align-items:center;justify-content:center;z-index:2;width:90%;max-width:70rem;transition:.5s ease}.s4y-image-preview-container .s4y-img-preview img{height:auto;border-radius:var(--radius);width:100%;transition:.5s ease}.s4y-image-preview-container .s4y-img-preview.full-screen-img{max-width:100%;height:auto}.s4y-image-preview-container .s4y-preview-clickable{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}\n"] }]
|
|
3211
3211
|
}] });
|
|
3212
3212
|
|
|
3213
3213
|
class ImageService {
|
|
@@ -3266,7 +3266,10 @@ class ImageComponent {
|
|
|
3266
3266
|
renderer = inject(Renderer2);
|
|
3267
3267
|
destroy = inject(DestroyRef);
|
|
3268
3268
|
constructor() { }
|
|
3269
|
-
src = input(''
|
|
3269
|
+
src = input('', {
|
|
3270
|
+
alias: 's4ySrc',
|
|
3271
|
+
});
|
|
3272
|
+
innerTpl = input();
|
|
3270
3273
|
fileName = input();
|
|
3271
3274
|
disablePreview = input(false);
|
|
3272
3275
|
withOverlay = input(false);
|
|
@@ -3276,12 +3279,13 @@ class ImageComponent {
|
|
|
3276
3279
|
this.configureWrapperElement();
|
|
3277
3280
|
this.configureOverlay();
|
|
3278
3281
|
this.configureEyeSvg();
|
|
3282
|
+
this.configureImageSrc();
|
|
3279
3283
|
}
|
|
3280
3284
|
ngAfterViewInit() {
|
|
3281
3285
|
this.onShowOverlay();
|
|
3282
3286
|
}
|
|
3283
3287
|
configureWrapperElement() {
|
|
3284
|
-
const img = this.
|
|
3288
|
+
const img = this.ImageEl;
|
|
3285
3289
|
if (!img)
|
|
3286
3290
|
return;
|
|
3287
3291
|
const parent = img.parentNode;
|
|
@@ -3312,6 +3316,13 @@ class ImageComponent {
|
|
|
3312
3316
|
svgContainer.innerHTML = this.eyeSvg;
|
|
3313
3317
|
this.renderer.appendChild(overlay, svgContainer);
|
|
3314
3318
|
}
|
|
3319
|
+
configureImageSrc() {
|
|
3320
|
+
const imgEl = this.ImageEl;
|
|
3321
|
+
const src = this.src();
|
|
3322
|
+
if (!imgEl || !src)
|
|
3323
|
+
return;
|
|
3324
|
+
this.renderer.setAttribute(imgEl, 'src', src);
|
|
3325
|
+
}
|
|
3315
3326
|
onShowOverlay() {
|
|
3316
3327
|
const wrapper = this.wrapper;
|
|
3317
3328
|
const overlay = this.overlayEl;
|
|
@@ -3341,8 +3352,11 @@ class ImageComponent {
|
|
|
3341
3352
|
get eyeSvg() {
|
|
3342
3353
|
return `<svg width="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff"><path d="M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z"></path></svg>`;
|
|
3343
3354
|
}
|
|
3355
|
+
get ImageEl() {
|
|
3356
|
+
return this.elRef.nativeElement;
|
|
3357
|
+
}
|
|
3344
3358
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3345
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ImageComponent, isStandalone: true, selector: "img[s4yImage]", inputs: { src: { classPropertyName: "src", publicName: "
|
|
3359
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ImageComponent, isStandalone: true, selector: "img[s4yImage]", inputs: { src: { classPropertyName: "src", publicName: "s4ySrc", isSignal: true, isRequired: false, transformFunction: null }, innerTpl: { classPropertyName: "innerTpl", publicName: "innerTpl", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, disablePreview: { classPropertyName: "disablePreview", publicName: "disablePreview", isSignal: true, isRequired: false, transformFunction: null }, withOverlay: { classPropertyName: "withOverlay", publicName: "withOverlay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".s4y-overlay-bg{background-color:#0009}.s4y-preview-pane{height:100dvh;width:100dvw;height:auto;overflow:auto;display:flex;flex-direction:column}.s4y-img-overlay{background-color:#0009;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0;transition:.3s ease;opacity:0;display:flex;align-items:center;justify-content:center}.s4y-img-overlay.active{opacity:1}.s4y-eye-overlay{color:#fff}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
3346
3360
|
}
|
|
3347
3361
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImageComponent, decorators: [{
|
|
3348
3362
|
type: Component,
|