@agorapulse/ui-components 13.2.1 → 13.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/agorapulse-ui-components-13.2.4.tgz +0 -0
  2. package/esm2020/index.mjs +2 -1
  3. package/esm2020/src/lib/agorapulse-ui-components.module.mjs +7 -2
  4. package/esm2020/src/lib/directives/loading-slider.directive.mjs +122 -0
  5. package/esm2020/src/lib/directives/multi-style-text.directive.mjs +66 -32
  6. package/esm2020/src/lib/popmenu/options.mjs +2 -1
  7. package/esm2020/src/lib/popmenu/popmenu-options.interface.mjs +1 -1
  8. package/esm2020/src/lib/popmenu/popmenu.component.mjs +24 -15
  9. package/esm2020/src/lib/popmenu/popmenu.directive.mjs +6 -2
  10. package/esm2020/src/lib/timepicker/timepicker.component.mjs +1 -1
  11. package/fesm2015/agorapulse-ui-components.mjs +219 -49
  12. package/fesm2015/agorapulse-ui-components.mjs.map +1 -1
  13. package/fesm2020/agorapulse-ui-components.mjs +219 -49
  14. package/fesm2020/agorapulse-ui-components.mjs.map +1 -1
  15. package/index.d.ts +1 -0
  16. package/package.json +1 -1
  17. package/src/lib/agorapulse-ui-components.module.d.ts +34 -33
  18. package/src/lib/directives/loading-slider.directive.d.ts +27 -0
  19. package/src/lib/directives/multi-style-text.directive.d.ts +5 -4
  20. package/src/lib/popmenu/options.d.ts +1 -0
  21. package/src/lib/popmenu/popmenu-options.interface.d.ts +18 -0
  22. package/src/lib/popmenu/popmenu.component.d.ts +3 -0
  23. package/src/lib/popmenu/popmenu.directive.d.ts +6 -1
  24. package/agorapulse-ui-components-13.2.1.tgz +0 -0
package/fesm2020/agorapulse-ui-components.mjs CHANGED
@@ -45,7 +45,7 @@ import moment from 'moment';
45
45
  import * as i2$1 from 'ngx-daterangepicker-material';
46
46
  import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
47
47
  import * as i1$3 from '@angular/animations';
48
- import { animate, style, trigger, transition } from '@angular/animations';
48
+ import { animate, style, trigger, transition, keyframes } from '@angular/animations';
49
49
  import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
50
50
  import { Subject, of, fromEvent, BehaviorSubject } from 'rxjs';
51
51
  import { switchMap, delay, takeUntil, debounceTime, distinctUntilChanged, tap, catchError, map } from 'rxjs/operators';
@@ -1610,6 +1610,7 @@ const defaultOptions = {
1610
1610
  'shadow': true,
1611
1611
  'theme': 'dark',
1612
1612
  'offset': 8,
1613
+ 'offsets': {},
1613
1614
  'maxWidth': '600',
1614
1615
  };
1615
1616
 
