otimus-library 0.3.40 → 0.3.41

package/fesm2022/otimus-library.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, Directive, HostBinding, ContentChild, ViewEncapsulation, EventEmitter, Output, ViewChildren, ViewChild, ChangeDetectionStrategy, forwardRef, ContentChildren } from '@angular/core';
+import { Injectable, Component, Input, Directive, input, EventEmitter, Output, HostBinding, ContentChild, ViewEncapsulation, ViewChildren, ViewChild, ChangeDetectionStrategy, forwardRef, ContentChildren } from '@angular/core';
 import * as i2$1 from '@angular/cdk/menu';
 import { CdkMenuModule } from '@angular/cdk/menu';
 import * as i1 from '@angular/common';
@@ -539,6 +539,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }] } });
 
+class OcCardComponent {
+    constructor() {
+        this.ocSelected = input(false, ...(ngDevMode ? [{ debugName: "ocSelected" }] : []));
+        this.ocColor = input('default', ...(ngDevMode ? [{ debugName: "ocColor" }] : []));
+        this.ocClickable = input(false, ...(ngDevMode ? [{ debugName: "ocClickable" }] : []));
+        this.ocClick = new EventEmitter();
+    }
+    onClick() {
+        this.ocClick.emit();
+    }
+    get color() {
+        return 'oc-' + this.ocColor();
+    }
+    get isSelected() {
+        return this.ocSelected() ? 'oc-card-selected' : '';
+    }
+    get isClickable() {
+        return this.ocClickable() ? 'oc-card-clickable' : '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: OcCardComponent, isStandalone: true, selector: "oc-card", inputs: { ocSelected: { classPropertyName: "ocSelected", publicName: "ocSelected", isSignal: true, isRequired: false, transformFunction: null }, ocColor: { classPropertyName: "ocColor", publicName: "ocColor", isSignal: true, isRequired: false, transformFunction: null }, ocClickable: { classPropertyName: "ocClickable", publicName: "ocClickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ocClick: "ocClick" }, ngImport: i0, template: "<div\n  class=\"oc-card\"\n  [ngClass]=\"[color, isSelected, isClickable]\"\n  (click)=\"onClick()\"\n>\n  <div class=\"oc-card-header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </div>\n  <div class=\"oc-card-body\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"oc-card-footer\">\n    <ng-content select=\"[footer]\"></ng-content>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.oc-card{border-radius:4px 8px 8px 4px;padding:1.5rem;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto 1fr;grid-row-gap:.5rem}.oc-card .oc-card-header{grid-area:1/1/1/1}.oc-card .oc-card-body{grid-area:2/1/2/1}.oc-card .oc-card-footer{grid-area:3/1/3/1}.oc-default{background-color:#f7f7f7;border-left:4px solid #8f9596;color:#8f9596}.oc-red{background-color:#fff3f3;border-left:4px solid #ed3a3a;color:#ed3a3a}.oc-green{background-color:#eefff7fc;border-left:4px solid #00dda3;color:#00dda3}.oc-card-selected{transform:translateY(-6px) scale(1.01);box-shadow:0 20px 30px #0000001f,0 6px 12px #0000000f,inset 0 1px #ffffff05;border-left-width:6px;outline:3px solid rgba(0,0,0,.04);outline-offset:6px;position:relative;z-index:1}.oc-card-selected:after{content:\"\\2713\";position:absolute;top:10px;right:10px;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;font-size:12px;font-weight:700;color:#fff;background:#00dda3;box-shadow:0 3px 6px #0000001f}.oc-card-clickable{transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s,border-left-width .18s,outline-offset .18s,background-color .18s;cursor:pointer}.oc-card-clickable:active{transform:translateY(1px) scale(.998)}.oc-card-clickable:focus-visible{outline:3px solid rgba(0,0,0,.06);outline-offset:4px}.oc-card-clickable:not(.oc-card-selected):hover{transform:translateY(-6px) scale(1.01);box-shadow:0 26px 40px #00000024,0 8px 18px #0000000f}.oc-card-clickable.oc-card-selected:hover{transform:translateY(-8px) scale(1.012);box-shadow:0 30px 48px #00000026,0 10px 20px #0000000f}.oc-card.disabled{cursor:default;pointer-events:none;opacity:.7}@media (prefers-reduced-motion: reduce){.oc-card-clickable,.oc-card-clickable:not(.oc-card-selected):hover,.oc-card-clickable.oc-card-selected:hover{transition:none!important;transform:none!important;box-shadow:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'oc-card', standalone: true, imports: [CommonModule], template: "<div\n  class=\"oc-card\"\n  [ngClass]=\"[color, isSelected, isClickable]\"\n  (click)=\"onClick()\"\n>\n  <div class=\"oc-card-header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </div>\n  <div class=\"oc-card-body\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"oc-card-footer\">\n    <ng-content select=\"[footer]\"></ng-content>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.oc-card{border-radius:4px 8px 8px 4px;padding:1.5rem;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto 1fr;grid-row-gap:.5rem}.oc-card .oc-card-header{grid-area:1/1/1/1}.oc-card .oc-card-body{grid-area:2/1/2/1}.oc-card .oc-card-footer{grid-area:3/1/3/1}.oc-default{background-color:#f7f7f7;border-left:4px solid #8f9596;color:#8f9596}.oc-red{background-color:#fff3f3;border-left:4px solid #ed3a3a;color:#ed3a3a}.oc-green{background-color:#eefff7fc;border-left:4px solid #00dda3;color:#00dda3}.oc-card-selected{transform:translateY(-6px) scale(1.01);box-shadow:0 20px 30px #0000001f,0 6px 12px #0000000f,inset 0 1px #ffffff05;border-left-width:6px;outline:3px solid rgba(0,0,0,.04);outline-offset:6px;position:relative;z-index:1}.oc-card-selected:after{content:\"\\2713\";position:absolute;top:10px;right:10px;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;font-size:12px;font-weight:700;color:#fff;background:#00dda3;box-shadow:0 3px 6px #0000001f}.oc-card-clickable{transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s,border-left-width .18s,outline-offset .18s,background-color .18s;cursor:pointer}.oc-card-clickable:active{transform:translateY(1px) scale(.998)}.oc-card-clickable:focus-visible{outline:3px solid rgba(0,0,0,.06);outline-offset:4px}.oc-card-clickable:not(.oc-card-selected):hover{transform:translateY(-6px) scale(1.01);box-shadow:0 26px 40px #00000024,0 8px 18px #0000000f}.oc-card-clickable.oc-card-selected:hover{transform:translateY(-8px) scale(1.012);box-shadow:0 30px 48px #00000026,0 10px 20px #0000000f}.oc-card.disabled{cursor:default;pointer-events:none;opacity:.7}@media (prefers-reduced-motion: reduce){.oc-card-clickable,.oc-card-clickable:not(.oc-card-selected):hover,.oc-card-clickable.oc-card-selected:hover{transition:none!important;transform:none!important;box-shadow:none!important}}\n"] }]
+        }], propDecorators: { ocSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocSelected", required: false }] }], ocColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocColor", required: false }] }], ocClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocClickable", required: false }] }], ocClick: [{
+                type: Output
+            }] } });
+
 class OcFilterComponent {
     constructor(styleThemeService) {
         this.styleThemeService = styleThemeService;
@@ -2852,5 +2881,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { OcAccordionComponent, OcAccordionItemComponent, OcAutocompleteComponent, OcBadgeComponent, OcButtonMenuComponent, OcCheckboxComponent, OcChipComponent, OcDateSelectComponent, OcFilterComponent, OcInputComponent, OcKeyValueComponent, OcLogComponent, OcMenuComponent, OcMenuHorizComponent, OcMenuHorizDirective, OcMessageComponent, OcModalComponent, OcModalFooterComponent, OcNotFoundComponent, OcOverlayComponent, OcPaginationComponent, OcProfileComponent, OcProgressComponent, OcStepComponent, OcStepperComponent, OcTabComponent, OcTabsComponent, OcToastComponent, OcToastService, OcToggleComponent, OcTooltipDirective, OtimusLibraryComponent, OtimusLibraryService, StyleThemeService };
+export { OcAccordionComponent, OcAccordionItemComponent, OcAutocompleteComponent, OcBadgeComponent, OcButtonMenuComponent, OcCardComponent, OcCheckboxComponent, OcChipComponent, OcDateSelectComponent, OcFilterComponent, OcInputComponent, OcKeyValueComponent, OcLogComponent, OcMenuComponent, OcMenuHorizComponent, OcMenuHorizDirective, OcMessageComponent, OcModalComponent, OcModalFooterComponent, OcNotFoundComponent, OcOverlayComponent, OcPaginationComponent, OcProfileComponent, OcProgressComponent, OcStepComponent, OcStepperComponent, OcTabComponent, OcTabsComponent, OcToastComponent, OcToastService, OcToggleComponent, OcTooltipDirective, OtimusLibraryComponent, OtimusLibraryService, StyleThemeService };
 //# sourceMappingURL=otimus-library.mjs.map