angular2-expandable-list
Version:
Expandable lists made easy for Angular2+
311 lines (287 loc) • 20.1 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("@angular/core"), require("@angular/common"));
else if(typeof define === 'function' && define.amd)
define(["@angular/core", "@angular/common"], factory);
else if(typeof exports === 'object')
exports["angular2-expandable-list"] = factory(require("@angular/core"), require("@angular/common"));
else
root["angular2-expandable-list"] = factory(root["ng"]["core"], root["ng"]["common"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_3__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 4);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__angular_core__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_common__ = __webpack_require__(3);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_common___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__angular_common__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__expandable_list_component__ = __webpack_require__(2);
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return __WEBPACK_IMPORTED_MODULE_2__expandable_list_component__["a"]; });
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return __WEBPACK_IMPORTED_MODULE_2__expandable_list_component__["b"]; });
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return __WEBPACK_IMPORTED_MODULE_2__expandable_list_component__["c"]; });
/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return __WEBPACK_IMPORTED_MODULE_2__expandable_list_component__["d"]; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ExpandableListModule; });
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var ExpandableListModule = (function () {
function ExpandableListModule() {
}
return ExpandableListModule;
}());
ExpandableListModule = __decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["NgModule"])({
imports: [
__WEBPACK_IMPORTED_MODULE_1__angular_common__["CommonModule"],
],
declarations: [
__WEBPACK_IMPORTED_MODULE_2__expandable_list_component__["a" /* ExpandableListComponent */],
__WEBPACK_IMPORTED_MODULE_2__expandable_list_component__["b" /* ExpandableListItemComponent */],
__WEBPACK_IMPORTED_MODULE_2__expandable_list_component__["c" /* ExpandableListStyler */],
__WEBPACK_IMPORTED_MODULE_2__expandable_list_component__["d" /* ExpandableListDividerStyler */],
],
exports: [
__WEBPACK_IMPORTED_MODULE_2__expandable_list_component__["a" /* ExpandableListComponent */],
__WEBPACK_IMPORTED_MODULE_2__expandable_list_component__["b" /* ExpandableListItemComponent */],
__WEBPACK_IMPORTED_MODULE_2__expandable_list_component__["c" /* ExpandableListStyler */],
__WEBPACK_IMPORTED_MODULE_2__expandable_list_component__["d" /* ExpandableListDividerStyler */],
],
})
], ExpandableListModule);
/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__angular_core__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ExpandableListComponent; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return ExpandableListStyler; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return ExpandableListDividerStyler; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return ExpandableListItemComponent; });
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var ExpandableListComponent = (function () {
function ExpandableListComponent() {
}
return ExpandableListComponent;
}());
ExpandableListComponent = __decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Component"])({
selector: 'expandable-list',
styles: ['.expandable-list { display: block;}.expandable-list .expandable-list-item { display: block; text-transform: capitalize; color: #000; background: #FFF;}.expandable-list .expandable-list-item[disabled],.expandable-list .expandable-list-item[disabled] * { pointer-events: none; cursor: default;}.expandable-list .expandable-list-item[disabled].expandable-list-item { background: #eeeeee;}.expandable-list .expandable-list-item + .expandable-list-item { border-top: 1px solid #e0e0e0;}.expandable-list .expandable-list-item .expandable-list-item-title { display: flex; flex-flow: row wrap; align-items: center; box-sizing: border-box; padding: 0 16px; height: 52px; font-size: 16px; cursor: pointer;}.expandable-list .expandable-list-item .expandable-list-item-title .expandable-list-item--title,.expandable-list .expandable-list-item .expandable-list-item-title .expandable-list-item--secondary { flex: 1;}.expandable-list .expandable-list-item .expandable-list-item-title .expandable-list-item--secondary { margin-top: 3px; max-height: 18px; transition: max-height .2s cubic-bezier(0, 0, 0.2, 1), opacity .2s cubic-bezier(0, 0, 0.2, 1);}.expandable-list .expandable-list-item .expandable-list-item-title.expanded .expandable-list-item--secondary { opacity: 0; max-height: 0;}.expandable-list .expandable-list-item .expandable-list-item-title .expandable-list-item--title { color: #000;}.expandable-list .expandable-list-item .expandable-list-item-title .expandable-list-item--secondary,.expandable-list .expandable-list-item .expandable-list-item-title .expandable-list-item__dropdown { color: #757575;}.expandable-list .expandable-list-item .expandable-list-item-title .expandable-list-item-title__title { flex: auto; display: flex; flex-direction: column;}.expandable-list .expandable-list-item .expandable-list-item-title .expandable-list-item__dropdown { flex: 1; text-align: end;}.expandable-list .expandable-list-item .expandable-list-item-title .expandable-list-item__dropdown svg { width: 18px; vertical-align: middle;}.expandable-list .expandable-list-item .expandable-list-item-title .expandable-list-item__dropdown-chevron-line1,.expandable-list .expandable-list-item .expandable-list-item-title .expandable-list-item__dropdown-chevron-line2 { stroke: #444; stroke-width: 12px; transform-origin: 50px 50px; transition: transform 300ms cubic-bezier(0.65, 0.05, 0.36, 1);}.expandable-list .expandable-list-item .expandable-list-item-title .expandable-list-item__dropdown-chevron-line1 { transform: rotateZ(45deg);}.expandable-list .expandable-list-item .expandable-list-item-title.expanded .expandable-list-item__dropdown-chevron-line1 { transform: rotateZ(-45deg);}.expandable-list .expandable-list-item .expandable-list-item-title .expandable-list-item__dropdown-chevron-line2 { transform: rotateZ(-45deg);}.expandable-list .expandable-list-item .expandable-list-item-title.expanded .expandable-list-item__dropdown-chevron-line2 { transform: rotateZ(45deg);}.expandable-list .expandable-list-item .expandable-list-item-content[hidden] { display: none;}.expandable-list .expandable-list-item .expandable-list-item-overflow { overflow: hidden;}.expandable-list .expandable-list-item .expandable-list-item-content { margin-top: -9999em; padding: 16px 0; overflow: auto; font-size: 16px; opacity: 0; pointer-events: none; will-change: margin-top, opacity; transition: opacity 0.15s ease-out, margin-top 0.3s ease-out;}.expandable-list .expandable-list-item .expandable-list-item-content.expanded { overflow: auto; opacity: 1; pointer-events: auto; transition: opacity 0.3s ease-in, margin-top 0.2s ease-in;}.expandable-list .expandable-list-item .expandable-list-item-content > [item] { display: block; padding: 0 16px; line-height: 40px; text-decoration: none; color: #000;}.expandable-list .expandable-list-item .expandable-list-item-content > [item]:hover { background: rgba(0,0,0,0.1);}.expandable-list .expandable-list-item .expandable-list-item-content .expandable-list-divider { display: block; margin: 12px 16px; border-top: 1px solid #e0e0e0;}'],
template: "<ng-content></ng-content>",
encapsulation: __WEBPACK_IMPORTED_MODULE_0__angular_core__["ViewEncapsulation"].None,
})
], ExpandableListComponent);
var ExpandableListStyler = (function () {
function ExpandableListStyler() {
}
return ExpandableListStyler;
}());
ExpandableListStyler = __decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Directive"])({
selector: 'expandable-list',
host: {
'[class.expandable-list]': 'true'
}
})
], ExpandableListStyler);
var ExpandableListDividerStyler = (function () {
function ExpandableListDividerStyler() {
}
return ExpandableListDividerStyler;
}());
ExpandableListDividerStyler = __decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Directive"])({
selector: 'expandable-list-divider',
host: {
'[class.expandable-list-divider]': 'true'
}
})
], ExpandableListDividerStyler);
var ExpandableListItemComponent = (function () {
function ExpandableListItemComponent() {
this.expanded = false;
this.onExpanded = new __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"]();
}
Object.defineProperty(ExpandableListItemComponent.prototype, "isExpanded", {
get: function () { return this.expanded; },
set: function (value) {
this.expanded = (value !== null && "" + value !== 'false') ? true : false;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ExpandableListItemComponent.prototype, "disabled", {
get: function () { return this.isDisabled; },
set: function (value) {
this.isDisabled = (value !== null && "" + value !== 'false') ? true : null;
},
enumerable: true,
configurable: true
});
ExpandableListItemComponent.prototype.ngAfterViewInit = function () {
this.elHeight = this.elementView.nativeElement.offsetHeight;
};
ExpandableListItemComponent.prototype.ngOnChanges = function (changes) {
if ('isExpanded' in changes) {
this.updateMarginTop();
}
};
ExpandableListItemComponent.prototype.onClick = function () {
if (this.disabled) {
return;
}
this.isExpanded = !this.isExpanded;
this.updateMarginTop();
};
ExpandableListItemComponent.prototype.updateMarginTop = function () {
if (!this.isExpanded) {
this.marginTop = "-" + this.elHeight + "px";
}
else {
this.marginTop = '0';
}
this.onExpanded.emit(this.isExpanded);
};
return ExpandableListItemComponent;
}());
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])('isExpanded'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Boolean])
], ExpandableListItemComponent.prototype, "isExpanded", null);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])('disabled'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Boolean])
], ExpandableListItemComponent.prototype, "disabled", null);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Output"])(),
__metadata("design:type", __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"])
], ExpandableListItemComponent.prototype, "onExpanded", void 0);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["ViewChild"])('contentEl'),
__metadata("design:type", __WEBPACK_IMPORTED_MODULE_0__angular_core__["ElementRef"])
], ExpandableListItemComponent.prototype, "elementView", void 0);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["HostBinding"])('attr.disabled'),
__metadata("design:type", Boolean)
], ExpandableListItemComponent.prototype, "isDisabled", void 0);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["HostBinding"])('attr.is-expanded'),
__metadata("design:type", Boolean)
], ExpandableListItemComponent.prototype, "expanded", void 0);
ExpandableListItemComponent = __decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Component"])({
selector: 'expandable-list-item',
host: {
'[class.expandable-list-item]': 'true',
},
template: '<div class="expandable-list-item-title" [class.expanded]="isExpanded" (click)="onClick()"><div class="expandable-list-item-title__title"><span class="expandable-list-item--title"><ng-content select="[title]"></ng-content></span><span class="expandable-list-item--secondary"><ng-content select="[secondary]"></ng-content></span></div><div class="expandable-list-item__dropdown"><svg version="1.1" viewBox="0 -60 100 220" xmlns="http://www.w3.org/2000/svg"><g class="expandable-list-item__dropdown-chevron"><line class="expandable-list-item__dropdown-chevron-line1" x1="-10" x2="55" y1="50" y2="50"></line><line class="expandable-list-item__dropdown-chevron-line2" x1="110" x2="44" y1="50" y2="50"></line></g></svg></div></div><div class="expandable-list-item-overflow"><div class="expandable-list-item-content" [class.expanded]="isExpanded" [ngStyle]="{\'margin-top\': marginTop }" [attr.aria-hidden]="!isExpanded" #contentEl><ng-content select="[item], expandable-list-divider"></ng-content></div></div>',
encapsulation: __WEBPACK_IMPORTED_MODULE_0__angular_core__["ViewEncapsulation"].None,
}),
__metadata("design:paramtypes", [])
], ExpandableListItemComponent);
/***/ }),
/* 3 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
/***/ }),
/* 4 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__lib_expandable_list_module__ = __webpack_require__(1);
/* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "ExpandableListModule", function() { return __WEBPACK_IMPORTED_MODULE_0__lib_expandable_list_module__["a"]; });
/* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "ExpandableListComponent", function() { return __WEBPACK_IMPORTED_MODULE_0__lib_expandable_list_module__["b"]; });
/* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "ExpandableListItemComponent", function() { return __WEBPACK_IMPORTED_MODULE_0__lib_expandable_list_module__["c"]; });
/* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "ExpandableListStyler", function() { return __WEBPACK_IMPORTED_MODULE_0__lib_expandable_list_module__["d"]; });
/* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "ExpandableListDividerStyler", function() { return __WEBPACK_IMPORTED_MODULE_0__lib_expandable_list_module__["e"]; });
/***/ })
/******/ ]);
});
//# sourceMappingURL=angular2-expandable-list.umd.js.map