@vendasta/store
Version:
Components and data for Store
100 lines • 11 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ActivationStatus } from '../sales-package';
/** @enum {string} */
const ListIndent = {
INDENT_ZERO: 'indent-zero',
INDENT_ONE: 'indent-one',
INDENT_TWO: 'indent-two',
};
export { ListIndent };
export class VaPackageDropdownItemComponent {
constructor() {
this.enableDropdown = false;
this.indent = ListIndent.INDENT_ZERO;
this.itemToggled = new EventEmitter();
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @return {?}
*/
toggleItem() {
this.itemToggled.emit(null);
}
/**
* @param {?} status
* @return {?}
*/
isActivatedStatus(status) {
return status === ActivationStatus.SUCCESS;
}
/**
* @param {?} status
* @return {?}
*/
isWarningStatus(status) {
return status === ActivationStatus.WARNING;
}
/**
* @param {?} status
* @return {?}
*/
isErrorStatus(status) {
return status === ActivationStatus.ERROR;
}
}
VaPackageDropdownItemComponent.decorators = [
{ type: Component, args: [{
selector: 'va-package-dropdown-item',
template: "<mat-list-item [ngClass]=\"indent\" class=\"va-dropdown-list-item\">\n <va-icon *ngIf=\"!secondaryIconUrl && !secondaryIconName; else dualIcon\" mat-list-avatar [name]=\"title\" [iconUrl]=\"iconUrl\" [diameter]=\"40\"></va-icon>\n <h3 mat-line>{{ title }} <span *ngIf=\"titleDescriptor\" class=\"va-dropdown-list-item__title-descriptor\">{{ titleDescriptor }}</span></h3>\n <p class=\"package-dropdown-font\" mat-line>{{subtitle}}</p>\n\n <span *ngIf=\"!statusItem\" class=\"va-dropdown-list-item__layout\">\n <p class=\"va-dropdown-list-item__layout va-dropdown-list-item__notice\">{{ description }}</p>\n <ng-container *ngIf=\"enableDropdown; then dropdownButton\"></ng-container>\n </span>\n\n <span *ngIf=\"statusItem\" class=\"va-dropdown-list-item__layout va-dropdown-list-item__status\">\n <div [ngClass]=\"{\n 'activated': isActivatedStatus(statusItem.status),\n 'warning': isWarningStatus(statusItem.status),\n 'error': isErrorStatus(statusItem.status)}\">\n <mat-icon>{{statusItem.icon}}</mat-icon>\n </div>\n <p class=\"va-dropdown-list-item__notice\"\n [ngClass]=\"{\n 'activated': isActivatedStatus(statusItem.status),\n 'warning': isWarningStatus(statusItem.status),\n 'error': isErrorStatus(statusItem.status)}\">\n {{statusItem.text}}\n </p>\n <ng-container *ngIf=\"enableDropdown; then dropdownButton\"></ng-container>\n </span>\n</mat-list-item>\n\n\n<ng-template #dropdownButton>\n <button *ngIf=\"enableDropdown\" mat-icon-button type=\"button\" (click)=\"toggleItem()\">\n <mat-icon mat-list-icon\n class=\"dropdown-icon\"\n [ngClass]=\"{'dropdown-icon-rotate-up': !toggleValue, 'dropdown-icon-rotate-down': toggleValue}\">\n keyboard_arrow_down\n </mat-icon>\n </button>\n</ng-template>\n\n<ng-template #dualIcon>\n <div class=\"dual-icon\">\n <va-icon mat-list-avatar [iconUrl]=\"iconUrl\" [name]=\"title\" [diameter]=\"40\"></va-icon>\n <va-icon mat-list-avatar class=\"secondary-icon\" [iconUrl]=\"secondaryIconUrl\" [diameter]=\"20\" [name]=\"secondaryIconName\"></va-icon>\n </div>\n</ng-template>\n",
styles: [".va-dropdown-list-item{border-bottom:1px solid rgba(0,0,0,.12)}.indent-one{padding-left:30px}.va-dropdown-list-item__title-descriptor{font-size:11px;font-weight:700;font-style:italic}.indent-two{padding-left:30px}.indent-two .mat-list-avatar{margin-left:40px}.dual-icon{position:relative;display:inline-block;order:-1;margin-right:16px}.dual-icon .secondary-icon{position:absolute;border-radius:50%;bottom:-24px;right:-24px}.va-dropdown-list-item__layout{display:flex;flex-direction:row;align-items:center}.va-dropdown-list-item__layout .va-dropdown-list-item__notice{width:-webkit-max-content;width:-moz-max-content;width:max-content;font-style:italic}@media screen and (max-width:500px){.va-dropdown-list-item__layout p{display:none}}.va-dropdown-list-item__layout mat-icon{padding:0}.va-dropdown-list-item__layout button{padding:0;min-width:0}.va-dropdown-list-item__layout button .dropdown-icon{color:rgba(0,0,0,.54)}.va-dropdown-list-item__layout button .dropdown-icon-rotate-down{-webkit-transform:rotate(180deg);transform:rotate(180deg);transition:.4s;pointer-events:none}.va-dropdown-list-item__layout button .dropdown-icon-rotate-up{-webkit-transform:rotate(0);transform:rotate(0);transition:.4s;pointer-events:none}.va-dropdown-list-item__status{display:flex;flex-direction:row;align-items:center}.va-dropdown-list-item__status p{padding-left:6px;font-size:14px;white-space:nowrap}.va-dropdown-list-item__status .activated{color:#4caf50}.va-dropdown-list-item__status .warning{color:#ffa000}.va-dropdown-list-item__status .error{color:#c62828}", ".package-dropdown-font,.product-dropdown-font{color:rgba(0,0,0,.54);font-size:14px;font-weight:400}.package-list-container{border-top:1px solid rgba(0,0,0,.12);padding:0}.package-list-container mat-list{padding:0}.package-dropdown-stencil-display{display:flex;width:100%;flex-grow:1}.package-dropdown-stencil-display va-icon{margin-right:20px}.package-dropdown-stencil-display .stencil-text{width:inherit;display:flex;flex-direction:column;justify-content:center}.package-dropdown-stencil-display .stencil-text .stencil-title{height:32px;width:40%;margin-bottom:5px!important;margin-top:0!important}.package-dropdown-stencil-display .stencil-text .stencil-tagline{height:32px;width:inherit}.product-or-addon-list{background-color:rgba(0,0,0,.04);overflow:hidden}"]
}] }
];
VaPackageDropdownItemComponent.propDecorators = {
title: [{ type: Input }],
titleDescriptor: [{ type: Input }],
iconUrl: [{ type: Input }],
secondaryIconUrl: [{ type: Input }],
secondaryIconName: [{ type: Input }],
subtitle: [{ type: Input }],
statusItem: [{ type: Input }],
enableDropdown: [{ type: Input }],
indent: [{ type: Input }],
toggleValue: [{ type: Input }],
description: [{ type: Input }],
itemToggled: [{ type: Output }]
};
if (false) {
/** @type {?} */
VaPackageDropdownItemComponent.prototype.title;
/** @type {?} */
VaPackageDropdownItemComponent.prototype.titleDescriptor;
/** @type {?} */
VaPackageDropdownItemComponent.prototype.iconUrl;
/** @type {?} */
VaPackageDropdownItemComponent.prototype.secondaryIconUrl;
/** @type {?} */
VaPackageDropdownItemComponent.prototype.secondaryIconName;
/** @type {?} */
VaPackageDropdownItemComponent.prototype.subtitle;
/** @type {?} */
VaPackageDropdownItemComponent.prototype.statusItem;
/** @type {?} */
VaPackageDropdownItemComponent.prototype.enableDropdown;
/** @type {?} */
VaPackageDropdownItemComponent.prototype.indent;
/** @type {?} */
VaPackageDropdownItemComponent.prototype.toggleValue;
/** @type {?} */
VaPackageDropdownItemComponent.prototype.description;
/** @type {?} */
VaPackageDropdownItemComponent.prototype.itemToggled;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFja2FnZS1kcm9wZG93bi1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0B2ZW5kYXN0YS9zdG9yZS8iLCJzb3VyY2VzIjpbImxpYi9wYWNrYWdlLWRyb3Bkb3duL3BhY2thZ2UtZHJvcGRvd24taXRlbS9wYWNrYWdlLWRyb3Bkb3duLWl0ZW0uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9FLE9BQU8sRUFBRSxnQkFBZ0IsRUFBMEIsTUFBTSxrQkFBa0IsQ0FBQzs7O0lBRzFFLGFBQWMsYUFBYTtJQUMzQixZQUFhLFlBQVk7SUFDekIsWUFBYSxZQUFZOzs7QUFRM0IsTUFBTSxPQUFPLDhCQUE4QjtJQUwzQztRQWFXLG1CQUFjLEdBQUcsS0FBSyxDQUFDO1FBQ3ZCLFdBQU0sR0FBRyxVQUFVLENBQUMsV0FBVyxDQUFDO1FBRy9CLGdCQUFXLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7SUFtQnZFLENBQUM7Ozs7SUFqQkMsUUFBUTtJQUNSLENBQUM7Ozs7SUFFRCxVQUFVO1FBQ1IsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDOUIsQ0FBQzs7Ozs7SUFFRCxpQkFBaUIsQ0FBQyxNQUF3QjtRQUN4QyxPQUFPLE1BQU0sS0FBSyxnQkFBZ0IsQ0FBQyxPQUFPLENBQUM7SUFDN0MsQ0FBQzs7Ozs7SUFDRCxlQUFlLENBQUMsTUFBd0I7UUFDdEMsT0FBTyxNQUFNLEtBQUssZ0JBQWdCLENBQUMsT0FBTyxDQUFDO0lBQzdDLENBQUM7Ozs7O0lBQ0QsYUFBYSxDQUFDLE1BQXdCO1FBQ3BDLE9BQU8sTUFBTSxLQUFLLGdCQUFnQixDQUFDLEtBQUssQ0FBQTtJQUMxQyxDQUFDOzs7WUFsQ0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSwwQkFBMEI7Z0JBQ3BDLG9vRUFBcUQ7O2FBRXREOzs7b0JBRUUsS0FBSzs4QkFDTCxLQUFLO3NCQUNMLEtBQUs7K0JBQ0wsS0FBSztnQ0FDTCxLQUFLO3VCQUNMLEtBQUs7eUJBQ0wsS0FBSzs2QkFDTCxLQUFLO3FCQUNMLEtBQUs7MEJBQ0wsS0FBSzswQkFDTCxLQUFLOzBCQUNMLE1BQU07Ozs7SUFYUCwrQ0FBdUI7O0lBQ3ZCLHlEQUFpQzs7SUFDakMsaURBQXlCOztJQUN6QiwwREFBa0M7O0lBQ2xDLDJEQUFtQzs7SUFDbkMsa0RBQTBCOztJQUMxQixvREFBNEM7O0lBQzVDLHdEQUFnQzs7SUFDaEMsZ0RBQXlDOztJQUN6QyxxREFBOEI7O0lBQzlCLHFEQUE2Qjs7SUFDN0IscURBQXFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQWN0aXZhdGlvblN0YXR1cywgU3RhdHVzTm90aWZpY2F0aW9uSXRlbSB9IGZyb20gJy4uL3NhbGVzLXBhY2thZ2UnO1xuXG5leHBvcnQgZW51bSBMaXN0SW5kZW50IHtcbiAgSU5ERU5UX1pFUk8gPSAnaW5kZW50LXplcm8nLFxuICBJTkRFTlRfT05FID0gJ2luZGVudC1vbmUnLFxuICBJTkRFTlRfVFdPID0gJ2luZGVudC10d28nLFxufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd2YS1wYWNrYWdlLWRyb3Bkb3duLWl0ZW0nLFxuICB0ZW1wbGF0ZVVybDogJy4vcGFja2FnZS1kcm9wZG93bi1pdGVtLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcGFja2FnZS1kcm9wZG93bi1pdGVtLmNvbXBvbmVudC5zY3NzJywgJy4uL3BhY2thZ2UtZHJvcGRvd24uY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBWYVBhY2thZ2VEcm9wZG93bkl0ZW1Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSB0aXRsZTogc3RyaW5nO1xuICBASW5wdXQoKSB0aXRsZURlc2NyaXB0b3I6IHN0cmluZztcbiAgQElucHV0KCkgaWNvblVybDogc3RyaW5nO1xuICBASW5wdXQoKSBzZWNvbmRhcnlJY29uVXJsOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHNlY29uZGFyeUljb25OYW1lOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHN1YnRpdGxlOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHN0YXR1c0l0ZW06IFN0YXR1c05vdGlmaWNhdGlvbkl0ZW07XG4gIEBJbnB1dCgpIGVuYWJsZURyb3Bkb3duID0gZmFsc2U7XG4gIEBJbnB1dCgpIGluZGVudCA9IExpc3RJbmRlbnQuSU5ERU5UX1pFUk87XG4gIEBJbnB1dCgpIHRvZ2dsZVZhbHVlOiBib29sZWFuO1xuICBASW5wdXQoKSBkZXNjcmlwdGlvbjogc3RyaW5nO1xuICBAT3V0cHV0KCkgaXRlbVRvZ2dsZWQ6IEV2ZW50RW1pdHRlcjxudWxsPiA9IG5ldyBFdmVudEVtaXR0ZXI8bnVsbD4oKTtcblxuICBuZ09uSW5pdCgpIHtcbiAgfVxuXG4gIHRvZ2dsZUl0ZW0oKTogdm9pZCB7XG4gICAgdGhpcy5pdGVtVG9nZ2xlZC5lbWl0KG51bGwpO1xuICB9XG5cbiAgaXNBY3RpdmF0ZWRTdGF0dXMoc3RhdHVzOiBBY3RpdmF0aW9uU3RhdHVzKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHN0YXR1cyA9PT0gQWN0aXZhdGlvblN0YXR1cy5TVUNDRVNTO1xuICB9XG4gIGlzV2FybmluZ1N0YXR1cyhzdGF0dXM6IEFjdGl2YXRpb25TdGF0dXMpOiBib29sZWFuIHtcbiAgICByZXR1cm4gc3RhdHVzID09PSBBY3RpdmF0aW9uU3RhdHVzLldBUk5JTkc7XG4gIH1cbiAgaXNFcnJvclN0YXR1cyhzdGF0dXM6IEFjdGl2YXRpb25TdGF0dXMpOiBib29sZWFuIHtcbiAgICByZXR1cm4gc3RhdHVzID09PSBBY3RpdmF0aW9uU3RhdHVzLkVSUk9SXG4gIH1cblxufVxuIl19