@mugan86/ng-shop-ui/bundles/mugan86-ng-shop-ui.umd.min.js

Librería para crear los componentes de una tienda Online

!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/router"),require("@angular/forms")):"function"==typeof define&&define.amd?define("@mugan86/ng-shop-ui",["exports","@angular/core","@angular/common","@angular/router","@angular/forms"],t):t(((n=n||self).mugan86=n.mugan86||{},n.mugan86["ng-shop-ui"]={}),n.ng.core,n.ng.common,n.ng.router,n.ng.forms)}(this,(function(n,t,o,e,i){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */var r,a;function s(n,t,o,e){var i,r=arguments.length,a=r<3?t:null===e?e=Object.getOwnPropertyDescriptor(t,o):e;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(n,t,o,e);else for(var s=n.length-1;s>=0;s--)(i=n[s])&&(a=(r<3?i(a):r>3?i(t,o,a):i(t,o))||a);return r>3&&a&&Object.defineProperty(t,o,a),a}function c(n,t){var o="function"==typeof Symbol&&n[Symbol.iterator];if(!o)return n;var e,i,r=o.call(n),a=[];try{for(;(void 0===t||t-- >0)&&!(e=r.next()).done;)a.push(e.value)}catch(n){i={error:n}}finally{try{e&&!e.done&&(o=r.return)&&o.call(r)}finally{if(i)throw i.error}}return a}(r=n.CURRENCY_LIST||(n.CURRENCY_LIST={})).EURO="EUR",r.US_DOLLAR="USD",r.BRITISH_POUND="GBP",r.CANADIAN_DOLAR="CAD",r.COLOMBIAN_PESO="COP",r.CHILEAN_PESO="CLP",r.MEXICAN_PESO="MXN",r.VENEZUELA_BOLIVAR="VSD",r.PERUVIAN_SOL="PEN",r.ARGENTINA_PESO="ARS",(a=n.CURRENCIES_SYMBOL||(n.CURRENCIES_SYMBOL={})).EUR="€",a.USD="$",a.GBP="£",a.CAD="$",a.COP="$",a.CLP="$",a.MXN="$",a.VSD="Bs.",a.PEN="S/.",a.ARS="$";var l=function(){function n(){this.min=1,this.max=5,this.rating=void 0}return n.prototype.ngOnInit=function(){void 0!==this.rating&&null!==this.rating||(this.rating.value=0,this.rating.count=0),this.starsCssValues=Array(this.max).fill("")},s([t.Input()],n.prototype,"min",void 0),s([t.Input()],n.prototype,"max",void 0),s([t.Input()],n.prototype,"rating",void 0),n=s([t.Component({selector:"shop-rating",template:'<div *ngIf="starsCssValues && rating.value">\n  <span *ngFor="let v of starsCssValues; let i = index">\n    <i class="fas fa-star" [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    "]})],n)}(),p=function(){function n(){}return n=s([t.NgModule({declarations:[l],imports:[o.CommonModule],exports:[l]})],n)}(),d=function(){function n(n){this.router=n,this.items=[]}return n.prototype.open=function(n){var t=this.items[n].url.split("/");this.router.navigate(function(){for(var n=[],t=0;t<arguments.length;t++)n=n.concat(c(arguments[t]));return n}(t))},n.ctorParameters=function(){return[{type:e.Router}]},s([t.Input()],n.prototype,"items",void 0),n=s([t.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    "]})],n)}(),u=function(){function n(){}return n=s([t.NgModule({declarations:[d],imports:[o.CommonModule],exports:[d]})],n)}(),g=function(){function o(){this.showDesc=!1,this.add=new t.EventEmitter,this.itemDetails=new t.EventEmitter,this.selectCurrency=n.CURRENCIES_SYMBOL[n.CURRENCY_LIST.EURO]}return o.prototype.ngOnInit=function(){this.product.qty=0},o.prototype.addToCart=function(n){n.qty=n.qty+1,this.add.emit(n)},o.prototype.showDetails=function(n){this.itemDetails.emit(n)},s([t.Input()],o.prototype,"product",void 0),s([t.Input()],o.prototype,"showDesc",void 0),s([t.Output()],o.prototype,"add",void 0),s([t.Output()],o.prototype,"itemDetails",void 0),s([t.Input()],o.prototype,"selectCurrency",void 0),o=s([t.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    \x3c!--<li><a href="" data-tip="Añadir a lista de deseos"><i class="fa fa-shopping-bag"></i></a></li>--\x3e\n    <li>\n      <a\n        class="item-button-options"\n        (click)="addToCart(product)"\n        data-tip="Añadir 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    "]})],o)}(),m=function(){function n(){}return n.prototype.transform=function(n,t){return void 0===t&&(t=25),n.length>t?(new o.SlicePipe).transform(n,0,t-3).concat("..."):n},n=s([t.Pipe({name:"truncate"})],n)}(),f=function(){function n(){}return n=s([t.NgModule({declarations:[g,m],imports:[o.CommonModule,p],exports:[g]})],n)}(),h=[i.FormsModule,p,u,f],x=function(){function n(){}return n=s([t.NgModule({imports:h,exports:h})],n)}(),y=function(){function n(){this.updateValue=new t.EventEmitter}return n.prototype.changeValue=function(n){"-"===n&&this.qty>1?this.qty--:"+"===n&&this.qty<this.stock&&this.qty++,this.sendUpdate()},n.prototype.sendUpdate=function(){this.updateValue.emit(this.qty)},s([t.Input()],n.prototype,"qty",void 0),s([t.Input()],n.prototype,"stock",void 0),s([t.Output()],n.prototype,"updateValue",void 0),n=s([t.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    "]})],n)}(),v=function(){function n(){}return n=s([t.NgModule({declarations:[y],imports:[o.CommonModule,i.FormsModule],exports:[y]})],n)}();n.CarouselItemsComponent=d,n.CarouselItemsModule=u,n.ProductItemComponent=g,n.ProductItemModule=f,n.QuantitySelectorComponent=y,n.QuantitySelectorModule=v,n.RatingComponent=l,n.RatingModule=p,n.ShopUiModule=x,n.TruncatePipe=m,Object.defineProperty(n,"__esModule",{value:!0})}));
//# sourceMappingURL=mugan86-ng-shop-ui.umd.min.js.map