@stvp/ng-shop-ui/fesm5/stvp-ng-shop-ui.js

Librería para crear los componentes de una tienda Online

import { __decorate, __spread } from 'tslib';
import { Input, Component, NgModule, EventEmitter, Output, Pipe } from '@angular/core';
import { CommonModule, SlicePipe } from '@angular/common';
import { Router } from '@angular/router';
import { FormsModule } from '@angular/forms';

var CURRENCY_LIST;
(function (CURRENCY_LIST) {
    CURRENCY_LIST["EURO"] = "EUR";
    CURRENCY_LIST["US_DOLLAR"] = "USD";
    CURRENCY_LIST["BRITISH_POUND"] = "GBP";
    CURRENCY_LIST["CANADIAN_DOLAR"] = "CAD";
    CURRENCY_LIST["COLOMBIAN_PESO"] = "COP";
    CURRENCY_LIST["CHILEAN_PESO"] = "CLP";
    CURRENCY_LIST["MEXICAN_PESO"] = "MXN";
    CURRENCY_LIST["VENEZUELA_BOLIVAR"] = "VSD";
    CURRENCY_LIST["PERUVIAN_SOL"] = "PEN";
})(CURRENCY_LIST || (CURRENCY_LIST = {}));
var CURRENCIES_SYMBOL;
(function (CURRENCIES_SYMBOL) {
    CURRENCIES_SYMBOL["EUR"] = "\u20AC";
    CURRENCIES_SYMBOL["USD"] = "$";
    CURRENCIES_SYMBOL["GBP"] = "\u00A3";
    CURRENCIES_SYMBOL["CAD"] = "$";
    CURRENCIES_SYMBOL["COP"] = "$";
    CURRENCIES_SYMBOL["CLP"] = "$";
    CURRENCIES_SYMBOL["MXN"] = "$";
    CURRENCIES_SYMBOL["VSD"] = "Bs.";
    CURRENCIES_SYMBOL["PEN"] = "S/.";
})(CURRENCIES_SYMBOL || (CURRENCIES_SYMBOL = {}));

var ICON_CLASS = {
    nameClass: 'fas fa-star'
};

var RatingComponent = /** @class */ (function () {
    function RatingComponent() {
        this.min = 1;
        this.max = 5;
        this.rating = undefined;
        this.classfontIcon = ICON_CLASS.nameClass;
    }
    RatingComponent.prototype.ngOnInit = function () {
        if (this.rating === undefined || this.rating === null) {
            this.rating.value = 0;
            this.rating.count = 0;
        }
        this.starsCssValues = Array(this.max).fill('');
    };
    __decorate([
        Input()
    ], RatingComponent.prototype, "min", void 0);
    __decorate([
        Input()
    ], RatingComponent.prototype, "max", void 0);
    __decorate([
        Input()
    ], RatingComponent.prototype, "rating", void 0);
    __decorate([
        Input()
    ], RatingComponent.prototype, "classfontIcon", void 0);
    RatingComponent = __decorate([
        Component({
            selector: 'shop-rating',
            template: "<div *ngIf=\"starsCssValues && rating.value\">\n  <span *ngFor=\"let v of starsCssValues; let i = index\">\n    <i class=\"{{classfontIcon}}\" [ngClass]=\"{ checked: rating.value >= i + 1 }\"></i>\n  </span>\n  {{ rating.value }} ({{ rating.count }})\n</div>\n",
            styles: ["\n      .checked {\n        color: orange;\n      }\n\n      .star,\n      .star-20,\n      .star-100 {\n        color: transparent;\n        -webkit-background-clip: text;\n        background-clip: text;\n      }\n\n      .star-20 {\n        background-image: -webkit-gradient(\n          linear,\n          left top,\n          right top,\n          color-stop(0.25, orange),\n          color-stop(1, black)\n        );\n        background-image: gradient(\n          linear,\n          left top,\n          right top,\n          color-stop(0.25, orange),\n          color-stop(1, black)\n        );\n      }\n\n      .star-100 {\n        background-image: -webkit-gradient(\n          linear,\n          left top,\n          right top,\n          color-stop(1, orange)\n        );\n        background-image: gradient(\n          linear,\n          left top,\n          right top,\n          color-stop(1, orange)\n        );\n      }\n    "]
        })
    ], RatingComponent);
    return RatingComponent;
}());

var RatingModule = /** @class */ (function () {
    function RatingModule() {
    }
    RatingModule = __decorate([
        NgModule({
            declarations: [RatingComponent],
            imports: [
                CommonModule
            ],
            exports: [RatingComponent]
        })
    ], RatingModule);
    return RatingModule;
}());

