sapenlinea-components 0.3.62 → 0.4.62

package/fesm2022/sapenlinea-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { model, input, signal, computed, Component, output, HostListener, ViewChildren, forwardRef, effect, ViewChild, booleanAttribute, inject, DestroyRef, EventEmitter, Output, Input as Input$1, Injectable, ElementRef } from '@angular/core';
+import { model, input, signal, computed, Component, output, HostListener, ViewChildren, forwardRef, effect, ViewChild, booleanAttribute, inject, DestroyRef, EventEmitter, Output, Input as Input$1, Injectable, ElementRef, ChangeDetectionStrategy } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
@@ -4069,6 +4069,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ selector: 'lib-toast', template: "@if (isShowToast()) {\r\n<div class=\"toast\" [class.show]=\"toastService.isVisible()\">\r\n  <div class=\"toast-body\">\r\n    <div class=\"toast-header\">\r\n      <span class=\"toast-message\">\r\n        {{\r\n          toastService.currentToast()?.description\r\n        }}\r\n      </span>\r\n      <button class=\"btn-close\" (click)=\"close()\" aria-label=\"Cerrar\">\r\n        &times;\r\n      </button>\r\n    </div>\r\n\r\n    @if (toastService.currentToast()?.buttonText &&\r\n    toastService.currentToast()?.action) {\r\n    <div class=\"toast-footer\">\r\n      <button\r\n        class=\"btn-action\"\r\n        (click)=\"executeAction()\"\r\n        [attr.aria-label]=\"toastService.currentToast()?.buttonText\"\r\n      >\r\n        {{ toastService.currentToast()?.buttonText }}\r\n      </button>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n}", styles: [".toast{position:fixed;bottom:20px;right:20px;min-width:320px;max-width:350px;border-radius:8px;box-shadow:0 4px 20px #0000004d;opacity:0;transform:translateY(100%);transition:all .3s ease;z-index:9999;padding:16px;background-color:#303026;color:#f2f2de;font-size:14px;line-height:1.5}.toast.show{opacity:1;transform:translateY(0)}.toast-body{display:flex;flex-direction:column;gap:12px}.toast-header{display:flex;align-items:center;gap:12px;justify-content:space-between}.toast-message{flex:1}.toast-footer{display:flex;justify-content:flex-end}.btn-action{border:none;border-radius:4px;color:#bfd103;padding:6px 12px;font-size:12px;background-color:transparent;cursor:pointer;transition:all .2s ease;white-space:nowrap}.btn-action:hover{color:#45a049}.btn-close{background:none;border:none;font-size:20px;cursor:pointer;color:#f2f2de;padding:0;width:30px;height:30px;border-radius:25px;transition:all .2s ease;flex-shrink:0}.btn-close:hover{color:#fff;background-color:#ffffff1a}@media (max-width: 480px){.toast{right:10px;left:10px;bottom:10px;min-width:auto;max-width:none}.toast-footer{justify-content:center}}\n"] }]
         }] });
 
