primeng/fesm2022/primeng-imagecompare.mjs.map

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

{"version":3,"file":"primeng-imagecompare.mjs","sources":["../../src/imagecompare/style/imagecomparestyle.ts","../../src/imagecompare/imagecompare.ts","../../src/imagecompare/primeng-imagecompare.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BaseStyle } from 'primeng/base';\n\nconst theme = ({ dt }) => `\n.p-imagecompare {\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n    aspect-ratio: 16 / 9;\n}\n\n.p-imagecompare img {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n}\n\n.p-imagecompare img + img {\n    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);\n}\n\n.p-imagecompare:dir(rtl) img + img {\n    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);\n}\n\n.p-imagecompare-slider {\n    position: relative;\n    -webkit-appearance: none;\n    width: calc(100% + ${dt('imagecompare.handle.size')});\n    height: 100%;\n    margin-inline-start: calc(-1 * calc(${dt('imagecompare.handle.size')} / 2));\n    background-color: transparent;\n    outline: none;\n    transition: all ${dt('imagecompare.handle.transition.duration')};\n}\n\n.p-imagecompare-slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    height: ${dt('imagecompare.handle.size')};\n    width: ${dt('imagecompare.handle.size')};\n    background: ${dt('imagecompare.handle.background')};\n    border: ${dt('imagecompare.handle.border.width')} solid ${dt('imagecompare.handle.border.color')};\n    border-radius: ${dt('imagecompare.handle.border.radius')};\n    background-size: contain;\n    cursor: ew-resize;\n    transition: all ${dt('imagecompare.handle.transition.duration')};\n}\n\n.p-imagecompare-slider::-moz-range-thumb {\n    height: ${dt('imagecompare.handle.size')};\n    width: ${dt('imagecompare.handle.size')};\n    background: ${dt('imagecompare.handle.background')};\n    border: ${dt('imagecompare.handle.border.width')} ${dt('imagecompare.handle.border.style')} ${dt('imagecompare.handle.border.color')};\n    border-radius: ${dt('imagecompare.handle.border.radius')};\n    background-size: contain;\n    cursor: ew-resize;\n}\n\n.p-imagecompare-slider:focus-visible::-webkit-slider-thumb {\n    box-shadow: ${dt('imagecompare.handle.focus.ring.shadow')};\n    outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};\n    outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};\n}\n\n.p-imagecompare-slider:focus-visible::-moz-range-thumb {\n    box-shadow: ${dt('imagecompare.handle.focus.ring.shadow')};\n    outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};\n    outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};\n}\n\n.p-imagecompare-slider:hover {\n    width: calc(100% + ${dt('imagecompare.handle.hover.size')});\n    margin-inline-start: calc(-1 * calc(${dt('imagecompare.handle.hover.size')} / 2));\n}\n\n.p-imagecompare-slider:hover::-webkit-slider-thumb {\n    background: ${dt('imagecompare.handle.hover.background')};\n    border-color: ${dt('imagecompare.handle.hover.border.color')};\n    height: ${dt('imagecompare.handle.hover.size')};\n    width: ${dt('imagecompare.handle.hover.size')};\n}\n\n.p-imagecompare-slider:hover::-moz-range-thumb {\n    background: ${dt('imagecompare.handle.hover.background')};\n    border-color: ${dt('imagecompare.handle.hover.border.color')};\n    height: ${dt('imagecompare.handle.hover.size')};\n    width: ${dt('imagecompare.handle.hover.size')};\n}\n`;\n\nconst classes = {\n    root: 'p-imagecompare',\n    slider: 'p-imagecompare-slider'\n};\n\n@Injectable()\nexport class ImageCompareStyle extends BaseStyle {\n    name = 'imagecompare';\n\n    theme = theme;\n\n    classes = classes;\n}\n\n/**\n *\n * ImageCompare compares two images side by side with a slider.\n *\n * [Live Demo](https://www.primeng.org/imagecompare/)\n *\n * @module imagecomparestyle\n *\n */\nexport enum ImageCompareClasses {\n    /**\n     * Class name of the root element\n     */\n    root = 'p-imagecompare',\n    /**\n     * Class name of the slider element\n     */\n    slider = 'p-imagecompare-slider'\n}\nexport interface ImageCompareStyle extends BaseStyle {}\n","import { CommonModule, isPlatformBrowser } from '@angular/common';\nimport { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, inject, Input, NgModule, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { PrimeTemplate, SharedModule } from 'primeng/api';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { ImageCompareStyle } from './style/imagecomparestyle';\n\n/**\n * Compare two images side by side with a slider.\n * @group Components\n */\n@Component({\n    selector: 'p-imageCompare, p-imagecompare, p-image-compare',\n    standalone: true,\n    imports: [CommonModule, SharedModule],\n    template: `\n        <ng-template *ngTemplateOutlet=\"leftTemplate || _leftTemplate\"></ng-template>\n        <ng-template *ngTemplateOutlet=\"rightTemplate || _rightTemplate\"></ng-template>\n\n        <input type=\"range\" min=\"0\" max=\"100\" value=\"50\" (input)=\"onSlide($event)\" [class]=\"cx('slider')\" />\n    `,\n    host: {\n        class: 'p-imagecompare',\n        '[attr.tabindex]': 'tabindex',\n        '[attr.aria-labelledby]': 'ariaLabelledby',\n        '[attr.aria-label]': 'ariaLabel'\n    },\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    providers: [ImageCompareStyle]\n})\nexport class ImageCompare extends BaseComponent implements AfterContentInit {\n    isRTL: boolean = false;\n\n    /**\n     * Index of the element in tabbing order.\n     * @defaultValue 0\n     * @group Props\n     */\n    @Input() tabindex: number | undefined;\n    /**\n     * Defines a string value that labels an interactive element.\n     * @group Props\n     */\n    @Input() ariaLabelledby: string | undefined;\n    /**\n     * Identifier of the underlying input element.\n     * @group Props\n     */\n    @Input() ariaLabel: string | undefined;\n\n    /**\n     * Template for the left side.\n     * @group Templates\n     */\n    @ContentChild('left', { descendants: false }) leftTemplate: TemplateRef<any>;\n\n    /**\n     * Template for the right side.\n     * @group Templates\n     */\n    @ContentChild('right', { descendants: false }) rightTemplate: TemplateRef<any>;\n\n    _leftTemplate: TemplateRef<any> | undefined;\n\n    _rightTemplate: TemplateRef<any> | undefined;\n\n    @ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate> | undefined;\n\n    _componentStyle = inject(ImageCompareStyle);\n\n    mutationObserver: MutationObserver;\n\n    ngOnInit() {\n        super.ngOnInit();\n        this.updateDirection();\n        this.observeDirectionChanges();\n    }\n\n    ngAfterContentInit() {\n        this.templates?.forEach((item) => {\n            switch (item.getType()) {\n                case 'left':\n                    this._leftTemplate = item.template;\n                    break;\n                case 'right':\n                    this._rightTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    onSlide(event) {\n        const value = event.target.value;\n        const image = event.target.previousElementSibling;\n\n        if (this.isRTL) {\n            image.style.clipPath = `polygon(${100 - value}% 0, 100% 0, 100% 100%, ${100 - value}% 100%)`;\n        } else {\n            image.style.clipPath = `polygon(0 0, ${value}% 0, ${value}% 100%, 0 100%)`;\n        }\n    }\n\n    updateDirection() {\n        this.isRTL = !!this.el.nativeElement.closest('[dir=\"rtl\"]');\n    }\n\n    observeDirectionChanges() {\n        if (isPlatformBrowser(this.platformId)) {\n            const targetNode = document?.documentElement;\n            const config = { attributes: true, attributeFilter: ['dir'] };\n\n            this.mutationObserver = new MutationObserver(() => {\n                this.updateDirection();\n            });\n\n            this.mutationObserver.observe(targetNode, config);\n        }\n    }\n\n    ngOnDestroy() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n        }\n\n        super.ngOnDestroy();\n    }\n}\n\n@NgModule({\n    imports: [ImageCompare, SharedModule],\n    exports: [ImageCompare, SharedModule]\n})\nexport class ImageCompareModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}