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

Librería para crear los componentes de una tienda Online

import { __decorate } 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 = {}));

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

let RatingComponent = class RatingComponent {
    constructor() {
        this.min = 1;
        this.max = 5;
        this.rating = undefined;
        this.classfontIcon = ICON_CLASS.nameClass;
    }
    ngOnInit() {
        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: [`
      .checked {
        color: orange;
      }

      .star,
      .star-20,
      .star-100 {
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
      }

      .star-20 {
        background-image: -webkit-gradient(
          linear,
          left top,
          right top,
          color-stop(0.25, orange),
          color-stop(1, black)
        );
        background-image: gradient(
          linear,
          left top,
          right top,
          color-stop(0.25, orange),
          color-stop(1, black)
        );
      }

      .star-100 {
        background-image: -webkit-gradient(
          linear,
          left top,
          right top,
          color-stop(1, orange)
        );
        background-image: gradient(
          linear,
          left top,
          right top,
          color-stop(1, orange)
        );
      }
    `]
    })
], RatingComponent);

let RatingModule = class RatingModule {
};
RatingModule = __decorate([
    NgModule({
        declarations: [RatingComponent],
        imports: [
            CommonModule
        ],
        exports: [RatingComponent]
    })
], RatingModule);

let CarouselItemsComponent = class CarouselItemsComponent {
    constructor(router) {
        this.router = router;
        this.items = [];
    }
    open(i) {
        const urlsCommands = this.items[i].url.split('/');
        this.router.navigate([...urlsCommands]);
    }
};
CarouselItemsComponent.ctorParameters = () => [
    { 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: [`
      section {
        margin-bottom: 25px
      }
      .url-item {
        cursor: pointer;
      }

      .carousel-inner {
        height: 500px;
      }

      .carousel-item {
        height: 100%;
        min-height: 350px;
        background: no-repeat center center scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }

      @media (max-width: 1440px) {
        .carousel-item {
          max-height: 640px;
        }
      }
      @media (max-width: 400px) {
        .carousel-item {
          max-height: 240px;
        }
      }
    `]
    })
], CarouselItemsComponent);

let CarouselItemsModule = class CarouselItemsModule {
};
CarouselItemsModule = __decorate([
    NgModule({
        declarations: [CarouselItemsComponent],
        imports: [
            CommonModule
        ],
        exports: [CarouselItemsComponent]
    })
], CarouselItemsModule);

