primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
178 lines (173 loc) • 9.86 kB
JavaScript
import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, input, contentChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { SharedModule } from 'primeng/api';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind, BindModule } from 'primeng/bind';
import { style } from '@primeuix/styles/imagecompare';
import { BaseStyle } from 'primeng/base';
const classes = {
root: 'p-imagecompare',
slider: 'p-imagecompare-slider'
};
class ImageCompareStyle extends BaseStyle {
name = 'imagecompare';
style = style;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ImageCompareStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ImageCompareStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ImageCompareStyle, decorators: [{
type: Injectable
}] });
/**
*
* ImageCompare compares two images side by side with a slider.
*
* [Live Demo](https://www.primeng.org/imagecompare/)
*
* @module imagecomparestyle
*
*/
var ImageCompareClasses;
(function (ImageCompareClasses) {
/**
* Class name of the root element
*/
ImageCompareClasses["root"] = "p-imagecompare";
/**
* Class name of the slider element
*/
ImageCompareClasses["slider"] = "p-imagecompare-slider";
})(ImageCompareClasses || (ImageCompareClasses = {}));
const IMAGECOMPARE_INSTANCE = new InjectionToken('IMAGECOMPARE_INSTANCE');
/**
* Compare two images side by side with a slider.
* @group Components
* @deprecated Use Compare component instead.
*/
class ImageCompare extends BaseComponent {
componentName = 'ImageCompare';
$pcImageCompare = inject(IMAGECOMPARE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
bindDirectiveInstance = inject(Bind, { self: true });
constructor() {
super();
}
/**
* Index of the element in tabbing order.
* @defaultValue 0
* @group Props
*/
tabindex = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "tabindex" }] : /* istanbul ignore next */ []));
/**
* Defines a string value that labels an interactive element.
* @group Props
*/
ariaLabelledby = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
/**
* Identifier of the underlying input element.
* @group Props
*/
ariaLabel = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
/**
* Custom left side template.
* @group Templates
*/
leftTemplate = contentChild('left', { ...(ngDevMode ? { debugName: "leftTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Custom right side template.
* @group Templates
*/
rightTemplate = contentChild('right', { ...(ngDevMode ? { debugName: "rightTemplate" } : /* istanbul ignore next */ {}), descendants: false });
_componentStyle = inject(ImageCompareStyle);
mutationObserver;
isRTL = false;
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
}
onInit() {
this.updateDirection();
this.observeDirectionChanges();
}
onSlide(event) {
const target = event.target;
const value = target.value;
const image = target.previousElementSibling;
if (image) {
if (this.isRTL) {
image.style.clipPath = `polygon(${100 - +value}% 0, 100% 0, 100% 100%, ${100 - +value}% 100%)`;
}
else {
image.style.clipPath = `polygon(0 0, ${value}% 0, ${value}% 100%, 0 100%)`;
}
}
}
updateDirection() {
this.isRTL = !!this.el.nativeElement.closest('[dir="rtl"]');
}
observeDirectionChanges() {
if (isPlatformBrowser(this.platformId)) {
const targetNode = document?.documentElement;
const config = { attributes: true, attributeFilter: ['dir'] };
this.mutationObserver = new MutationObserver(() => {
this.updateDirection();
});
this.mutationObserver.observe(targetNode, config);
}
}
onDestroy() {
if (this.mutationObserver) {
this.mutationObserver.disconnect();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ImageCompare, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: ImageCompare, isStandalone: true, selector: "p-image-compare, p-imagecompare", inputs: { tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cx('root')", "attr.tabindex": "tabindex()", "attr.aria-labelledby": "ariaLabelledby()", "attr.aria-label": "ariaLabel()" } }, providers: [ImageCompareStyle, { provide: IMAGECOMPARE_INSTANCE, useExisting: ImageCompare }, { provide: PARENT_INSTANCE, useExisting: ImageCompare }], queries: [{ propertyName: "leftTemplate", first: true, predicate: ["left"], isSignal: true }, { propertyName: "rightTemplate", first: true, predicate: ["right"], isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
<ng-container *ngTemplateOutlet="leftTemplate()"></ng-container>
<ng-container *ngTemplateOutlet="rightTemplate()"></ng-container>
<input type="range" min="0" max="100" value="50" (input)="onSlide($event)" [class]="cx('slider')" [pBind]="ptm('slider')" />
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ImageCompare, decorators: [{
type: Component,
args: [{
selector: 'p-image-compare, p-imagecompare',
standalone: true,
imports: [NgTemplateOutlet, SharedModule, BindModule],
template: `
<ng-container *ngTemplateOutlet="leftTemplate()"></ng-container>
<ng-container *ngTemplateOutlet="rightTemplate()"></ng-container>
<input type="range" min="0" max="100" value="50" (input)="onSlide($event)" [class]="cx('slider')" [pBind]="ptm('slider')" />
`,
host: {
'[class]': "cx('root')",
'[attr.tabindex]': 'tabindex()',
'[attr.aria-labelledby]': 'ariaLabelledby()',
'[attr.aria-label]': 'ariaLabel()'
},
hostDirectives: [Bind],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [ImageCompareStyle, { provide: IMAGECOMPARE_INSTANCE, useExisting: ImageCompare }, { provide: PARENT_INSTANCE, useExisting: ImageCompare }]
}]
}], ctorParameters: () => [], propDecorators: { tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], leftTemplate: [{ type: i0.ContentChild, args: ['left', { ...{ descendants: false }, isSignal: true }] }], rightTemplate: [{ type: i0.ContentChild, args: ['right', { ...{ descendants: false }, isSignal: true }] }] } });
class ImageCompareModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ImageCompareModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: ImageCompareModule, imports: [ImageCompare, SharedModule], exports: [ImageCompare, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ImageCompareModule, imports: [ImageCompare, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ImageCompareModule, decorators: [{
type: NgModule,
args: [{
imports: [ImageCompare, SharedModule],
exports: [ImageCompare, SharedModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ImageCompare, ImageCompareClasses, ImageCompareModule, ImageCompareStyle };
//# sourceMappingURL=primeng-imagecompare.mjs.map