+class OptionCard {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
+    buttonBg = input(...(ngDevMode ? [undefined, { debugName: "buttonBg" }] : []));
+    iconBg = input(...(ngDevMode ? [undefined, { debugName: "iconBg" }] : []));
+    clickAction = output();
+    onClick() {
+        this.clickAction.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OptionCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: OptionCard, isStandalone: true, selector: "lib-option-card", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, buttonBg: { classPropertyName: "buttonBg", publicName: "buttonBg", isSignal: true, isRequired: false, transformFunction: null }, iconBg: { classPropertyName: "iconBg", publicName: "iconBg", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickAction: "clickAction" }, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  class=\"option-btn\"\r\n  (click)=\"onClick()\"\r\n  [style.--btn-bg]=\"buttonBg()\"\r\n  [style.--icon-bg]=\"iconBg()\"\r\n>\r\n  <!-- \u00CDcono (proyectado) -->\r\n  <div class=\"option-btn-icon\">\r\n    <ng-content select=\"[icon]\"></ng-content>\r\n  </div>\r\n\r\n  <!-- Contenido -->\r\n  <div class=\"option-btn-content\">\r\n    <div class=\"option-btn-header\">\r\n      <h3 class=\"option-btn-title\">\r\n        {{ label() }}\r\n      </h3>\r\n\r\n      <span class=\"option-btn-chevron\">\u203A</span>\r\n    </div>\r\n\r\n    @if (description()) {\r\n      <p class=\"option-btn-description\">\r\n        {{ description() }}\r\n      </p>\r\n    }\r\n  </div>\r\n</button>", styles: [".option-btn{display:flex;align-items:flex-start;gap:16px;width:100%;padding:20px;border-radius:12px;border:1.5px solid transparent;background:var(--btn-bg, #e8e8d8);cursor:pointer;text-align:left;transition:all .2s ease;box-shadow:0 1px 3px #00000014}.option-btn:hover{border-color:var(--primary, #596300);box-shadow:0 4px 12px #5963001f;transform:translateY(-2px)}.option-btn-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--icon-bg, #eef4d3);color:var(--icon-color, #596300)}.option-btn-content{flex:1;min-width:0}.option-btn-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.option-btn-title{margin:0;font-size:14px;font-weight:600;color:var(--text, #1f2937)}.option-btn-chevron{font-size:16px;color:var(--text-muted, #6b7280)}.option-btn-description{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--text-muted, #6b7280);overflow:hidden;display:-webkit-box;line-clamp:2;-webkit-box-orient:vertical}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OptionCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-option-card', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  type=\"button\"\r\n  class=\"option-btn\"\r\n  (click)=\"onClick()\"\r\n  [style.--btn-bg]=\"buttonBg()\"\r\n  [style.--icon-bg]=\"iconBg()\"\r\n>\r\n  <!-- \u00CDcono (proyectado) -->\r\n  <div class=\"option-btn-icon\">\r\n    <ng-content select=\"[icon]\"></ng-content>\r\n  </div>\r\n\r\n  <!-- Contenido -->\r\n  <div class=\"option-btn-content\">\r\n    <div class=\"option-btn-header\">\r\n      <h3 class=\"option-btn-title\">\r\n        {{ label() }}\r\n      </h3>\r\n\r\n      <span class=\"option-btn-chevron\">\u203A</span>\r\n    </div>\r\n\r\n    @if (description()) {\r\n      <p class=\"option-btn-description\">\r\n        {{ description() }}\r\n      </p>\r\n    }\r\n  </div>\r\n</button>", styles: [".option-btn{display:flex;align-items:flex-start;gap:16px;width:100%;padding:20px;border-radius:12px;border:1.5px solid transparent;background:var(--btn-bg, #e8e8d8);cursor:pointer;text-align:left;transition:all .2s ease;box-shadow:0 1px 3px #00000014}.option-btn:hover{border-color:var(--primary, #596300);box-shadow:0 4px 12px #5963001f;transform:translateY(-2px)}.option-btn-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--icon-bg, #eef4d3);color:var(--icon-color, #596300)}.option-btn-content{flex:1;min-width:0}.option-btn-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.option-btn-title{margin:0;font-size:14px;font-weight:600;color:var(--text, #1f2937)}.option-btn-chevron{font-size:16px;color:var(--text-muted, #6b7280)}.option-btn-description{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--text-muted, #6b7280);overflow:hidden;display:-webkit-box;line-clamp:2;-webkit-box-orient:vertical}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], buttonBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonBg", required: false }] }], iconBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconBg", required: false }] }], clickAction: [{ type: i0.Output, args: ["clickAction"] }] } });
+
 // src/app/components/public-api.ts
 // Exportar el componente
 
@@ -4076,5 +4093,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Button, ButtonCards, CARD_BG, CardContent, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DynamicFormFields, FeatureCard, Footer, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, Loader, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, WizardForm };
+export { Button, ButtonCards, CARD_BG, CardContent, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DynamicFormFields, FeatureCard, Footer, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, Loader, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, WizardForm };
 //# sourceMappingURL=sapenlinea-components.mjs.map