@datarailsshared/datarailsshared 1.3.31 → 1.3.32

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -1271,7 +1271,7 @@
         });
         RadioGroupComponent.prototype.ngAfterContentInit = function () {
             var _this = this;
-            // In case option 'name' isn't set on nb-radio component,
+            // In case option 'name' isn't set on dr-radio component,
             // we need to set it's name right away, so it won't overlap with options
             // without names from other radio groups. Otherwise they all would have
             // same name and will be considered as options from one group so only the
@@ -3241,6 +3241,322 @@
         tabsContentList: [{ type: i0.ContentChildren, args: [DrTabComponent,] }]
     };
 
+    var DrAccordionComponent = /** @class */ (function () {
+        function DrAccordionComponent() {
+            this.openCloseItems = new rxjs.Subject();
+            this.multiValue = false;
+        }
+        Object.defineProperty(DrAccordionComponent.prototype, "multi", {
+            /**
+             *  Allow multiple items to be expanded at the same time.
+             */
+            get: function () {
+                return this.multiValue;
+            },
+            set: function (val) {
+                this.multiValue = !!val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * Opens all enabled accordion items.
+         */
+        DrAccordionComponent.prototype.openAll = function () {
+            if (this.multi) {
+                this.openCloseItems.next(false);
+            }
+        };
+        /**
+         * Closes all enabled accordion items.
+         */
+        DrAccordionComponent.prototype.closeAll = function () {
+            this.openCloseItems.next(true);
+        };
+        return DrAccordionComponent;
+    }());
+    DrAccordionComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-accordion',
+                    template: '<ng-content select="dr-accordion-item"></ng-content>',
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{display:block;box-shadow:#2c33491a 0 5px 10px}\n"]
+                },] }
+    ];
+    DrAccordionComponent.propDecorators = {
+        multi: [{ type: i0.Input, args: ['multi',] }]
+    };
+
+    var DrAccordionItemComponent = /** @class */ (function () {
+        function DrAccordionItemComponent(accordion, cd) {
+            this.accordion = accordion;
+            this.cd = cd;
+            /**
+             * Emits whenever the expanded state of the accordion changes.
+             * Primarily used to facilitate two-way binding.
+             */
+            this.collapsedChange = new i0.EventEmitter();
+            this.accordionItemInvalidate = new rxjs.Subject();
+            this.collapsedValue = true;
+            this.disabledValue = false;
+            this.destroy$ = new rxjs.Subject();
+        }
+        Object.defineProperty(DrAccordionItemComponent.prototype, "collapsed", {
+            /**
+             * Item is collapse (`true` by default)
+             * @type {boolean}
+             */
+            get: function () {
+                return this.collapsedValue;
+            },
+            set: function (val) {
+                this.collapsedValue = !!val;
+                this.collapsedChange.emit(this.collapsedValue);
+                this.invalidate();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrAccordionItemComponent.prototype, "expanded", {
+            /**
+             * Item is expanded (`false` by default)
+             */
+            get: function () {
+                return !this.collapsed;
+            },
+            set: function (val) {
+                this.collapsedValue = !val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrAccordionItemComponent.prototype, "disabled", {
+            /**
+             * Item is disabled and cannot be opened.
+             * @type {boolean}
+             */
+            get: function () {
+                return this.disabledValue;
+            },
+            set: function (val) {
+                this.disabledValue = !!val;
+                this.invalidate();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * Open/close the item
+         */
+        DrAccordionItemComponent.prototype.toggle = function () {
+            if (!this.disabled) {
+                // we need this temporary variable as `openCloseItems.next` will change current value we need to save
+                var willSet = !this.collapsed;
+                if (!this.accordion.multi) {
+                    this.accordion.openCloseItems.next(true);
+                }
+                this.collapsed = willSet;
+            }
+        };
+        /**
+         * Open the item.
+         */
+        DrAccordionItemComponent.prototype.open = function () {
+            if (!this.disabled) {
+                this.collapsed = false;
+            }
+        };
+        /**
+         * Collapse the item.
+         */
+        DrAccordionItemComponent.prototype.close = function () {
+            if (!this.disabled) {
+                this.collapsed = true;
+            }
+        };
+        DrAccordionItemComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.accordion.openCloseItems
+                .pipe(operators.takeUntil(this.destroy$))
+                .subscribe(function (collapsed) {
+                if (!_this.disabled) {
+                    _this.collapsed = collapsed;
+                }
+            });
+        };
+        DrAccordionItemComponent.prototype.ngOnChanges = function (changes) {
+            this.accordionItemInvalidate.next(true);
+        };
+        DrAccordionItemComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+            this.accordionItemInvalidate.complete();
+        };
+        DrAccordionItemComponent.prototype.invalidate = function () {
+            this.accordionItemInvalidate.next(true);
+            this.cd.markForCheck();
+        };
+        return DrAccordionItemComponent;
+    }());
+    DrAccordionItemComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-accordion-item',
+                    template: "\n    <ng-content select=\"dr-accordion-item-header\"></ng-content>\n    <ng-content select=\"dr-accordion-item-body\"></ng-content>\n  ",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{background-color:#fff;color:#222b45;font-family:\"Poppins\",sans-serif;font-size:16px;font-weight:400;line-height:1.25rem;display:flex;flex-direction:column}\n"]
+                },] }
+    ];
+    DrAccordionItemComponent.ctorParameters = function () { return [
+        { type: DrAccordionComponent, decorators: [{ type: i0.Host }] },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    DrAccordionItemComponent.propDecorators = {
+        collapsed: [{ type: i0.Input, args: ['collapsed',] }, { type: i0.HostBinding, args: ['class.collapsed',] }],
+        expanded: [{ type: i0.Input, args: ['expanded',] }, { type: i0.HostBinding, args: ['class.expanded',] }],
+        disabled: [{ type: i0.Input, args: ['disabled',] }, { type: i0.HostBinding, args: ['class.disabled',] }],
+        collapsedChange: [{ type: i0.Output }]
+    };
+
+    var DrAccordionItemHeaderComponent = /** @class */ (function () {
+        function DrAccordionItemHeaderComponent(accordionItem, cd) {
+            this.accordionItem = accordionItem;
+            this.cd = cd;
+            this.destroy$ = new rxjs.Subject();
+        }
+        Object.defineProperty(DrAccordionItemHeaderComponent.prototype, "isCollapsed", {
+            get: function () {
+                return this.accordionItem.collapsed;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrAccordionItemHeaderComponent.prototype, "expanded", {
+            get: function () {
+                return !this.accordionItem.collapsed;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrAccordionItemHeaderComponent.prototype, "tabbable", {
+            get: function () {
+                return this.accordionItem.disabled ? '-1' : '0';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DrAccordionItemHeaderComponent.prototype, "disabled", {
+            get: function () {
+                return this.accordionItem.disabled;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrAccordionItemHeaderComponent.prototype.toggle = function () {
+            this.accordionItem.toggle();
+        };
+        Object.defineProperty(DrAccordionItemHeaderComponent.prototype, "state", {
+            get: function () {
+                if (this.isCollapsed) {
+                    return 'collapsed';
+                }
+                return 'expanded';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrAccordionItemHeaderComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.accordionItem.accordionItemInvalidate
+                .pipe(operators.takeUntil(this.destroy$))
+                .subscribe(function () { return _this.cd.markForCheck(); });
+        };
+        DrAccordionItemHeaderComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
+        return DrAccordionItemHeaderComponent;
+    }());
+    DrAccordionItemHeaderComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-accordion-item-header',
+                    template: "\n    <ng-content select=\"dr-accordion-item-title\"></ng-content>\n    <ng-content select=\"dr-accordion-item-description\"></ng-content>\n    <ng-content></ng-content>\n    <i class=\"dr-icon-arrow-down expansion-indicator\"\n       [@expansionIndicator]=\"state\"\n       *ngIf=\"!disabled\">\n    </i>\n  ",
+                    animations: [
+                        animations.trigger('expansionIndicator', [
+                            animations.state('expanded', animations.style({
+                                transform: 'rotate(180deg)',
+                            })),
+                            animations.transition('collapsed => expanded', animations.animate('100ms ease-in')),
+                            animations.transition('expanded => collapsed', animations.animate('100ms ease-out')),
+                        ]),
+                    ],
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{display:flex;align-items:center;cursor:pointer;position:relative;border-bottom:1px solid #edf1f7;color:#222b45;font-family:\"Poppins\",sans-serif;font-size:13px;font-weight:600;line-height:1.5rem;padding:1.25rem;text-transform:capitalize}:host:focus{outline:0}:host .expansion-indicator{font-size:24px;position:absolute;right:10px;font-weight:700}\n"]
+                },] }
+    ];
+    DrAccordionItemHeaderComponent.ctorParameters = function () { return [
+        { type: DrAccordionItemComponent, decorators: [{ type: i0.Host }] },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    DrAccordionItemHeaderComponent.propDecorators = {
+        isCollapsed: [{ type: i0.HostBinding, args: ['class.accordion-item-header-collapsed',] }],
+        expanded: [{ type: i0.HostBinding, args: ['class.accordion-item-header-expanded',] }, { type: i0.HostBinding, args: ['attr.aria-expanded',] }],
+        tabbable: [{ type: i0.HostBinding, args: ['attr.tabindex',] }],
+        disabled: [{ type: i0.HostBinding, args: ['attr.aria-disabled',] }],
+        toggle: [{ type: i0.HostListener, args: ['click',] }, { type: i0.HostListener, args: ['keydown.space',] }, { type: i0.HostListener, args: ['keydown.enter',] }]
+    };
+
+    var accordionItemBodyTrigger = animations.trigger('accordionItemBody', [
+        animations.state('collapsed', animations.style({
+            overflow: 'hidden',
+            visibility: 'hidden',
+            height: 0,
+        })),
+        animations.state('expanded', animations.style({
+            overflow: 'hidden',
+            visibility: 'visible',
+        })),
+        animations.transition('collapsed => expanded', animations.animate('100ms ease-in')),
+        animations.transition('expanded => collapsed', animations.animate('100ms ease-out')),
+    ]);
+    var DrAccordionItemBodyComponent = /** @class */ (function () {
+        function DrAccordionItemBodyComponent(accordionItem, cd) {
+            this.accordionItem = accordionItem;
+            this.cd = cd;
+            this.destroy$ = new rxjs.Subject();
+        }
+        Object.defineProperty(DrAccordionItemBodyComponent.prototype, "state", {
+            get: function () {
+                return this.accordionItem.collapsed ? 'collapsed' : 'expanded';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrAccordionItemBodyComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.accordionItem.accordionItemInvalidate
+                .pipe(operators.takeUntil(this.destroy$))
+                .subscribe(function () { return _this.cd.markForCheck(); });
+        };
+        DrAccordionItemBodyComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
+        return DrAccordionItemBodyComponent;
+    }());
+    DrAccordionItemBodyComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dr-accordion-item-body',
+                    template: "\n    <div [@accordionItemBody]=\"{ value: state }\">\n      <div class=\"item-body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
+                    animations: [accordionItemBodyTrigger],
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".item-body{flex:1;-ms-flex:1 1 auto;overflow:auto;position:relative}\n"]
+                },] }
+    ];
+    DrAccordionItemBodyComponent.ctorParameters = function () { return [
+        { type: DrAccordionItemComponent, decorators: [{ type: i0.Host }] },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+
     var components$2 = [DateTagComponent,
         DayTagComponent,
         WeekTagComponent,
@@ -3491,6 +3807,26 @@
                 },] }
     ];
 
+    var DR_ACCORDION_COMPONENTS = [
+        DrAccordionComponent,
+        DrAccordionItemComponent,
+        DrAccordionItemHeaderComponent,
+        DrAccordionItemBodyComponent,
+    ];
+    var DrAccordionModule = /** @class */ (function () {
+        function DrAccordionModule() {
+        }
+        return DrAccordionModule;
+    }());
+    DrAccordionModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [common.CommonModule],
+                    exports: __spreadArray([], __read(DR_ACCORDION_COMPONENTS)),
+                    declarations: __spreadArray([], __read(DR_ACCORDION_COMPONENTS)),
+                    providers: [],
+                },] }
+    ];
+
     /* components */
 
     /**
@@ -3502,6 +3838,11 @@
     exports.DateTagComponent = DateTagComponent;
     exports.DateTagModule = DateTagModule;
     exports.DayTagComponent = DayTagComponent;
+    exports.DrAccordionComponent = DrAccordionComponent;
+    exports.DrAccordionItemBodyComponent = DrAccordionItemBodyComponent;
+    exports.DrAccordionItemComponent = DrAccordionItemComponent;
+    exports.DrAccordionItemHeaderComponent = DrAccordionItemHeaderComponent;
+    exports.DrAccordionModule = DrAccordionModule;
     exports.DrAvatarComponent = DrAvatarComponent;
     exports.DrAvatarModule = DrAvatarModule;
     exports.DrAvatarPipe = DrAvatarPipe;