vc-layout 0.0.7 → 0.0.8

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.
@@ -1773,15 +1773,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
1773
1773
  }] } });
1774
1774
 
1775
1775
  class SearchComponent {
1776
- constructor() { }
1776
+ constructor(renderer) {
1777
+ this.renderer = renderer;
1778
+ this.searchValue = '';
1779
+ this.isDivClicked = false;
1780
+ this.isAdvanceSearch = false;
1781
+ this.onSearchAction = new EventEmitter();
1782
+ this.renderer.listen('window', 'click', (e) => {
1783
+ /**
1784
+ * Only run when toggleButton is not clicked
1785
+ * If we don't check this, all clicks (even on the toggle button) gets into this
1786
+ * section which in the result we might never see the menu open!
1787
+ * And the menu itself is checked here, and it's where we check just outside of
1788
+ * the menu and button the condition abbove must close the menu
1789
+ */
1790
+ console.log('e.target', this.searchArea.nativeElement, e.target !== this.searchArea.nativeElement);
1791
+ if (e.target !== this.searchBox.nativeElement &&
1792
+ e.target !== this.searchArea.nativeElement) {
1793
+ this.isDivClicked = false;
1794
+ }
1795
+ });
1796
+ }
1777
1797
  ngOnInit() { }
1778
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1779
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchComponent, selector: "vc-search", ngImport: i0, template: "<div class=\"vc-search\">\r\n <input type=\"text\" placeholder=\"Search\" />\r\n <i class=\"icons serachIcon vx-fs-10 vx-txt-white\">&#xe90b;</i>\r\n <i class=\"icons crossIcon vx-fs-10 vx-txt-white\">&#xe9ae;</i>\r\n <div\r\n class=\"vc-advance-search-btn vx-d-flex vx-align-center vx-justify-center\"\r\n [arTooltip]=\"'Advance Search'\"\r\n placement=\"bottom\"\r\n type=\"black\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"true\"\r\n >\r\n <i class=\"icons vx-fs-12\">&#xea91;</i>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.vc-search{position:relative}.vc-search input{background:transparent;border-radius:24px;border:1px solid #565a6f;color:#fff;font-size:11px;font-weight:300;padding:0 2rem 0 1.5rem;height:1.75rem;width:18rem;transition:all .3s ease-out}.vc-search input:hover{border-color:#787a8c}.vc-search input::placeholder{color:#fff}.vc-search input:focus{background:#fff;color:#565a6f;outline:none;width:30rem;height:1.875rem}.vc-search input:focus::placeholder{color:#a9aab6}.vc-search input:focus~.serachIcon{color:#565a6f}.vc-search input:focus~.vc-advance-search-btn{background:#e3e3e9;border-radius:50px;top:3px}.vc-search input:focus~.vc-advance-search-btn i{color:#565a6f}.vc-search input:focus~.crossIcon{color:#565a6f;display:block}.vc-search i{position:absolute;cursor:pointer;left:10px;top:10px;z-index:1}.vc-search i.crossIcon{left:unset;right:2.5rem;display:none}.vc-search .vc-advance-search-btn{width:1.5rem;height:1.5rem;position:absolute;right:.25rem;top:.125rem;cursor:pointer}.vc-search .vc-advance-search-btn i{color:#cdced6;position:static}\n"], dependencies: [{ kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }] }); }
1798
+ onKeyUp(event) {
1799
+ if (event.key === 'Enter') {
1800
+ this.onSearch('search', this.searchValue);
1801
+ }
1802
+ }
1803
+ onSearch(type, searchValue) {
1804
+ this.onSearchAction.emit({ type, searchValue });
1805
+ }
1806
+ onCrossClick() {
1807
+ this.searchValue = '';
1808
+ this.onSearch('search', '');
1809
+ }
1810
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
1811
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchComponent, selector: "vc-search", inputs: { isAdvanceSearch: "isAdvanceSearch" }, outputs: { onSearchAction: "onSearchAction" }, viewQueries: [{ propertyName: "searchArea", first: true, predicate: ["searchArea"], descendants: true }, { propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }], ngImport: i0, template: `
1812
+ <div
1813
+ class="vc-search"
1814
+ (click)="isDivClicked = true"
1815
+ [class.searchFocus]="isDivClicked"
1816
+ #searchArea
1817
+ >
1818
+ <input
1819
+ [(ngModel)]="searchValue"
1820
+ (keyup)="onKeyUp($event)"
1821
+ (focusOut)="isDivClicked = false"
1822
+ type="text"
1823
+ placeholder="Search"
1824
+ #searchBox
1825
+ />
1826
+ <i class="icons serachIcon vx-fs-10 vx-txt-white">&#xe90b;</i>
1827
+
1828
+ <div
1829
+ *ngIf="isAdvanceSearch"
1830
+ (click)="onSearch('advanceSearch', '')"
1831
+ class="vc-advance-search-btn vx-d-flex vx-align-center vx-justify-center"
1832
+ [arTooltip]="'Advance Search'"
1833
+ placement="bottom"
1834
+ type="black"
1835
+ delay="0"
1836
+ [tooltipMandatory]="true"
1837
+ >
1838
+ <i class="icons vx-fs-12">&#xea91;</i>
1839
+ </div>
1840
+ <i
1841
+ *ngIf="searchValue"
1842
+ (click)="onCrossClick()"
1843
+ class="icons crossIcon vx-fs-10 vx-txt-white"
1844
+ >&#xe9ae;</i
1845
+ >
1846
+ </div>
1847
+ `, isInline: true, styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.vc-search{position:relative}.vc-search.searchFocus input{background:#fff;color:#565a6f;outline:none;width:30rem;height:1.875rem}.vc-search.searchFocus input::placeholder{color:#a9aab6}.vc-search.searchFocus .serachIcon{color:#565a6f}.vc-search.searchFocus .crossIcon{color:#565a6f;display:block}.vc-search.searchFocus .vc-advance-search-btn{background:#e3e3e9;border-radius:50px;top:3px}.vc-search.searchFocus .vc-advance-search-btn i{color:#565a6f}.vc-search input{background:transparent;border-radius:24px;border:1px solid #565a6f;color:#fff;font-size:11px;font-weight:300;padding:0 2rem 0 1.5rem;height:1.75rem;width:18rem;transition:all .3s ease-out}.vc-search input:hover{border-color:#787a8c}.vc-search input::placeholder{color:#fff}.vc-search i{position:absolute;cursor:pointer;left:10px;top:10px;z-index:1}.vc-search i.crossIcon{left:unset;right:.75rem}.vc-search .vc-advance-search-btn{width:1.5rem;height:1.5rem;position:absolute;right:.25rem;top:.125rem;cursor:pointer}.vc-search .vc-advance-search-btn i{color:#cdced6;position:static}.vc-search .vc-advance-search-btn~i.crossIcon{right:2.5rem}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
1780
1848
  }
