@datarailsshared/datarailsshared 1.3.31 → 1.3.32

package/fesm2015/datarailsshared-datarailsshared.js

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef, ElementRef, Inject, PLATFORM_ID, ContentChildren, Renderer2, HostBinding, ContentChild, Pipe, TemplateRef, Directive, HostListener, ComponentFactoryResolver, ViewContainerRef, ViewChild, Optional, Injector, Injectable, NgModule } from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef, ElementRef, Inject, PLATFORM_ID, ContentChildren, Renderer2, HostBinding, ContentChild, Pipe, TemplateRef, Directive, HostListener, ComponentFactoryResolver, ViewContainerRef, ViewChild, Optional, Injector, Injectable, Host, NgModule } from '@angular/core';
 import { FormControl, NG_VALUE_ACCESSOR, NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
 import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS, MatMomentDateModule } from '@angular/material-moment-adapter';
@@ -7,7 +7,7 @@ import * as momentImported from 'moment';
 import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
 import { Subject, from, merge, fromEvent, noop as noop$1 } from 'rxjs';
 import { startWith, switchMap, takeUntil, filter, first } from 'rxjs/operators';
-import { transition, style, animate, trigger } from '@angular/animations';
+import { transition, style, animate, trigger, state } from '@angular/animations';
 import * as i1 from '@angular/cdk/overlay';
 import { Overlay, OverlayPositionBuilder, OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
@@ -876,7 +876,7 @@ class RadioGroupComponent {
         this.updateDisabled();
     }
     ngAfterContentInit() {
-        // 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
@@ -2690,6 +2690,292 @@ DrTabsComponent.propDecorators = {
     tabsContentList: [{ type: ContentChildren, args: [DrTabComponent,] }]
 };
 
+class DrAccordionComponent {
+    constructor() {
+        this.openCloseItems = new Subject();
+        this.multiValue = false;
+    }
+    /**
+     *  Allow multiple items to be expanded at the same time.
+     */
+    get multi() {
+        return this.multiValue;
+    }
+    set multi(val) {
+        this.multiValue = !!val;
+    }
+    /**
+     * Opens all enabled accordion items.
+     */
+    openAll() {
+        if (this.multi) {
+            this.openCloseItems.next(false);
+        }
+    }
+    /**
+     * Closes all enabled accordion items.
+     */
+    closeAll() {
+        this.openCloseItems.next(true);
+    }
+}
+DrAccordionComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-accordion',
+                template: '<ng-content select="dr-accordion-item"></ng-content>',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{display:block;box-shadow:#2c33491a 0 5px 10px}\n"]
+            },] }
+];
+DrAccordionComponent.propDecorators = {
+    multi: [{ type: Input, args: ['multi',] }]
+};
+
+class DrAccordionItemComponent {
+    constructor(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 EventEmitter();
+        this.accordionItemInvalidate = new Subject();
+        this.collapsedValue = true;
+        this.disabledValue = false;
+        this.destroy$ = new Subject();
+    }
+    /**
+     * Item is collapse (`true` by default)
+     * @type {boolean}
+     */
+    get collapsed() {
+        return this.collapsedValue;
+    }
+    set collapsed(val) {
+        this.collapsedValue = !!val;
+        this.collapsedChange.emit(this.collapsedValue);
+        this.invalidate();
+    }
+    /**
+     * Item is expanded (`false` by default)
+     */
+    get expanded() {
+        return !this.collapsed;
+    }
+    set expanded(val) {
+        this.collapsedValue = !val;
+    }
+    /**
+     * Item is disabled and cannot be opened.
+     * @type {boolean}
+     */
+    get disabled() {
+        return this.disabledValue;
+    }
+    set disabled(val) {
+        this.disabledValue = !!val;
+        this.invalidate();
+    }
+    /**
+     * Open/close the item
+     */
+    toggle() {
+        if (!this.disabled) {
+            // we need this temporary variable as `openCloseItems.next` will change current value we need to save
+            const willSet = !this.collapsed;
+            if (!this.accordion.multi) {
+                this.accordion.openCloseItems.next(true);
+            }
+            this.collapsed = willSet;
+        }
+    }
+    /**
+     * Open the item.
+     */
+    open() {
+        if (!this.disabled) {
+            this.collapsed = false;
+        }
+    }
+    /**
+     * Collapse the item.
+     */
+    close() {
+        if (!this.disabled) {
+            this.collapsed = true;
+        }
+    }
+    ngOnInit() {
+        this.accordion.openCloseItems
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(collapsed => {
+            if (!this.disabled) {
+                this.collapsed = collapsed;
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        this.accordionItemInvalidate.next(true);
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.accordionItemInvalidate.complete();
+    }
+    invalidate() {
+        this.accordionItemInvalidate.next(true);
+        this.cd.markForCheck();
+    }
+}
+DrAccordionItemComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-accordion-item',
+                template: `
+    <ng-content select="dr-accordion-item-header"></ng-content>
+    <ng-content select="dr-accordion-item-body"></ng-content>
+  `,
+                changeDetection: 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 = () => [
+    { type: DrAccordionComponent, decorators: [{ type: Host }] },
+    { type: ChangeDetectorRef }
+];
+DrAccordionItemComponent.propDecorators = {
+    collapsed: [{ type: Input, args: ['collapsed',] }, { type: HostBinding, args: ['class.collapsed',] }],
+    expanded: [{ type: Input, args: ['expanded',] }, { type: HostBinding, args: ['class.expanded',] }],
+    disabled: [{ type: Input, args: ['disabled',] }, { type: HostBinding, args: ['class.disabled',] }],
+    collapsedChange: [{ type: Output }]
+};
+
+class DrAccordionItemHeaderComponent {
+    constructor(accordionItem, cd) {
+        this.accordionItem = accordionItem;
+        this.cd = cd;
+        this.destroy$ = new Subject();
+    }
+    get isCollapsed() {
+        return this.accordionItem.collapsed;
+    }
+    get expanded() {
+        return !this.accordionItem.collapsed;
+    }
+    get tabbable() {
+        return this.accordionItem.disabled ? '-1' : '0';
+    }
+    get disabled() {
+        return this.accordionItem.disabled;
+    }
+    toggle() {
+        this.accordionItem.toggle();
+    }
+    get state() {
+        if (this.isCollapsed) {
+            return 'collapsed';
+        }
+        return 'expanded';
+    }
+    ngOnInit() {
+        this.accordionItem.accordionItemInvalidate
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => this.cd.markForCheck());
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}
+DrAccordionItemHeaderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-accordion-item-header',
+                template: `
+    <ng-content select="dr-accordion-item-title"></ng-content>
+    <ng-content select="dr-accordion-item-description"></ng-content>
+    <ng-content></ng-content>
+    <i class="dr-icon-arrow-down expansion-indicator"
+       [@expansionIndicator]="state"
+       *ngIf="!disabled">
+    </i>
+  `,
+                animations: [
+                    trigger('expansionIndicator', [
+                        state('expanded', style({
+                            transform: 'rotate(180deg)',
+                        })),
+                        transition('collapsed => expanded', animate('100ms ease-in')),
+                        transition('expanded => collapsed', animate('100ms ease-out')),
+                    ]),
+                ],
+                changeDetection: 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 = () => [
+    { type: DrAccordionItemComponent, decorators: [{ type: Host }] },
+    { type: ChangeDetectorRef }
+];
+DrAccordionItemHeaderComponent.propDecorators = {
+    isCollapsed: [{ type: HostBinding, args: ['class.accordion-item-header-collapsed',] }],
+    expanded: [{ type: HostBinding, args: ['class.accordion-item-header-expanded',] }, { type: HostBinding, args: ['attr.aria-expanded',] }],
+    tabbable: [{ type: HostBinding, args: ['attr.tabindex',] }],
+    disabled: [{ type: HostBinding, args: ['attr.aria-disabled',] }],
+    toggle: [{ type: HostListener, args: ['click',] }, { type: HostListener, args: ['keydown.space',] }, { type: HostListener, args: ['keydown.enter',] }]
+};
+
+const accordionItemBodyTrigger = trigger('accordionItemBody', [
+    state('collapsed', style({
+        overflow: 'hidden',
+        visibility: 'hidden',
+        height: 0,
+    })),
+    state('expanded', style({
+        overflow: 'hidden',
+        visibility: 'visible',
+    })),
+    transition('collapsed => expanded', animate('100ms ease-in')),
+    transition('expanded => collapsed', animate('100ms ease-out')),
+]);
+class DrAccordionItemBodyComponent {
+    constructor(accordionItem, cd) {
+        this.accordionItem = accordionItem;
+        this.cd = cd;
+        this.destroy$ = new Subject();
+    }
+    get state() {
+        return this.accordionItem.collapsed ? 'collapsed' : 'expanded';
+    }
+    ngOnInit() {
+        this.accordionItem.accordionItemInvalidate
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => this.cd.markForCheck());
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}
+DrAccordionItemBodyComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-accordion-item-body',
+                template: `
+    <div [@accordionItemBody]="{ value: state }">
+      <div class="item-body">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `,
+                animations: [accordionItemBodyTrigger],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [".item-body{flex:1;-ms-flex:1 1 auto;overflow:auto;position:relative}\n"]
+            },] }
+];
+DrAccordionItemBodyComponent.ctorParameters = () => [
+    { type: DrAccordionItemComponent, decorators: [{ type: Host }] },
+    { type: ChangeDetectorRef }
+];
+
 const components$2 = [DateTagComponent,
     DayTagComponent,
     WeekTagComponent,
@@ -2910,11 +3196,28 @@ DrTabsModule.decorators = [
             },] }
 ];
 
