@progress/kendo-angular-layout
Version:
Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts
106 lines (105 loc) • 4.2 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, HostBinding, Input } from '@angular/core';
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
import { validatePackage } from '@progress/kendo-licensing';
import { packageMetadata } from '../package-metadata';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
/**
* Represents the [Kendo UI Card component for Angular]({% slug overview_card %})
*/
export class CardComponent {
localizationService;
hostClass = true;
get widthStyle() {
return this.width;
}
get vertical() {
return this.orientation === 'vertical';
}
get horizontal() {
return this.orientation === 'horizontal';
}
/**
* @hidden
*/
direction;
/**
* Specifies the layout of the Card content.
*
* The possible values are:
* * (Default) `vertical`
* * `horizontal`
*
*/
orientation = 'vertical';
/**
* Defines the width of the Card.
* Defaults to `285px`.
*/
width = '285px';
dynamicRTLSubscription;
rtl = false;
constructor(localizationService) {
this.localizationService = localizationService;
validatePackage(packageMetadata);
this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
this.rtl = rtl;
this.direction = this.rtl ? 'rtl' : 'ltr';
});
}
ngOnDestroy() {
if (this.dynamicRTLSubscription) {
this.dynamicRTLSubscription.unsubscribe();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardComponent, isStandalone: true, selector: "kendo-card", inputs: { orientation: "orientation", width: "width" }, host: { properties: { "class.k-card": "this.hostClass", "style.width": "this.widthStyle", "class.k-card-vertical": "this.vertical", "class.k-card-horizontal": "this.horizontal", "attr.dir": "this.direction" } }, providers: [
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.card.component'
}
], ngImport: i0, template: `
<ng-content></ng-content>
`, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-card',
providers: [
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.card.component'
}
],
template: `
<ng-content></ng-content>
`,
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
type: HostBinding,
args: ['class.k-card']
}], widthStyle: [{
type: HostBinding,
args: ['style.width']
}], vertical: [{
type: HostBinding,
args: ['class.k-card-vertical']
}], horizontal: [{
type: HostBinding,
args: ['class.k-card-horizontal']
}], direction: [{
type: HostBinding,
args: ['attr.dir']
}], orientation: [{
type: Input
}], width: [{
type: Input
}] } });