@nanahoshi/mona-ui 0.18.6 → 0.20.0

package/fesm2022/nanahoshi-mona-ui-card.mjs

@@ -2,6 +2,7 @@ import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, TemplateRef, Directive, signal, Service, computed, contentChild, input, Component, viewChild, afterRenderEffect, DestroyRef, contentChildren } from '@angular/core';
 import { classInputToClass } from '@nanahoshi/mona-ui/common';
+import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { twMerge } from 'tailwind-merge';
 import { themeRaisedBackdropClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { cva } from 'class-variance-authority';
@@ -20,6 +21,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+const CARD_DEFAULT_MESSAGES = {
+    actionsLabel: "Card actions"
+};
+
 class CardService {
     constructor() {
         this.actionTemplate = signal([], /* @ts-ignore */
@@ -50,19 +55,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }] });
 
 const roundedTopVariants = {
-    small: "rounded-tl-sm rounded-tr-sm",
-    medium: "rounded-tl-md rounded-tr-md",
-    large: "rounded-tl-lg rounded-tr-lg",
-    xlarge: "rounded-tl-xl rounded-tr-xl",
-    xxlarge: "rounded-tl-2xl rounded-tr-2xl",
+    small: "rounded-t-sm",
+    medium: "rounded-t-md",
+    large: "rounded-t-lg",
+    xlarge: "rounded-t-xl",
+    xxlarge: "rounded-t-2xl",
     none: "rounded-none"
 };
 const roundedBottomVariants = {
-    small: "rounded-bl-sm rounded-br-sm",
-    medium: "rounded-bl-md rounded-br-md",
-    large: "rounded-bl-lg rounded-br-lg",
-    xlarge: "rounded-bl-xl rounded-br-xl",
-    xxlarge: "rounded-bl-2xl rounded-br-2xl",
+    small: "rounded-b-sm",
+    medium: "rounded-b-md",
+    large: "rounded-b-lg",
+    xlarge: "rounded-b-xl",
+    xxlarge: "rounded-b-2xl",
     none: "rounded-none"
 };
 const roundedAllVariants = {
@@ -119,8 +124,9 @@ const cardHeaderActionsThemeVariants = cva(`col-start-2 row-start-1 row-span-2 s
 class CardComponent {
     constructor() {
         this.#cardService = inject(CardService);
-        this.actionsCellClass = cardHeaderActionsThemeVariants();
+        this.#i18n = inject(MonaI18nService);
         this.actionTemplate = this.#cardService.actionTemplate.asReadonly();
+        this.actionsCellClass = cardHeaderActionsThemeVariants();
         this.baseClass = computed(() => {
             const rounded = this.rounded();
             const hasHeader = !!this.headerTemplate();
@@ -151,6 +157,7 @@ class CardComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
         this.headerTemplate = this.#cardService.headerTemplate.asReadonly();
+        this.messages = this.#i18n.componentMessages("card", CARD_DEFAULT_MESSAGES);
         this.titleCellClass = cardHeaderTitleThemeVariants();
         this.titleId = this.#cardService.titleId.asReadonly();
         this.titleTemplate = this.#cardService.titleTemplate.asReadonly();
@@ -167,8 +174,9 @@ class CardComponent {
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
     }
     #cardService;
+    #i18n;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CardComponent, isStandalone: true, selector: "mona-card", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()", "attr.aria-labelledby": "titleId()", "attr.aria-describedby": "descriptionId()" } }, providers: [CardService], queries: [{ propertyName: "contentDirective", first: true, predicate: CardContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (headerTemplate()) {\n    <div [class]=\"headerClass()\">\n        @if (titleTemplate()) {\n            <div [class]=\"titleCellClass\">\n                <ng-container [ngTemplateOutlet]=\"titleTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: titleId() }\" />\n            </div>\n        }\n        @if (descriptionTemplate()) {\n            <div [class]=\"descriptionCellClass\">\n                <ng-container\n                    [ngTemplateOutlet]=\"descriptionTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: descriptionId() }\"\n                />\n            </div>\n        }\n        @if (actionTemplate().length > 0) {\n            <div [class]=\"actionsCellClass\" role=\"group\" aria-label=\"Card actions\">\n                @for (template of actionTemplate(); track template) {\n                    <ng-container [ngTemplateOutlet]=\"template\" />\n                }\n            </div>\n        }\n    </div>\n}\n<ng-container [ngTemplateOutlet]=\"contentDirective()?.templateRef ?? null\" />\n@if (footerTemplate()) {\n    <div [class]=\"footerClass()\">\n        <ng-container [ngTemplateOutlet]=\"footerTemplate()\" />\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CardComponent, isStandalone: true, selector: "mona-card", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()", "attr.aria-labelledby": "titleId()", "attr.aria-describedby": "descriptionId()" } }, providers: [CardService], queries: [{ propertyName: "contentDirective", first: true, predicate: CardContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (headerTemplate()) {\n    <div [class]=\"headerClass()\">\n        @if (titleTemplate()) {\n            <div [class]=\"titleCellClass\">\n                <ng-container [ngTemplateOutlet]=\"titleTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: titleId() }\" />\n            </div>\n        }\n        @if (descriptionTemplate()) {\n            <div [class]=\"descriptionCellClass\">\n                <ng-container\n                    [ngTemplateOutlet]=\"descriptionTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: descriptionId() }\"\n                />\n            </div>\n        }\n        @if (actionTemplate().length > 0) {\n            <div [class]=\"actionsCellClass\" role=\"group\" [attr.aria-label]=\"messages().actionsLabel\">\n                @for (template of actionTemplate(); track template) {\n                    <ng-container [ngTemplateOutlet]=\"template\" />\n                }\n            </div>\n        }\n    </div>\n}\n<ng-container [ngTemplateOutlet]=\"contentDirective()?.templateRef ?? null\" />\n@if (footerTemplate()) {\n    <div [class]=\"footerClass()\">\n        <ng-container [ngTemplateOutlet]=\"footerTemplate()\" />\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
@@ -176,7 +184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[class]": "baseClass()",
                         "[attr.aria-labelledby]": "titleId()",
                         "[attr.aria-describedby]": "descriptionId()"
-                    }, providers: [CardService], template: "@if (headerTemplate()) {\n    <div [class]=\"headerClass()\">\n        @if (titleTemplate()) {\n            <div [class]=\"titleCellClass\">\n                <ng-container [ngTemplateOutlet]=\"titleTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: titleId() }\" />\n            </div>\n        }\n        @if (descriptionTemplate()) {\n            <div [class]=\"descriptionCellClass\">\n                <ng-container\n                    [ngTemplateOutlet]=\"descriptionTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: descriptionId() }\"\n                />\n            </div>\n        }\n        @if (actionTemplate().length > 0) {\n            <div [class]=\"actionsCellClass\" role=\"group\" aria-label=\"Card actions\">\n                @for (template of actionTemplate(); track template) {\n                    <ng-container [ngTemplateOutlet]=\"template\" />\n                }\n            </div>\n        }\n    </div>\n}\n<ng-container [ngTemplateOutlet]=\"contentDirective()?.templateRef ?? null\" />\n@if (footerTemplate()) {\n    <div [class]=\"footerClass()\">\n        <ng-container [ngTemplateOutlet]=\"footerTemplate()\" />\n    </div>\n}\n" }]
+                    }, providers: [CardService], template: "@if (headerTemplate()) {\n    <div [class]=\"headerClass()\">\n        @if (titleTemplate()) {\n            <div [class]=\"titleCellClass\">\n                <ng-container [ngTemplateOutlet]=\"titleTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: titleId() }\" />\n            </div>\n        }\n        @if (descriptionTemplate()) {\n            <div [class]=\"descriptionCellClass\">\n                <ng-container\n                    [ngTemplateOutlet]=\"descriptionTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: descriptionId() }\"\n                />\n            </div>\n        }\n        @if (actionTemplate().length > 0) {\n            <div [class]=\"actionsCellClass\" role=\"group\" [attr.aria-label]=\"messages().actionsLabel\">\n                @for (template of actionTemplate(); track template) {\n                    <ng-container [ngTemplateOutlet]=\"template\" />\n                }\n            </div>\n        }\n    </div>\n}\n<ng-container [ngTemplateOutlet]=\"contentDirective()?.templateRef ?? null\" />\n@if (footerTemplate()) {\n    <div [class]=\"footerClass()\">\n        <ng-container [ngTemplateOutlet]=\"footerTemplate()\" />\n    </div>\n}\n" }]
         }], propDecorators: { contentDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CardContentDirective), { isSignal: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class CardFooterComponent {
@@ -303,5 +311,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CardActionDirective, CardComponent, CardContentDirective, CardDescriptionDirective, CardFooterComponent, CardHeaderComponent, CardTitleDirective };
+export { CARD_DEFAULT_MESSAGES, CardActionDirective, CardComponent, CardContentDirective, CardDescriptionDirective, CardFooterComponent, CardHeaderComponent, CardTitleDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-card.mjs.map