primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
278 lines (260 loc) • 11.6 kB
JavaScript
import * as i1 from '@angular/common';
import { isPlatformBrowser, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, inject, ContentChildren, ContentChild, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { SharedModule, PrimeTemplate } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { BaseStyle } from 'primeng/base';
const theme = ({ dt }) => `
.p-imagecompare {
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 16 / 9;
}
.p-imagecompare img {
width: 100%;
height: 100%;
position: absolute;
}
.p-imagecompare img + img {
clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
.p-imagecompare:dir(rtl) img + img {
clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}
.p-imagecompare-slider {
position: relative;
-webkit-appearance: none;
width: calc(100% + ${dt('imagecompare.handle.size')});
height: 100%;
margin-inline-start: calc(-1 * calc(${dt('imagecompare.handle.size')} / 2));
background-color: transparent;
outline: none;
transition: all ${dt('imagecompare.handle.transition.duration')};
}
.p-imagecompare-slider::-webkit-slider-thumb {
-webkit-appearance: none;
height: ${dt('imagecompare.handle.size')};
width: ${dt('imagecompare.handle.size')};
background: ${dt('imagecompare.handle.background')};
border: ${dt('imagecompare.handle.border.width')} solid ${dt('imagecompare.handle.border.color')};
border-radius: ${dt('imagecompare.handle.border.radius')};
background-size: contain;
cursor: ew-resize;
transition: all ${dt('imagecompare.handle.transition.duration')};
}
.p-imagecompare-slider::-moz-range-thumb {
height: ${dt('imagecompare.handle.size')};
width: ${dt('imagecompare.handle.size')};
background: ${dt('imagecompare.handle.background')};
border: ${dt('imagecompare.handle.border.width')} ${dt('imagecompare.handle.border.style')} ${dt('imagecompare.handle.border.color')};
border-radius: ${dt('imagecompare.handle.border.radius')};
background-size: contain;
cursor: ew-resize;
}
.p-imagecompare-slider:focus-visible::-webkit-slider-thumb {
box-shadow: ${dt('imagecompare.handle.focus.ring.shadow')};
outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};
outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};
}
.p-imagecompare-slider:focus-visible::-moz-range-thumb {
box-shadow: ${dt('imagecompare.handle.focus.ring.shadow')};
outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};
outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};
}
.p-imagecompare-slider:hover {
width: calc(100% + ${dt('imagecompare.handle.hover.size')});
margin-inline-start: calc(-1 * calc(${dt('imagecompare.handle.hover.size')} / 2));
}
.p-imagecompare-slider:hover::-webkit-slider-thumb {
background: ${dt('imagecompare.handle.hover.background')};
border-color: ${dt('imagecompare.handle.hover.border.color')};
height: ${dt('imagecompare.handle.hover.size')};
width: ${dt('imagecompare.handle.hover.size')};
}
.p-imagecompare-slider:hover::-moz-range-thumb {
background: ${dt('imagecompare.handle.hover.background')};
border-color: ${dt('imagecompare.handle.hover.border.color')};
height: ${dt('imagecompare.handle.hover.size')};
width: ${dt('imagecompare.handle.hover.size')};
}
`;
const classes = {
root: 'p-imagecompare',
slider: 'p-imagecompare-slider'
};
class ImageCompareStyle extends BaseStyle {
name = 'imagecompare';
theme = theme;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ImageCompareStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ImageCompareStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", 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 = {}));
/**
* Compare two images side by side with a slider.
* @group Components
*/
class ImageCompare extends BaseComponent {
isRTL = false;
/**
* Index of the element in tabbing order.
* @defaultValue 0
* @group Props
*/
tabindex;
/**
* Defines a string value that labels an interactive element.
* @group Props
*/
ariaLabelledby;
/**
* Identifier of the underlying input element.
* @group Props
*/
ariaLabel;
/**
* Template for the left side.
* @group Templates
*/
leftTemplate;
/**
* Template for the right side.
* @group Templates
*/
rightTemplate;
_leftTemplate;
_rightTemplate;
templates;
_componentStyle = inject(ImageCompareStyle);
mutationObserver;
ngOnInit() {
super.ngOnInit();
this.updateDirection();
this.observeDirectionChanges();
}
ngAfterContentInit() {
this.templates?.forEach((item) => {
switch (item.getType()) {
case 'left':
this._leftTemplate = item.template;
break;
case 'right':
this._rightTemplate = item.template;
break;
}
});
}
onSlide(event) {
const value = event.target.value;
const image = event.target.previousElementSibling;
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);
}
}
ngOnDestroy() {
if (this.mutationObserver) {
this.mutationObserver.disconnect();
}
super.ngOnDestroy();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ImageCompare, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: ImageCompare, isStandalone: true, selector: "p-imageCompare, p-imagecompare, p-image-compare", inputs: { tabindex: "tabindex", ariaLabelledby: "ariaLabelledby", ariaLabel: "ariaLabel" }, host: { properties: { "attr.tabindex": "tabindex", "attr.aria-labelledby": "ariaLabelledby", "attr.aria-label": "ariaLabel" }, classAttribute: "p-imagecompare" }, providers: [ImageCompareStyle], queries: [{ propertyName: "leftTemplate", first: true, predicate: ["left"] }, { propertyName: "rightTemplate", first: true, predicate: ["right"] }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
<ng-template *ngTemplateOutlet="leftTemplate || _leftTemplate"></ng-template>
<ng-template *ngTemplateOutlet="rightTemplate || _rightTemplate"></ng-template>
<input type="range" min="0" max="100" value="50" (input)="onSlide($event)" [class]="cx('slider')" />
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ImageCompare, decorators: [{
type: Component,
args: [{
selector: 'p-imageCompare, p-imagecompare, p-image-compare',
standalone: true,
imports: [CommonModule, SharedModule],
template: `
<ng-template *ngTemplateOutlet="leftTemplate || _leftTemplate"></ng-template>
<ng-template *ngTemplateOutlet="rightTemplate || _rightTemplate"></ng-template>
<input type="range" min="0" max="100" value="50" (input)="onSlide($event)" [class]="cx('slider')" />
`,
host: {
class: 'p-imagecompare',
'[attr.tabindex]': 'tabindex',
'[attr.aria-labelledby]': 'ariaLabelledby',
'[attr.aria-label]': 'ariaLabel'
},
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [ImageCompareStyle]
}]
}], propDecorators: { tabindex: [{
type: Input
}], ariaLabelledby: [{
type: Input
}], ariaLabel: [{
type: Input
}], leftTemplate: [{
type: ContentChild,
args: ['left', { descendants: false }]
}], rightTemplate: [{
type: ContentChild,
args: ['right', { descendants: false }]
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}] } });
class ImageCompareModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ImageCompareModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: ImageCompareModule, imports: [ImageCompare, SharedModule], exports: [ImageCompare, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ImageCompareModule, imports: [ImageCompare, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", 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