@deepkit/api-console-gui/dist/out-tsc/src/app/components/inputs/map-input.component.js

API Console GUI

import { __decorate } from "tslib";
import { Component, EventEmitter, forwardRef, input, model, Output } from '@angular/core';
import { getKeyType, getValueType } from '@deepkit/type';
import { DataStructure } from '../../store';
import { arrayMoveItem } from '@deepkit/core';
import { InputComponent } from './input.component';
import { ButtonComponent, IconComponent } from '@deepkit/desktop-ui';
let MapInputComponent = class MapInputComponent {
    constructor() {
        this.model = model.required();
        this.decoration = input();
        this.type = input.required(); //object literal with index signature or type class with Map classType
        this.keyDown = new EventEmitter();
    }
    ngOnChanges() {
        this.keyType = getKeyType(this.type());
        this.valueType = getValueType(this.type());
    }
    ngOnInit() {
        this.keyType = getKeyType(this.type());
        this.valueType = getValueType(this.type());
    }
    up(i) {
        arrayMoveItem(this.model().children(), i, -1);
        this.model().children.update(v => v.slice());
    }
    down(i) {
        const model = this.model();
        arrayMoveItem(model.children(), i, +1);
        this.model().children.update(v => v.slice());
    }
    remove(i) {
        this.model().children().splice(i, 1);
        this.model().children.update(v => v.slice());
    }
    add() {
        this.model().children().push(new DataStructure(undefined));
        this.model().children.update(v => v.slice());
    }
};
__decorate([
    Output()
], MapInputComponent.prototype, "keyDown", void 0);
MapInputComponent = __decorate([
    Component({
        template: `
      @if (model() && valueType && keyType) {
        @for (item of model().children(); track $index; let i = $index; let last = $last) {
          <div class="item">
            <api-console-input style="margin-right: 5px;" [type]="keyType" [model]="item.getProperty('key')" (keyDown)="keyDown.emit($event)"></api-console-input>
            <api-console-input [type]="valueType" [model]="item.getProperty('value')" (keyDown)="keyDown.emit($event)"></api-console-input>
            <dui-icon clickable name="arrow_up" [disabled]="i === 0" (click)="up(item)"></dui-icon>
            <dui-icon clickable name="arrow_down" [disabled]="last" (click)="down(item)"></dui-icon>
            <dui-icon clickable name="garbage" (click)="remove(i)"></dui-icon>
          </div>
        }
      }
      <div class="actions">
        <dui-button square icon="add" (click)="add()"></dui-button>
      </div>
    `,
        styles: [`
        .actions {
            margin-top: 6px;
        }

        .item {
            padding: 2px 0;
            display: flex;
        }

        .item > * {
            flex: 1;
        }

        .item dui-icon {
            flex: 0;
        }
    `],
        imports: [
            forwardRef(() => InputComponent),
            IconComponent,
            ButtonComponent,
        ],
    })
], MapInputComponent);
export { MapInputComponent };
//# sourceMappingURL=map-input.component.js.map