1781
1849
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchComponent, decorators: [{
1782
1850
  type: Component,
1783
- args: [{ selector: 'vc-search', template: "<div class=\"vc-search\">\r\n <input type=\"text\" placeholder=\"Search\" />\r\n <i class=\"icons serachIcon vx-fs-10 vx-txt-white\">&#xe90b;</i>\r\n <i class=\"icons crossIcon vx-fs-10 vx-txt-white\">&#xe9ae;</i>\r\n <div\r\n class=\"vc-advance-search-btn vx-d-flex vx-align-center vx-justify-center\"\r\n [arTooltip]=\"'Advance Search'\"\r\n placement=\"bottom\"\r\n type=\"black\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"true\"\r\n >\r\n <i class=\"icons vx-fs-12\">&#xea91;</i>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.vc-search{position:relative}.vc-search input{background:transparent;border-radius:24px;border:1px solid #565a6f;color:#fff;font-size:11px;font-weight:300;padding:0 2rem 0 1.5rem;height:1.75rem;width:18rem;transition:all .3s ease-out}.vc-search input:hover{border-color:#787a8c}.vc-search input::placeholder{color:#fff}.vc-search input:focus{background:#fff;color:#565a6f;outline:none;width:30rem;height:1.875rem}.vc-search input:focus::placeholder{color:#a9aab6}.vc-search input:focus~.serachIcon{color:#565a6f}.vc-search input:focus~.vc-advance-search-btn{background:#e3e3e9;border-radius:50px;top:3px}.vc-search input:focus~.vc-advance-search-btn i{color:#565a6f}.vc-search input:focus~.crossIcon{color:#565a6f;display:block}.vc-search i{position:absolute;cursor:pointer;left:10px;top:10px;z-index:1}.vc-search i.crossIcon{left:unset;right:2.5rem;display:none}.vc-search .vc-advance-search-btn{width:1.5rem;height:1.5rem;position:absolute;right:.25rem;top:.125rem;cursor:pointer}.vc-search .vc-advance-search-btn i{color:#cdced6;position:static}\n"] }]
1784
- }], ctorParameters: function () { return []; } });
1851
+ args: [{ selector: 'vc-search', template: `
1852
+ <div
1853
+ class="vc-search"
1854
+ (click)="isDivClicked = true"
1855
+ [class.searchFocus]="isDivClicked"
1856
+ #searchArea
1857
+ >
1858
+ <input
1859
+ [(ngModel)]="searchValue"
1860
+ (keyup)="onKeyUp($event)"
1861
+ (focusOut)="isDivClicked = false"
1862
+ type="text"
1863
+ placeholder="Search"
1864
+ #searchBox
1865
+ />
1866
+ <i class="icons serachIcon vx-fs-10 vx-txt-white">&#xe90b;</i>
1867
+
1868
+ <div
1869
+ *ngIf="isAdvanceSearch"
1870
+ (click)="onSearch('advanceSearch', '')"
1871
+ class="vc-advance-search-btn vx-d-flex vx-align-center vx-justify-center"
1872
+ [arTooltip]="'Advance Search'"
1873
+ placement="bottom"
1874
+ type="black"
1875
+ delay="0"
1876
+ [tooltipMandatory]="true"
1877
+ >
1878
+ <i class="icons vx-fs-12">&#xea91;</i>
1879
+ </div>
1880
+ <i
1881
+ *ngIf="searchValue"
1882
+ (click)="onCrossClick()"
1883
+ class="icons crossIcon vx-fs-10 vx-txt-white"
1884
+ >&#xe9ae;</i
1885
+ >
1886
+ </div>
1887
+ `, styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.vc-search{position:relative}.vc-search.searchFocus input{background:#fff;color:#565a6f;outline:none;width:30rem;height:1.875rem}.vc-search.searchFocus input::placeholder{color:#a9aab6}.vc-search.searchFocus .serachIcon{color:#565a6f}.vc-search.searchFocus .crossIcon{color:#565a6f;display:block}.vc-search.searchFocus .vc-advance-search-btn{background:#e3e3e9;border-radius:50px;top:3px}.vc-search.searchFocus .vc-advance-search-btn i{color:#565a6f}.vc-search input{background:transparent;border-radius:24px;border:1px solid #565a6f;color:#fff;font-size:11px;font-weight:300;padding:0 2rem 0 1.5rem;height:1.75rem;width:18rem;transition:all .3s ease-out}.vc-search input:hover{border-color:#787a8c}.vc-search input::placeholder{color:#fff}.vc-search i{position:absolute;cursor:pointer;left:10px;top:10px;z-index:1}.vc-search i.crossIcon{left:unset;right:.75rem}.vc-search .vc-advance-search-btn{width:1.5rem;height:1.5rem;position:absolute;right:.25rem;top:.125rem;cursor:pointer}.vc-search .vc-advance-search-btn i{color:#cdced6;position:static}.vc-search .vc-advance-search-btn~i.crossIcon{right:2.5rem}\n"] }]
1888
+ }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { isAdvanceSearch: [{
1889
+ type: Input
1890
+ }], searchArea: [{
1891
+ type: ViewChild,
1892
+ args: ['searchArea']
1893
+ }], searchBox: [{
1894
+ type: ViewChild,
1895
+ args: ['searchBox']
1896
+ }], onSearchAction: [{
1897
+ type: Output
1898
+ }] } });
1785
1899
 