var CarouselItemsComponent = /** @class */ (function () {
    function CarouselItemsComponent(router) {
        this.router = router;
        this.items = [];
    }
    CarouselItemsComponent.prototype.open = function (i) {
        var urlsCommands = this.items[i].url.split('/');
        this.router.navigate(__spread(urlsCommands));
    };
    CarouselItemsComponent.ctorParameters = function () { return [
        { type: Router }
    ]; };
    __decorate([
        Input()
    ], CarouselItemsComponent.prototype, "items", void 0);
    CarouselItemsComponent = __decorate([
        Component({
            selector: 'shop-carousel-items',
            template: "<section>\n    <div id=\"carouselExampleIndicators\" class=\"carousel slide\" data-ride=\"carousel\">\n      <ol class=\"carousel-indicators\">\n        <li data-target=\"#carouselExampleIndicators\" *ngFor=\"let slide of items; let slidePos = index\" data-slide-to=\"slidePos\" [ngClass]=\"{'active' : slidePos == 0}\"></li>\n      </ol>\n      <div class=\"carousel-inner\" role=\"listbox\">\n        <div *ngFor=\"let item of items; let i = index\" class=\"carousel-item url-item\" \n        title=\"{{ item.title }} - {{ item.description }}\"\n        [ngClass]=\"{'active' : i == 0}\" (click)=\"open(i)\"\n        [ngStyle]=\"{'background-image': 'url(' + item.background + ')'}\">\n          <div class=\"carousel-caption d-none d-md-block\">\n            <h3>{{ item.title }}</h3>\n            <p>{{ item.description }}</p>\n          </div>\n        </div>\n      </div>\n      <a class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\" data-slide=\"prev\">\n            <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n            <span class=\"sr-only\">Previous</span>\n          </a>\n      <a class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\" data-slide=\"next\">\n            <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n            <span class=\"sr-only\">Next</span>\n          </a>\n    </div>\n  </section>\n  ",
            styles: ["\n      section {\n        margin-bottom: 25px\n      }\n      .url-item {\n        cursor: pointer;\n      }\n\n      .carousel-inner {\n        height: 500px;\n      }\n\n      .carousel-item {\n        height: 100%;\n        min-height: 350px;\n        background: no-repeat center center scroll;\n        -webkit-background-size: cover;\n        -moz-background-size: cover;\n        -o-background-size: cover;\n        background-size: cover;\n      }\n\n      @media (max-width: 1440px) {\n        .carousel-item {\n          max-height: 640px;\n        }\n      }\n      @media (max-width: 400px) {\n        .carousel-item {\n          max-height: 240px;\n        }\n      }\n    "]
        })
    ], CarouselItemsComponent);
    return CarouselItemsComponent;
}());

var CarouselItemsModule = /** @class */ (function () {
    function CarouselItemsModule() {
    }
    CarouselItemsModule = __decorate([
        NgModule({
            declarations: [CarouselItemsComponent],
            imports: [
                CommonModule
            ],
            exports: [CarouselItemsComponent]
        })
    ], CarouselItemsModule);
    return CarouselItemsModule;
}());

