UNPKG

@progress/kendo-angular-conversational-ui

Version:

Kendo UI for Angular Conversational UI components

119 lines (118 loc) 4.83 kB
/**----------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the project root for more information *-------------------------------------------------------------------------------------------*/ import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core'; import { NgIf, NgFor } from '@angular/common'; import { ButtonComponent } from '@progress/kendo-angular-buttons'; import * as i0 from "@angular/core"; /** * Represents a Hero Card component ([see example](slug:dialogflow_chat)). * Hero cards host a single large image and action buttons with text content. * * @example * ```html * <kendo-chat-hero-card * title="Card Title" * subtitle="Card Subtitle" * [actions]="actions"> * </kendo-chat-hero-card> * ``` */ export class HeroCardComponent { /** * Sets the URL of the hero card image. */ imageUrl; /** * Sets the title of the hero card. */ title; /** * Sets the subtitle of the hero card. */ subtitle; /** * Sets the array of quick actions for this hero card. */ actions; cssClass = true; /** * Fires when the user clicks a button. */ executeAction = new EventEmitter(); /** * Emits the `executeAction` event when the user clicks an action button. */ onClick(action) { this.executeAction.next(action); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeroCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeroCardComponent, isStandalone: true, selector: "kendo-chat-hero-card", inputs: { imageUrl: "imageUrl", title: "title", subtitle: "subtitle", actions: "actions" }, outputs: { executeAction: "executeAction" }, host: { properties: { "class.k-card": "this.cssClass" } }, ngImport: i0, template: ` <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" /> <div class="k-card-body"> <h5 class="k-card-title" *ngIf="title"> {{ title }} </h5> <h6 class="k-card-subtitle" *ngIf="subtitle"> {{ subtitle }} </h6> </div> <div class="k-card-actions k-card-actions-vertical"> <span class="k-card-action" *ngFor="let act of actions" > <button kendoButton fillMode="flat" (click)="onClick(act)" > {{ act.title }} </button> </span> </div> `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeroCardComponent, decorators: [{ type: Component, args: [{ selector: 'kendo-chat-hero-card', template: ` <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" /> <div class="k-card-body"> <h5 class="k-card-title" *ngIf="title"> {{ title }} </h5> <h6 class="k-card-subtitle" *ngIf="subtitle"> {{ subtitle }} </h6> </div> <div class="k-card-actions k-card-actions-vertical"> <span class="k-card-action" *ngFor="let act of actions" > <button kendoButton fillMode="flat" (click)="onClick(act)" > {{ act.title }} </button> </span> </div> `, standalone: true, imports: [NgIf, NgFor, ButtonComponent] }] }], propDecorators: { imageUrl: [{ type: Input }], title: [{ type: Input }], subtitle: [{ type: Input }], actions: [{ type: Input }], cssClass: [{ type: HostBinding, args: ['class.k-card'] }], executeAction: [{ type: Output }] } });