@totvs-agro/core-mobile/dist/components/images-itens/images-itens.js

Core Mobile Totvs Agro (Front-End) para utilização dos estilos do T-Faces

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import * as moment from 'moment';
var HTML_TEMPLATE = "\n<div class=\"container\" *ngIf=\"images\">\n  <div (click)=\"callEdit(image._id, image.src)\" *ngFor=\"let image of images; let i = index; let l = last\" [ngClass]=\"{ 'mask-first' : i === 0, 'mask' : i != 0 && !l, 'mask-last' : l }\" [style.background-image]=\"getBackground(image.src)\">\n    <p class=\"titulo-da-foto\">\n      {{image.title}}\n    </p>\n    <span class=\"data\">\n      {{dateAsString(image)}}\n    </span>\n    <ion-icon class=\"arrow-right\" name=\"ios-arrow-forward\" ></ion-icon>\n  </div>\n</div>\n";
var CSS_STYLE = "    \n.mask {\n\twidth: 140px;\n\theight: 105px;\n\tborder-radius: 3px;\n\tbackground-size:cover;           \n\tdisplay: inline-block; /*Display inline and maintain block characteristics.*/\n\tvertical-align: top; /*Makes sure all the divs are correctly aligned.*/\n\twhite-space: normal; /*Prevents child elements from inheriting nowrap.*/\n\tmargin-left: 16px;\n}\n\n.mask-first {\n\twidth: 140px;\n\theight: 105px;\n\tborder-radius: 3px;\n\tbackground-size:cover;           \n\tdisplay: inline-block; /*Display inline and maintain block characteristics.*/\n\tvertical-align: top; /*Makes sure all the divs are correctly aligned.*/\n\twhite-space: normal; /*Prevents child elements from inheriting nowrap.*/\n\tmargin-left: 16px;\n}\n\n.mask-last {\n\twidth: 140px;\n\theight: 105px;\n\tborder-radius: 3px;\n\tbackground-size:cover;           \n\tdisplay: inline-block; /*Display inline and maintain block characteristics.*/\n\tvertical-align: top; /*Makes sure all the divs are correctly aligned.*/\n\twhite-space: normal; /*Prevents child elements from inheriting nowrap.*/\n\tmargin-right: 24px;\n\tmargin-left: 16px;\n}\n\n.titulo-da-foto {\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\twidth: 120px;\n\tmax-width: 120px;\n\theight: 23px;\n\tfont-family: NunitoSans;\n\tfont-size: 10px;\n\tfont-weight: bold;\n\tfont-style: normal;\n\tfont-stretch: normal;\n\tline-height: 1.2;\n\tletter-spacing: normal;\n\ttext-align: left;\n\tcolor: #ffffff;\n\tpadding: 65px 12px 14px 8px;\n}\n\n.data {\n\twidth: 109px;\n\theight: 16px;\n\tfont-family: NunitoSans;\n\tfont-size: 8px;\n\tfont-weight: bold;\n\tfont-style: normal;\n\tfont-stretch: normal;\n\tline-height: 1.6;\n\tletter-spacing: normal;\n\ttext-align: left;\n\tcolor: #ffffff;\n\tpadding: 0px 65px 4.9px 8px;\n}\n\n.arrow-right {\n\twidth: 8px;\n\theight: 13px;\n\tcolor: #ffffff;  \n\tfloat: right;\n\tmargin-right: 10px;      \n}      \n\n.container\n{\n\twhite-space: nowrap; /*Prevents Wrapping*/\n\t\n\n\toverflow-x: scroll;\n\toverflow-y: hidden;\n}\n\n.container-photos{\n\tmin-height: 105px;\n}\n\np {\n\tmargin-block-start: 0px;\n\tmargin-block-end: 0px;\n\tmargin-inline-start: 0px;\n\tmargin-inline-end: 0px;\n  }\n";
var ImagesItensComponent = /** @class */ (function () {
    function ImagesItensComponent(sanitizer) {
        this.sanitizer = sanitizer;
    }
    ImagesItensComponent.prototype.getBackground = function (image) {
        return this.sanitizer.bypassSecurityTrustStyle("linear-gradient(to bottom, rgba(74, 92, 96, 0.2), rgba(29, 36, 38, 0.8)), url(" + image + ")");
    };
    ImagesItensComponent.prototype.callEdit = function (idImage) {
        this.callback(idImage);
    };
    ImagesItensComponent.prototype.dateAsString = function (image) {
        return moment(image.date).format('L');
    };
    __decorate([
        Input('callback'),
        __metadata("design:type", Function)
    ], ImagesItensComponent.prototype, "callback", void 0);
    __decorate([
        Input('images'),
        __metadata("design:type", Array)
    ], ImagesItensComponent.prototype, "images", void 0);
    ImagesItensComponent = __decorate([
        Component({
            selector: 'images-itens',
            template: HTML_TEMPLATE,
            styles: [CSS_STYLE],
            encapsulation: ViewEncapsulation.None
        }),
        __metadata("design:paramtypes", [DomSanitizer])
    ], ImagesItensComponent);
    return ImagesItensComponent;
}());
export { ImagesItensComponent };
//# sourceMappingURL=images-itens.js.map