ng-horizontal-scroller/fesm2022/ng-horizontal-scroller.mjs

A horizontal infinite scroller component for Angular

import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Input, ViewEncapsulation, Component } from '@angular/core';

class HorizontalScrollerComponent {
    speed = 20;
    scrollSpeed = `${this.speed}s`;
    items = [
        {
            thumbnail: 'https://cdn.simpleicons.org/react/61DAFB',
            description: 'React',
            url: 'https://cdn.simpleicons.org/react/61DAFB',
        },
        {
            thumbnail: 'https://cdn.simpleicons.org/angular/DD0031',
            description: 'Angular',
            url: 'https://cdn.simpleicons.org/angular/DD0031',
        },
        {
            thumbnail: 'https://cdn.simpleicons.org/svelte/FF3E00',
            description: 'Svelte',
            url: 'https://cdn.simpleicons.org/svelte/FF3E00',
        },
        {
            thumbnail: 'https://cdn.simpleicons.org/nextdotjs/000000',
            description: 'Next',
        },
        {
            thumbnail: 'https://cdn.simpleicons.org/tailwindcss/06B6D4',
            description: 'Tailwind',
        },
        {
            thumbnail: 'https://cdn.simpleicons.org/vite/646CFF',
            description: 'Vite',
        },
        {
            thumbnail: 'https://cdn.simpleicons.org/javascript/F0DB4F',
            description: 'Javascript',
        },
        {
            thumbnail: 'https://cdn.simpleicons.org/python/4B8BBE',
            description: 'Python',
        },
    ];
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: HorizontalScrollerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: HorizontalScrollerComponent, isStandalone: true, selector: "ng-horizontal-scroller", inputs: { speed: "speed", items: "items" }, ngImport: i0, template: "<div class=\"overflow-hidden whitespace-nowrap\">\r\n  <div\r\n    data-testid=\"logo-container\"\r\n    class=\"flex animate-scroll hover-pause w-max\"\r\n    [ngStyle]=\"{'animation-duration': scrollSpeed}\"\r\n  >\r\n    <div\r\n      class=\"flex justify-around items-center py-4 px-4 sm:px-8 space-x-4 sm:space-x-10\"\r\n      *ngFor=\"let item of items.concat(items)\"\r\n    >\r\n      <div class=\"p-6 flex flex-col\">\r\n        <a target=\"_blank\" [href]=\"item?.url\">\r\n          <img\r\n            data-testid=\"logo-img\"\r\n            [src]=\"item.thumbnail\"\r\n            class=\"h-auto min-h-14 max-h-full transition-transform duration-300 hover:scale-[1.15] object-contain\"\r\n          />\r\n          <span\r\n            *ngIf=\"item?.description\"\r\n            class=\"text-center text-black py-2 text-sm sm:text-lg\"\r\n            >{{ item?.description }}</span\r\n          >\r\n        </a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.animate-scroll{animation:scroll 20s linear infinite}.hover-pause:hover{animation-play-state:paused}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: HorizontalScrollerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ng-horizontal-scroller', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"overflow-hidden whitespace-nowrap\">\r\n  <div\r\n    data-testid=\"logo-container\"\r\n    class=\"flex animate-scroll hover-pause w-max\"\r\n    [ngStyle]=\"{'animation-duration': scrollSpeed}\"\r\n  >\r\n    <div\r\n      class=\"flex justify-around items-center py-4 px-4 sm:px-8 space-x-4 sm:space-x-10\"\r\n      *ngFor=\"let item of items.concat(items)\"\r\n    >\r\n      <div class=\"p-6 flex flex-col\">\r\n        <a target=\"_blank\" [href]=\"item?.url\">\r\n          <img\r\n            data-testid=\"logo-img\"\r\n            [src]=\"item.thumbnail\"\r\n            class=\"h-auto min-h-14 max-h-full transition-transform duration-300 hover:scale-[1.15] object-contain\"\r\n          />\r\n          <span\r\n            *ngIf=\"item?.description\"\r\n            class=\"text-center text-black py-2 text-sm sm:text-lg\"\r\n            >{{ item?.description }}</span\r\n          >\r\n        </a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.animate-scroll{animation:scroll 20s linear infinite}.hover-pause:hover{animation-play-state:paused}\n"] }]
        }], propDecorators: { speed: [{
                type: Input
            }], items: [{
                type: Input
            }] } });

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

export { HorizontalScrollerComponent };
//# sourceMappingURL=ng-horizontal-scroller.mjs.map