1786
1900
  class CreateWorkflowComponent {
1787
1901
  constructor() {
@@ -1980,26 +2094,34 @@ class HeaderContainerComponent {
1980
2094
  this.ASSETS = ASSETS;
1981
2095
  this.showBusinessCycle = BUSINESS_CYCLE_URL;
1982
2096
  this.currentUrl = '';
2097
+ this.showSearch = false;
2098
+ this.isAdvanceSearch = false;
1983
2099
  this.businessCycleChange = new EventEmitter();
1984
2100
  this.openDialog = new EventEmitter();
2101
+ this.onSearchAction = new EventEmitter();
1985
2102
  this.currentUrl = window.location.pathname;
1986
- console.log('currentUrl', this.currentUrl);
1987
2103
  }
1988
2104
  businessCycleChangeHandler(event) {
1989
2105
  this.businessCycleChange.emit(event);
1990
2106
  }
1991
2107
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderContainerComponent, deps: [{ token: ApiService }], target: i0.ɵɵFactoryTarget.Component }); }
1992
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderContainerComponent, selector: "vc-header-container", inputs: { featureFlag: "featureFlag" }, outputs: { businessCycleChange: "businessCycleChange", openDialog: "openDialog" }, ngImport: i0, template: "<vc-global-alert [feature]=\"featureFlag\"></vc-global-alert>\r\n<div\r\n class=\"header-container vx-d-flex vx-align-center vx-justify-between vx-pr-3\"\r\n>\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <a\r\n class=\"product-logo vx-d-flex vx-align-center vx-justify-center vx-mr-3\"\r\n [arTooltip]=\"'Go to Dashboard'\"\r\n placement=\"right\"\r\n type=\"white\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"true\"\r\n [animate]=\"true\"\r\n ><img [src]=\"ASSETS.v_icon\" alt=\"VComply\" width=\"24\" height=\"24\"\r\n /></a>\r\n <vc-business-cycle\r\n *ngIf=\"showBusinessCycle.includes(currentUrl)\"\r\n (businessCycleChange)=\"businessCycleChangeHandler($event)\"\r\n ></vc-business-cycle>\r\n </div>\r\n <div class=\"search-area\">\r\n <vc-search *ngIf=\"false\"></vc-search>\r\n </div>\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <vc-support (openSupport)=\"openDialog.emit('SUPPORT')\"></vc-support>\r\n <vc-create-workflow\r\n *ngIf=\"apiService.loggedUserDetail$ | async | checkPermission\"\r\n (openWorkflow)=\"openDialog.emit('WORKFLOW')\"\r\n ></vc-create-workflow>\r\n <vc-queue></vc-queue>\r\n <vc-user-details\r\n [userDetails]=\"apiService.loggedUserDetail$ | async\"\r\n [subscriptionDetails]=\"apiService.subscriptionDetail$ | async\"\r\n ></vc-user-details>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.header-container{height:3rem}.header-container .product-logo{width:3rem;height:3rem}.header-container .product-logo img{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: GlobalAlertComponent, selector: "vc-global-alert", inputs: ["feature"], outputs: ["subscriptionStatus"] }, { kind: "component", type: BusinessCycleComponent, selector: "vc-business-cycle", inputs: ["orgDetails"], outputs: ["businessCycleChange"] }, { kind: "component", type: SearchComponent, selector: "vc-search" }, { kind: "component", type: CreateWorkflowComponent, selector: "vc-create-workflow", outputs: ["openWorkflow"] }, { kind: "component", type: QueueComponent, selector: "vc-queue" }, { kind: "component", type: UserDetailsComponent, selector: "vc-user-details", inputs: ["userDetails", "subscriptionDetails"] }, { kind: "component", type: SupportComponent, selector: "vc-support", outputs: ["openSupport"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: CreatePermissionPipe, name: "checkPermission" }] }); }
2108
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderContainerComponent, selector: "vc-header-container", inputs: { showSearch: "showSearch", featureFlag: "featureFlag", isAdvanceSearch: "isAdvanceSearch" }, outputs: { businessCycleChange: "businessCycleChange", openDialog: "openDialog", onSearchAction: "onSearchAction" }, ngImport: i0, template: "<vc-global-alert [feature]=\"featureFlag\"></vc-global-alert>\r\n<div\r\n class=\"header-container vx-d-flex vx-align-center vx-justify-between vx-pr-3\"\r\n>\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <a\r\n class=\"product-logo vx-d-flex vx-align-center vx-justify-center vx-mr-3\"\r\n [arTooltip]=\"'Go to Dashboard'\"\r\n placement=\"right\"\r\n type=\"white\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"true\"\r\n [animate]=\"true\"\r\n ><img [src]=\"ASSETS.v_icon\" alt=\"VComply\" width=\"24\" height=\"24\"\r\n /></a>\r\n <vc-business-cycle\r\n *ngIf=\"showBusinessCycle.includes(currentUrl)\"\r\n (businessCycleChange)=\"businessCycleChangeHandler($event)\"\r\n ></vc-business-cycle>\r\n </div>\r\n <div class=\"search-area\">\r\n <vc-search\r\n *ngIf=\"showSearch\"\r\n [isAdvanceSearch]=\"isAdvanceSearch\"\r\n (onSearchAction)=\"onSearchAction.emit($event)\"\r\n ></vc-search>\r\n </div>\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <vc-support (openSupport)=\"openDialog.emit('SUPPORT')\"></vc-support>\r\n <vc-create-workflow\r\n *ngIf=\"apiService.loggedUserDetail$ | async | checkPermission\"\r\n (openWorkflow)=\"openDialog.emit('WORKFLOW')\"\r\n ></vc-create-workflow>\r\n <vc-queue></vc-queue>\r\n <vc-user-details\r\n [userDetails]=\"apiService.loggedUserDetail$ | async\"\r\n [subscriptionDetails]=\"apiService.subscriptionDetail$ | async\"\r\n ></vc-user-details>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.header-container{height:3rem}.header-container .product-logo{width:3rem;height:3rem}.header-container .product-logo img{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[arTooltip]", inputs: ["arTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: GlobalAlertComponent, selector: "vc-global-alert", inputs: ["feature"], outputs: ["subscriptionStatus"] }, { kind: "component", type: BusinessCycleComponent, selector: "vc-business-cycle", inputs: ["orgDetails"], outputs: ["businessCycleChange"] }, { kind: "component", type: SearchComponent, selector: "vc-search", inputs: ["isAdvanceSearch"], outputs: ["onSearchAction"] }, { kind: "component", type: CreateWorkflowComponent, selector: "vc-create-workflow", outputs: ["openWorkflow"] }, { kind: "component", type: QueueComponent, selector: "vc-queue" }, { kind: "component", type: UserDetailsComponent, selector: "vc-user-details", inputs: ["userDetails", "subscriptionDetails"] }, { kind: "component", type: SupportComponent, selector: "vc-support", outputs: ["openSupport"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: CreatePermissionPipe, name: "checkPermission" }] }); }
1993
2109
  }
