s4y-ui 5.6.1 → 5.7.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
|
@@ -3265,8 +3265,12 @@ class ImageComponent {
|
|
|
3265
3265
|
elRef = inject(ElementRef);
|
|
3266
3266
|
renderer = inject(Renderer2);
|
|
3267
3267
|
destroy = inject(DestroyRef);
|
|
3268
|
+
vcr = inject(ViewContainerRef);
|
|
3268
3269
|
constructor() { }
|
|
3269
|
-
src = input(''
|
|
3270
|
+
src = input('', {
|
|
3271
|
+
alias: 's4ySrc',
|
|
3272
|
+
});
|
|
3273
|
+
innerTpl = input();
|
|
3270
3274
|
fileName = input();
|
|
3271
3275
|
disablePreview = input(false);
|
|
3272
3276
|
withOverlay = input(false);
|
|
@@ -3276,12 +3280,13 @@ class ImageComponent {
|
|
|
3276
3280
|
this.configureWrapperElement();
|
|
3277
3281
|
this.configureOverlay();
|
|
3278
3282
|
this.configureEyeSvg();
|
|
3283
|
+
this.configureImageSrc();
|
|
3279
3284
|
}
|
|
3280
3285
|
ngAfterViewInit() {
|
|
3281
3286
|
this.onShowOverlay();
|
|
3282
3287
|
}
|
|
3283
3288
|
configureWrapperElement() {
|
|
3284
|
-
const img = this.
|
|
3289
|
+
const img = this.ImageEl;
|
|
3285
3290
|
if (!img)
|
|
3286
3291
|
return;
|
|
3287
3292
|
const parent = img.parentNode;
|
|
@@ -3312,6 +3317,13 @@ class ImageComponent {
|
|
|
3312
3317
|
svgContainer.innerHTML = this.eyeSvg;
|
|
3313
3318
|
this.renderer.appendChild(overlay, svgContainer);
|
|
3314
3319
|
}
|
|
3320
|
+
configureImageSrc() {
|
|
3321
|
+
const imgEl = this.ImageEl;
|
|
3322
|
+
const src = this.src();
|
|
3323
|
+
if (!imgEl || !src)
|
|
3324
|
+
return;
|
|
3325
|
+
this.renderer.setAttribute(imgEl, 'src', src);
|
|
3326
|
+
}
|
|
3315
3327
|
onShowOverlay() {
|
|
3316
3328
|
const wrapper = this.wrapper;
|
|
3317
3329
|
const overlay = this.overlayEl;
|
|
@@ -3341,8 +3353,11 @@ class ImageComponent {
|
|
|
3341
3353
|
get eyeSvg() {
|
|
3342
3354
|
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
3355
|
}
|
|
3356
|
+
get ImageEl() {
|
|
3357
|
+
return this.elRef.nativeElement;
|
|
3358
|
+
}
|
|
3344
3359
|
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: "
|
|
3360
|
+
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
3361
|
}
|
|
3347
3362
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImageComponent, decorators: [{
|
|
3348
3363
|
type: Component,
|