@iotize/ionic/esm2022/lib/tap-connect/tap-connection-store/tap-connection-store-item/tap-connection-store-item.component.mjs

Iotize specific building blocks on top of @ionic/angular.

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { TapConnectionStoreService } from '../tap-connection-store.service';
import * as i0 from "@angular/core";
import * as i1 from "../tap-connection-store.service";
import * as i2 from "@angular/common";
import * as i3 from "@ionic/angular";
export class TapConnectionStoreItemComponent {
    tapConnectionStoreService;
    item;
    selected = new EventEmitter();
    constructor(tapConnectionStoreService) {
        this.tapConnectionStoreService = tapConnectionStoreService;
    }
    connect() {
        if (this.item) {
            this.selected.emit(this.item);
        }
    }
    remove() {
        if (this.item) {
            this.tapConnectionStoreService.remove(this.item);
        }
    }
    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TapConnectionStoreItemComponent, deps: [{ token: i1.TapConnectionStoreService }], target: i0.ɵɵFactoryTarget.Component });
    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TapConnectionStoreItemComponent, selector: "tap-connection-store-item", inputs: { item: "item" }, outputs: { selected: "selected" }, ngImport: i0, template: "<ion-card *ngIf=\"item\" (click)=\"connect()\" [button]=\"true\">\n  <ion-list class=\"store-list\">\n    <ion-item style=\"margin-bottom: 4px\">\n      &nbsp;\n      <span class=\"title\">{{ item.config.appName }}</span>\n      &nbsp;\n      <ion-button slot=\"end\" color=\"danger\" fill=\"clear\" (click)=\"remove()\">\n        <ion-icon name=\"close\"></ion-icon>\n      </ion-button>\n    </ion-item>\n    <ion-item class=\"extra-info\" lines=\"none\">\n      <ion-icon color=\"primary\" name=\"hardware-chip\"></ion-icon>\n      &nbsp;\n      {{ item.config.serialNumber }}\n      <ion-badge slot=\"end\">\n        {{ item.connection.type }}\n      </ion-badge>\n    </ion-item>\n    <ion-item\n      *ngIf=\"item.connection.type === 'mqtt'\"\n      class=\"extra-info\"\n      lines=\"none\"\n    >\n      <ion-icon color=\"primary\" name=\"link\"></ion-icon>\n      &nbsp;\n      <span class=\"\">{{ item.connection.info.endpoint }}</span>\n    </ion-item>\n    <ion-item\n      *ngIf=\"item.connection.type === 'ble'\"\n      class=\"extra-info\"\n      lines=\"none\"\n    >\n      <ion-icon color=\"primary\" name=\"link\"></ion-icon>\n      &nbsp;\n      <span class=\"\">{{ item.connection.info.mac }}</span>\n    </ion-item>\n    <ion-item\n      *ngIf=\"\n        item.connection.type === 'socket' ||\n        item.connection.type === 'websocket'\n      \"\n      lines=\"none\"\n      class=\"extra-info\"\n    >\n      <!-- <ion-label>Last connection</ion-label> -->\n      <ion-icon color=\"primary\" name=\"link\"></ion-icon>\n      &nbsp;\n      <span class=\"\">{{ item.connection.info.url }}</span>\n    </ion-item>\n    <ion-item\n      *ngIf=\"item.connection.type === 'wifi'\"\n      class=\"extra-info\"\n      lines=\"none\"\n    >\n      <ion-icon color=\"primary\" name=\"link\"></ion-icon>\n      &nbsp;\n      <span class=\"\">{{ item.connection.info.ssid }}</span>\n    </ion-item>\n  </ion-list>\n</ion-card>\n", styles: [".config-version{font-size:.8em;opacity:.7}.extra-info{font-size:.95em;opacity:.7;padding-top:0;padding-bottom:0;--min-height: 16px}.store-list{padding-top:0}.title{font-size:1.1em}ion-card{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TapConnectionStoreItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'tap-connection-store-item', template: "<ion-card *ngIf=\"item\" (click)=\"connect()\" [button]=\"true\">\n  <ion-list class=\"store-list\">\n    <ion-item style=\"margin-bottom: 4px\">\n      &nbsp;\n      <span class=\"title\">{{ item.config.appName }}</span>\n      &nbsp;\n      <ion-button slot=\"end\" color=\"danger\" fill=\"clear\" (click)=\"remove()\">\n        <ion-icon name=\"close\"></ion-icon>\n      </ion-button>\n    </ion-item>\n    <ion-item class=\"extra-info\" lines=\"none\">\n      <ion-icon color=\"primary\" name=\"hardware-chip\"></ion-icon>\n      &nbsp;\n      {{ item.config.serialNumber }}\n      <ion-badge slot=\"end\">\n        {{ item.connection.type }}\n      </ion-badge>\n    </ion-item>\n    <ion-item\n      *ngIf=\"item.connection.type === 'mqtt'\"\n      class=\"extra-info\"\n      lines=\"none\"\n    >\n      <ion-icon color=\"primary\" name=\"link\"></ion-icon>\n      &nbsp;\n      <span class=\"\">{{ item.connection.info.endpoint }}</span>\n    </ion-item>\n    <ion-item\n      *ngIf=\"item.connection.type === 'ble'\"\n      class=\"extra-info\"\n      lines=\"none\"\n    >\n      <ion-icon color=\"primary\" name=\"link\"></ion-icon>\n      &nbsp;\n      <span class=\"\">{{ item.connection.info.mac }}</span>\n    </ion-item>\n    <ion-item\n      *ngIf=\"\n        item.connection.type === 'socket' ||\n        item.connection.type === 'websocket'\n      \"\n      lines=\"none\"\n      class=\"extra-info\"\n    >\n      <!-- <ion-label>Last connection</ion-label> -->\n      <ion-icon color=\"primary\" name=\"link\"></ion-icon>\n      &nbsp;\n      <span class=\"\">{{ item.connection.info.url }}</span>\n    </ion-item>\n    <ion-item\n      *ngIf=\"item.connection.type === 'wifi'\"\n      class=\"extra-info\"\n      lines=\"none\"\n    >\n      <ion-icon color=\"primary\" name=\"link\"></ion-icon>\n      &nbsp;\n      <span class=\"\">{{ item.connection.info.ssid }}</span>\n    </ion-item>\n  </ion-list>\n</ion-card>\n", styles: [".config-version{font-size:.8em;opacity:.7}.extra-info{font-size:.95em;opacity:.7;padding-top:0;padding-bottom:0;--min-height: 16px}.store-list{padding-top:0}.title{font-size:1.1em}ion-card{cursor:pointer}\n"] }]
        }], ctorParameters: () => [{ type: i1.TapConnectionStoreService }], propDecorators: { item: [{
                type: Input
            }], selected: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFwLWNvbm5lY3Rpb24tc3RvcmUtaXRlbS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9pb3RpemUtaW9uaWMvc3JjL2xpYi90YXAtY29ubmVjdC90YXAtY29ubmVjdGlvbi1zdG9yZS90YXAtY29ubmVjdGlvbi1zdG9yZS1pdGVtL3RhcC1jb25uZWN0aW9uLXN0b3JlLWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaW90aXplLWlvbmljL3NyYy9saWIvdGFwLWNvbm5lY3QvdGFwLWNvbm5lY3Rpb24tc3RvcmUvdGFwLWNvbm5lY3Rpb24tc3RvcmUtaXRlbS90YXAtY29ubmVjdGlvbi1zdG9yZS1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHL0UsT0FBTyxFQUFFLHlCQUF5QixFQUFFLE1BQU0saUNBQWlDLENBQUM7Ozs7O0FBTzVFLE1BQU0sT0FBTywrQkFBK0I7SUFLdEI7SUFKWCxJQUFJLENBQTBCO0lBRTdCLFFBQVEsR0FBRyxJQUFJLFlBQVksRUFBMEIsQ0FBQztJQUVoRSxZQUFvQix5QkFBb0Q7UUFBcEQsOEJBQXlCLEdBQXpCLHlCQUF5QixDQUEyQjtJQUFHLENBQUM7SUFFNUUsT0FBTztRQUNMLElBQUksSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1lBQ2QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ2hDLENBQUM7SUFDSCxDQUFDO0lBRUQsTUFBTTtRQUNKLElBQUksSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1lBQ2QsSUFBSSxDQUFDLHlCQUF5QixDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbkQsQ0FBQztJQUNILENBQUM7MkhBakJVLCtCQUErQjsrR0FBL0IsK0JBQStCLDhIQ1Y1Qyx5NURBNERBOzs0RkRsRGEsK0JBQStCO2tCQUwzQyxTQUFTOytCQUNFLDJCQUEyQjs4RkFLNUIsSUFBSTtzQkFBWixLQUFLO2dCQUVJLFFBQVE7c0JBQWpCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IFRhcENvbm5lY3Rpb25TdG9yZUl0ZW0gfSBmcm9tICcuLi9kZWZpbml0aW9ucyc7XG5pbXBvcnQgeyBUYXBDb25uZWN0aW9uU3RvcmVTZXJ2aWNlIH0gZnJvbSAnLi4vdGFwLWNvbm5lY3Rpb24tc3RvcmUuc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RhcC1jb25uZWN0aW9uLXN0b3JlLWl0ZW0nLFxuICB0ZW1wbGF0ZVVybDogJy4vdGFwLWNvbm5lY3Rpb24tc3RvcmUtaXRlbS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3RhcC1jb25uZWN0aW9uLXN0b3JlLWl0ZW0uY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgVGFwQ29ubmVjdGlvblN0b3JlSXRlbUNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGl0ZW0/OiBUYXBDb25uZWN0aW9uU3RvcmVJdGVtO1xuXG4gIEBPdXRwdXQoKSBzZWxlY3RlZCA9IG5ldyBFdmVudEVtaXR0ZXI8VGFwQ29ubmVjdGlvblN0b3JlSXRlbT4oKTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHRhcENvbm5lY3Rpb25TdG9yZVNlcnZpY2U6IFRhcENvbm5lY3Rpb25TdG9yZVNlcnZpY2UpIHt9XG5cbiAgY29ubmVjdCgpIHtcbiAgICBpZiAodGhpcy5pdGVtKSB7XG4gICAgICB0aGlzLnNlbGVjdGVkLmVtaXQodGhpcy5pdGVtKTtcbiAgICB9XG4gIH1cblxuICByZW1vdmUoKSB7XG4gICAgaWYgKHRoaXMuaXRlbSkge1xuICAgICAgdGhpcy50YXBDb25uZWN0aW9uU3RvcmVTZXJ2aWNlLnJlbW92ZSh0aGlzLml0ZW0pO1xuICAgIH1cbiAgfVxufVxuIiwiPGlvbi1jYXJkICpuZ0lmPVwiaXRlbVwiIChjbGljayk9XCJjb25uZWN0KClcIiBbYnV0dG9uXT1cInRydWVcIj5cbiAgPGlvbi1saXN0IGNsYXNzPVwic3RvcmUtbGlzdFwiPlxuICAgIDxpb24taXRlbSBzdHlsZT1cIm1hcmdpbi1ib3R0b206IDRweFwiPlxuICAgICAgJm5ic3A7XG4gICAgICA8c3BhbiBjbGFzcz1cInRpdGxlXCI+e3sgaXRlbS5jb25maWcuYXBwTmFtZSB9fTwvc3Bhbj5cbiAgICAgICZuYnNwO1xuICAgICAgPGlvbi1idXR0b24gc2xvdD1cImVuZFwiIGNvbG9yPVwiZGFuZ2VyXCIgZmlsbD1cImNsZWFyXCIgKGNsaWNrKT1cInJlbW92ZSgpXCI+XG4gICAgICAgIDxpb24taWNvbiBuYW1lPVwiY2xvc2VcIj48L2lvbi1pY29uPlxuICAgICAgPC9pb24tYnV0dG9uPlxuICAgIDwvaW9uLWl0ZW0+XG4gICAgPGlvbi1pdGVtIGNsYXNzPVwiZXh0cmEtaW5mb1wiIGxpbmVzPVwibm9uZVwiPlxuICAgICAgPGlvbi1pY29uIGNvbG9yPVwicHJpbWFyeVwiIG5hbWU9XCJoYXJkd2FyZS1jaGlwXCI+PC9pb24taWNvbj5cbiAgICAgICZuYnNwO1xuICAgICAge3sgaXRlbS5jb25maWcuc2VyaWFsTnVtYmVyIH19XG4gICAgICA8aW9uLWJhZGdlIHNsb3Q9XCJlbmRcIj5cbiAgICAgICAge3sgaXRlbS5jb25uZWN0aW9uLnR5cGUgfX1cbiAgICAgIDwvaW9uLWJhZGdlPlxuICAgIDwvaW9uLWl0ZW0+XG4gICAgPGlvbi1pdGVtXG4gICAgICAqbmdJZj1cIml0ZW0uY29ubmVjdGlvbi50eXBlID09PSAnbXF0dCdcIlxuICAgICAgY2xhc3M9XCJleHRyYS1pbmZvXCJcbiAgICAgIGxpbmVzPVwibm9uZVwiXG4gICAgPlxuICAgICAgPGlvbi1pY29uIGNvbG9yPVwicHJpbWFyeVwiIG5hbWU9XCJsaW5rXCI+PC9pb24taWNvbj5cbiAgICAgICZuYnNwO1xuICAgICAgPHNwYW4gY2xhc3M9XCJcIj57eyBpdGVtLmNvbm5lY3Rpb24uaW5mby5lbmRwb2ludCB9fTwvc3Bhbj5cbiAgICA8L2lvbi1pdGVtPlxuICAgIDxpb24taXRlbVxuICAgICAgKm5nSWY9XCJpdGVtLmNvbm5lY3Rpb24udHlwZSA9PT0gJ2JsZSdcIlxuICAgICAgY2xhc3M9XCJleHRyYS1pbmZvXCJcbiAgICAgIGxpbmVzPVwibm9uZVwiXG4gICAgPlxuICAgICAgPGlvbi1pY29uIGNvbG9yPVwicHJpbWFyeVwiIG5hbWU9XCJsaW5rXCI+PC9pb24taWNvbj5cbiAgICAgICZuYnNwO1xuICAgICAgPHNwYW4gY2xhc3M9XCJcIj57eyBpdGVtLmNvbm5lY3Rpb24uaW5mby5tYWMgfX08L3NwYW4+XG4gICAgPC9pb24taXRlbT5cbiAgICA8aW9uLWl0ZW1cbiAgICAgICpuZ0lmPVwiXG4gICAgICAgIGl0ZW0uY29ubmVjdGlvbi50eXBlID09PSAnc29ja2V0JyB8fFxuICAgICAgICBpdGVtLmNvbm5lY3Rpb24udHlwZSA9PT0gJ3dlYnNvY2tldCdcbiAgICAgIFwiXG4gICAgICBsaW5lcz1cIm5vbmVcIlxuICAgICAgY2xhc3M9XCJleHRyYS1pbmZvXCJcbiAgICA+XG4gICAgICA8IS0tIDxpb24tbGFiZWw+TGFzdCBjb25uZWN0aW9uPC9pb24tbGFiZWw+IC0tPlxuICAgICAgPGlvbi1pY29uIGNvbG9yPVwicHJpbWFyeVwiIG5hbWU9XCJsaW5rXCI+PC9pb24taWNvbj5cbiAgICAgICZuYnNwO1xuICAgICAgPHNwYW4gY2xhc3M9XCJcIj57eyBpdGVtLmNvbm5lY3Rpb24uaW5mby51cmwgfX08L3NwYW4+XG4gICAgPC9pb24taXRlbT5cbiAgICA8aW9uLWl0ZW1cbiAgICAgICpuZ0lmPVwiaXRlbS5jb25uZWN0aW9uLnR5cGUgPT09ICd3aWZpJ1wiXG4gICAgICBjbGFzcz1cImV4dHJhLWluZm9cIlxuICAgICAgbGluZXM9XCJub25lXCJcbiAgICA+XG4gICAgICA8aW9uLWljb24gY29sb3I9XCJwcmltYXJ5XCIgbmFtZT1cImxpbmtcIj48L2lvbi1pY29uPlxuICAgICAgJm5ic3A7XG4gICAgICA8c3BhbiBjbGFzcz1cIlwiPnt7IGl0ZW0uY29ubmVjdGlvbi5pbmZvLnNzaWQgfX08L3NwYW4+XG4gICAgPC9pb24taXRlbT5cbiAgPC9pb24tbGlzdD5cbjwvaW9uLWNhcmQ+XG4iXX0=