nefertiti-ui-library-dev
Version:
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
180 lines (170 loc) • 25.7 kB
JavaScript
import * as i0 from '@angular/core';
import { input, computed, ChangeDetectionStrategy, Component, EventEmitter, inject, DestroyRef, ChangeDetectorRef, Output, ViewChild, Input, Pipe } from '@angular/core';
import { NgOptimizedImage, CommonModule, NgClass, NgStyle } from '@angular/common';
import * as i1 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i2 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import { BehaviorSubject, filter, distinctUntilChanged, tap } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
class CardComponent {
imageUrl = input.required();
imageWidth = input.required();
imageHeight = input.required();
cardWidth = input('auto');
aspectRatio = computed(() => {
return `${this.imageWidth()} / ${this.imageHeight()}`;
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: CardComponent, isStandalone: true, selector: "nfr-card", inputs: { imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: true, transformFunction: null }, imageWidth: { classPropertyName: "imageWidth", publicName: "imageWidth", isSignal: true, isRequired: true, transformFunction: null }, imageHeight: { classPropertyName: "imageHeight", publicName: "imageHeight", isSignal: true, isRequired: true, transformFunction: null }, cardWidth: { classPropertyName: "cardWidth", publicName: "cardWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"nfr-card\" [style.width]=\"cardWidth()\">\r\n\r\n <section class=\"nfr-card__sub-section\">\r\n <section class=\"nfr-card__title-section\">\r\n <ng-content select=\"nfr-card-title\" />\r\n\r\n <ng-content select=\"nfr-card-action\" />\r\n </section>\r\n\r\n <ng-content select=\"nfr-card-sub-section\" />\r\n </section>\r\n\r\n <section class=\"nfr-card__image-wrapper\">\r\n <img class=\"nfr-card__image\" [ngSrc]=\"imageUrl()\" [style.aspect-ratio]=\"aspectRatio()\" [width]=\"255\" [height]=\"226\" priority alt=\"Picture of this merchandise\" />\r\n </section>\r\n\r\n</section>\r\n", styles: [":host .nfr-card{background:#ededed;border-radius:1.25rem;padding:1rem;display:flex;flex-direction:column;justify-content:space-between;gap:.625rem}:host .nfr-card__title-section{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}:host .nfr-card__sub-section{display:flex;flex-direction:column;gap:.125rem}:host .nfr-card__image{width:100%;border-radius:1rem;height:100%;object-fit:cover;box-sizing:border-box}:host .nfr-card__image-wrapper{max-width:100%;position:relative;border-radius:1rem;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CardComponent, decorators: [{
type: Component,
args: [{ selector: 'nfr-card', standalone: true, imports: [
NgOptimizedImage
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"nfr-card\" [style.width]=\"cardWidth()\">\r\n\r\n <section class=\"nfr-card__sub-section\">\r\n <section class=\"nfr-card__title-section\">\r\n <ng-content select=\"nfr-card-title\" />\r\n\r\n <ng-content select=\"nfr-card-action\" />\r\n </section>\r\n\r\n <ng-content select=\"nfr-card-sub-section\" />\r\n </section>\r\n\r\n <section class=\"nfr-card__image-wrapper\">\r\n <img class=\"nfr-card__image\" [ngSrc]=\"imageUrl()\" [style.aspect-ratio]=\"aspectRatio()\" [width]=\"255\" [height]=\"226\" priority alt=\"Picture of this merchandise\" />\r\n </section>\r\n\r\n</section>\r\n", styles: [":host .nfr-card{background:#ededed;border-radius:1.25rem;padding:1rem;display:flex;flex-direction:column;justify-content:space-between;gap:.625rem}:host .nfr-card__title-section{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}:host .nfr-card__sub-section{display:flex;flex-direction:column;gap:.125rem}:host .nfr-card__image{width:100%;border-radius:1rem;height:100%;object-fit:cover;box-sizing:border-box}:host .nfr-card__image-wrapper{max-width:100%;position:relative;border-radius:1rem;overflow:hidden}\n"] }]
}] });
class MainComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: MainComponent, isStandalone: true, selector: "nfr-main", ngImport: i0, template: "<section class=\"nfr-main\">\r\n <section class=\"nfr-main__header\">\r\n <ng-content select=\"[nfr-main-header]\" />\r\n </section>\r\n\r\n <section class=\"nfr-main__content\">\r\n <ng-content select=\"[nfr-main-content]\"/>\r\n </section>\r\n\r\n</section>\r\n", styles: [".nfr-font-size-xs{font-size:12px}.nfr-font-size-sm{font-size:14px}.nfr-font-size-md{font-size:16px}.nfr-font-size-lg{font-size:18px}.nfr-font-size-xl{font-size:20px}.nfr-font-size-xxl{font-size:24px}.nfr-font-size-xxxl{font-size:32px}.nfr-font-size-main-title{font-size:46px}.nfr-line-height-xs{line-height:20px}.nfr-line-height-sm{line-height:22px}.nfr-line-height-md{line-height:24px}.nfr-line-height-lg{line-height:26px}.nfr-line-height-xxl{line-height:28px}.nfr-line-height-xxxl{line-height:32px}.nfr-font-break{word-break:break-all}.nfr-text-underline{text-decoration:underline}.nfr-main{position:relative;width:100%;padding:0 7.5rem;box-sizing:border-box}.nfr-main__header{height:4rem;width:100%;position:sticky;z-index:999;top:0;left:0;right:0}.nfr-main__content{width:100%;height:100%;margin-top:2rem}@media (max-width: 768px){.nfr-main{padding:.625rem 3.75rem}}@media (max-width: 440px){.nfr-main{padding:.625rem 1.75rem}}@media (max-width: 375px){.nfr-main{padding:.625rem .75rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MainComponent, decorators: [{
type: Component,
args: [{ selector: 'nfr-main', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"nfr-main\">\r\n <section class=\"nfr-main__header\">\r\n <ng-content select=\"[nfr-main-header]\" />\r\n </section>\r\n\r\n <section class=\"nfr-main__content\">\r\n <ng-content select=\"[nfr-main-content]\"/>\r\n </section>\r\n\r\n</section>\r\n", styles: [".nfr-font-size-xs{font-size:12px}.nfr-font-size-sm{font-size:14px}.nfr-font-size-md{font-size:16px}.nfr-font-size-lg{font-size:18px}.nfr-font-size-xl{font-size:20px}.nfr-font-size-xxl{font-size:24px}.nfr-font-size-xxxl{font-size:32px}.nfr-font-size-main-title{font-size:46px}.nfr-line-height-xs{line-height:20px}.nfr-line-height-sm{line-height:22px}.nfr-line-height-md{line-height:24px}.nfr-line-height-lg{line-height:26px}.nfr-line-height-xxl{line-height:28px}.nfr-line-height-xxxl{line-height:32px}.nfr-font-break{word-break:break-all}.nfr-text-underline{text-decoration:underline}.nfr-main{position:relative;width:100%;padding:0 7.5rem;box-sizing:border-box}.nfr-main__header{height:4rem;width:100%;position:sticky;z-index:999;top:0;left:0;right:0}.nfr-main__content{width:100%;height:100%;margin-top:2rem}@media (max-width: 768px){.nfr-main{padding:.625rem 3.75rem}}@media (max-width: 440px){.nfr-main{padding:.625rem 1.75rem}}@media (max-width: 375px){.nfr-main{padding:.625rem .75rem}}\n"] }]
}] });
class HeaderComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: HeaderComponent, isStandalone: true, selector: "nfr-header", ngImport: i0, template: "<section class=\"nfr-header\">\r\n\r\n <ng-content select=\"nfr-header-content\" />\r\n\r\n</section>\r\n", styles: [".nfr-font-size-xs{font-size:12px}.nfr-font-size-sm{font-size:14px}.nfr-font-size-md{font-size:16px}.nfr-font-size-lg{font-size:18px}.nfr-font-size-xl{font-size:20px}.nfr-font-size-xxl{font-size:24px}.nfr-font-size-xxxl{font-size:32px}.nfr-font-size-main-title{font-size:46px}.nfr-line-height-xs{line-height:20px}.nfr-line-height-sm{line-height:22px}.nfr-line-height-md{line-height:24px}.nfr-line-height-lg{line-height:26px}.nfr-line-height-xxl{line-height:28px}.nfr-line-height-xxxl{line-height:32px}.nfr-font-break{word-break:break-all}.nfr-text-underline{text-decoration:underline}.nfr-header{width:100%;height:100%;background:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: HeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'nfr-header', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"nfr-header\">\r\n\r\n <ng-content select=\"nfr-header-content\" />\r\n\r\n</section>\r\n", styles: [".nfr-font-size-xs{font-size:12px}.nfr-font-size-sm{font-size:14px}.nfr-font-size-md{font-size:16px}.nfr-font-size-lg{font-size:18px}.nfr-font-size-xl{font-size:20px}.nfr-font-size-xxl{font-size:24px}.nfr-font-size-xxxl{font-size:32px}.nfr-font-size-main-title{font-size:46px}.nfr-line-height-xs{line-height:20px}.nfr-line-height-sm{line-height:22px}.nfr-line-height-md{line-height:24px}.nfr-line-height-lg{line-height:26px}.nfr-line-height-xxl{line-height:28px}.nfr-line-height-xxxl{line-height:32px}.nfr-font-break{word-break:break-all}.nfr-text-underline{text-decoration:underline}.nfr-header{width:100%;height:100%;background:#fff}\n"] }]
}] });
//TODO: Needs to be refactored later, it works just make better semantic structure
class SliderComponent {
// @ts-ignore
content;
slideChange = new EventEmitter();
title = input.required();
description = input.required();
_cardWidth = 285;
_destroyRef = inject(DestroyRef);
_cdr = inject(ChangeDetectorRef);
currentNode = 0;
fitsPerView$ = new BehaviorSubject(3);
size$ = new ResizeObserver((entries) => {
const element = entries[0];
const width = Math.floor(element.contentRect.width);
this.fitsPerView$.next(Math.floor(width / this._cardWidth));
});
ngAfterViewInit() {
const { parentNode, } = this.content.nativeElement;
// @ts-ignore
const nodes = parentNode?.parentNode?.querySelectorAll('[nfr-carousel-content]');
this.size$.observe(this.content.nativeElement);
this.fitsPerView$
.pipe(filter((fits) => fits !== 0), distinctUntilChanged(), tap((fits) => {
nodes.forEach((node) => {
node.style.flex = `calc(${100 / fits}% - ${20}px)`;
node.style.flexShrink = '0';
node.style.flexGrow = '0';
});
this.currentNode = 0;
}), takeUntilDestroyed(this._destroyRef))
.subscribe();
}
moveTo(index) {
// @ts-ignore
const carousel = this.content.nativeElement.parentNode.parentNode;
const nodes = carousel.querySelectorAll('[nfr-carousel-content]');
nodes[index].scrollIntoView({
behavior: 'smooth',
inline: 'start',
block: 'nearest',
});
this.slideChange.emit(this.currentNode);
this.currentNode = index;
this._cdr.markForCheck();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: SliderComponent, isStandalone: true, selector: "nfr-slider", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { slideChange: "slideChange" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: "<section class=\"nfr-slider\">\r\n <section class=\"nfr-slider__description\">\r\n <div class=\"nfr-slider__title-and-description\">\r\n <h2>{{ title() }}</h2>\r\n <p>{{ description() }}</p>\r\n </div>\r\n\r\n <div class=\"nfr-slider__actions-and-navigation\">\r\n <ng-content select=\"[nfr-navigation]\" />\r\n\r\n <div class=\"nfr-slider__actions\">\r\n <button class=\"nfr-button\" mat-icon-button [disabled]=\"currentNode === 0\" (click)=\"moveTo(currentNode - fitsPerView$.value)\">\r\n <mat-icon svgIcon=\"back\" class=\"nfr-cursor-pointer\" />\r\n </button>\r\n\r\n <button class=\"nfr-button\" mat-icon-button [disabled]=\"currentNode === (content.children.length - fitsPerView$.value) || currentNode > (content.children.length - fitsPerView$.value)\" (click)=\"moveTo(currentNode + fitsPerView$.value)\">\r\n <mat-icon svgIcon=\"next\" class=\"nfr-cursor-pointer\" />\r\n </button>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"nfr-carousel\">\r\n\r\n <section class=\"nfr-carousel--row\" #content>\r\n <ng-content select=\"[nfr-carousel-content]\" />\r\n </section>\r\n\r\n </section>\r\n</section>\r\n", styles: [".nfr-primary-color{color:#373737}.nfr-secondary-color{color:#a7a7a7}.nfr-white-color{color:#fff}.nfr-greyed-out{color:#8e8e8e}.nfr-shadow{box-shadow:#64646f33 0 7px 29px}.nfr-grey-background{background:#ededed}.nfr-footer-background{background:#9d9d9d}.nfr-logo-button-background{background:#d9d9d9}.nfr-icon-button-background{background:#a7a7a7}.nfr-button-background{background:#e3e3e3}.nfr-slider{display:flex;gap:1.25rem;align-items:inherit}.nfr-slider__description{width:40%;min-width:25%;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between}.nfr-slider__description h2,.nfr-slider__description p{margin:0}.nfr-slider__description h2{font-size:1.375rem;font-style:normal;font-weight:600;line-height:1.375rem}.nfr-slider__description p{font-size:.75rem;font-style:normal;font-weight:500;line-height:inherit}.nfr-slider__title-and-description{display:flex;flex-direction:column;align-items:inherit;color:#373737;gap:.625rem}.nfr-slider__actions-and-navigation{display:flex;justify-content:space-between;align-items:center;width:100%}.nfr-slider__actions{display:flex;gap:10px;align-items:center;justify-content:space-between}.nfr-slider .nfr-carousel{overflow-x:hidden;width:100%;display:flex;flex-direction:column;align-items:inherit;gap:1.5rem}.nfr-slider .nfr-carousel--row{flex-direction:row;overflow-x:hidden;display:flex;gap:20px;align-items:inherit}.nfr-slider .nfr-carousel__button{position:absolute;top:38%;left:8px;z-index:1}.nfr-slider .nfr-carousel__button--right{right:8px;left:auto}@media (max-width: 1024px){.nfr-slider .nfr-slider__description,.nfr-slider .nfr-carousel{width:100%}}@media (max-width: 440px){.nfr-slider{display:flex;flex-direction:column;align-items:center}.nfr-slider .nfr-slider__description{width:100%;gap:20px}.nfr-slider .nfr-carousel--row{max-width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SliderComponent, decorators: [{
type: Component,
args: [{ selector: 'nfr-slider', standalone: true, imports: [MatIconModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"nfr-slider\">\r\n <section class=\"nfr-slider__description\">\r\n <div class=\"nfr-slider__title-and-description\">\r\n <h2>{{ title() }}</h2>\r\n <p>{{ description() }}</p>\r\n </div>\r\n\r\n <div class=\"nfr-slider__actions-and-navigation\">\r\n <ng-content select=\"[nfr-navigation]\" />\r\n\r\n <div class=\"nfr-slider__actions\">\r\n <button class=\"nfr-button\" mat-icon-button [disabled]=\"currentNode === 0\" (click)=\"moveTo(currentNode - fitsPerView$.value)\">\r\n <mat-icon svgIcon=\"back\" class=\"nfr-cursor-pointer\" />\r\n </button>\r\n\r\n <button class=\"nfr-button\" mat-icon-button [disabled]=\"currentNode === (content.children.length - fitsPerView$.value) || currentNode > (content.children.length - fitsPerView$.value)\" (click)=\"moveTo(currentNode + fitsPerView$.value)\">\r\n <mat-icon svgIcon=\"next\" class=\"nfr-cursor-pointer\" />\r\n </button>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <section class=\"nfr-carousel\">\r\n\r\n <section class=\"nfr-carousel--row\" #content>\r\n <ng-content select=\"[nfr-carousel-content]\" />\r\n </section>\r\n\r\n </section>\r\n</section>\r\n", styles: [".nfr-primary-color{color:#373737}.nfr-secondary-color{color:#a7a7a7}.nfr-white-color{color:#fff}.nfr-greyed-out{color:#8e8e8e}.nfr-shadow{box-shadow:#64646f33 0 7px 29px}.nfr-grey-background{background:#ededed}.nfr-footer-background{background:#9d9d9d}.nfr-logo-button-background{background:#d9d9d9}.nfr-icon-button-background{background:#a7a7a7}.nfr-button-background{background:#e3e3e3}.nfr-slider{display:flex;gap:1.25rem;align-items:inherit}.nfr-slider__description{width:40%;min-width:25%;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between}.nfr-slider__description h2,.nfr-slider__description p{margin:0}.nfr-slider__description h2{font-size:1.375rem;font-style:normal;font-weight:600;line-height:1.375rem}.nfr-slider__description p{font-size:.75rem;font-style:normal;font-weight:500;line-height:inherit}.nfr-slider__title-and-description{display:flex;flex-direction:column;align-items:inherit;color:#373737;gap:.625rem}.nfr-slider__actions-and-navigation{display:flex;justify-content:space-between;align-items:center;width:100%}.nfr-slider__actions{display:flex;gap:10px;align-items:center;justify-content:space-between}.nfr-slider .nfr-carousel{overflow-x:hidden;width:100%;display:flex;flex-direction:column;align-items:inherit;gap:1.5rem}.nfr-slider .nfr-carousel--row{flex-direction:row;overflow-x:hidden;display:flex;gap:20px;align-items:inherit}.nfr-slider .nfr-carousel__button{position:absolute;top:38%;left:8px;z-index:1}.nfr-slider .nfr-carousel__button--right{right:8px;left:auto}@media (max-width: 1024px){.nfr-slider .nfr-slider__description,.nfr-slider .nfr-carousel{width:100%}}@media (max-width: 440px){.nfr-slider{display:flex;flex-direction:column;align-items:center}.nfr-slider .nfr-slider__description{width:100%;gap:20px}.nfr-slider .nfr-carousel--row{max-width:100%}}\n"] }]
}], propDecorators: { content: [{
type: ViewChild,
args: ['content', { static: true }]
}], slideChange: [{
type: Output
}] } });
class SkeletonComponent {
appearance = 'rectangle';
width;
height;
borderRadius;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SkeletonComponent, isStandalone: true, selector: "nfr-skeleton", inputs: { appearance: "appearance", width: "width", height: "height", borderRadius: "borderRadius" }, ngImport: i0, template: `
<span
class="nfr-skeleton"
[ngClass]="{
circle: appearance === 'circle',
rectangle: appearance === 'rectangle',
}"
[ngStyle]="{
width: width,
height: height,
'border-radius': borderRadius,
}"
>
</span>
`, isInline: true, styles: [".nfr-primary-color{color:#373737}.nfr-secondary-color{color:#a7a7a7}.nfr-white-color{color:#fff}.nfr-greyed-out{color:#8e8e8e}.nfr-shadow{box-shadow:#64646f33 0 7px 29px}.nfr-grey-background{background:#ededed}.nfr-footer-background{background:#9d9d9d}.nfr-logo-button-background{background:#d9d9d9}.nfr-icon-button-background{background:#a7a7a7}.nfr-button-background{background:#e3e3e3}@keyframes nfr-slide{0%{opacity:0;transform:translate(-50%)}to{opacity:1;transform:translate(0)}}@keyframes nfr-scale{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes nfr-progress{0%{transform:translate3d(-200px,0,0)}to{transform:translate3d(calc(200px + 100vw),0,0)}}.nfr-skeleton{position:relative;box-sizing:border-box;display:inline-block;width:100%;overflow:hidden;background:#eff1f6 no-repeat;border-radius:4px}.nfr-skeleton:after,.nfr-skeleton:before{box-sizing:border-box}.nfr-skeleton:before{position:absolute;top:0;left:0;z-index:1;width:200px;height:100%;content:\"\";background-image:linear-gradient(90deg,#fff0,#fff9,#fff0);background-size:200px 100%;animation:srb-progress 2s ease-in-out infinite}.nfr-skeleton.circle{border-radius:50%}.nfr-skeleton.rectangle{border-radius:8px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkeletonComponent, decorators: [{
type: Component,
args: [{ selector: 'nfr-skeleton', template: `
<span
class="nfr-skeleton"
[ngClass]="{
circle: appearance === 'circle',
rectangle: appearance === 'rectangle',
}"
[ngStyle]="{
width: width,
height: height,
'border-radius': borderRadius,
}"
>
</span>
`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, NgStyle], standalone: true, styles: [".nfr-primary-color{color:#373737}.nfr-secondary-color{color:#a7a7a7}.nfr-white-color{color:#fff}.nfr-greyed-out{color:#8e8e8e}.nfr-shadow{box-shadow:#64646f33 0 7px 29px}.nfr-grey-background{background:#ededed}.nfr-footer-background{background:#9d9d9d}.nfr-logo-button-background{background:#d9d9d9}.nfr-icon-button-background{background:#a7a7a7}.nfr-button-background{background:#e3e3e3}@keyframes nfr-slide{0%{opacity:0;transform:translate(-50%)}to{opacity:1;transform:translate(0)}}@keyframes nfr-scale{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes nfr-progress{0%{transform:translate3d(-200px,0,0)}to{transform:translate3d(calc(200px + 100vw),0,0)}}.nfr-skeleton{position:relative;box-sizing:border-box;display:inline-block;width:100%;overflow:hidden;background:#eff1f6 no-repeat;border-radius:4px}.nfr-skeleton:after,.nfr-skeleton:before{box-sizing:border-box}.nfr-skeleton:before{position:absolute;top:0;left:0;z-index:1;width:200px;height:100%;content:\"\";background-image:linear-gradient(90deg,#fff0,#fff9,#fff0);background-size:200px 100%;animation:srb-progress 2s ease-in-out infinite}.nfr-skeleton.circle{border-radius:50%}.nfr-skeleton.rectangle{border-radius:8px}\n"] }]
}], propDecorators: { appearance: [{
type: Input
}], width: [{
type: Input
}], height: [{
type: Input
}], borderRadius: [{
type: Input
}] } });
class ArrayFromLengthPipe {
transform(length, perView) {
return [...Array.from({ length: Math.ceil(length / perView) })];
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ArrayFromLengthPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: ArrayFromLengthPipe, isStandalone: true, name: "arrayFromLength" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ArrayFromLengthPipe, decorators: [{
type: Pipe,
args: [{
name: 'arrayFromLength',
standalone: true,
}]
}] });
/*
* Public API Surface of nefertiti-ui-library-dev
*/
/**
* Generated bundle index. Do not edit.
*/
export { ArrayFromLengthPipe, CardComponent, HeaderComponent, MainComponent, SkeletonComponent, SliderComponent };
//# sourceMappingURL=nefertiti-ui-library-dev.mjs.map