@vindev/particle
Version:
Angular Component Library using Tailwind
43 lines • 7.94 kB
JavaScript
import { CommonModule } from '@angular/common';
import { Component, Input, NgModule } from '@angular/core';
import { BaseAtom, ClickMixin, ColorMixin, LoadingMixin, } from '../../shared/mixins';
import { RippleDirectiveModule } from '../../shared/utils/ripple.directive';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../shared/utils/ripple.directive";
export class CardComponent extends ColorMixin(ClickMixin(LoadingMixin(BaseAtom))) {
constructor() {
super();
this.clickable = false;
this.color = '#fff';
}
set setFlat(flat) {
this.flat = flat != null && `${flat}` !== 'false';
}
ngAfterContentChecked() {
this.clickable = this.action.observed;
}
}
CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CardComponent, selector: "ptcl-card", inputs: { setFlat: ["flat", "setFlat"] }, usesInheritance: true, ngImport: i0, template: "<div\n [style.background]=\"color\"\n class=\"ptcl-card\"\n [ptclRipple]=\"clickable\"\n (click)=\"clicked($event)\"\n [ngClass]=\"{\n noHover: !clickable,\n 'ptcl-flat-card': flat\n }\"\n>\n <div [ngClass]=\"{ 'ptcl-blur-card': loading }\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".ptcl-card{border-radius:2px;display:inline-block;min-height:125px;margin:1rem;padding:1rem;position:relative;min-width:175px;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;transition:all .3s cubic-bezier(.25,.8,.25,1)}.ptcl-card:not(.noHover):hover{box-shadow:0 2px 5px #00000040,0 3px 10px #00000038;cursor:pointer}.ptcl-blur-card{filter:blur(2.5px)}.ptcl-flat-card{border:thin solid rgba(0,0,0,.12);box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.RippleDirective, selector: "[ptclRipple]", inputs: ["ptclRipple"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CardComponent, decorators: [{
type: Component,
args: [{ selector: 'ptcl-card', template: "<div\n [style.background]=\"color\"\n class=\"ptcl-card\"\n [ptclRipple]=\"clickable\"\n (click)=\"clicked($event)\"\n [ngClass]=\"{\n noHover: !clickable,\n 'ptcl-flat-card': flat\n }\"\n>\n <div [ngClass]=\"{ 'ptcl-blur-card': loading }\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".ptcl-card{border-radius:2px;display:inline-block;min-height:125px;margin:1rem;padding:1rem;position:relative;min-width:175px;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;transition:all .3s cubic-bezier(.25,.8,.25,1)}.ptcl-card:not(.noHover):hover{box-shadow:0 2px 5px #00000040,0 3px 10px #00000038;cursor:pointer}.ptcl-blur-card{filter:blur(2.5px)}.ptcl-flat-card{border:thin solid rgba(0,0,0,.12);box-shadow:0 0 #0003,0 0 #00000024,0 0 #0000001f!important}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { setFlat: [{
type: Input,
args: ['flat']
}] } });
export class CardComponentModule {
}
CardComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CardComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CardComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: CardComponentModule, declarations: [CardComponent], imports: [CommonModule, RippleDirectiveModule], exports: [CardComponent] });
CardComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CardComponentModule, imports: [CommonModule, RippleDirectiveModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CardComponentModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, RippleDirectiveModule],
declarations: [CardComponent],
exports: [CardComponent],
}]
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3BhcnRpY2xlLWxpYi9zcmMvbGliL2F0b21zL2NhcmQvY2FyZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3BhcnRpY2xlLWxpYi9zcmMvbGliL2F0b21zL2NhcmQvY2FyZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUF1QixTQUFTLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNoRixPQUFPLEVBQ0wsUUFBUSxFQUNSLFVBQVUsRUFDVixVQUFVLEVBQ1YsWUFBWSxHQUNiLE1BQU0scUJBQXFCLENBQUM7QUFDN0IsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0scUNBQXFDLENBQUM7Ozs7QUFPNUUsTUFBTSxPQUFPLGFBQ1gsU0FBUSxVQUFVLENBQUMsVUFBVSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDO0lBVXREO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUFSVixjQUFTLEdBQUcsS0FBSyxDQUFDO1FBU2hCLElBQUksQ0FBQyxLQUFLLEdBQUcsTUFBTSxDQUFDO0lBQ3RCLENBQUM7SUFQRCxJQUFtQixPQUFPLENBQUMsSUFBc0I7UUFDL0MsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLElBQUksSUFBSSxJQUFJLEdBQUcsSUFBSSxFQUFFLEtBQUssT0FBTyxDQUFDO0lBQ3BELENBQUM7SUFPRCxxQkFBcUI7UUFDbkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQztJQUN4QyxDQUFDOzswR0FsQlUsYUFBYTs4RkFBYixhQUFhLGtIQ2YxQixtVEFjQTsyRkRDYSxhQUFhO2tCQUx6QixTQUFTOytCQUNFLFdBQVc7MEVBV0YsT0FBTztzQkFBekIsS0FBSzt1QkFBQyxNQUFNOztBQW1CZixNQUFNLE9BQU8sbUJBQW1COztnSEFBbkIsbUJBQW1CO2lIQUFuQixtQkFBbUIsaUJBMUJuQixhQUFhLGFBc0JkLFlBQVksRUFBRSxxQkFBcUIsYUF0QmxDLGFBQWE7aUhBMEJiLG1CQUFtQixZQUpwQixZQUFZLEVBQUUscUJBQXFCOzJGQUlsQyxtQkFBbUI7a0JBTC9CLFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFLENBQUMsWUFBWSxFQUFFLHFCQUFxQixDQUFDO29CQUM5QyxZQUFZLEVBQUUsQ0FBQyxhQUFhLENBQUM7b0JBQzdCLE9BQU8sRUFBRSxDQUFDLGFBQWEsQ0FBQztpQkFDekIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQWZ0ZXJDb250ZW50Q2hlY2tlZCwgQ29tcG9uZW50LCBJbnB1dCwgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gIEJhc2VBdG9tLFxuICBDbGlja01peGluLFxuICBDb2xvck1peGluLFxuICBMb2FkaW5nTWl4aW4sXG59IGZyb20gJy4uLy4uL3NoYXJlZC9taXhpbnMnO1xuaW1wb3J0IHsgUmlwcGxlRGlyZWN0aXZlTW9kdWxlIH0gZnJvbSAnLi4vLi4vc2hhcmVkL3V0aWxzL3JpcHBsZS5kaXJlY3RpdmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdwdGNsLWNhcmQnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2FyZC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2NhcmQuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgQ2FyZENvbXBvbmVudFxuICBleHRlbmRzIENvbG9yTWl4aW4oQ2xpY2tNaXhpbihMb2FkaW5nTWl4aW4oQmFzZUF0b20pKSlcbiAgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRDaGVja2VkXG57XG4gIGNsaWNrYWJsZSA9IGZhbHNlO1xuXG4gIGZsYXQhOiBib29sZWFuO1xuICBASW5wdXQoJ2ZsYXQnKSBzZXQgc2V0RmxhdChmbGF0OiBib29sZWFuIHwgc3RyaW5nKSB7XG4gICAgdGhpcy5mbGF0ID0gZmxhdCAhPSBudWxsICYmIGAke2ZsYXR9YCAhPT0gJ2ZhbHNlJztcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gICAgdGhpcy5jb2xvciA9ICcjZmZmJztcbiAgfVxuXG4gIG5nQWZ0ZXJDb250ZW50Q2hlY2tlZCgpOiB2b2lkIHtcbiAgICB0aGlzLmNsaWNrYWJsZSA9IHRoaXMuYWN0aW9uLm9ic2VydmVkO1xuICB9XG59XG5cbkBOZ01vZHVsZSh7XG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIFJpcHBsZURpcmVjdGl2ZU1vZHVsZV0sXG4gIGRlY2xhcmF0aW9uczogW0NhcmRDb21wb25lbnRdLFxuICBleHBvcnRzOiBbQ2FyZENvbXBvbmVudF0sXG59KVxuZXhwb3J0IGNsYXNzIENhcmRDb21wb25lbnRNb2R1bGUge31cbiIsIjxkaXZcbiAgW3N0eWxlLmJhY2tncm91bmRdPVwiY29sb3JcIlxuICBjbGFzcz1cInB0Y2wtY2FyZFwiXG4gIFtwdGNsUmlwcGxlXT1cImNsaWNrYWJsZVwiXG4gIChjbGljayk9XCJjbGlja2VkKCRldmVudClcIlxuICBbbmdDbGFzc109XCJ7XG4gICAgbm9Ib3ZlcjogIWNsaWNrYWJsZSxcbiAgICAncHRjbC1mbGF0LWNhcmQnOiBmbGF0XG4gIH1cIlxuPlxuICA8ZGl2IFtuZ0NsYXNzXT1cInsgJ3B0Y2wtYmx1ci1jYXJkJzogbG9hZGluZyB9XCI+XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19