let ProductItemComponent = class ProductItemComponent {
    constructor() {
        this.showDesc = false;
        this.add = new EventEmitter();
        this.itemDetails = new EventEmitter();
        this.selectCurrency = CURRENCIES_SYMBOL[CURRENCY_LIST.EURO];
    }
    ngOnInit() {
        this.product.qty = 0;
    }
    addToCart(product) {
        product.qty = product.qty + 1;
        this.add.emit(product);
    }
    showDetails(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: [`
      /********************* Shopping Demo-6 **********************/
      .product-grid,
      .product-grid .product-image {
        overflow: hidden;
      }
      .product-grid {
        font-family: 'Open Sans', sans-serif;
        text-align: center;
        position: relative;
        transition: all 0.5s ease 0s;
        border: 1px solid #afa3a338;
        border-radius: 8px;
      }
      .product-grid:hover {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        cursor: pointer
      }
      .product-grid .product-image a {
        display: block;
      }
      .product-grid .product-image img {
        width: 100%;
        min-height: 150px;
        max-height: 150px;
        transition: all 0.5s ease 0s;
      }
      .product-grid:hover .product-image img {
        transform: scale(1.1);
      }
      .product-grid .product-content {
        padding: 12px 12px 15px;
        transition: all 0.5s ease 0s;
      }
      .product-grid:hover .product-content {
        opacity: 0;
      }
      .product-grid .title {
        font-size: 18px;
        font-weight: 600;
        text-transform: capitalize;
        margin: 0 0 10px;
        transition: all 0.3s ease 0s;
      }
      .product-grid .title a {
        color: #000;
      }
      .product-grid .title a:hover {
        color: #333;
      }
      .product-grid .price {
        font-size: 22px;
        font-weight: 800;
        color: #cc1c39;
        text-align: left;
        margin-left: 20px;
        margin-bottom: 12px;
      }
      .product-grid .price span {
        color: #999;
        font-size: 15px;
        font-weight: 400;
        text-decoration: line-through;
        margin-left: 7px;
        display: inline-block;
      }
      .product-grid .price span.discount-percentage {
        text-decoration: none;
      }
      .product-grid .social {
        background-color: #fff;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
        opacity: 0;
        transform: translateX(-50%);
        position: absolute;
        bottom: -50%;
        left: 50%;
        z-index: 1;
        transition: all 0.5s ease 0s;
      }
      .product-grid:hover .social {
        opacity: 1;
        bottom: 20px;
      }

      .product-grid .social li {
        display: inline-block;
      }
      .product-grid .social li a {
        color: #909090;
        font-size: 16px;
        line-height: 45px;
        text-align: center;
        height: 45px;
        width: 45px;
        margin: 0 7px;
        border: 1px solid #909090;
        border-radius: 50px;
        display: block;
        position: relative;
        transition: all 0.3s ease-in-out;
      }
      .product-grid .social li a:hover {
        color: #fff;
        background-color: #333;
        width: 80px;
      }
      .product-grid .social li a:after,
      .product-grid .social li a:before {
        content: attr(data-tip);
        color: #fff;
        background-color: #333;
        font-size: 12px;
        letter-spacing: 1px;
        line-height: 20px;
        padding: 1px 5px;
        border-radius: 5px;
        white-space: nowrap;
        opacity: 0;
        transform: translateX(-50%);
        position: absolute;
        left: 50%;
        top: -30px;
      }
      .product-grid .social li a:after {
        content: '';
        height: 15px;
        width: 15px;
        border-radius: 0;
        transform: translateX(-50%) rotate(45deg);
        top: -20px;
        z-index: -1;
      }
      .product-grid .social li a:hover:after,
      .product-grid .social li a:hover:before {
        opacity: 1;
      }
      .item-button-options:hover {
        background: #504a4a;
        cursor: pointer;
      }
      @media only screen and (max-width: 990px) {
        .product-grid {
          margin-bottom: 30px;
        }
      }
    `]
    })
], ProductItemComponent);

let TruncatePipe = class TruncatePipe {
    transform(value, limit = 25) {
        return value.length > limit
            ? new SlicePipe().transform(value, 0, limit - 3).concat('...')
            : value;
    }
};
TruncatePipe = __decorate([
    Pipe({
        name: 'truncate',
    })
], TruncatePipe);

let ProductItemModule = class ProductItemModule {
};
ProductItemModule = __decorate([
    NgModule({
        declarations: [ProductItemComponent, TruncatePipe],
        imports: [
            CommonModule,
            RatingModule
        ],
        exports: [ProductItemComponent]
    })
], ProductItemModule);

const MODULES = [
    FormsModule,
    RatingModule,
    CarouselItemsModule,
    ProductItemModule
];
let ShopUiModule = class ShopUiModule {
};
ShopUiModule = __decorate([
    NgModule({
        imports: MODULES,
        exports: MODULES
    })
], ShopUiModule);

let QuantitySelectorComponent = class QuantitySelectorComponent {
    constructor() {
        this.updateValue = new EventEmitter();
    }
    changeValue(action) {
        if (action === '-' && this.qty > 1) {
            this.qty--;
        }
        else if (action === '+' && this.qty < this.stock) {
            this.qty++;
        }
        this.sendUpdate();
    }
    sendUpdate() {
        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: [`
      div {
        margin-bottom: 5px;
      }
      .quantity {
        width: 20%;
        margin-bottom: 5px;
      }

      input[type='text']:disabled {
        color: black;
        width: 60px
      }

      .qty-btn {
        border-radius: 20px;
        padding-top: 3px;
        /* top - right - bottom - left => sentido de las agujas del reloj*/
        margin: -2px 3px 2px 3px;
      }
    `]
    })
], QuantitySelectorComponent);

let QuantitySelectorModule = class QuantitySelectorModule {
};
QuantitySelectorModule = __decorate([
    NgModule({
        declarations: [QuantitySelectorComponent],
        imports: [
            CommonModule,
            FormsModule
        ],
        exports: [QuantitySelectorComponent],
    })
], 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