circletone/esm2022/lib/components/atoms/list-item/list-item.component.mjs

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { IconComponent } from '../icon/icon.component';
import { MenuComponent } from '../../molecules/menu/menu.component';
import { MenuItemComponent } from '../menu-item/menu-item.component';
import { AvatarComponent } from '../avatar/avatar.component';
import * as i0 from "@angular/core";
export class ListItemComponent {
    constructor() {
        this.header = '';
        this.subHeader = '';
        this.avatar = '';
        this.subTitle = '';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ListItemComponent, isStandalone: true, selector: "ct-list-item", inputs: { header: "header", subHeader: "subHeader", avatar: "avatar", subTitle: "subTitle" }, ngImport: i0, template: "<li\n  class=\"flex cursor-pointer flex-row items-center gap-4 px-4 py-2 hover:bg-surface-variant dark:text-on-surface-dark hover:dark:bg-surface-dark\">\n  <div class=\"flex-none\">\n    <ct-avatar [picture]=\"avatar\" [title]=\"header\" />\n  </div>\n  <div class=\"w-fit flex-1\">\n    <div class=\"flex flex-col overflow-hidden\">\n      @if (header) {\n        <span class=\"overflow-hidden text-ellipsis text-lg font-semibold\" [innerHTML]=\"header\"></span>\n      }\n      @if (subHeader) {\n        <span class=\"overflow-hidden text-ellipsis text-sm\" [innerHTML]=\"subHeader\"></span>\n      }\n    </div>\n  </div>\n  <div class=\"relative flex-none rounded-r-xl\">\n    <div class=\"flex h-full flex-col justify-center gap-2\">\n      <div class=\"flex flex-row items-center px-4\">\n        <span class=\"text-xs\">{{ subTitle }}</span>\n      </div>\n      <div class=\"flex grow-0 flex-row justify-center text-sm\">\n        <ct-menu-item\n          [iconAlone]=\"true\"\n          icon=\"list-bullet\"\n          link=\"#\"\n          type=\"external\"\n          submenuPosition=\"vertical\"\n          size=\"xs\">\n          <ct-menu direction=\"vertical\">\n            <ct-menu-item text=\"Item 2\" link=\"#\" type=\"external\" />\n          </ct-menu>\n        </ct-menu-item>\n      </div>\n    </div>\n  </div>\n</li>\n", dependencies: [{ kind: "component", type: AvatarComponent, selector: "ct-avatar", inputs: ["picture", "title"] }, { kind: "component", type: MenuComponent, selector: "ct-menu", inputs: ["direction", "iconDirection", "type", "variant", "gap", "fullSize", "iconAlone", "menusAppearVertical"] }, { kind: "component", type: MenuItemComponent, selector: "ct-menu-item", inputs: ["text", "link", "type", "size", "icon", "iconSize", "iconAlone", "iconDirection", "hasSubmenu", "submenuPosition", "isActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ListItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-list-item', standalone: true, imports: [AvatarComponent, IconComponent, MenuComponent, MenuItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<li\n  class=\"flex cursor-pointer flex-row items-center gap-4 px-4 py-2 hover:bg-surface-variant dark:text-on-surface-dark hover:dark:bg-surface-dark\">\n  <div class=\"flex-none\">\n    <ct-avatar [picture]=\"avatar\" [title]=\"header\" />\n  </div>\n  <div class=\"w-fit flex-1\">\n    <div class=\"flex flex-col overflow-hidden\">\n      @if (header) {\n        <span class=\"overflow-hidden text-ellipsis text-lg font-semibold\" [innerHTML]=\"header\"></span>\n      }\n      @if (subHeader) {\n        <span class=\"overflow-hidden text-ellipsis text-sm\" [innerHTML]=\"subHeader\"></span>\n      }\n    </div>\n  </div>\n  <div class=\"relative flex-none rounded-r-xl\">\n    <div class=\"flex h-full flex-col justify-center gap-2\">\n      <div class=\"flex flex-row items-center px-4\">\n        <span class=\"text-xs\">{{ subTitle }}</span>\n      </div>\n      <div class=\"flex grow-0 flex-row justify-center text-sm\">\n        <ct-menu-item\n          [iconAlone]=\"true\"\n          icon=\"list-bullet\"\n          link=\"#\"\n          type=\"external\"\n          submenuPosition=\"vertical\"\n          size=\"xs\">\n          <ct-menu direction=\"vertical\">\n            <ct-menu-item text=\"Item 2\" link=\"#\" type=\"external\" />\n          </ct-menu>\n        </ct-menu-item>\n      </div>\n    </div>\n  </div>\n</li>\n" }]
        }], propDecorators: { header: [{
                type: Input
            }], subHeader: [{
                type: Input
            }], avatar: [{
                type: Input
            }], subTitle: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlzdC1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9jb21wb25lbnRzL2F0b21zL2xpc3QtaXRlbS9saXN0LWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2lyY2xldG9uZS9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvbGlzdC1pdGVtL2xpc3QtaXRlbS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDdkQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQ3JFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQzs7QUFTN0QsTUFBTSxPQUFPLGlCQUFpQjtJQVA5QjtRQVFXLFdBQU0sR0FBRyxFQUFFLENBQUM7UUFDWixjQUFTLEdBQUcsRUFBRSxDQUFDO1FBQ2YsV0FBTSxHQUFHLEVBQUUsQ0FBQztRQUNaLGFBQVEsR0FBRyxFQUFFLENBQUM7S0FDeEI7OEdBTFksaUJBQWlCO2tHQUFqQixpQkFBaUIsc0tDYjlCLGswQ0FvQ0EsNENEM0JZLGVBQWUsb0ZBQWlCLGFBQWEsc0tBQUUsaUJBQWlCOzsyRkFJL0QsaUJBQWlCO2tCQVA3QixTQUFTOytCQUNFLGNBQWMsY0FDWixJQUFJLFdBQ1AsQ0FBQyxlQUFlLEVBQUUsYUFBYSxFQUFFLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxtQkFFMUQsdUJBQXVCLENBQUMsTUFBTTs4QkFHdEMsTUFBTTtzQkFBZCxLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSWNvbkNvbXBvbmVudCB9IGZyb20gJy4uL2ljb24vaWNvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgTWVudUNvbXBvbmVudCB9IGZyb20gJy4uLy4uL21vbGVjdWxlcy9tZW51L21lbnUuY29tcG9uZW50JztcbmltcG9ydCB7IE1lbnVJdGVtQ29tcG9uZW50IH0gZnJvbSAnLi4vbWVudS1pdGVtL21lbnUtaXRlbS5jb21wb25lbnQnO1xuaW1wb3J0IHsgQXZhdGFyQ29tcG9uZW50IH0gZnJvbSAnLi4vYXZhdGFyL2F2YXRhci5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjdC1saXN0LWl0ZW0nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQXZhdGFyQ29tcG9uZW50LCBJY29uQ29tcG9uZW50LCBNZW51Q29tcG9uZW50LCBNZW51SXRlbUNvbXBvbmVudF0sXG4gIHRlbXBsYXRlVXJsOiAnLi9saXN0LWl0ZW0uY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTGlzdEl0ZW1Db21wb25lbnQge1xuICBASW5wdXQoKSBoZWFkZXIgPSAnJztcbiAgQElucHV0KCkgc3ViSGVhZGVyID0gJyc7XG4gIEBJbnB1dCgpIGF2YXRhciA9ICcnO1xuICBASW5wdXQoKSBzdWJUaXRsZSA9ICcnO1xufVxuIiwiPGxpXG4gIGNsYXNzPVwiZmxleCBjdXJzb3ItcG9pbnRlciBmbGV4LXJvdyBpdGVtcy1jZW50ZXIgZ2FwLTQgcHgtNCBweS0yIGhvdmVyOmJnLXN1cmZhY2UtdmFyaWFudCBkYXJrOnRleHQtb24tc3VyZmFjZS1kYXJrIGhvdmVyOmRhcms6Ymctc3VyZmFjZS1kYXJrXCI+XG4gIDxkaXYgY2xhc3M9XCJmbGV4LW5vbmVcIj5cbiAgICA8Y3QtYXZhdGFyIFtwaWN0dXJlXT1cImF2YXRhclwiIFt0aXRsZV09XCJoZWFkZXJcIiAvPlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cInctZml0IGZsZXgtMVwiPlxuICAgIDxkaXYgY2xhc3M9XCJmbGV4IGZsZXgtY29sIG92ZXJmbG93LWhpZGRlblwiPlxuICAgICAgQGlmIChoZWFkZXIpIHtcbiAgICAgICAgPHNwYW4gY2xhc3M9XCJvdmVyZmxvdy1oaWRkZW4gdGV4dC1lbGxpcHNpcyB0ZXh0LWxnIGZvbnQtc2VtaWJvbGRcIiBbaW5uZXJIVE1MXT1cImhlYWRlclwiPjwvc3Bhbj5cbiAgICAgIH1cbiAgICAgIEBpZiAoc3ViSGVhZGVyKSB7XG4gICAgICAgIDxzcGFuIGNsYXNzPVwib3ZlcmZsb3ctaGlkZGVuIHRleHQtZWxsaXBzaXMgdGV4dC1zbVwiIFtpbm5lckhUTUxdPVwic3ViSGVhZGVyXCI+PC9zcGFuPlxuICAgICAgfVxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cInJlbGF0aXZlIGZsZXgtbm9uZSByb3VuZGVkLXIteGxcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZmxleCBoLWZ1bGwgZmxleC1jb2wganVzdGlmeS1jZW50ZXIgZ2FwLTJcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGZsZXgtcm93IGl0ZW1zLWNlbnRlciBweC00XCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwidGV4dC14c1wiPnt7IHN1YlRpdGxlIH19PC9zcGFuPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiZmxleCBncm93LTAgZmxleC1yb3cganVzdGlmeS1jZW50ZXIgdGV4dC1zbVwiPlxuICAgICAgICA8Y3QtbWVudS1pdGVtXG4gICAgICAgICAgW2ljb25BbG9uZV09XCJ0cnVlXCJcbiAgICAgICAgICBpY29uPVwibGlzdC1idWxsZXRcIlxuICAgICAgICAgIGxpbms9XCIjXCJcbiAgICAgICAgICB0eXBlPVwiZXh0ZXJuYWxcIlxuICAgICAgICAgIHN1Ym1lbnVQb3NpdGlvbj1cInZlcnRpY2FsXCJcbiAgICAgICAgICBzaXplPVwieHNcIj5cbiAgICAgICAgICA8Y3QtbWVudSBkaXJlY3Rpb249XCJ2ZXJ0aWNhbFwiPlxuICAgICAgICAgICAgPGN0LW1lbnUtaXRlbSB0ZXh0PVwiSXRlbSAyXCIgbGluaz1cIiNcIiB0eXBlPVwiZXh0ZXJuYWxcIiAvPlxuICAgICAgICAgIDwvY3QtbWVudT5cbiAgICAgICAgPC9jdC1tZW51LWl0ZW0+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2xpPlxuIl19