1994
2110
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderContainerComponent, decorators: [{
1995
2111
  type: Component,
1996
- args: [{ selector: 'vc-header-container', template: "<vc-global-alert [feature]=\"featureFlag\"></vc-global-alert>\r\n<div\r\n class=\"header-container vx-d-flex vx-align-center vx-justify-between vx-pr-3\"\r\n>\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <a\r\n class=\"product-logo vx-d-flex vx-align-center vx-justify-center vx-mr-3\"\r\n [arTooltip]=\"'Go to Dashboard'\"\r\n placement=\"right\"\r\n type=\"white\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"true\"\r\n [animate]=\"true\"\r\n ><img [src]=\"ASSETS.v_icon\" alt=\"VComply\" width=\"24\" height=\"24\"\r\n /></a>\r\n <vc-business-cycle\r\n *ngIf=\"showBusinessCycle.includes(currentUrl)\"\r\n (businessCycleChange)=\"businessCycleChangeHandler($event)\"\r\n ></vc-business-cycle>\r\n </div>\r\n <div class=\"search-area\">\r\n <vc-search *ngIf=\"false\"></vc-search>\r\n </div>\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <vc-support (openSupport)=\"openDialog.emit('SUPPORT')\"></vc-support>\r\n <vc-create-workflow\r\n *ngIf=\"apiService.loggedUserDetail$ | async | checkPermission\"\r\n (openWorkflow)=\"openDialog.emit('WORKFLOW')\"\r\n ></vc-create-workflow>\r\n <vc-queue></vc-queue>\r\n <vc-user-details\r\n [userDetails]=\"apiService.loggedUserDetail$ | async\"\r\n [subscriptionDetails]=\"apiService.subscriptionDetail$ | async\"\r\n ></vc-user-details>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.header-container{height:3rem}.header-container .product-logo{width:3rem;height:3rem}.header-container .product-logo img{pointer-events:none}\n"] }]
1997
- }], ctorParameters: function () { return [{ type: ApiService }]; }, propDecorators: { featureFlag: [{
2112
+ args: [{ selector: 'vc-header-container', template: "<vc-global-alert [feature]=\"featureFlag\"></vc-global-alert>\r\n<div\r\n class=\"header-container vx-d-flex vx-align-center vx-justify-between vx-pr-3\"\r\n>\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <a\r\n class=\"product-logo vx-d-flex vx-align-center vx-justify-center vx-mr-3\"\r\n [arTooltip]=\"'Go to Dashboard'\"\r\n placement=\"right\"\r\n type=\"white\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"true\"\r\n [animate]=\"true\"\r\n ><img [src]=\"ASSETS.v_icon\" alt=\"VComply\" width=\"24\" height=\"24\"\r\n /></a>\r\n <vc-business-cycle\r\n *ngIf=\"showBusinessCycle.includes(currentUrl)\"\r\n (businessCycleChange)=\"businessCycleChangeHandler($event)\"\r\n ></vc-business-cycle>\r\n </div>\r\n <div class=\"search-area\">\r\n <vc-search\r\n *ngIf=\"showSearch\"\r\n [isAdvanceSearch]=\"isAdvanceSearch\"\r\n (onSearchAction)=\"onSearchAction.emit($event)\"\r\n ></vc-search>\r\n </div>\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <vc-support (openSupport)=\"openDialog.emit('SUPPORT')\"></vc-support>\r\n <vc-create-workflow\r\n *ngIf=\"apiService.loggedUserDetail$ | async | checkPermission\"\r\n (openWorkflow)=\"openDialog.emit('WORKFLOW')\"\r\n ></vc-create-workflow>\r\n <vc-queue></vc-queue>\r\n <vc-user-details\r\n [userDetails]=\"apiService.loggedUserDetail$ | async\"\r\n [subscriptionDetails]=\"apiService.subscriptionDetail$ | async\"\r\n ></vc-user-details>\r\n </div>\r\n</div>\r\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";.header-container{height:3rem}.header-container .product-logo{width:3rem;height:3rem}.header-container .product-logo img{pointer-events:none}\n"] }]
2113
+ }], ctorParameters: function () { return [{ type: ApiService }]; }, propDecorators: { showSearch: [{
2114
+ type: Input
2115
+ }], featureFlag: [{
2116
+ type: Input
2117
+ }], isAdvanceSearch: [{
1998
2118
  type: Input
1999
2119
  }], businessCycleChange: [{
2000
2120
  type: Output
2001
2121
  }], openDialog: [{
2002
2122
  type: Output
2123
+ }], onSearchAction: [{
2124
+ type: Output
2003
2125
  }] } });
2004
2126
 
2005
2127
  class SubMenuContainerComponent {
@@ -2629,14 +2751,18 @@ class HeaderModule {
2629
2751
  PopoverModule,
2630
2752
  FormgroupModule,
2631
2753
  GlobalAlertModule,
2632
- PipesModule], exports: [HeaderContainerComponent] }); }
2754
+ PipesModule,
2755
+ FormsModule,
2756
+ FormgroupModule], exports: [HeaderContainerComponent] }); }
2633
2757
  static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderModule, imports: [CommonModule,
2634
2758
  TooltipModule,
2635
2759
  AvatarModule,
2636
2760
  PopoverModule,
2637
2761
  FormgroupModule,
2638
2762
  GlobalAlertModule,
2639
- PipesModule] }); }
2763
+ PipesModule,
2764
+ FormsModule,
2765
+ FormgroupModule] }); }
2640
2766
  }
2641
2767
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderModule, decorators: [{
2642
2768
  type: NgModule,
@@ -2658,6 +2784,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
2658
2784
  FormgroupModule,
2659
2785
  GlobalAlertModule,
2660
2786
  PipesModule,
2787
+ FormsModule,
2788
+ FormgroupModule,
2661
2789
  ],
2662
2790
  exports: [HeaderContainerComponent],
2663
2791
  }]