ec.components documentation
  1. Components
  2. DefaultOutputComponent

File

packages/ui/src/lib/form/default-output/default-output.component.ts

Description

Holds the templates to output item field values.

Metadata

selector ec-default-output
templateUrl ./default-output.component.html

Index

Properties

Properties

field
Type : Field
Defined in packages/ui/src/lib/form/default-output/default-output.component.ts:11

The field that should be displayed

item
Type : Item<any>
Defined in packages/ui/src/lib/form/default-output/default-output.component.ts:13

The item that is targeted by the input 

import { Component } from '@angular/core';
import { Field, Item } from '@ec.components/core';

/** Holds the templates to output item field values. */
@Component({
  selector: 'ec-default-output',
  templateUrl: './default-output.component.html',
})
export class DefaultOutputComponent {
  /** The field that should be displayed */
  field: Field;
  /** The item that is targeted by the input */
  item: Item<any>;
}

<div [ngSwitch]="field.getView('output')" *ngIf="item">
  <ul class="ec-output-tags" *ngSwitchCase="'tags'">
    <li *ngFor="let label of item?.display(field.property) | maxItems: field.maxItems || 10">
      <span class="ec-output-tag tag">{{ label }}</span>
    </li>
    <li *ngIf="item?.display(field.property)?.length > (field.maxItems || 10)">
      <span class="ec-output-tag tag">&hellip;</span>
    </li>
  </ul>

  <div class="ec-output-strings" *ngSwitchCase="'strings'">
    <span *ngFor="let label of item?.display(field.property) | maxItems: field.maxItems || 10">
      {{ label }}
    </span>
    <span *ngIf="item?.display(field.property)?.length > (field.maxItems || 10)">
      &hellip;
    </span>
  </div>

  <div class="ec-output-tag" *ngSwitchCase="'tag'">
    <div class="span" class="tag" *ngIf="item?.display(field.property)">{{ item?.display(field.property) }}</div>
  </div>

  <div *ngSwitchCase="'boolean'" class="ec-output-boolean" [class.is-true]="item?.resolve(field.property)">
    <span>&#10004;</span>
  </div>

  <div class="ec-output-mail" *ngSwitchCase="'email'">
    <a [href]="'mailto:' + item?.display(field.property)">{{ item?.display(field.property) }}</a>
  </div>
  <div class="ec-output-url" *ngSwitchCase="'url'">
    <a [href]="item?.display(field.property)">{{ item?.display(field.property) }}</a>
  </div>

  <div class="ec-output-color" *ngSwitchCase="'color'">
    <span class="ec-output-color__sample" [style.backgroundColor]="item?.display(field.property)"></span>
    <span class="ec-output-color__property">{{ item?.display(field.property) }}</span>
  </div>

  <div class="ec-output-asset" *ngSwitchCase="'image'" [class.is-true]="item?.resolve(field.property)">
    <ec-icon name="image"></ec-icon>
  </div>

  <div class="ec-output-assets" *ngSwitchCase="'images'" [class.is-true]="item?.resolve(field.property)">
    <ec-icon name="images"></ec-icon>
    <strong>{{ item?.resolve(field.property)?.length }}</strong>
  </div>

  <div class="ec-output-avatar avatar" *ngSwitchCase="'avatar'">
    <img *ngIf="item?.display(field.property)" [src]="item?.display(field.property)" />
  </div>

  <div class="ec-output-avatars" *ngSwitchCase="'avatars'">
    <div class="ec-output-avatar avatar" *ngFor="let url of item?.display(field.property)">
      <img [src]="url" />
    </div>
  </div>

  <div class="ec-output-preview" *ngSwitchCase="'preview'">
    <img [src]="item?.display(field.property)" *ngIf="item?.display(field.property)" />
  </div>

  <a *ngSwitchCase="'link'" (click)="item?.action(field.property, $event)" [ngClass]="field.class">
    <span>{{ item?.display(field.property) }}</span>
    <ec-icon *ngIf="field.icon" [name]="field.icon"></ec-icon>
  </a>

  <div *ngSwitchCase="'textarea'" class="ec-output-textarea">
    <span class="tag tag_small">text</span>
  </div>
  <code *ngSwitchCase="'json'" class="ec-output-json">
    <span class="tag">JSON</span>
  </code>
  <span *ngSwitchDefault [class]="'ec-output-' + field.getView('output')" [title]="item?.display(field.property)">
    {{ item?.display(field.property) }}
  </span>
</div>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""