@obliczeniowo/elementary/fesm2022/obliczeniowo-elementary-perspective-slider.mjs

Library made in Angular version 20

import * as i3 from '@obliczeniowo/elementary/icons';
import { IconsModule } from '@obliczeniowo/elementary/icons';
import * as i2 from '@obliczeniowo/elementary/buttons';
import { ButtonsModule } from '@obliczeniowo/elementary/buttons';
import * as i0 from '@angular/core';
import { TemplateRef, HostBinding, ContentChildren, Component, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { ElementaryMath } from '@obliczeniowo/elementary/math';
import { Point2D } from '@obliczeniowo/elementary/classes';

class PerspectiveSliderComponent {
    elementRef;
    /** Templates to display aliments */
    templates;
    height = 0;
    startIndex = 1;
    offset = new Point2D();
    time;
    move = new Point2D(70, 15);
    dh = 0;
    angle = 10;
    constructor(elementRef) {
        this.elementRef = elementRef;
    }
    ngOnInit() {
    }
    ngAfterViewChecked() {
        if (this.templates?.length > 1) {
            const items = Array.from(this.elementRef.nativeElement.querySelectorAll('.item'));
            const size = items.reduce((p, c) => [
                p[0] < c.clientWidth ? c.clientWidth : p[0],
                p[1] < c.clientHeight + this.move.y ? c.clientHeight + this.move.y : p[1]
            ], [0, 0]);
            size[1] = size[1] + size[0] * Math.sin(Math.PI / 18);
            if (this.height !== size[1]) {
                setTimeout(() => {
                    this.height = size[1];
                    this.dh = size[0] * Math.sin(Math.PI / 18);
                });
            }
        }
    }
    ngOnDestroy() {
        if (this.time) {
            clearInterval(this.time);
            this.time = undefined;
        }
    }
    inRange(index) {
        return this.startIndex <= index && this.startIndex + 3 > index && index > 0;
    }
    add(offset) {
        const previous = this.startIndex;
        this.startIndex = ElementaryMath.minmax(this.startIndex + offset, -1, this.templates.length - 3);
        if (previous !== this.startIndex) {
            this.offset = this.offset.add(new Point2D(this.move.x * offset, this.move.y * offset));
            if (!this.time) {
                this.time = setInterval(() => this.animation(), 100);
            }
        }
    }
    animation() {
        this.offset = this.offset.multiply(0.8);
        if (Math.abs(this.offset.sickLength()) < 1) {
            this.offset = new Point2D();
            clearInterval(this.time);
            this.time = undefined;
        }
    }
    opacity(index) {
        const i = Math.min(index - this.startIndex + 1 + this.offset.x / this.move.x, 3);
        return (i * i) / 9;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PerspectiveSliderComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: PerspectiveSliderComponent, isStandalone: false, selector: "obl-perspective-slider", host: { properties: { "style.height.px": "this.height" } }, queries: [{ propertyName: "templates", predicate: TemplateRef }], ngImport: i0, template: "@for (template of templates; track $index) {\n  @if (inRange($index)) {\n    <div\n      class=\"item\"\n      [style.left.px]=\"($index - startIndex) * move.x + offset.x - move.x\"\n      [style.top.px]=\"($index - startIndex) * move.y + offset.y - move.y + dh / 2\"\n      [style.opacity]=\"opacity($index)\"\n      [style.transform]=\"\n        'skew(' +\n        ((3 - $index + startIndex) / 3 - offset.x / move.x) * angle +\n        'deg, ' +\n        -angle +\n        'deg)'\n      \"\n    >\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    </div>\n  }\n}\n\n<button oblButton class=\"next\" (click)=\"add(1)\">\n  <obl-icon [name]=\"'right'\"></obl-icon>\n</button>\n<button oblButton class=\"previous\" (click)=\"add(-1)\">\n  <obl-icon [name]=\"'left'\"></obl-icon>\n</button>\n\n<ng-content></ng-content>\n", styles: [":host{display:flex;position:relative;height:100%;overflow:hidden}:host button{z-index:1000;position:absolute;top:calc(50% - 25px);--obl-default-button-border-radius: 50%}:host button.next{right:0}div.item{transform:skew(0,-20deg);position:absolute;width:calc(100% - 100px)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ButtonDirective, selector: "oblButton, [oblButton]", inputs: ["oblButton", "icon", "blockWhenLoading", "loading", "toggle", "selected", "link", "target"], exportAs: ["oblButton"] }, { kind: "component", type: i3.IconComponent, selector: "obl-icon", inputs: ["name", "width"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PerspectiveSliderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'obl-perspective-slider', standalone: false, template: "@for (template of templates; track $index) {\n  @if (inRange($index)) {\n    <div\n      class=\"item\"\n      [style.left.px]=\"($index - startIndex) * move.x + offset.x - move.x\"\n      [style.top.px]=\"($index - startIndex) * move.y + offset.y - move.y + dh / 2\"\n      [style.opacity]=\"opacity($index)\"\n      [style.transform]=\"\n        'skew(' +\n        ((3 - $index + startIndex) / 3 - offset.x / move.x) * angle +\n        'deg, ' +\n        -angle +\n        'deg)'\n      \"\n    >\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    </div>\n  }\n}\n\n<button oblButton class=\"next\" (click)=\"add(1)\">\n  <obl-icon [name]=\"'right'\"></obl-icon>\n</button>\n<button oblButton class=\"previous\" (click)=\"add(-1)\">\n  <obl-icon [name]=\"'left'\"></obl-icon>\n</button>\n\n<ng-content></ng-content>\n", styles: [":host{display:flex;position:relative;height:100%;overflow:hidden}:host button{z-index:1000;position:absolute;top:calc(50% - 25px);--obl-default-button-border-radius: 50%}:host button.next{right:0}div.item{transform:skew(0,-20deg);position:absolute;width:calc(100% - 100px)}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { templates: [{
                type: ContentChildren,
                args: [TemplateRef]
            }], height: [{
                type: HostBinding,
                args: ['style.height.px']
            }] } });

class PerspectiveSliderModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PerspectiveSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: PerspectiveSliderModule, declarations: [PerspectiveSliderComponent], imports: [CommonModule,
            ButtonsModule,
            IconsModule], exports: [PerspectiveSliderComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PerspectiveSliderModule, imports: [CommonModule,
            ButtonsModule,
            IconsModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PerspectiveSliderModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        PerspectiveSliderComponent
                    ],
                    imports: [
                        CommonModule,
                        ButtonsModule,
                        IconsModule
                    ],
                    exports: [
                        PerspectiveSliderComponent
                    ]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { PerspectiveSliderComponent, PerspectiveSliderModule };
//# sourceMappingURL=obliczeniowo-elementary-perspective-slider.mjs.map