@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
176 lines (169 loc) • 12.5 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, TemplateRef, Directive, input, contentChild, computed, Component } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import { IconComponent } from '@sixbell-telco/sdk/components/icon';
import { matCallOutline } from '@sixbell-telco/sdk/components/icon/material/outline';
import { cn } from '@sixbell-telco/sdk/utils/cn';
import { cva, cx } from 'class-variance-authority';
class ProductCardActionsDirective {
tplRef = inject(TemplateRef);
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ProductCardActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.0", type: ProductCardActionsDirective, isStandalone: true, selector: "[appProductCardActions]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ProductCardActionsDirective, decorators: [{
type: Directive,
args: [{
selector: '[appProductCardActions]',
standalone: true,
}]
}] });
class ProductCardContentDirective {
tplRef = inject(TemplateRef);
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ProductCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.0", type: ProductCardContentDirective, isStandalone: true, selector: "[appProductCardContent]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ProductCardContentDirective, decorators: [{
type: Directive,
args: [{
selector: '[appProductCardContent]',
standalone: true,
}]
}] });
class ProductCardHeaderDirective {
tplRef = inject(TemplateRef);
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ProductCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.0", type: ProductCardHeaderDirective, isStandalone: true, selector: "[appProductCardHeader]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ProductCardHeaderDirective, decorators: [{
type: Directive,
args: [{
selector: '[appProductCardHeader]',
standalone: true,
}]
}] });
const productCardContainer = cva(['card'], {
variants: {
shadow: {
none: [],
primary: ['shadow-primary'],
},
height: {
fit: ['h-fit', 'min-h-[auto]'],
auto: ['h-auto', 'min-h-[auto]'],
full: ['h-full', 'min-h-full'],
'min-content': ['h-min', 'min-h-min'],
'max-content': ['h-max', 'min-h-max'],
},
width: {
fit: ['w-fit', 'min-w-[auto]'],
auto: ['w-auto', 'min-w-[auto]'],
full: ['w-full', 'min-w-full'],
'min-content': ['w-min', 'min-w-min'],
'max-content': ['w-max', 'min-w-max'],
},
size: {
xs: 'card-xs',
sm: 'card-sm',
md: 'card-md',
lg: 'card-lg',
xl: 'card-xl',
},
figurePosition: {
top: ['top'],
bottom: ['bottom'],
side: ['card-side'],
},
},
defaultVariants: {
shadow: 'primary',
height: 'full',
width: 'auto',
size: 'md',
figurePosition: 'top',
},
});
const productCardFigure = cva([], {
variants: {
figureBackground: {
none: [],
image: ['image-full'],
primary: ['bg-primary', 'text-primary-content'],
secondary: ['bg-secondary', 'text-secondary-content'],
warning: ['bg-warning', 'text-warning-content'],
error: ['bg-error', 'text-error-content'],
neutral: ['bg-neutral', 'text-neutral-content'],
},
figureAlignment: {
auto: [],
center: ['flex', 'justify-center'],
start: ['flex', 'justify-start'],
end: ['flex', 'justify-end'],
},
figurePaddingY: {
none: 'py-0',
sm: 'py-2',
md: 'py-4',
lg: 'py-6',
},
figurePaddingX: {
none: 'px-0',
sm: 'px-2',
md: 'px-4',
lg: 'px-6',
},
},
defaultVariants: {
figureBackground: 'none',
figureAlignment: 'auto',
figurePaddingY: 'none',
figurePaddingX: 'none',
},
});
const productCardComponent = ({ shadow, height, width, size, figureBackground, figurePosition, figureAlignment, figurePaddingY, figurePaddingX, } = {}) => cx(productCardContainer({ shadow, height, width, size, figurePosition }), productCardFigure({ figureBackground, figureAlignment, figurePaddingX, figurePaddingY }));
class ProductCardComponent {
// Base table properties
shadow = input();
height = input();
width = input();
size = input();
figurePosition = input();
// Figure properties
figureBackground = input();
figureAlignment = input();
figurePaddingY = input();
figurePaddingX = input();
titleClasses = input('');
actionsClasses = input('');
image = input();
icon = input();
fallbackIcon = matCallOutline;
header = contentChild(ProductCardHeaderDirective);
content = contentChild(ProductCardContentDirective);
actions = contentChild(ProductCardActionsDirective);
containerClass = computed(() => cn(productCardContainer({
shadow: this.shadow(),
height: this.height(),
width: this.width(),
size: this.size(),
figurePosition: this.figurePosition(),
})));
figureClass = computed(() => cn(productCardFigure({
figureBackground: this.figureBackground(),
figureAlignment: this.figureAlignment(),
figurePaddingX: this.figurePaddingX(),
figurePaddingY: this.figurePaddingY(),
})));
titleClass = computed(() => cn('card-title', this.titleClasses()));
actionsClass = computed(() => cn('card-actions', this.actionsClasses()));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ProductCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: ProductCardComponent, isStandalone: true, selector: "st-product-card", inputs: { shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, figurePosition: { classPropertyName: "figurePosition", publicName: "figurePosition", isSignal: true, isRequired: false, transformFunction: null }, figureBackground: { classPropertyName: "figureBackground", publicName: "figureBackground", isSignal: true, isRequired: false, transformFunction: null }, figureAlignment: { classPropertyName: "figureAlignment", publicName: "figureAlignment", isSignal: true, isRequired: false, transformFunction: null }, figurePaddingY: { classPropertyName: "figurePaddingY", publicName: "figurePaddingY", isSignal: true, isRequired: false, transformFunction: null }, figurePaddingX: { classPropertyName: "figurePaddingX", publicName: "figurePaddingX", isSignal: true, isRequired: false, transformFunction: null }, titleClasses: { classPropertyName: "titleClasses", publicName: "titleClasses", isSignal: true, isRequired: false, transformFunction: null }, actionsClasses: { classPropertyName: "actionsClasses", publicName: "actionsClasses", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "header", first: true, predicate: ProductCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ProductCardContentDirective, descendants: true, isSignal: true }, { propertyName: "actions", first: true, predicate: ProductCardActionsDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@let figurePositionVar = this.figurePosition();\n@let imageVar = image();\n@let iconVar = icon();\n\n<div [class]=\"containerClass()\">\n\t@if (figurePositionVar === 'top' || figurePositionVar === 'side' || !figurePositionVar) {\n\t\t<figure [class]=\"figureClass()\">\n\t\t\t@if (imageVar?.src && imageVar?.alt) {\n\t\t\t\t<img [src]=\"imageVar?.src\" [alt]=\"imageVar?.alt\" />\n\t\t\t} @else if (iconVar) {\n\t\t\t\t<st-icon [icon]=\"iconVar\" color=\"inherit\" size=\"lg\"></st-icon>\n\t\t\t}\n\t\t</figure>\n\t}\n\t<div class=\"card-body\">\n\t\t<div [class]=\"titleClass()\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"header()?.tplRef || null\"></ng-container>\n\t\t</div>\n\t\t<div>\n\t\t\t<ng-container [ngTemplateOutlet]=\"content()?.tplRef || null\"></ng-container>\n\t\t</div>\n\t\t<div [class]=\"actionsClass()\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"actions()?.tplRef || null\"></ng-container>\n\t\t</div>\n\t</div>\n\t@if (figurePositionVar === 'bottom') {\n\t\t<figure [class]=\"figureClass()\">\n\t\t\t@if (imageVar?.src && imageVar?.alt) {\n\t\t\t\t<img [src]=\"imageVar?.src\" [alt]=\"imageVar?.alt\" />\n\t\t\t} @else if (iconVar) {\n\t\t\t\t<st-icon [icon]=\"iconVar\" color=\"inherit\" size=\"lg\"></st-icon>\n\t\t\t}\n\t\t</figure>\n\t}\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "st-icon", inputs: ["color", "size", "icon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ProductCardComponent, decorators: [{
type: Component,
args: [{ selector: 'st-product-card', imports: [NgTemplateOutlet, IconComponent], template: "@let figurePositionVar = this.figurePosition();\n@let imageVar = image();\n@let iconVar = icon();\n\n<div [class]=\"containerClass()\">\n\t@if (figurePositionVar === 'top' || figurePositionVar === 'side' || !figurePositionVar) {\n\t\t<figure [class]=\"figureClass()\">\n\t\t\t@if (imageVar?.src && imageVar?.alt) {\n\t\t\t\t<img [src]=\"imageVar?.src\" [alt]=\"imageVar?.alt\" />\n\t\t\t} @else if (iconVar) {\n\t\t\t\t<st-icon [icon]=\"iconVar\" color=\"inherit\" size=\"lg\"></st-icon>\n\t\t\t}\n\t\t</figure>\n\t}\n\t<div class=\"card-body\">\n\t\t<div [class]=\"titleClass()\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"header()?.tplRef || null\"></ng-container>\n\t\t</div>\n\t\t<div>\n\t\t\t<ng-container [ngTemplateOutlet]=\"content()?.tplRef || null\"></ng-container>\n\t\t</div>\n\t\t<div [class]=\"actionsClass()\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"actions()?.tplRef || null\"></ng-container>\n\t\t</div>\n\t</div>\n\t@if (figurePositionVar === 'bottom') {\n\t\t<figure [class]=\"figureClass()\">\n\t\t\t@if (imageVar?.src && imageVar?.alt) {\n\t\t\t\t<img [src]=\"imageVar?.src\" [alt]=\"imageVar?.alt\" />\n\t\t\t} @else if (iconVar) {\n\t\t\t\t<st-icon [icon]=\"iconVar\" color=\"inherit\" size=\"lg\"></st-icon>\n\t\t\t}\n\t\t</figure>\n\t}\n</div>\n" }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ProductCardActionsDirective, ProductCardComponent, ProductCardContentDirective, ProductCardHeaderDirective, productCardComponent, productCardContainer, productCardFigure };
//# sourceMappingURL=sixbell-telco-sdk-components-product-card.mjs.map