var ProductItemComponent = /** @class */ (function () {
    function ProductItemComponent() {
        this.showDesc = false;
        this.add = new EventEmitter();
        this.itemDetails = new EventEmitter();
        this.selectCurrency = CURRENCIES_SYMBOL[CURRENCY_LIST.EURO];
    }
    ProductItemComponent.prototype.ngOnInit = function () {
        this.product.qty = 0;
    };
    ProductItemComponent.prototype.addToCart = function (product) {
        product.qty = product.qty + 1;
        this.add.emit(product);
    };
    ProductItemComponent.prototype.showDetails = function (product) {
        this.itemDetails.emit(product);
    };
    __decorate([
        Input()
    ], ProductItemComponent.prototype, "product", void 0);
    __decorate([
        Input()
    ], ProductItemComponent.prototype, "showDesc", void 0);
    __decorate([
        Output()
    ], ProductItemComponent.prototype, "add", void 0);
    __decorate([
        Output()
    ], ProductItemComponent.prototype, "itemDetails", void 0);
    __decorate([
        Input()
    ], ProductItemComponent.prototype, "selectCurrency", void 0);
    ProductItemComponent = __decorate([
        Component({
            selector: 'shop-product-item',
            template: "<div class=\"product-grid\">\n  <div class=\"product-image\">\n    <a (click)=\"showDetails(product)\">\n      <img src=\"{{ product.img }}\" class=\"pic-1\" [alt]=\"product.name\" />\n    </a>\n  </div>\n  <div class=\"product-content\">\n    <h3 class=\"title\">{{ product.name | truncate: 25 }}</h3>\n    <p *ngIf=\"showDesc\">\n      {{ product.description | truncate: 40 }}\n    </p>\n    <div>\n      <ng-template #noDiscount>\n        <div class=\"price\">\n          {{ selectCurrency }} {{ product.price | number }}\n        </div>\n      </ng-template>\n      <div class=\"price\" *ngIf=\"product.discount; else noDiscount\">\n        {{ selectCurrency }} {{ product.priceDiscount | number }}\n        <span >\n          {{ selectCurrency }}  {{ product.price | number }}\n          <span class=\"discount-percentage\">({{ product.discount }}%)</span>\n        </span>\n      </div>\n    </div>\n    <shop-rating *ngIf=\"product.rating\" [rating]=\"product.rating\"></shop-rating>\n  </div>\n  <ul class=\"social\">\n    <!--<li><a href=\"\" data-tip=\"A\u00F1adir a lista de deseos\"><i class=\"fa fa-shopping-bag\"></i></a></li>-->\n    <li>\n      <a\n        class=\"item-button-options\"\n        (click)=\"addToCart(product)\"\n        data-tip=\"A\u00F1adir a la cesta\"\n        ><i class=\"fas fa-cart-plus\"></i\n      ></a>\n    </li>\n    <li>\n      <a class=\"item-button-options\"\n        (click)=\"showDetails(product)\" data-tip=\"Detalles del producto\"\n        ><i class=\"fas fa-info\"></i\n      ></a>\n    </li>\n  </ul>\n</div>\n",
            styles: ["\n      /********************* Shopping Demo-6 **********************/\n      .product-grid,\n      .product-grid .product-image {\n        overflow: hidden;\n      }\n      .product-grid {\n        font-family: 'Open Sans', sans-serif;\n        text-align: center;\n        position: relative;\n        transition: all 0.5s ease 0s;\n        border: 1px solid #afa3a338;\n        border-radius: 8px;\n      }\n      .product-grid:hover {\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n        cursor: pointer\n      }\n      .product-grid .product-image a {\n        display: block;\n      }\n      .product-grid .product-image img {\n        width: 100%;\n        min-height: 150px;\n        max-height: 150px;\n        transition: all 0.5s ease 0s;\n      }\n      .product-grid:hover .product-image img {\n        transform: scale(1.1);\n      }\n      .product-grid .product-content {\n        padding: 12px 12px 15px;\n        transition: all 0.5s ease 0s;\n      }\n      .product-grid:hover .product-content {\n        opacity: 0;\n      }\n      .product-grid .title {\n        font-size: 18px;\n        font-weight: 600;\n        text-transform: capitalize;\n        margin: 0 0 10px;\n        transition: all 0.3s ease 0s;\n      }\n      .product-grid .title a {\n        color: #000;\n      }\n      .product-grid .title a:hover {\n        color: #333;\n      }\n      .product-grid .price {\n        font-size: 22px;\n        font-weight: 800;\n        color: #cc1c39;\n        text-align: left;\n        margin-left: 20px;\n        margin-bottom: 12px;\n      }\n      .product-grid .price span {\n        color: #999;\n        font-size: 15px;\n        font-weight: 400;\n        text-decoration: line-through;\n        margin-left: 7px;\n        display: inline-block;\n      }\n      .product-grid .price span.discount-percentage {\n        text-decoration: none;\n      }\n      .product-grid .social {\n        background-color: #fff;\n        width: 100%;\n        padding: 0;\n        margin: 0;\n        list-style: none;\n        opacity: 0;\n        transform: translateX(-50%);\n        position: absolute;\n        bottom: -50%;\n        left: 50%;\n        z-index: 1;\n        transition: all 0.5s ease 0s;\n      }\n      .product-grid:hover .social {\n        opacity: 1;\n        bottom: 20px;\n      }\n\n      .product-grid .social li {\n        display: inline-block;\n      }\n      .product-grid .social li a {\n        color: #909090;\n        font-size: 16px;\n        line-height: 45px;\n        text-align: center;\n        height: 45px;\n        width: 45px;\n        margin: 0 7px;\n        border: 1px solid #909090;\n        border-radius: 50px;\n        display: block;\n        position: relative;\n        transition: all 0.3s ease-in-out;\n      }\n      .product-grid .social li a:hover {\n        color: #fff;\n        background-color: #333;\n        width: 80px;\n      }\n      .product-grid .social li a:after,\n      .product-grid .social li a:before {\n        content: attr(data-tip);\n        color: #fff;\n        background-color: #333;\n        font-size: 12px;\n        letter-spacing: 1px;\n        line-height: 20px;\n        padding: 1px 5px;\n        border-radius: 5px;\n        white-space: nowrap;\n        opacity: 0;\n        transform: translateX(-50%);\n        position: absolute;\n        left: 50%;\n        top: -30px;\n      }\n      .product-grid .social li a:after {\n        content: '';\n        height: 15px;\n        width: 15px;\n        border-radius: 0;\n        transform: translateX(-50%) rotate(45deg);\n        top: -20px;\n        z-index: -1;\n      }\n      .product-grid .social li a:hover:after,\n      .product-grid .social li a:hover:before {\n        opacity: 1;\n      }\n      .item-button-options:hover {\n        background: #504a4a;\n        cursor: pointer;\n      }\n      @media only screen and (max-width: 990px) {\n        .product-grid {\n          margin-bottom: 30px;\n        }\n      }\n    "]
        })
    ], ProductItemComponent);
    return ProductItemComponent;
}());

