@mugan86/ng-shop-ui/mugan86-ng-shop-ui.metadata.json

Librería para crear los componentes de una tienda Online

{"__symbolic":"module","version":4,"metadata":{"CURRENCY_LIST":{"EURO":"EUR","US_DOLLAR":"USD","BRITISH_POUND":"GBP","CANADIAN_DOLAR":"CAD","COLOMBIAN_PESO":"COP","CHILEAN_PESO":"CLP","MEXICAN_PESO":"MXN","VENEZUELA_BOLIVAR":"VSD","PERUVIAN_SOL":"PEN","ARGENTINA_PESO":"ARS"},"CURRENCIES_SYMBOL":{"EUR":"€","USD":"$","GBP":"£","CAD":"$","COP":"$","CLP":"$","MXN":"$","VSD":"Bs.","PEN":"S/.","ARS":"$"},"ShopUiModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":7,"character":2},{"__symbolic":"reference","name":"RatingModule"},{"__symbolic":"reference","name":"CarouselItemsModule"},{"__symbolic":"reference","name":"ProductItemModule"}],"exports":[{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":7,"character":2},{"__symbolic":"reference","name":"RatingModule"},{"__symbolic":"reference","name":"CarouselItemsModule"},{"__symbolic":"reference","name":"ProductItemModule"}]}]}],"members":{}},"RatingModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"RatingComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":4}],"exports":[{"__symbolic":"reference","name":"RatingComponent"}]}]}],"members":{}},"ProductItemModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ProductItemComponent"},{"__symbolic":"reference","name":"TruncatePipe"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":4},{"__symbolic":"reference","name":"RatingModule"}],"exports":[{"__symbolic":"reference","name":"ProductItemComponent"}]}]}],"members":{}},"CarouselItemsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CarouselItemsComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":4}],"exports":[{"__symbolic":"reference","name":"CarouselItemsComponent"}]}]}],"members":{}},"QuantitySelectorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"QuantitySelectorComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":9,"character":4}],"exports":[{"__symbolic":"reference","name":"QuantitySelectorComponent"}]}]}],"members":{}},"TruncatePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"truncate"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"RatingComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"shop-rating","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    "],"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"}]}],"members":{"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":3}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3}}]}],"rating":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ProductItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"shop-product-item","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    "],"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ñadir 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ñ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"}]}],"members":{"product":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":164,"character":3}}]}],"showDesc":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":165,"character":3}}]}],"add":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":166,"character":3}}]}],"itemDetails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":167,"character":3}}]}],"selectCurrency":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":168,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"addToCart":[{"__symbolic":"method"}],"showDetails":[{"__symbolic":"method"}]}},"CarouselItemsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"shop-carousel-items","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    "],"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  "}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"Router","line":45,"character":30}]}],"open":[{"__symbolic":"method"}]}},"QuantitySelectorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"shop-qty-selector","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    "],"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"}]}],"members":{"qty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"stock":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"updateValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":3}}]}],"changeValue":[{"__symbolic":"method"}],"sendUpdate":[{"__symbolic":"method"}]}}},"origins":{"CURRENCY_LIST":"./lib/constants/currencies.enum","CURRENCIES_SYMBOL":"./lib/constants/currencies.enum","ShopUiModule":"./lib/shop-ui.module","RatingModule":"./lib/components/rating/rating.module","ProductItemModule":"./lib/components/product-item/product-item.module","CarouselItemsModule":"./lib/components/carousel-items/carousel-items.module","QuantitySelectorModule":"./lib/components/quantity-selector/quantity-selector.module","TruncatePipe":"./lib/pipes/truncate.pipe","RatingComponent":"./lib/components/rating/rating.component","ProductItemComponent":"./lib/components/product-item/product-item.component","CarouselItemsComponent":"./lib/components/carousel-items/carousel-items.component","QuantitySelectorComponent":"./lib/components/quantity-selector/quantity-selector.component"},"importAs":"@mugan86/ng-shop-ui"}