@@ -1673,6 +1674,9 @@ class PopmenuComponent {
1673
1674
  get hasBackdrop() {
1674
1675
  return this.data.options.hasBackdrop;
1675
1676
  }
1677
+ get backdropClass() {
1678
+ return this.data.options.backdropClass;
1679
+ }
1676
1680
  get isThemeLight() {
1677
1681
  return this.options['theme'] === 'light';
1678
1682
  }
@@ -1691,6 +1695,12 @@ class PopmenuComponent {
1691
1695
  get tooltipOffset() {
1692
1696
  return Number(this.data.options.offset);
1693
1697
  }
1698
+ get offsetSkidding() {
1699
+ return Number(this.data.options.offsets.skidding) || 0;
1700
+ }
1701
+ get offsetDistance() {
1702
+ return Number(this.data.options.offsets.distance || 0);
1703
+ }
1694
1704
  get value() {
1695
1705
  return this.data.value;
1696
1706
  }
@@ -1750,20 +1760,20 @@ class PopmenuComponent {
1750
1760
  else {
1751
1761
  if (placement.split(' ')[0] === 'top') {
1752
1762
  this.below = false;
1753
- topStyle = this.elementPosition.top - this.tooltipOffset;
1763
+ topStyle = this.elementPosition.top - this.tooltipOffset - this.offsetDistance;
1754
1764
  topStyle += 8;
1755
1765
  }
1756
1766
  if (placement.split(' ')[0] === 'bottom') {
1757
1767
  this.below = true;
1758
- topStyle = this.elementPosition.bottom + this.tooltipOffset;
1768
+ topStyle = this.elementPosition.bottom + this.tooltipOffset + this.offsetDistance;
1759
1769
  // We remove 8px due to the margin-top we put to display the arrow.
1760
1770
  topStyle -= 8;
1761
1771
  }
1762
1772
  if (placement.split(' ')[0] === 'left') {
1763
- leftStyle = this.elementPosition.left - tooltipWidth - this.tooltipOffset;
1773
+ leftStyle = this.elementPosition.left - tooltipWidth - this.tooltipOffset - this.offsetDistance;
1764
1774
  }
1765
1775
  if (placement.split(' ')[0] === 'right') {
1766
- leftStyle = this.elementPosition.left + elementWidth + this.tooltipOffset;
1776
+ leftStyle = this.elementPosition.left + elementWidth + this.tooltipOffset + this.offsetDistance;
1767
1777
  }
1768
1778
  if (placement.split(' ')[0] === 'left' || placement.split(' ')[0] === 'right') {
1769
1779
  topStyle = (this.elementPosition.top + scrollY) + elementHeight / 2 - tooltip.clientHeight / 2;
@@ -1772,7 +1782,7 @@ class PopmenuComponent {
1772
1782
  this.below = true;
1773
1783
  this.before = false;
1774
1784
  this.arrowClass = 'arrow-left';
1775
- topStyle = (this.elementPosition.top + scrollY);
1785
+ topStyle = (this.elementPosition.top + scrollY + this.offsetSkidding);
1776
1786
  this.arrowRightPosition = undefined;
1777
1787
  this.arrowLeftPosition = undefined;
1778
1788
  this.arrowBottomPosition = 'auto';
@@ -1782,7 +1792,7 @@ class PopmenuComponent {
1782
1792
  this.below = true;
1783
1793
  this.before = true;
1784
1794
  this.arrowClass = 'arrow-right';
1785
- topStyle = (this.elementPosition.top + scrollY);
1795
+ topStyle = (this.elementPosition.top + scrollY + this.offsetSkidding);
1786
1796
  this.arrowLeftPosition = undefined;
1787
1797
  this.arrowRightPosition = undefined;
1788
1798
  this.arrowBottomPosition = 'auto';
@@ -1792,7 +1802,7 @@ class PopmenuComponent {
1792
1802
  this.below = false;
1793
1803
  this.before = false;
1794
1804
  this.arrowClass = 'arrow-left';
1795
- topStyle = (this.elementPosition.top + elementHeight + scrollY);
1805
+ topStyle = (this.elementPosition.top + elementHeight + scrollY + this.offsetSkidding);
1796
1806
  this.arrowLeftPosition = undefined;
1797
1807
  this.arrowRightPosition = undefined;
1798
1808
  this.arrowTopPosition = 'auto';
@@ -1802,7 +1812,7 @@ class PopmenuComponent {
1802
1812
  this.below = false;
1803
1813
  this.before = true;
1804
1814
  this.arrowClass = 'arrow-right';
1805
- topStyle = (this.elementPosition.top + elementHeight + scrollY);
1815
+ topStyle = (this.elementPosition.top + elementHeight + scrollY + this.offsetSkidding);
1806
1816
  this.arrowRightPosition = undefined;
1807
1817
  this.arrowLeftPosition = undefined;
1808
1818
  this.arrowTopPosition = 'auto';
@@ -1812,7 +1822,7 @@ class PopmenuComponent {
1812
1822
  this.before = false;
1813
1823
  this.below = true;
1814
1824
  this.arrowClass = 'arrow-top';
1815
- leftStyle = this.elementPosition.left;
1825
+ leftStyle = this.elementPosition.left + this.offsetSkidding;
1816
1826
  this.arrowTopPosition = undefined;
1817
1827
  this.arrowRightPosition = 'auto';
1818
1828
  this.arrowLeftPosition = this.arrowOffset ? (this.arrowOffset + '%') : (((elementWidth / 2) - 4.5) + 'px');
@@ -1821,7 +1831,7 @@ class PopmenuComponent {
1821
1831
  this.before = true;
1822
1832
  this.below = true;
1823
1833
  this.arrowClass = 'arrow-top';
1824
- leftStyle = this.elementPosition.right;
1834
+ leftStyle = this.elementPosition.right + this.offsetSkidding;
1825
1835
  this.arrowTopPosition = undefined;
1826
1836
  this.arrowLeftPosition = 'auto';
1827
1837
  this.arrowRightPosition = this.arrowOffset ? (this.arrowOffset + '%') : (((elementWidth / 2) - 2.5) + 'px');
@@ -1830,7 +1840,7 @@ class PopmenuComponent {
1830
1840
  this.before = false;
1831
1841
  this.below = false;
1832
1842
  this.arrowClass = 'arrow-bottom';
1833
- leftStyle = this.elementPosition.left;
1843
+ leftStyle = this.elementPosition.left + this.offsetSkidding;
1834
1844
  this.arrowBottomPosition = undefined;
1835
1845
  this.arrowTopPosition = undefined;
1836
1846
  this.arrowRightPosition = 'auto';
@@ -1840,7 +1850,7 @@ class PopmenuComponent {
1840
1850
  this.before = true;
1841
1851
  this.below = false;
1842
1852
  this.arrowClass = 'arrow-bottom';
1843
- leftStyle = this.elementPosition.right;
1853
+ leftStyle = this.elementPosition.right + this.offsetSkidding;
1844
1854
  this.arrowBottomPosition = undefined;
1845
1855
  this.arrowTopPosition = undefined;
1846
1856
  this.arrowLeftPosition = 'auto';
@@ -1906,10 +1916,10 @@ class PopmenuComponent {
1906
1916
  }
1907
1917
  }
1908
1918
  /** @nocollapse */ /** @nocollapse */ PopmenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopmenuComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1909
- /** @nocollapse */ /** @nocollapse */ PopmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PopmenuComponent, selector: "ap-popmenu", inputs: { data: "data", show: "show", close: "close" }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened" }, host: { properties: { "style.top": "this.hostStyleTop", "style.border-radius": "this.hostStyleBorderRadius", "style.left": "this.hostStyleLeft", "style.z-index": "this.hostStyleZIndex", "style.transition": "this.hostStyleTransition", "style.width": "this.hostStyleWidth", "style.max-width": "this.hostStyleMaxWidth", "style.pointer-events": "this.hostStylePointerEvents", "class.tooltip-show": "this.hostClassShow", "class.tooltip-shadow": "this.hostClassShadow", "class.tooltip-light": "this.hostClassLight" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<button id=\"menuTrigger\" class=\"button-trigger\" mat-button\n [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n</button>\n<mat-menu #menu=\"matMenu\" [yPosition]=\"!below ? 'above': 'below'\" [xPosition]=\"!before? 'after': 'before'\" [overlapTrigger]=\"false\"\n [hasBackdrop]=\"hasBackdrop\"\n class=\"pop-menu {{arrow ? 'arrow-before ' + arrowClass : ''}} {{shadow ? 'shadow' : ''}} {{border ? '' : (shadow ? 'shadow-no-border' : '')}} {{rounded ? 'rounded-component' : ''}} {{ background ? '' : 'no-background'}}\">\n\n <div *ngIf=\"arrow\" class=\"{{arrow ? 'arrow-before ' + arrowClass : ''}}\" [ngStyle]=\"{'left': arrowLeftPosition, 'right': arrowRightPosition, 'top': arrowTopPosition, 'bottom': arrowBottomPosition}\"></div>\n <div (click)=\"$event.stopPropagation()\" class=\"{{rounded ? 'rounded-component' : ''}} outline-none\">\n <div class=\"{{border ? 'popover-content ' : ''}} {{rounded ? 'rounded-component' : ''}}\">\n <ng-container *ngTemplateOutlet=\"value\"></ng-container>\n </div>\n </div>\n</mat-menu>\n\n\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.mat-menu-content{padding:0}.mat-menu-item{height:inherit;width:inherit;background-color:#fff;padding:0;cursor:default;box-shadow:0 4px 10px #0000001c}.mat-menu-item:hover{background-color:#fff!important;cursor:default;box-shadow:none!important}.outline-none{outline:none}.mat-menu-item:hover:not([disabled]),.mat-menu-item.cdk-program-focused:not([disabled]),.mat-menu-item.cdk-keyboard-focused:not([disabled]),.mat-menu-item-highlighted:not([disabled]){background-color:#fff!important;cursor:default;box-shadow:none!important}:host ::ng-deep .mat-button{max-width:1px;max-height:1px;min-width:1px;min-height:1px;padding:0;margin:0}:host{position:absolute;max-width:1px;max-height:1px;display:flex}.button-trigger{padding:0;border:none;height:1px;width:1px}::ng-deep .rounded-component .mat-menu-content{border-radius:4px}::ng-deep .rounded-component{border-radius:4px}::ng-deep .no-background .rounded-component{position:fixed}.popover-content{border:1px solid #dfe3e9}\n"], components: [{ type: i1$5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }], directives: [{ type: i1$5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1919
+ /** @nocollapse */ /** @nocollapse */ PopmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PopmenuComponent, selector: "ap-popmenu", inputs: { data: "data", show: "show", close: "close" }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened" }, host: { properties: { "style.top": "this.hostStyleTop", "style.border-radius": "this.hostStyleBorderRadius", "style.left": "this.hostStyleLeft", "style.z-index": "this.hostStyleZIndex", "style.transition": "this.hostStyleTransition", "style.width": "this.hostStyleWidth", "style.max-width": "this.hostStyleMaxWidth", "style.pointer-events": "this.hostStylePointerEvents", "class.tooltip-show": "this.hostClassShow", "class.tooltip-shadow": "this.hostClassShadow", "class.tooltip-light": "this.hostClassLight" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<button id=\"menuTrigger\" class=\"button-trigger\" mat-button\n [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n</button>\n<mat-menu #menu=\"matMenu\" [yPosition]=\"!below ? 'above': 'below'\" [xPosition]=\"!before? 'after': 'before'\" [overlapTrigger]=\"false\"\n [hasBackdrop]=\"hasBackdrop\"\n [backdropClass]=\"backdropClass\"\n class=\"pop-menu {{arrow ? 'arrow-before ' + arrowClass : ''}} {{shadow ? 'shadow' : ''}} {{border ? '' : (shadow ? 'shadow-no-border' : '')}} {{rounded ? 'rounded-component' : ''}} {{ background ? '' : 'no-background'}}\">\n\n <div *ngIf=\"arrow\" class=\"{{arrow ? 'arrow-before ' + arrowClass : ''}}\" [ngStyle]=\"{'left': arrowLeftPosition, 'right': arrowRightPosition, 'top': arrowTopPosition, 'bottom': arrowBottomPosition}\"></div>\n <div (click)=\"$event.stopPropagation()\" class=\"{{rounded ? 'rounded-component' : ''}} outline-none\">\n <div class=\"{{border ? 'popover-content ' : ''}} {{rounded ? 'rounded-component' : ''}}\">\n <ng-container *ngTemplateOutlet=\"value\"></ng-container>\n </div>\n </div>\n</mat-menu>\n\n\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.mat-menu-content{padding:0}.mat-menu-item{height:inherit;width:inherit;background-color:#fff;padding:0;cursor:default;box-shadow:0 4px 10px #0000001c}.mat-menu-item:hover{background-color:#fff!important;cursor:default;box-shadow:none!important}.outline-none{outline:none}.mat-menu-item:hover:not([disabled]),.mat-menu-item.cdk-program-focused:not([disabled]),.mat-menu-item.cdk-keyboard-focused:not([disabled]),.mat-menu-item-highlighted:not([disabled]){background-color:#fff!important;cursor:default;box-shadow:none!important}:host ::ng-deep .mat-button{max-width:1px;max-height:1px;min-width:1px;min-height:1px;padding:0;margin:0}:host{position:absolute;max-width:1px;max-height:1px;display:flex}.button-trigger{padding:0;border:none;height:1px;width:1px}::ng-deep .rounded-component .mat-menu-content{border-radius:10px}::ng-deep .rounded-component{border-radius:10px}::ng-deep .no-background .rounded-component{position:fixed}.popover-content{border:1px solid #dfe3e9}\n"], components: [{ type: i1$5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }], directives: [{ type: i1$5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1910
1920
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopmenuComponent, decorators: [{
1911
1921
  type: Component,
1912
- args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-popmenu', template: "<button id=\"menuTrigger\" class=\"button-trigger\" mat-button\n [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n</button>\n<mat-menu #menu=\"matMenu\" [yPosition]=\"!below ? 'above': 'below'\" [xPosition]=\"!before? 'after': 'before'\" [overlapTrigger]=\"false\"\n [hasBackdrop]=\"hasBackdrop\"\n class=\"pop-menu {{arrow ? 'arrow-before ' + arrowClass : ''}} {{shadow ? 'shadow' : ''}} {{border ? '' : (shadow ? 'shadow-no-border' : '')}} {{rounded ? 'rounded-component' : ''}} {{ background ? '' : 'no-background'}}\">\n\n <div *ngIf=\"arrow\" class=\"{{arrow ? 'arrow-before ' + arrowClass : ''}}\" [ngStyle]=\"{'left': arrowLeftPosition, 'right': arrowRightPosition, 'top': arrowTopPosition, 'bottom': arrowBottomPosition}\"></div>\n <div (click)=\"$event.stopPropagation()\" class=\"{{rounded ? 'rounded-component' : ''}} outline-none\">\n <div class=\"{{border ? 'popover-content ' : ''}} {{rounded ? 'rounded-component' : ''}}\">\n <ng-container *ngTemplateOutlet=\"value\"></ng-container>\n </div>\n </div>\n</mat-menu>\n\n\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.mat-menu-content{padding:0}.mat-menu-item{height:inherit;width:inherit;background-color:#fff;padding:0;cursor:default;box-shadow:0 4px 10px #0000001c}.mat-menu-item:hover{background-color:#fff!important;cursor:default;box-shadow:none!important}.outline-none{outline:none}.mat-menu-item:hover:not([disabled]),.mat-menu-item.cdk-program-focused:not([disabled]),.mat-menu-item.cdk-keyboard-focused:not([disabled]),.mat-menu-item-highlighted:not([disabled]){background-color:#fff!important;cursor:default;box-shadow:none!important}:host ::ng-deep .mat-button{max-width:1px;max-height:1px;min-width:1px;min-height:1px;padding:0;margin:0}:host{position:absolute;max-width:1px;max-height:1px;display:flex}.button-trigger{padding:0;border:none;height:1px;width:1px}::ng-deep .rounded-component .mat-menu-content{border-radius:4px}::ng-deep .rounded-component{border-radius:4px}::ng-deep .no-background .rounded-component{position:fixed}.popover-content{border:1px solid #dfe3e9}\n"] }]
1922
+ args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-popmenu', template: "<button id=\"menuTrigger\" class=\"button-trigger\" mat-button\n [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n</button>\n<mat-menu #menu=\"matMenu\" [yPosition]=\"!below ? 'above': 'below'\" [xPosition]=\"!before? 'after': 'before'\" [overlapTrigger]=\"false\"\n [hasBackdrop]=\"hasBackdrop\"\n [backdropClass]=\"backdropClass\"\n class=\"pop-menu {{arrow ? 'arrow-before ' + arrowClass : ''}} {{shadow ? 'shadow' : ''}} {{border ? '' : (shadow ? 'shadow-no-border' : '')}} {{rounded ? 'rounded-component' : ''}} {{ background ? '' : 'no-background'}}\">\n\n <div *ngIf=\"arrow\" class=\"{{arrow ? 'arrow-before ' + arrowClass : ''}}\" [ngStyle]=\"{'left': arrowLeftPosition, 'right': arrowRightPosition, 'top': arrowTopPosition, 'bottom': arrowBottomPosition}\"></div>\n <div (click)=\"$event.stopPropagation()\" class=\"{{rounded ? 'rounded-component' : ''}} outline-none\">\n <div class=\"{{border ? 'popover-content ' : ''}} {{rounded ? 'rounded-component' : ''}}\">\n <ng-container *ngTemplateOutlet=\"value\"></ng-container>\n </div>\n </div>\n</mat-menu>\n\n\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.mat-menu-content{padding:0}.mat-menu-item{height:inherit;width:inherit;background-color:#fff;padding:0;cursor:default;box-shadow:0 4px 10px #0000001c}.mat-menu-item:hover{background-color:#fff!important;cursor:default;box-shadow:none!important}.outline-none{outline:none}.mat-menu-item:hover:not([disabled]),.mat-menu-item.cdk-program-focused:not([disabled]),.mat-menu-item.cdk-keyboard-focused:not([disabled]),.mat-menu-item-highlighted:not([disabled]){background-color:#fff!important;cursor:default;box-shadow:none!important}:host ::ng-deep .mat-button{max-width:1px;max-height:1px;min-width:1px;min-height:1px;padding:0;margin:0}:host{position:absolute;max-width:1px;max-height:1px;display:flex}.button-trigger{padding:0;border:none;height:1px;width:1px}::ng-deep .rounded-component .mat-menu-content{border-radius:10px}::ng-deep .rounded-component{border-radius:10px}::ng-deep .no-background .rounded-component{position:fixed}.popover-content{border:1px solid #dfe3e9}\n"] }]
1913
1923
  }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
1914
1924
  type: Input
1915
1925
  }], menuClosed: [{
@@ -2134,7 +2144,7 @@ class PopmenuDirective {
2134
2144
  }
2135
2145
  }
2136
2146
  /** @nocollapse */ /** @nocollapse */ PopmenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopmenuDirective, deps: [{ token: PopmenuOptionsService, optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
2137
- /** @nocollapse */ /** @nocollapse */ PopmenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: PopmenuDirective, selector: "[apPopmenu]", inputs: { apPopmenuBorder: "apPopmenuBorder", apPopmenuDisabled: "apPopmenuDisabled", apPopmenuBackground: "apPopmenuBackground", arrow: "arrow", arrowOffset: "arrowOffset", arrowPosition: "arrowPosition", close: "close", hasBackdrop: "hasBackdrop", offset: "offset", placement: "placement", pointer: "pointer", popMenuValue: ["apPopmenu", "popMenuValue"], position: "position", rounded: "rounded", shadow: "shadow", options: "options" }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened" }, host: { listeners: { "click": "onClick()" } }, usesOnChanges: true, ngImport: i0 });
2147
+ /** @nocollapse */ /** @nocollapse */ PopmenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: PopmenuDirective, selector: "[apPopmenu]", inputs: { apPopmenuBorder: "apPopmenuBorder", apPopmenuDisabled: "apPopmenuDisabled", apPopmenuBackground: "apPopmenuBackground", arrow: "arrow", arrowOffset: "arrowOffset", arrowPosition: "arrowPosition", close: "close", hasBackdrop: "hasBackdrop", backdropClass: "backdropClass", offset: "offset", offsets: "offsets", placement: "placement", pointer: "pointer", popMenuValue: ["apPopmenu", "popMenuValue"], position: "position", rounded: "rounded", shadow: "shadow", options: "options" }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened" }, host: { listeners: { "click": "onClick()" } }, usesOnChanges: true, ngImport: i0 });
2138
2148
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopmenuDirective, decorators: [{
2139
2149
  type: Directive,
2140
2150
  args: [{
@@ -2161,8 +2171,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
2161
2171
  type: Input
2162
2172
  }], hasBackdrop: [{
2163
2173
  type: Input
2174
+ }], backdropClass: [{
2175
+ type: Input
2164
2176
  }], offset: [{
2165
2177
  type: Input
2178
+ }], offsets: [{
2179
+ type: Input
2166
2180
  }], placement: [{
2167
2181
  type: Input
2168
2182
  }], pointer: [{
@@ -2720,7 +2734,7 @@ class TimepickerComponent {
2720
2734
  }
2721
2735
  }
2722
2736
  /** @nocollapse */ /** @nocollapse */ TimepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TimepickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$4.OverlayContainer }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
2723
- /** @nocollapse */ /** @nocollapse */ TimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TimepickerComponent, selector: "ap-timepicker", inputs: { disabled: "disabled", format: "format", invalid: "invalid", invalidationMessage: "invalidationMessage", period: "period", placement: "placement", timeModel: "timeModel" }, outputs: { timeModelChange: "timeModelChange" }, viewQueries: [{ propertyName: "inputBox", first: true, predicate: ["inputBox"], descendants: true }, { propertyName: "inputTime", first: true, predicate: ["inputTime"], descendants: true }, { propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"display-flex\" [class.meridian]=\"format === TimeFormat.Meridian\">\n <ng-template #timeOptionsTemplate >\n <input #inputTime\n *ngIf=\"placement == 'bottom'\"\n class=\"time-input menu\"\n type=\"text\"\n [(ngModel)]=\"timeModel\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"validate($event?.target?.value)\"\n (keydown.enter)=\"validate($event?.target?.value)\"\n (mouseenter)=\"focusOnList(false)\">\n <div class=\"time-options-container {{placement}}\"\n (mouseenter)=\"focusOnList(true)\"\n (mouseleave)=\"focusOnList(false)\">\n <cdk-virtual-scroll-viewport style=\"height: 100%\" itemSize=\"33\" class=\"scroll\" minBufferPx=\"200\" maxBufferPx=\"200\" autofocus>\n <div style=\"visibility: hidden;max-height: 0\">\u20AC</div>\n <div *cdkVirtualFor=\"let item of times;let i = index\" (click)=\"selectTime(item)\" id=\"_apTime_{{i}}\" class=\"time-line\" [class.selected]=\"timeActive === i\">\n <span class=\"hour\">{{item}}</span>\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n <input #inputTime\n *ngIf=\"placement == 'top'\"\n class=\"time-input menu\"\n type=\"text\"\n [(ngModel)]=\"timeModel\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"validate($event?.target?.value)\"\n (keydown.enter)=\"validate($event?.target?.value)\"\n (mouseenter)=\"focusOnList(false)\">\n\n </ng-template>\n\n <input #inputBox\n class=\"time-input\"\n [ngClass]=\"{'invalid': invalid}\"\n type=\"text\"\n [(ngModel)]=\"timeModel\"\n (click)=\"openTimePicker()\"\n [disabled]=\"disabled\"\n [apPopmenu]=\"timeOptionsTemplate\"\n [apTooltipNeo]=\"{content: invalidationMessage, display: invalidationMessage && invalid}\"\n [shadow]=\"false\"\n [apPopmenuBorder]=\"false\"\n [apPopmenuBackground]=\"false\"\n [hasBackdrop]=\"true\"\n [close]=\"closeMenu\"\n [pointer]=\"true\"\n [position]=\"position\"\n [placement]=\"placement\"\n [rounded]=\"true\"\n (menuClosed)=\"onMenuClosed()\"\n placement=\"bottom right\"\n color=\"secondary\"\n readonly>\n\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.time-options-container{background-color:#fff;border-radius:4px;box-shadow:0 7px 50px #00000014;z-index:999999;pointer-events:all;height:173px;width:170px;overflow-y:hidden;text-align:left;color:#344563}.time-options-container.bottom{margin-top:5px}.time-options-container.top{margin-bottom:5px}.time-options-container .scroll{overflow-x:hidden}.time-options-container .time-line{height:33px;min-width:165px;cursor:pointer;display:flex;align-items:center}.time-options-container .time-line:hover,.time-options-container .time-line.selected{background-color:#e8f4ff!important;color:#178dfe}.time-options-container .time-line span{padding-left:16px}.hidden{display:none!important}.time-input{color:#344563;font-family:inherit;font-weight:400;height:36px;line-height:24px;margin:0;min-width:0;width:80px;outline:none;z-index:0;cursor:text;border-radius:4px;border:1px solid #d6dae0;text-align:center;padding:0}.time-input.invalid{border:1px solid #E81313;border-radius:4px}.time-input[disabled]{color:#aeb5c1}.time-input[disabled]:hover{cursor:auto!important}.time-input:hover:not([disabled]){cursor:text}.time-input:active:not([disabled]),.time-input:focus:not([disabled]),.time-input.menu{border:1px solid #178dfe}.time-input.menu.top{padding-bottom:0}\n"], components: [{ type: i2$3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i2$3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: PopmenuDirective, selector: "[apPopmenu]", inputs: ["apPopmenuBorder", "apPopmenuDisabled", "apPopmenuBackground", "arrow", "arrowOffset", "arrowPosition", "close", "hasBackdrop", "offset", "placement", "pointer", "apPopmenu", "position", "rounded", "shadow", "options"], outputs: ["menuClosed", "menuOpened"] }, { type: TooltipNeoDirective, selector: "[apTooltipNeo]", inputs: ["apTooltipNeo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2737
+ /** @nocollapse */ /** @nocollapse */ TimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TimepickerComponent, selector: "ap-timepicker", inputs: { disabled: "disabled", format: "format", invalid: "invalid", invalidationMessage: "invalidationMessage", period: "period", placement: "placement", timeModel: "timeModel" }, outputs: { timeModelChange: "timeModelChange" }, viewQueries: [{ propertyName: "inputBox", first: true, predicate: ["inputBox"], descendants: true }, { propertyName: "inputTime", first: true, predicate: ["inputTime"], descendants: true }, { propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"display-flex\" [class.meridian]=\"format === TimeFormat.Meridian\">\n <ng-template #timeOptionsTemplate >\n <input #inputTime\n *ngIf=\"placement == 'bottom'\"\n class=\"time-input menu\"\n type=\"text\"\n [(ngModel)]=\"timeModel\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"validate($event?.target?.value)\"\n (keydown.enter)=\"validate($event?.target?.value)\"\n (mouseenter)=\"focusOnList(false)\">\n <div class=\"time-options-container {{placement}}\"\n (mouseenter)=\"focusOnList(true)\"\n (mouseleave)=\"focusOnList(false)\">\n <cdk-virtual-scroll-viewport style=\"height: 100%\" itemSize=\"33\" class=\"scroll\" minBufferPx=\"200\" maxBufferPx=\"200\" autofocus>\n <div style=\"visibility: hidden;max-height: 0\">\u20AC</div>\n <div *cdkVirtualFor=\"let item of times;let i = index\" (click)=\"selectTime(item)\" id=\"_apTime_{{i}}\" class=\"time-line\" [class.selected]=\"timeActive === i\">\n <span class=\"hour\">{{item}}</span>\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n <input #inputTime\n *ngIf=\"placement == 'top'\"\n class=\"time-input menu\"\n type=\"text\"\n [(ngModel)]=\"timeModel\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"validate($event?.target?.value)\"\n (keydown.enter)=\"validate($event?.target?.value)\"\n (mouseenter)=\"focusOnList(false)\">\n\n </ng-template>\n\n <input #inputBox\n class=\"time-input\"\n [ngClass]=\"{'invalid': invalid}\"\n type=\"text\"\n [(ngModel)]=\"timeModel\"\n (click)=\"openTimePicker()\"\n [disabled]=\"disabled\"\n [apPopmenu]=\"timeOptionsTemplate\"\n [apTooltipNeo]=\"{content: invalidationMessage, display: invalidationMessage && invalid}\"\n [shadow]=\"false\"\n [apPopmenuBorder]=\"false\"\n [apPopmenuBackground]=\"false\"\n [hasBackdrop]=\"true\"\n [close]=\"closeMenu\"\n [pointer]=\"true\"\n [position]=\"position\"\n [placement]=\"placement\"\n [rounded]=\"true\"\n (menuClosed)=\"onMenuClosed()\"\n placement=\"bottom right\"\n color=\"secondary\"\n readonly>\n\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.time-options-container{background-color:#fff;border-radius:4px;box-shadow:0 7px 50px #00000014;z-index:999999;pointer-events:all;height:173px;width:170px;overflow-y:hidden;text-align:left;color:#344563}.time-options-container.bottom{margin-top:5px}.time-options-container.top{margin-bottom:5px}.time-options-container .scroll{overflow-x:hidden}.time-options-container .time-line{height:33px;min-width:165px;cursor:pointer;display:flex;align-items:center}.time-options-container .time-line:hover,.time-options-container .time-line.selected{background-color:#e8f4ff!important;color:#178dfe}.time-options-container .time-line span{padding-left:16px}.hidden{display:none!important}.time-input{color:#344563;font-family:inherit;font-weight:400;height:36px;line-height:24px;margin:0;min-width:0;width:80px;outline:none;z-index:0;cursor:text;border-radius:4px;border:1px solid #d6dae0;text-align:center;padding:0}.time-input.invalid{border:1px solid #E81313;border-radius:4px}.time-input[disabled]{color:#aeb5c1}.time-input[disabled]:hover{cursor:auto!important}.time-input:hover:not([disabled]){cursor:text}.time-input:active:not([disabled]),.time-input:focus:not([disabled]),.time-input.menu{border:1px solid #178dfe}.time-input.menu.top{padding-bottom:0}\n"], components: [{ type: i2$3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i2$3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: PopmenuDirective, selector: "[apPopmenu]", inputs: ["apPopmenuBorder", "apPopmenuDisabled", "apPopmenuBackground", "arrow", "arrowOffset", "arrowPosition", "close", "hasBackdrop", "backdropClass", "offset", "offsets", "placement", "pointer", "apPopmenu", "position", "rounded", "shadow", "options"], outputs: ["menuClosed", "menuOpened"] }, { type: TooltipNeoDirective, selector: "[apTooltipNeo]", inputs: ["apTooltipNeo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2724
2738
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TimepickerComponent, decorators: [{
2725
2739
  type: Component,
2726
2740
  args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-timepicker', template: "<div class=\"display-flex\" [class.meridian]=\"format === TimeFormat.Meridian\">\n <ng-template #timeOptionsTemplate >\n <input #inputTime\n *ngIf=\"placement == 'bottom'\"\n class=\"time-input menu\"\n type=\"text\"\n [(ngModel)]=\"timeModel\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"validate($event?.target?.value)\"\n (keydown.enter)=\"validate($event?.target?.value)\"\n (mouseenter)=\"focusOnList(false)\">\n <div class=\"time-options-container {{placement}}\"\n (mouseenter)=\"focusOnList(true)\"\n (mouseleave)=\"focusOnList(false)\">\n <cdk-virtual-scroll-viewport style=\"height: 100%\" itemSize=\"33\" class=\"scroll\" minBufferPx=\"200\" maxBufferPx=\"200\" autofocus>\n <div style=\"visibility: hidden;max-height: 0\">\u20AC</div>\n <div *cdkVirtualFor=\"let item of times;let i = index\" (click)=\"selectTime(item)\" id=\"_apTime_{{i}}\" class=\"time-line\" [class.selected]=\"timeActive === i\">\n <span class=\"hour\">{{item}}</span>\n </div>\n </cdk-virtual-scroll-viewport>\n </div>\n <input #inputTime\n *ngIf=\"placement == 'top'\"\n class=\"time-input menu\"\n type=\"text\"\n [(ngModel)]=\"timeModel\"\n (ngModelChange)=\"onModelChange($event)\"\n (blur)=\"validate($event?.target?.value)\"\n (keydown.enter)=\"validate($event?.target?.value)\"\n (mouseenter)=\"focusOnList(false)\">\n\n </ng-template>\n\n <input #inputBox\n class=\"time-input\"\n [ngClass]=\"{'invalid': invalid}\"\n type=\"text\"\n [(ngModel)]=\"timeModel\"\n (click)=\"openTimePicker()\"\n [disabled]=\"disabled\"\n [apPopmenu]=\"timeOptionsTemplate\"\n [apTooltipNeo]=\"{content: invalidationMessage, display: invalidationMessage && invalid}\"\n [shadow]=\"false\"\n [apPopmenuBorder]=\"false\"\n [apPopmenuBackground]=\"false\"\n [hasBackdrop]=\"true\"\n [close]=\"closeMenu\"\n [pointer]=\"true\"\n [position]=\"position\"\n [placement]=\"placement\"\n [rounded]=\"true\"\n (menuClosed)=\"onMenuClosed()\"\n placement=\"bottom right\"\n color=\"secondary\"\n readonly>\n\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}.time-options-container{background-color:#fff;border-radius:4px;box-shadow:0 7px 50px #00000014;z-index:999999;pointer-events:all;height:173px;width:170px;overflow-y:hidden;text-align:left;color:#344563}.time-options-container.bottom{margin-top:5px}.time-options-container.top{margin-bottom:5px}.time-options-container .scroll{overflow-x:hidden}.time-options-container .time-line{height:33px;min-width:165px;cursor:pointer;display:flex;align-items:center}.time-options-container .time-line:hover,.time-options-container .time-line.selected{background-color:#e8f4ff!important;color:#178dfe}.time-options-container .time-line span{padding-left:16px}.hidden{display:none!important}.time-input{color:#344563;font-family:inherit;font-weight:400;height:36px;line-height:24px;margin:0;min-width:0;width:80px;outline:none;z-index:0;cursor:text;border-radius:4px;border:1px solid #d6dae0;text-align:center;padding:0}.time-input.invalid{border:1px solid #E81313;border-radius:4px}.time-input[disabled]{color:#aeb5c1}.time-input[disabled]:hover{cursor:auto!important}.time-input:hover:not([disabled]){cursor:text}.time-input:active:not([disabled]),.time-input:focus:not([disabled]),.time-input.menu{border:1px solid #178dfe}.time-input.menu.top{padding-bottom:0}\n"] }]
@@ -3244,10 +3258,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
3244
3258
  const PART_START = '<ng-container data-mst="';
3245
3259
  const PARSE_MIDDLE = '">';
3246
3260
  const PARSE_END = '</ng-container>';
3247
- const CLASS_SEPARATOR = ',';
3261
+ const DATA_SEPARATOR = ',';
3262
+ const OPTIONAL_EVENTS_SEPARATOR = ';';
3248
3263
  /**
3249
- * This directive aims to parse simple string to extract some specific tags and to turn them into SPAN with styling classes attributes.
3250
- * The specific tags must this schema: <ng-container data-mst="STYLING-CLASSES>TEXT</ng-container>.
3264
+ * This directive aims to parse simple string to extract some specific tags and to turn them into SPAN with styling classes attributes and optional event listening.
3265
+ * The specific tags must this schema: <ng-container data-mst="STYLING-CLASSES">TEXT</ng-container>.
3251
3266
  * Example: 'Lorem <ng-container data-mst="my-style">ipsum</ng-container> dolor sit amet'.
3252
3267
  */
3253
3268
  class MultiStyleTextDirective {
@@ -3255,27 +3270,36 @@ class MultiStyleTextDirective {
3255
3270
  this.elRef = elRef;
3256
3271
  this.renderer = renderer;
3257
3272
  this.childrenCreated = [];
3273
+ this.partEvent = new EventEmitter();
3258
3274
  }
3259
3275
  set multiStyleText(fullText) {
3260
3276
  // First remove previously added children (on update).
3261
3277
  for (const child of this.childrenCreated) {
3262
3278
  this.renderer.removeChild(this.elRef.nativeElement, child);
3263
3279
  }
3264
- const parts = MultiStyleTextDirective.parse(fullText);
3265
- for (const part of parts) {
3266
- if (part.clazz) {
3267
- const span = this.renderer.createElement('span');
3268
- const text = this.renderer.createText(part.content);
3269
- this.renderer.appendChild(span, text);
3270
- part.clazz.forEach(clazz => this.renderer.addClass(span, clazz));
3271
- this.renderer.appendChild(this.elRef.nativeElement, span);
3272
- this.childrenCreated.push(span);
3273
- }
3274
- else {
3275
- const text = this.renderer.createText(part.content);
3276
- this.renderer.appendChild(this.elRef.nativeElement, text);
3277
- this.childrenCreated.push(text);
3278
- }
3280
+ if (fullText && fullText.length > 0) {
3281
+ MultiStyleTextDirective.parse(fullText).forEach((part) => {
3282
+ if (part.clazz || part.clickName) {
3283
+ // Parsed item with styling classes and/or event listening.
3284
+ const span = this.renderer.createElement('span');
3285
+ const text = this.renderer.createText(part.content);
3286
+ this.renderer.appendChild(span, text);
3287
+ if (part.clazz) {
3288
+ part.clazz.forEach(clazz => this.renderer.addClass(span, clazz));
3289
+ }
3290
+ if (part.clickName) {
3291
+ this.renderer.listen(span, 'click', () => this.partEvent.emit(part.clickName));
3292
+ }
3293
+ this.renderer.appendChild(this.elRef.nativeElement, span);
3294
+ this.childrenCreated.push(span);
3295
+ }
3296
+ else {
3297
+ // Specific of part without styling classes (could be used to get event listening only)
3298
+ const text = this.renderer.createText(part.content);
3299
+ this.renderer.appendChild(this.elRef.nativeElement, text);
3300
+ this.childrenCreated.push(text);
3301
+ }
3302
+ });
3279
3303
  }
3280
3304
  }
3281
3305
  static parse(toParse) {
@@ -3283,15 +3307,19 @@ class MultiStyleTextDirective {
3283
3307
  let startIndex = toParse.indexOf(PART_START);
3284
3308
  while (startIndex >= 0) {
3285
3309
  if (startIndex > 0) {
3286
- // Optional start before parser start.
3287
- parts.push({ content: toParse.substr(0, startIndex) });
3310
+ // Optional text before first parsed part.
3311
+ parts.push({ content: toParse.substring(0, startIndex) });
3288
3312
  }
3289
- const elem = this.cutFirstGroup(toParse.substr(startIndex));
3313
+ const elem = this.cutFirstGroup(toParse.substring(startIndex));
3290
3314
  if (elem === 'invalid') {
3291
3315
  return [];
3292
3316
  }
3293
3317
  else if (elem) {
3294
- parts.push({ content: elem.content, clazz: elem.classes });
3318
+ parts.push({
3319
+ content: elem.content,
3320
+ clazz: elem.classes,
3321
+ clickName: elem.clickName
3322
+ });
3295
3323
  toParse = elem.rest;
3296
3324
  startIndex = toParse.indexOf(PART_START);
3297
3325
  }
@@ -3307,29 +3335,47 @@ class MultiStyleTextDirective {
3307
3335
  }
3308
3336
  static cutFirstGroup(toCut) {
3309
3337
  if (!toCut.startsWith(PART_START)) {
3310
- // String doesnt start with expected parser start.
3338
+ // String doesn't start with expected parser start.
3311
3339
  return null;
3312
3340
  }
3313
- const afterParserStart = toCut.substr(PART_START.length);
3341
+ const afterParserStart = toCut.substring(PART_START.length);
3314
3342
  let index = afterParserStart.indexOf(PARSE_MIDDLE);
3315
3343
  if (index <= 0) {
3316
3344
  console.error('Not able to parse invalid string: ' + toCut);
3317
3345
  return 'invalid';
3318
3346
  }
3319
- const classes = afterParserStart.substr(0, index);
3320
- let rest = afterParserStart.substr(index + PARSE_MIDDLE.length);
3347
+ const data = afterParserStart.substring(0, index);
3348
+ let classes;
3349
+ let clickName;
3350
+ const eventsPartSeparatorIndex = data.indexOf(OPTIONAL_EVENTS_SEPARATOR);
3351
+ if (eventsPartSeparatorIndex > 0) {
3352
+ // Case the data contains events part with dedicated separator
3353
+ classes = data.substring(0, eventsPartSeparatorIndex);
3354
+ clickName = data.substring(eventsPartSeparatorIndex + 1);
3355
+ }
3356
+ else {
3357
+ // Otherwise, only design classes are provided
3358
+ classes = data;
3359
+ clickName = undefined;
3360
+ }
3361
+ let rest = afterParserStart.substring(index + PARSE_MIDDLE.length);
3321
3362
  index = rest.indexOf(PARSE_END);
3322
3363
  if (index <= 0) {
3323
3364
  console.error('Not able to parse invalid string: ' + toCut);
3324
3365
  return 'invalid';
3325
3366
  }
3326
- const content = rest.substr(0, index);
3327
- rest = rest.substr(index + PARSE_END.length);
3328
- return { content, classes: classes.split(CLASS_SEPARATOR), rest };
3367
+ const content = rest.substring(0, index);
3368
+ rest = rest.substring(index + PARSE_END.length);
3369
+ return {
3370
+ content,
3371
+ classes: classes.split(DATA_SEPARATOR),
3372
+ clickName,
3373
+ rest
3374
+ };
3329
3375
  }
3330
3376
  }
3331
3377
  /** @nocollapse */ /** @nocollapse */ MultiStyleTextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MultiStyleTextDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
3332
- /** @nocollapse */ /** @nocollapse */ MultiStyleTextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: MultiStyleTextDirective, selector: "[multiStyleText]", inputs: { multiStyleText: "multiStyleText" }, ngImport: i0 });
3378
+ /** @nocollapse */ /** @nocollapse */ MultiStyleTextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: MultiStyleTextDirective, selector: "[multiStyleText]", inputs: { multiStyleText: "multiStyleText" }, outputs: { partEvent: "partEvent" }, ngImport: i0 });
3333
3379
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MultiStyleTextDirective, decorators: [{
3334
3380
  type: Directive,
3335
3381
  args: [{
@@ -3338,6 +3384,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
3338
3384
  }]
3339
3385
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { multiStyleText: [{
3340
3386
  type: Input
3387
+ }], partEvent: [{
3388
+ type: Output
3389
+ }] } });
3390
+
3391
+ const ANIMATION_STYLES = new Map([
3392
+ ['position', 'absolute'],
3393
+ ['bottom', '0'],
3394
+ ['height', '5px'],
3395
+ ['border-radius', '6px'],
3396
+ ['animation', 'slide 1s linear infinite']
3397
+ ]);
3398
+ /**
3399
+ * This directive aims to manage a slider animation.
3400
+ */
3401
+ class LoadingSliderDirective {
3402
+ constructor(elRef, renderer, animationBuilder) {
3403
+ this.elRef = elRef;
3404
+ this.renderer = renderer;
3405
+ this.animationBuilder = animationBuilder;
3406
+ this.loadingSlider = false;
3407
+ this.sliderWidth = '50px';
3408
+ this.sliderColor = '#ff6726';
3409
+ this.sliderAnimationTime = 2000;
3410
+ this.partEvent = new EventEmitter();
3411
+ }
3412
+ ngOnDestroy() {
3413
+ this.removeSlider();
3414
+ }
3415
+ ngOnChanges(changes) {
3416
+ let recreate = false;
3417
+ if (changes.sliderWidth || changes.sliderColor || changes.sliderAnimationTime) {
3418
+ recreate = true;
3419
+ }
3420
+ if (this.loadingSlider) {
3421
+ if (!this.child || recreate) {
3422
+ this.createSlider();
3423
+ }
3424
+ this.showSlider();
3425
+ }
3426
+ else {
3427
+ this.hideSlider();
3428
+ }
3429
+ }
3430
+ createSlider() {
3431
+ this.removeSlider();
3432
+ const div = this.renderer.createElement('div');
3433
+ this.renderer.setStyle(this.elRef.nativeElement, 'position', 'relative');
3434
+ this.renderer.setStyle(this.elRef.nativeElement, 'overflow', 'hidden');
3435
+ this.renderer.addClass(div, 'animation-slider');
3436
+ ANIMATION_STYLES.forEach((value, key) => this.renderer.setStyle(div, key, value));
3437
+ this.renderer.setStyle(div, 'width', this.sliderWidth);
3438
+ this.renderer.setStyle(div, 'background-color', this.sliderColor);
3439
+ // Animate
3440
+ const loaderFadeOutAnimation = this.animationBuilder.build([
3441
+ animate(this.sliderAnimationTime, keyframes([
3442
+ style({ left: "-" + this.sliderWidth, offset: 0 }),
3443
+ style({ left: "calc(100%)", offset: 1 })
3444
+ ]))
3445
+ ]);
3446
+ this.animation = loaderFadeOutAnimation.create(div);
3447
+ const loop = () => {
3448
+ // Stop loop on destroy
3449
+ if (this.animation) {
3450
+ this.animation.reset();
3451
+ this.animation.onDone(loop);
3452
+ this.animation.play();
3453
+ }
3454
+ };
3455
+ this.animation.onDone(loop);
3456
+ this.animation.play();
3457
+ // Append new element
3458
+ this.renderer.appendChild(this.elRef.nativeElement, div);
3459
+ this.child = div;
3460
+ }
3461
+ removeSlider() {
3462
+ if (this.animation) {
3463
+ this.animation.destroy();
3464
+ this.animation = undefined;
3465
+ }
3466
+ if (this.child) {
3467
+ this.renderer.removeChild(this.elRef.nativeElement, this.child);
3468
+ this.child = undefined;
3469
+ }
3470
+ }
3471
+ hideSlider() {
3472
+ if (this.child) {
3473
+ this.renderer.setProperty(this.child, 'hidden', true);
3474
+ }
3475
+ if (this.animation) {
3476
+ this.animation.pause();
3477
+ }
3478
+ }
3479
+ showSlider() {
3480
+ if (this.child) {
3481
+ this.renderer.setProperty(this.child, 'hidden', false);
3482
+ }
3483
+ if (this.animation) {
3484
+ this.animation.reset();
3485
+ this.animation.play();
3486
+ }
3487
+ }
3488
+ }
3489
+ /** @nocollapse */ /** @nocollapse */ LoadingSliderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoadingSliderDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$3.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Directive });
3490
+ /** @nocollapse */ /** @nocollapse */ LoadingSliderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: LoadingSliderDirective, selector: "[loadingSlider]", inputs: { loadingSlider: "loadingSlider", sliderWidth: "sliderWidth", sliderColor: "sliderColor", sliderAnimationTime: "sliderAnimationTime" }, outputs: { partEvent: "partEvent" }, usesOnChanges: true, ngImport: i0 });
3491
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoadingSliderDirective, decorators: [{
3492
+ type: Directive,
3493
+ args: [{
3494
+ // tslint:disable-next-line:directive-selector
3495
+ selector: '[loadingSlider]'
3496
+ }]
3497
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$3.AnimationBuilder }]; }, propDecorators: { loadingSlider: [{
3498
+ type: Input
3499
+ }], sliderWidth: [{
3500
+ type: Input
3501
+ }], sliderColor: [{
3502
+ type: Input
3503
+ }], sliderAnimationTime: [{
3504
+ type: Input
3505
+ }], partEvent: [{
3506
+ type: Output
3341
3507
  }] } });
3342
3508
 
3343
3509
  // Angular
@@ -3475,7 +3641,8 @@ class AgorapulseUiComponentsModule {
3475
3641
  EqualValidatorDirective,
3476
3642
  MultiStyleTextDirective,
3477
3643
  TruncateTooltipDirective,
3478
- TooltipNeoDirective], imports: [AgorapulseUiSymbolModule,
3644
+ TooltipNeoDirective,
3645
+ LoadingSliderDirective], imports: [AgorapulseUiSymbolModule,
3479
3646
  CommonModule,
3480
3647
  NgxDaterangepickerMd,
3481
3648
  FormsModule,
@@ -3555,6 +3722,7 @@ class AgorapulseUiComponentsModule {
3555
3722
  MultiStyleTextDirective,
3556
3723
  TruncateTooltipDirective,
3557
3724
  TooltipNeoDirective,
3725
+ LoadingSliderDirective,
3558
3726
  // Modules
3559
3727
  NgSelectModule,
3560
3728
  PopmenuModule,
@@ -3721,6 +3889,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
3721
3889
  MultiStyleTextDirective,
3722
3890
  TruncateTooltipDirective,
3723
3891
  TooltipNeoDirective,
3892
+ LoadingSliderDirective,
3724
3893
  ],
3725
3894
  imports: [
3726
3895
  AgorapulseUiSymbolModule,
@@ -3806,6 +3975,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
3806
3975
  MultiStyleTextDirective,
3807
3976
  TruncateTooltipDirective,
3808
3977
  TooltipNeoDirective,
3978
+ LoadingSliderDirective,
3809
3979
  // Modules
3810
3980
  NgSelectModule,
3811
3981
  PopmenuModule,
@@ -3956,5 +4126,5 @@ function generateCodeStatus(text, type) {
3956
4126
  * Generated bundle index. Do not edit.
3957
4127
  */
3958
4128
 
3959
- export { AddCommentComponent, AgorapulseUiComponentsModule, AutosizeTextareaDirective, AvatarComponent, ConfirmModalComponent, DatepickerComponent, DatepickerMode, DefaultImageDirective, DotsStepperComponent, EllipsisDirective, EqualValidatorDirective, FeatureOnboardingComponent, FrozenGifDirective, ImageCarouselComponent, InstagramCarouselItemType, LabelComponent, LabelListComponent, LabelsSelectorComponent, MediaDisplayOverlayDialogComponent, ModalComponent, MultiStyleTextDirective, NotificationComponent, OverlayDialogComponent, OverlayDialogService, OverlayInDivComponent, PaginatorButtonComponent, PaginatorComponent, PasswordInputComponent, PlaceComponent, PlaceListComponent, PopmenuComponent, PopmenuDirective, PopmenuModule, SlideToggleComponent, SnackBarComponent, SnackbarsThreadComponent, SnackbarsThreadService, SplashscreenComponent, StarRatingComponent, StepperComponent, TimeFormat, TimepickerComponent, TooltipNeoDirective, TruncateTooltipDirective, TryPopupComponent, generateCodeStatus };
4129
+ export { AddCommentComponent, AgorapulseUiComponentsModule, AutosizeTextareaDirective, AvatarComponent, ConfirmModalComponent, DatepickerComponent, DatepickerMode, DefaultImageDirective, DotsStepperComponent, EllipsisDirective, EqualValidatorDirective, FeatureOnboardingComponent, FrozenGifDirective, ImageCarouselComponent, InstagramCarouselItemType, LabelComponent, LabelListComponent, LabelsSelectorComponent, LoadingSliderDirective, MediaDisplayOverlayDialogComponent, ModalComponent, MultiStyleTextDirective, NotificationComponent, OverlayDialogComponent, OverlayDialogService, OverlayInDivComponent, PaginatorButtonComponent, PaginatorComponent, PasswordInputComponent, PlaceComponent, PlaceListComponent, PopmenuComponent, PopmenuDirective, PopmenuModule, SlideToggleComponent, SnackBarComponent, SnackbarsThreadComponent, SnackbarsThreadService, SplashscreenComponent, StarRatingComponent, StepperComponent, TimeFormat, TimepickerComponent, TooltipNeoDirective, TruncateTooltipDirective, TryPopupComponent, generateCodeStatus };
3960
4130
  //# sourceMappingURL=agorapulse-ui-components.mjs.map