var TruncatePipe = /** @class */ (function () {
    function TruncatePipe() {
    }
    TruncatePipe.prototype.transform = function (value, limit) {
        if (limit === void 0) { limit = 25; }
        return value.length > limit
            ? new SlicePipe().transform(value, 0, limit - 3).concat('...')
            : value;
    };
    TruncatePipe = __decorate([
        Pipe({
            name: 'truncate',
        })
    ], TruncatePipe);
    return TruncatePipe;
}());

var ProductItemModule = /** @class */ (function () {
    function ProductItemModule() {
    }
    ProductItemModule = __decorate([
        NgModule({
            declarations: [ProductItemComponent, TruncatePipe],
            imports: [
                CommonModule,
                RatingModule
            ],
            exports: [ProductItemComponent]
        })
    ], ProductItemModule);
    return ProductItemModule;
}());

var MODULES = [
    FormsModule,
    RatingModule,
    CarouselItemsModule,
    ProductItemModule
];
var ShopUiModule = /** @class */ (function () {
    function ShopUiModule() {
    }
    ShopUiModule = __decorate([
        NgModule({
            imports: MODULES,
            exports: MODULES
        })
    ], ShopUiModule);
    return ShopUiModule;
}());

var QuantitySelectorComponent = /** @class */ (function () {
    function QuantitySelectorComponent() {
        this.updateValue = new EventEmitter();
    }
    QuantitySelectorComponent.prototype.changeValue = function (action) {
        if (action === '-' && this.qty > 1) {
            this.qty--;
        }
        else if (action === '+' && this.qty < this.stock) {
            this.qty++;
        }
        this.sendUpdate();
    };
    QuantitySelectorComponent.prototype.sendUpdate = function () {
        this.updateValue.emit(this.qty);
    };
    __decorate([
        Input()
    ], QuantitySelectorComponent.prototype, "qty", void 0);
    __decorate([
        Input()
    ], QuantitySelectorComponent.prototype, "stock", void 0);
    __decorate([
        Output()
    ], QuantitySelectorComponent.prototype, "updateValue", void 0);
    QuantitySelectorComponent = __decorate([
        Component({
            selector: 'shop-qty-selector',
            template: "<div>\n    <button type=\"button\" class=\"btn btn-dark qty-btn\" (click)=\"changeValue('-')\">\n        -\n      </button>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"qty\"\n        value=\"1\"\n        name=\"quantity\"\n        class=\"text-center quantity\"\n        disabled\n      />\n      <button type=\"button\" class=\"btn btn-dark qty-btn\" (click)=\"changeValue('+')\">\n        +\n      </button>\n</div>\n\n",
            styles: ["\n      div {\n        margin-bottom: 5px;\n      }\n      .quantity {\n        width: 20%;\n        margin-bottom: 5px;\n      }\n\n      input[type='text']:disabled {\n        color: black;\n        width: 60px\n      }\n\n      .qty-btn {\n        border-radius: 20px;\n        padding-top: 3px;\n        /* top - right - bottom - left => sentido de las agujas del reloj*/\n        margin: -2px 3px 2px 3px;\n      }\n    "]
        })
    ], QuantitySelectorComponent);
    return QuantitySelectorComponent;
}());

var QuantitySelectorModule = /** @class */ (function () {
    function QuantitySelectorModule() {
    }
    QuantitySelectorModule = __decorate([
        NgModule({
            declarations: [QuantitySelectorComponent],
            imports: [
                CommonModule,
                FormsModule
            ],
            exports: [QuantitySelectorComponent],
        })
    ], QuantitySelectorModule);
    return QuantitySelectorModule;
}());

/*
 * Public API Surface of shop-ui
 */

/**
 * Generated bundle index. Do not edit.
 */

export { CURRENCIES_SYMBOL, CURRENCY_LIST, CarouselItemsComponent, CarouselItemsModule, ICON_CLASS, ProductItemComponent, ProductItemModule, QuantitySelectorComponent, QuantitySelectorModule, RatingComponent, RatingModule, ShopUiModule, TruncatePipe };
//# sourceMappingURL=stvp-ng-shop-ui.js.map