import { Component } from "@angular/core";
import { StiBarcodeElement } from "../../../../elements/StiBarcodeElement";
import * as i0 from "@angular/core";
import * as i1 from "../../../../services/sti-barcode.service";
import * as i2 from "../../../../services/model.service";
import * as i3 from "@angular/common";
import * as i4 from "./sti-svg-image.component";
export class StiBarcodeStylesPreviewComponent {
    get items() {
        return this.barcodeService.barcodeStyles;
    }
    get itemsInRows() {
        let items = new Array(Math.floor((this.barcodeService.previewWidth - 10) / this.itemWidth)).fill(1);
        return items.length >= 1 ? items : new Array(1).fill(1);
    }
    get rows() {
        return new Array(Math.ceil(this.items.length / this.itemsInRows.length)).fill(2);
    }
    get currentItem() {
        return this.model.selectedComponent?.element && this.model.selectedComponent?.element instanceof StiBarcodeElement
            ? this.model.selectedComponent?.element
            : null;
    }
    constructor(barcodeService, model) {
        this.barcodeService = barcodeService;
        this.model = model;
        this.itemWidth = 57;
    }
    selectStyle(index) {
        this.currentItem.style = index;
        this.barcodeService.showBarcodePreview = false;
    }
    ngOnInit() { }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StiBarcodeStylesPreviewComponent, deps: [{ token: i1.StiBarcodeService }, { token: i2.StiModelService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StiBarcodeStylesPreviewComponent, selector: "sti-barcode-styles-preview", ngImport: i0, template: `
    <div
      #element
      class="container"
      [style.visibility]="barcodeService.showBarcodePreview ? 'visible' : 'hidden'"
      [style.left.px]="barcodeService.previewX"
      [style.top.px]="barcodeService.previewY"
      [style.width.px]="barcodeService.previewWidth ? barcodeService.previewWidth : 192"
    >
      <table class="sti-clear" [style.width]="'100%'">
        <tr *ngFor="let row of rows; index as i" class="row-container">
          <td
            *ngFor="let item of itemsInRows; index as ind"
            class="{{ items[i * itemsInRows.length + ind] ? '' : 'disabled' }} {{
              currentItem && i * itemsInRows.length + ind + 1 == currentItem.style ? 'active' : ''
            }}"
            (click)="selectStyle(i * itemsInRows.length + ind + 1)"
          >
            <sti-svg-image
              *ngIf="items[i * itemsInRows.length + ind]"
              [svg]="items[i * itemsInRows.length + ind].innerHtml"
            ></sti-svg-image>
          </td>
        </tr>
      </table>
    </div>
    <style>
      .container {
        position: absolute;
        z-index: 999;
        background-color: var(--back-color);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        width: 192px;
        height: 233px;
        border: 1px solid lightgray;
        border-radius: 3px;
        overflow-y: scroll;
        overflow-x: hidden;
        box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
      }
      .row-container {
        display: flex;
        width: 100%;
      }

      td {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3px 3px 0 3px;
      }
      td:hover {
        background-color: var(--hover-color);
      }
      td:active {
        background-color: var(--active-color);
      }
      .active {
        background-color: rgb(190, 230, 253);
      }
      .disabled {
        pointer-events: none;
      }
    </style>
  `, isInline: true, styles: ["\n      .container {\n        position: absolute;\n        z-index: 999;\n        background-color: var(--back-color);\n        -webkit-touch-callout: none;\n        -webkit-user-select: none;\n        width: 192px;\n        height: 233px;\n        border: 1px solid lightgray;\n        border-radius: 3px;\n        overflow-y: scroll;\n        overflow-x: hidden;\n        box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);\n      }\n      .row-container {\n        display: flex;\n        width: 100%;\n      }\n\n      td {\n        flex: 1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 3px 3px 0 3px;\n      }\n      td:hover {\n        background-color: var(--hover-color);\n      }\n      td:active {\n        background-color: var(--active-color);\n      }\n      .active {\n        background-color: rgb(190, 230, 253);\n      }\n      .disabled {\n        pointer-events: none;\n      }\n    "], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.StiSvgImageComponent, selector: "sti-svg-image", inputs: ["svg"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StiBarcodeStylesPreviewComponent, decorators: [{
            type: Component,
            args: [{
                    selector: "sti-barcode-styles-preview",
                    template: `
    <div
      #element
      class="container"
      [style.visibility]="barcodeService.showBarcodePreview ? 'visible' : 'hidden'"
      [style.left.px]="barcodeService.previewX"
      [style.top.px]="barcodeService.previewY"
      [style.width.px]="barcodeService.previewWidth ? barcodeService.previewWidth : 192"
    >
      <table class="sti-clear" [style.width]="'100%'">
        <tr *ngFor="let row of rows; index as i" class="row-container">
          <td
            *ngFor="let item of itemsInRows; index as ind"
            class="{{ items[i * itemsInRows.length + ind] ? '' : 'disabled' }} {{
              currentItem && i * itemsInRows.length + ind + 1 == currentItem.style ? 'active' : ''
            }}"
            (click)="selectStyle(i * itemsInRows.length + ind + 1)"
          >
            <sti-svg-image
              *ngIf="items[i * itemsInRows.length + ind]"
              [svg]="items[i * itemsInRows.length + ind].innerHtml"
            ></sti-svg-image>
          </td>
        </tr>
      </table>
    </div>
    <style>
      .container {
        position: absolute;
        z-index: 999;
        background-color: var(--back-color);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        width: 192px;
        height: 233px;
        border: 1px solid lightgray;
        border-radius: 3px;
        overflow-y: scroll;
        overflow-x: hidden;
        box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
      }
      .row-container {
        display: flex;
        width: 100%;
      }

      td {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3px 3px 0 3px;
      }
      td:hover {
        background-color: var(--hover-color);
      }
      td:active {
        background-color: var(--active-color);
      }
      .active {
        background-color: rgb(190, 230, 253);
      }
      .disabled {
        pointer-events: none;
      }
    </style>
  `,
                }]
        }], ctorParameters: function () { return [{ type: i1.StiBarcodeService }, { type: i2.StiModelService }]; } });
//# sourceMappingURL=data:application/json;base64, 