+const DR_ACCORDION_COMPONENTS = [
+    DrAccordionComponent,
+    DrAccordionItemComponent,
+    DrAccordionItemHeaderComponent,
+    DrAccordionItemBodyComponent,
+];
+class DrAccordionModule {
+}
+DrAccordionModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                exports: [...DR_ACCORDION_COMPONENTS],
+                declarations: [...DR_ACCORDION_COMPONENTS],
+                providers: [],
+            },] }
+];
+
 /* components */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AnyTagComponent, CheckboxComponent, DateTagComponent, DateTagModule, DayTagComponent, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrDatePickerComponent, DrDatePickerFormatDirective, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrInputComponent, DrInputsModule, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ISpinnerOptions, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, TooltipComponent, WeekTagComponent, YearTagComponent, components$2 as ɵa, POPUP_ANIMATION as ɵb, CustomDateFormat as ɵc };
+export { AnyTagComponent, CheckboxComponent, DateTagComponent, DateTagModule, DayTagComponent, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrDatePickerComponent, DrDatePickerFormatDirective, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrInputComponent, DrInputsModule, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ISpinnerOptions, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, TooltipComponent, WeekTagComponent, YearTagComponent, components$2 as ɵa, POPUP_ANIMATION as ɵb, CustomDateFormat as ɵc };
 //# sourceMappingURL=datarailsshared-datarailsshared.js.map