-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path440.90e3266258a6bc32.js
1 lines (1 loc) · 42.7 KB
/
440.90e3266258a6bc32.js
1
"use strict";(self.webpackChunkbase_test=self.webpackChunkbase_test||[]).push([[440],{440:(U,g,s)=>{s.r(g),s.d(g,{ControlsModule:()=>W});var F=s(177),b=s(483),h=s(8550),e=s(4438),d=s(6377),f=s(8245);let k=(()=>{class t extends h.PJ{constructor(){super(),this.configureCode="Globals.GLOBAL_AG_GRID_SETTINGS = <GridSettings>{\n ...\n highlightSearchResultsText: true,\n // optionally to override the default css class you can set this, default is 'stringSearchMatchedCell'\n cssClassStringSearchMatchedCell: \"stringSearchMatchedCell\",\n ...\n};",this.manualColumnCode='// val is the value of the cell\n\n// is the grid currently in search mode? if not, just return the value\nif (!InlineSearchableGridStore.isSearching(this.gridId)) {\n return val;\n}\n\n// check what the active search is\nlet searchData: InlineSearchData = InlineSearchableGridStore.getSearchData(this.gridId);\n\n// there is a value, and there is a search\nif (val) {\n // this is the exact search string\n let s = searchData.search;\n if (searchData.wholeWords) {\n s = "\\\\b" + s + "\\\\b";\n }\n try {\n return val.toString().replace(new RegExp(s, "g" + (searchData.caseSensitive ? "" : "i")), (match:string) => {\n return `<span class="${this.gridSettings.cssClassStringSearchMatchedCell ? this.gridSettings.cssClassStringSearchMatchedCell : \'highlightText\'}">${match}</span>`;\n });\n } catch (err) {\n return "error";\n }\n} else {\n return val;\n}',this.furtherCssCode='ch.getAllColumnIds().forEach(def => {\n ch.addCellClassRule(def, "stringSearchMatchedCell", (params) => InlineSearchableGridStore.hookCellCssRule(params, this.getGridId()));\n});',this.furtherCssCodeNoColumnHelper="let colDef = {\n ...\n cellClassRules['stringSearchMatchedCell'] = (params) => InlineSearchableGridStore.hookCellCssRule(params, this.getGridId())\n}",this.gridWrappingCode="<InlineSearchableGrid>\n <ag-grid-angular #grid ...></ag-grid-angular>\n</InlineSearchableGrid>",this.cssCode="// border around cell\n.stringSearchMatchedCell {\n border: 2px solid orchid !important;\n}\n\n// border around the entire grid\n.inline-search-active-in-grid {\n border: 2px solid blue;\n}\n\n// string matched text highlight\n.highlightText {\n background: yellow;\n border: 1px solid red;\n color: black;\n}\n",this.baseGridCode="getGridSettings(): GridSettings {\n return Globals.GLOBAL_AG_GRID_SETTINGS;\n}",this.proxyCode="this.inlineSearchService.showInlineGridSearch.subscribe((data: any) => {\n if (this.gridInlineSearch) {\n if (data instanceof InlineSearchableGridData) {\n this.gridInlineSearch.showFromNew(data as InlineSearchableGridData);\n } else {\n this.gridInlineSearch.show(data.grid, data.event, data.top);\n }\n }\n});\n\nthis.inlineSearchService.showInlineSearchFromGridId.subscribe((id: any) => {\n try {\n if (this.gridInlineSearch) {\n this.gridInlineSearch.showFromId(id);\n }\n } catch (err) {\n this.errorHelper.displayError(err);\n }\n});\n\nthis.inlineSearchService.clearInlineSearchFromGridId.subscribe((id: any) => {\n try {\n if (this.gridInlineSearch) {\n this.gridInlineSearch.clearFromId(id);\n }\n } catch (err) {\n this.errorHelper.displayError(err);\n }\n});"}getEventGrid(o){}hookObservables(){}ngOnInit(){super.ngOnInit()}ngAfterViewInit(){super.ngAfterViewInit()}ngOnDestroy(){super.ngOnDestroy()}static{this.\u0275fac=function(a){return new(a||t)}}static{this.\u0275cmp=e.VBU({type:t,selectors:[["InlineSearchView"]],features:[e.Jv_([]),e.Vt3],decls:129,vars:12,consts:[[1,"documentParent"],[1,"document"],[1,"description"],["src","./assets/screenshots/inlinesearch.png",1,"screenshot"],["language","ts",3,"highlight"],["language","scss",3,"highlight"],[1,"description",2,"font-style","italic"]],template:function(a,i){1&a&&(e.j41(0,"div",0)(1,"div",1)(2,"h1"),e.EFF(3,"AgGrid Inline Search Control"),e.k0s(),e.j41(4,"p",2),e.EFF(5,"This control wraps around your AgGrid controla and provides inline search capability to your grid with fine-grained highlighting of search results"),e.k0s(),e.j41(6,"p",2),e.EFF(7,"Here is a screenshot of the search in action:"),e.k0s(),e.nrm(8,"img",3),e.j41(9,"h2"),e.EFF(10,"Demo"),e.k0s(),e.j41(11,"p",2),e.EFF(12,"(click a row and press CTRL+F to search, write a value, for example '123'; and press enter):"),e.k0s(),e.nrm(13,"BasicGrid")(14,"p"),e.j41(15,"h2"),e.EFF(16,"Configuring"),e.k0s(),e.j41(17,"p",2),e.EFF(18,"In one of your base classes that gets called at application startup (such as "),e.j41(19,"i"),e.EFF(20,"app.model"),e.k0s(),e.EFF(21," or "),e.j41(22,"i"),e.EFF(23,"app.component)"),e.k0s(),e.EFF(24,", where you define the global grid settings, ensure the following is set up (the CSS class is optional, the default name is the same as in this example):"),e.k0s(),e.j41(25,"pre"),e.nrm(26,"code",4),e.k0s(),e.j41(27,"p",2),e.EFF(28,"The BaseGrid class will automatically request a copy of this as follows:"),e.k0s(),e.j41(29,"pre"),e.nrm(30,"code",4),e.k0s(),e.j41(31,"h2"),e.EFF(32,"At the root level ("),e.j41(33,"i"),e.EFF(34,"app.component"),e.k0s(),e.EFF(35," for example)"),e.k0s(),e.j41(36,"p",2),e.EFF(37,"In your root level HTML you need to define where the popup code will be rendered. Ideally this is before the end of your <body /> tag as then it can go over any other control visually."),e.k0s(),e.j41(38,"pre"),e.nrm(39,"code",4),e.k0s(),e.j41(40,"p",2),e.EFF(41,"Then import the control via a "),e.j41(42,"i"),e.EFF(43,"ViewChild"),e.k0s(),e.EFF(44," as follows:"),e.k0s(),e.j41(45,"pre"),e.nrm(46,"code",4),e.k0s(),e.j41(47,"p",2),e.EFF(48,"In the constructor of the same class that did the "),e.j41(49,"i"),e.EFF(50,"ViewChild"),e.k0s(),e.EFF(51," import add this:"),e.k0s(),e.j41(52,"pre"),e.nrm(53,"code",4),e.k0s(),e.j41(54,"p",2),e.EFF(55,"Then in the initializing code somewhere (such as "),e.j41(56,"i"),e.EFF(57,"ngOnInit()"),e.k0s(),e.EFF(58,"), add your listeners. These essentially work like a Proxy to the inline search control. It's possible these will be made obsolete in future code."),e.k0s(),e.j41(59,"pre"),e.nrm(60,"code",4),e.k0s(),e.j41(61,"h2"),e.EFF(62,"Creating Columns Without "),e.j41(63,"i"),e.EFF(64,"ColumnHelper"),e.k0s()(),e.j41(65,"p",2)(66,"i"),e.EFF(67,"ColumnHelper"),e.k0s(),e.EFF(68," will automatically wrap all your cell renderers in its own, which is how the data is rendered correctly. "),e.j41(69,"b"),e.EFF(70,"But this only works if you use "),e.j41(71,"i"),e.EFF(72,"ColumnHelper"),e.k0s()(),e.EFF(73,"."),e.k0s(),e.j41(74,"h3"),e.EFF(75,"The Easy Way"),e.k0s(),e.j41(76,"p",2)(77,"i"),e.EFF(78,"ColumnHelper"),e.k0s(),e.EFF(79," provides a static method that takes your column definition, the grid id and your grid settings and will wrap your existing cell renderer with the necessary code. Here's an example on how to call it:"),e.k0s(),e.j41(80,"pre"),e.nrm(81,"code",4),e.k0s(),e.j41(82,"h3"),e.EFF(83,"The Hard Way"),e.k0s(),e.j41(84,"p",2),e.EFF(85,"If you wish to have this feature work on columns that you create in a different manner, you will need to tell the column that it should also render the text. Here is the code you could use inside your cell renderer (customize to match with the rest of your renderer):"),e.k0s(),e.j41(86,"pre"),e.nrm(87,"code",4),e.k0s(),e.j41(88,"h2"),e.EFF(89,"Grid Wrapping"),e.k0s(),e.j41(90,"p",2),e.EFF(91,"For each grid that should have inline searching available for it, you need to wrap it as follows in the HTML:"),e.k0s(),e.j41(92,"div")(93,"pre"),e.nrm(94,"code",4),e.k0s(),e.j41(95,"p",2),e.EFF(96,"And that's it. When the grid has focus, pressing CTRL+F should now show the Inline search control."),e.k0s(),e.j41(97,"div")(98,"h2"),e.EFF(99,"Customizing CSS"),e.k0s(),e.j41(100,"p",2),e.EFF(101,"If you changed the base CSS classes, adapt to match your names. This example shows how to customize the search results."),e.k0s(),e.j41(102,"div")(103,"pre"),e.nrm(104,"code",5),e.k0s(),e.j41(105,"p",2),e.EFF(106,"In the above example, to get "),e.j41(107,"i"),e.EFF(108,"stringSearchMatchedCell"),e.k0s(),e.EFF(109," to work, you will need to do this after your column definitions:"),e.k0s(),e.j41(110,"pre"),e.nrm(111,"code",4),e.k0s(),e.j41(112,"p",6),e.EFF(113,"("),e.j41(114,"i"),e.EFF(115,"ch"),e.k0s(),e.EFF(116," is a "),e.j41(117,"i"),e.EFF(118,"ColumnHelper"),e.k0s(),e.EFF(119,")"),e.k0s(),e.j41(120,"p",2),e.EFF(121,"In this case, it highlights the entire cell with a border if there is a match to the search."),e.k0s(),e.j41(122,"p",2),e.EFF(123,"Or without using "),e.j41(124,"i"),e.EFF(125,"ColumnHelper"),e.k0s(),e.EFF(126,":"),e.k0s(),e.j41(127,"pre"),e.nrm(128,"code",4),e.k0s()()()()()()),2&a&&(e.R7$(26),e.Y8G("highlight",i.configureCode),e.R7$(4),e.Y8G("highlight",i.baseGridCode),e.R7$(9),e.Y8G("highlight","<GridInlineSearch #gridInlineSearch></GridInlineSearch>"),e.R7$(7),e.Y8G("highlight","@ViewChild('gridInlineSearch', {read: GridInlineSearch}) gridInlineSearch?: GridInlineSearch;"),e.R7$(7),e.Y8G("highlight","constructor (private inlineSearchService: InlineSearchService) {"),e.R7$(7),e.Y8G("highlight",i.proxyCode),e.R7$(21),e.Y8G("highlight","ColumnHelper.wrapCellRendererForInlineSearch(def, gridId, gridSettings);"),e.R7$(6),e.Y8G("highlight",i.manualColumnCode),e.R7$(7),e.Y8G("highlight",i.gridWrappingCode),e.R7$(10),e.Y8G("highlight",i.cssCode),e.R7$(7),e.Y8G("highlight",i.furtherCssCode),e.R7$(17),e.Y8G("highlight",i.furtherCssCodeNoColumnHelper))},dependencies:[d.f4,f.p],encapsulation:2,changeDetection:0})}}return t})();var y=s(1141),E=s(563),n=s(9966);let w=(()=>{class t extends h.PJ{constructor(o){super(),this.cd=o,this.block=!1,this.blockTwo=!1,this.pleaseWaitHtmlCode='<PleaseWait [block]="yourBooleanProperty"></PleaseWait>',this.pwInitCode='import {PleaseWait} from "@six-group/base-angular-framework/controls";\n\nimports: [ PleaseWait, .... ]'}getEventGrid(o){}hookObservables(){}showLoader(){this.block=!0,this.cd.markForCheck(),this.cd.detectChanges(),setTimeout(()=>{this.block=!1,this.cd.markForCheck(),this.cd.detectChanges()},5e3)}showLoaderTwo(){this.blockTwo=!0,this.cd.markForCheck(),this.cd.detectChanges(),setTimeout(()=>{this.blockTwo=!1,this.cd.markForCheck(),this.cd.detectChanges()},5e3)}ngOnInit(){super.ngOnInit()}ngAfterViewInit(){super.ngAfterViewInit()}ngOnDestroy(){super.ngOnDestroy()}static{this.\u0275fac=function(a){return new(a||t)(e.rXU(e.gRc))}}static{this.\u0275cmp=e.VBU({type:t,selectors:[["PleaseWaitView"]],features:[e.Jv_([]),e.Vt3],decls:51,vars:4,consts:[[1,"documentParent"],[1,"document"],[1,"description"],["pButton","","pRipple","",3,"click"],[2,"width","600px","height","200px","border","2px solid black","position","relative","display","flex"],[2,"width","100%","height","100%","text-align","center","align-content","center","align-items","center","justify-content","center"],[3,"block"],["language","ts",3,"highlight"],["language","html",3,"highlight"]],template:function(a,i){1&a&&(e.j41(0,"div",0)(1,"div",1)(2,"h1"),e.EFF(3,"Please Wait"),e.k0s(),e.j41(4,"p",2),e.EFF(5,"This control is a simple blocking control that can be used for blocking the UI while something is loading. It displays an animated block of squares in the middle of the screen."),e.k0s(),e.j41(6,"h2"),e.EFF(7,"Demo"),e.k0s(),e.j41(8,"h3"),e.EFF(9,"Global"),e.k0s(),e.j41(10,"p",2),e.EFF(11,"To show the loader, press the button. The loader will automatically turn off after 5 seconds."),e.k0s(),e.j41(12,"p",2)(13,"button",3),e.bIt("click",function(){return i.showLoader()}),e.EFF(14,"Show Global Blocker"),e.k0s()(),e.j41(15,"h3"),e.EFF(16,"Local"),e.k0s(),e.j41(17,"p",2),e.EFF(18,"To show the loader, press the button. The loader will automatically turn off after 5 seconds."),e.k0s(),e.j41(19,"p",2)(20,"button",3),e.bIt("click",function(){return i.showLoaderTwo()}),e.EFF(21,"Show Local Blocker"),e.k0s()(),e.j41(22,"div",4)(23,"div",5),e.EFF(24,"This area will be blocked for 5 seconds."),e.k0s(),e.nrm(25,"PleaseWait",6),e.k0s(),e.j41(26,"h2"),e.EFF(27,"Setup"),e.k0s(),e.j41(28,"p",2),e.EFF(29,"Import the control it into your module as follows: "),e.k0s(),e.j41(30,"pre"),e.nrm(31,"code",7),e.k0s(),e.j41(32,"p",2),e.EFF(33,"In your HTML then place this where you want the blocker to live:"),e.k0s(),e.j41(34,"pre"),e.nrm(35,"code",8),e.k0s(),e.j41(36,"h3"),e.EFF(37,"Global"),e.k0s(),e.j41(38,"p",2),e.EFF(39,"It all depends where you place the control. If you just put it in an outer tag somewhere and don't control it with "),e.j41(40,"i"),e.EFF(41,'style="position: relative"'),e.k0s(),e.EFF(42," it will by default block as much as it possibly can."),e.k0s(),e.j41(43,"h3"),e.EFF(44,"Local"),e.k0s(),e.j41(45,"p",2),e.EFF(46,"First, put the HTML code at the bottom of the root tag where it should block. Then make sure the parent element is set to "),e.j41(47,"i"),e.EFF(48,'style="position: relative"'),e.k0s(),e.EFF(49," it will by default block as much as it possibly can."),e.k0s()()(),e.nrm(50,"PleaseWait",6)),2&a&&(e.R7$(25),e.Y8G("block",i.blockTwo),e.R7$(6),e.Y8G("highlight",i.pwInitCode),e.R7$(4),e.Y8G("highlight",i.pleaseWaitHtmlCode),e.R7$(15),e.Y8G("block",i.block))},dependencies:[d.f4,y._f,E.n,n.iX],encapsulation:2,changeDetection:0})}}return t})();const j=["tb"],S=["tbTwo"];function v(t,r){if(1&t&&(e.j41(0,"tr")(1,"td")(2,"span",15),e.EFF(3),e.j41(4,"a",16),e.nrm(5,"i",17),e.k0s()()(),e.j41(6,"td")(7,"span",18)(8,"pre"),e.nrm(9,"code",6),e.k0s()()(),e.j41(10,"td")(11,"span",19),e.EFF(12),e.k0s()(),e.nrm(13,"td")(14,"td")(15,"td"),e.k0s()),2&t){const o=r.$implicit;e.R7$(3),e.JRh(o.name),e.R7$(6),e.Y8G("highlight",o.example),e.R7$(3),e.JRh(o.description)}}function C(t,r){if(1&t&&(e.j41(0,"tr")(1,"td")(2,"span",15),e.EFF(3),e.j41(4,"a",16),e.nrm(5,"i",17),e.k0s()()(),e.j41(6,"td")(7,"span",18)(8,"pre"),e.nrm(9,"code",6),e.k0s()()(),e.j41(10,"td")(11,"span",19),e.EFF(12),e.k0s()(),e.j41(13,"td")(14,"span",18)(15,"pre"),e.nrm(16,"code",6),e.k0s()()(),e.nrm(17,"td")(18,"td"),e.k0s()),2&t){const o=r.$implicit;e.R7$(3),e.JRh(o.name),e.R7$(6),e.Y8G("highlight",o.method),e.R7$(3),e.JRh(o.description),e.R7$(4),e.Y8G("highlight",o.event)}}let T=(()=>{class t extends h.PJ{constructor(o){super(),this.cd=o,this.toolBar=void 0,this.toolBarTwo=void 0,this.importCode='import {CompactToolbarModule, Toolbar} from "@six-group/base-angular-framework/controls";',this.menuCode="let opts = [\n ['btnTcolsSave', 'obj', 'Save Column Layout', 'fa-save'],\n ['btnTcolsRestore', 'obj', 'Load Column Layout', 'fa-restore'],\n ['btnTcolsSep', 'sep', null, null],\n ['btnTcolsClear', 'obj', 'Clear Saved Column Layout', 'fa-clear'],\n ['btnTcolsSep', 'sep', null, null],\n ['btnTcolsReset', 'obj', 'Reset Column Layout', 'fa-reset'],\n];\ntoolbar.addButtonSelect(\"tableColumns\", \"Table Column Options\", 'fa-gear', 'fa-gear', opts);\n\ntoolbar.onClick.subscribe((id) => {\n switch (id) {\n case 'btnTcolsSave':\n\n...\n",this.toolbarData=[{name:"Add basic button",method:"addButton(...)",description:"A single state button",event:"onClick"},{name:"Add select button",method:"addButtonSelect(...)",description:"A button that can have a menu",event:"onClick"},{name:"Add toggle button",method:"addButtonSelect(...)",description:"A two state button that is either selected or not",event:"onStateChanged"},{name:"Add combo box/dropdown control",method:"addCombo(...)",description:"A dropdown that contains items",event:"onSelectionChanged"},{name:"Add a vertical separator",method:"addSeparator()",description:"A vertical separator that looks like a line",event:"n/a"},{name:"Add a label",method:"addLabel(...)",description:"A label with text in it",event:"n/a"},{name:"Add a spacer",method:"addSpacer(...)",description:"A spacer that pushes everything to the right that is created after it",event:"n/a"},{name:"Add input",method:"addInput(...)",description:"A text input field",event:"onEnterPressed"},{name:"Add number only input",method:"addNumberOnlyInput(...)",description:"A text input field that only allows numbers",event:"onEnterPressed"},{name:"Add many",method:"addMany(...)",description:"Adds many buttons at once",event:"onEnterPressed"},{name:"Set toggle state",method:"setToggleState(...)",description:"Sets the toggle state on a button",event:"onStateChanged"},{name:"Checks toggle state",method:"isToggled(...)",description:"Returns the toggle state of a toggle button",event:"n/a"},{name:"Gets a button",method:"getButton(...)",description:"Returns an already created button",event:"n/a"},{name:"Gets a combo",method:"getCombo(...)",description:"Returns an already created combo",event:"n/a"},{name:"Sets label text",method:"setLabelText(...)",description:"Changes label text on an already created label",event:"n/a"},{name:"Clears combo items",method:"clearComboItems(...)",description:"Clears out all combo items on an already created combo",event:"n/a"},{name:"Checks if an item is enabled",method:"isEnabled(...)",description:"Returns enabled state of a toolbar item",event:"n/a"},{name:"Gets input value",method:"getInputValue(...)",description:"Returns text in an input field",event:"n/a"},{name:"Disables all items",method:"disableAll(...)",description:"Disables every item in the toolbar",event:"n/a"},{name:"Enables all items",method:"enableAll(...)",description:"Enables every item in the toolbar",event:"n/a"},{name:"Disables one item",method:"disableItem(...)",description:"Disables one item in the toolbar",event:"n/a"},{name:"Enables one item",method:"enableItem(...)",description:"Enables one item in the toolbar",event:"n/a"},{name:"Disables many items",method:"disableItems(...)",description:"Disables many item in the toolbar",event:"n/a"},{name:"Enables many items",method:"enableItems(...)",description:"Enables many item in the toolbar",event:"n/a"},{name:"Hide popup menus",method:"hideAnyActiveMenuPopup()",description:"Hides any open popup menu",event:"n/a"}],this.eventData=[{name:"Button Clicks",example:"onClick.subscribe((id) => {",description:"Fires when a user clicks a button"},{name:"Enter pressed",example:"onEnterPressed((id) => {",description:"When enter is pressed in a text field"},{name:"Menu Selection",example:"onSelectionChanged((id) => {",description:"When a menu item is selected"},{name:"State Change",example:"onStateChange((id) => {",description:"When a toggle button changes state\t"}],this.toolbarInitCodeTwo="<Toolbar [id]=\"getGridId() + 'GridToolbar'\" #tb></Toolbar>",this.toolbarInitCodeThree="@ViewChild('tb') toolBar: Toolbar | undefined = undefined;\nprivate tb?: ToolbarHelper;",this.toolbarInitCode='let toolbarSettings = new ToolbarSettings();\ntoolbarSettings.treatImagesAsWebFonts = true;\ntoolbarSettings.subMenuImage = "pi pi-arrow-right";\ntoolbarSettings.enablePopupOverflow = true;\ntoolbarSettings.useBootstrapTooltips = false;\ntoolbarSettings.useTippyTooltips = true;\ntoolbarSettings.webFontPrepend = "";\ntoolbarSettings.defaultToolbarHeight = 34;\nToolbar.GLOBAL_TOOLBAR_SETTINGS = toolbarSettings;',this.tippyCode='"tippy.js": "6.3.7",',this.tippyCodeTwo='"styles": [\n "node_modules/tippy.js/dist/tippy.css",\n "node_modules/tippy.js/themes/light-border.css",\n ...\n ',this.toolbarOutput="",n.M7.GLOBAL_TOOLBAR_SETTINGS={treatImagesAsWebFonts:!0,getOverflowCss:()=>"overflow",defaultToolbarHeight:34,enablePopupOverflow:!0,useBootstrapTooltips:!1,useTippyTooltips:!0,webFontPrepend:"",subMenuImage:"pi pi-arrow-right"}}getEventGrid(o){}hookObservables(){}ngOnInit(){super.ngOnInit()}ngAfterViewInit(){super.ngAfterViewInit();try{this.initToolbar(),this.initToolbarTwo()}catch(o){console.error(o)}}initToolbar(){this.tb=new n.yO(this.toolBar),this.tb.addButton("one","Test Button","pi pi-bolt","pi pi-bolt"),this.tb.addButtonTwoState("two","Test Button Two","pi pi-android","pi pi-android"),this.tb.addSeparator(),this.tb.addInput("three",100,"Hi! I'm a text box"),this.tb.addLabel("four","I'm a label"),this.tb.addSeparator(),this.tb.addCombo("five",["one","two","three"],null,o=>o,o=>{},100),this.tb.addSeparator(),this.toolBar.addButtonSelect("six","Test 123","pi pi-cloud","pi pi-cloud",[["subItemOne",n.M7.MENU_TYPE_OBJECT,"I am submenu one","pi pi-chart-scatter"],["subSep",n.M7.MENU_TYPE_SEPARATOR,null,null],["subItemTwo",n.M7.MENU_TYPE_OBJECT,"I am submenu two","pi pi-chart-pie"]]),this.toolBar.onClick.subscribe(o=>{this.toolbarOutput="Button "+o+" Clicked",this.cd.markForCheck()}),this.toolBar.onEnterPressed.subscribe(o=>{this.toolbarOutput=o.id+" - Text changed: "+o.enteredText,this.cd.markForCheck()}),this.toolBar.onSelectionChanged.subscribe(o=>{this.toolbarOutput="Selection changed: "+o,this.cd.markForCheck()}),this.toolBar.onStateChanged.subscribe(o=>{this.toolbarOutput="State changed: "+o+", toggled: "+this.toolBar.isToggled(o),this.cd.markForCheck()}),this.cd.markForCheck(),this.cd.detectChanges()}initToolbarTwo(){this.tbTwo=new n.yO(this.toolBarTwo),this.tbTwo.addButton("one","Test Button","pi pi-bolt","pi pi-bolt"),this.tbTwo.addButtonTwoState("two","Test Button Two","pi pi-android","pi pi-android"),this.tbTwo.addSeparator(),this.tbTwo.addInput("three",100,"Hi! I'm a text box"),this.tbTwo.addSeparator(),this.tbTwo.addLabel("four","I'm a label"),this.tbTwo.addSeparator(),this.tbTwo.addCombo("five",["one","two","three"],null,o=>o,o=>{},100),this.tbTwo.addSeparator(),this.toolBarTwo.addButtonSelect("six","Test 123","pi pi-cloud","pi pi-cloud",[["sub1","obj","I am submenu one","pi pi-chart-scatter"],["sub2","sep",null,null],["sub3","obj","I am submenu two","pi pi-chart-pie"]]),this.cd.markForCheck(),this.cd.detectChanges()}ngOnDestroy(){super.ngOnDestroy()}static{this.\u0275fac=function(a){return new(a||t)(e.rXU(e.gRc))}}static{this.\u0275cmp=e.VBU({type:t,selectors:[["ToolbarView"]],viewQuery:function(a,i){if(1&a&&(e.GBs(j,5),e.GBs(S,5)),2&a){let l;e.mGM(l=e.lsd())&&(i.toolBar=l.first),e.mGM(l=e.lsd())&&(i.toolBarTwo=l.first)}},features:[e.Jv_([]),e.Vt3],decls:172,vars:12,consts:[["tb",""],["tbTwo",""],[1,"documentParent"],[1,"document"],[1,"description"],["src","./assets/screenshots/toolbar.png",1,"screenshot"],["language","ts",3,"highlight"],["id","demoToolbar"],[2,"max-width","130px","height","60px"],["id","demoToolbar2"],["href","https://gitlab.six-group.net/six/angbase/base/-/blob/main/src/app/components/controls/src/toolbar/ToolbarSettings.ts","target","_new"],["language","html",3,"highlight"],[1,"doc-table"],[4,"ngFor","ngForOf"],["href","https://atomiks.github.io/tippyjs/","target","_new"],["id","api.menu.props.model",1,"doc-option-name"],[1,"doc-option-link"],[1,"pi","pi-link"],[1,"doc-option-type"],["id","api.menu.props.description",1,"doc-option-description"]],template:function(a,i){1&a&&(e.j41(0,"div",2)(1,"div",3)(2,"h1"),e.EFF(3,"Toolbar"),e.k0s(),e.j41(4,"p",4),e.EFF(5,"The "),e.j41(6,"i"),e.EFF(7,"Toolbar"),e.k0s(),e.EFF(8," control mimics how fat client toolbars look and function. It comes with many different button and input types and hooks together with the "),e.j41(9,"i"),e.EFF(10,"AgGrid"),e.k0s(),e.EFF(11," context menu if used together with the "),e.j41(12,"i"),e.EFF(13,"ContextMenuHelper"),e.k0s(),e.EFF(14,", where you only need to enable/disable toolbar buttons for the same menu actions to be enabled/disabled in the context menu at the same time."),e.k0s(),e.nrm(15,"img",5),e.j41(16,"h2"),e.EFF(17,"Setup"),e.k0s(),e.j41(18,"p",4),e.EFF(19,"The "),e.j41(20,"i"),e.EFF(21,"Toolbar"),e.k0s(),e.EFF(22," control is contained in the "),e.j41(23,"i"),e.EFF(24,"CompactToolbarModule"),e.k0s(),e.EFF(25,". It was named as such to not cause conflicts with all the other existing toolbar modules that sometimes exist in 3rd party libraries. Import it into your module as follows: "),e.k0s(),e.j41(26,"pre"),e.nrm(27,"code",6),e.k0s(),e.j41(28,"h2"),e.EFF(29,"Demo"),e.k0s(),e.nrm(30,"Toolbar",7,0),e.j41(32,"p",4),e.EFF(33),e.k0s(),e.j41(34,"h2"),e.EFF(35,"Overflow Demo"),e.k0s(),e.j41(36,"p",4),e.EFF(37,"If the toolbar runs out of horizontal space, it will either show a scrollbar (if you've set "),e.j41(38,"i"),e.EFF(39,"toolbarSettings.enablePopupOverflow = false"),e.k0s(),e.EFF(40,"), or a popup icon on the far right will appear (if you've set "),e.j41(41,"i"),e.EFF(42,"toolbarSettings.enablePopupOverflow = true"),e.k0s(),e.EFF(43,") showing the items that do not fit in the toolbar."),e.k0s(),e.j41(44,"div",8),e.nrm(45,"Toolbar",9,1),e.k0s(),e.j41(47,"h2"),e.EFF(48,"ToolbarSettings"),e.k0s(),e.j41(49,"p",4),e.EFF(50,"To configure the general properties of the toolbar, you will need to set up a ToolbarSettings class object that holds all your settings. It's suggested to put this somewhere easily accessible in a Global property somewhere in your application."),e.k0s(),e.j41(51,"p",4),e.EFF(52,"Here's an example setup:"),e.k0s(),e.j41(53,"pre"),e.nrm(54,"code",6),e.k0s(),e.j41(55,"p",4),e.EFF(56,"All options can be found in the API "),e.j41(57,"a",10),e.EFF(58,"here"),e.k0s(),e.EFF(59,", each one is documented."),e.k0s(),e.j41(60,"p",4),e.EFF(61,"Due to the complexity of a toolbar, you will not be setting it up in pure HTML, but rather will reference it from your HTML for setup in code. Here is an example:"),e.k0s(),e.j41(62,"pre"),e.nrm(63,"code",11),e.k0s(),e.j41(64,"p",4),e.EFF(65,"Please note that the toolbar must have an ID set on it."),e.k0s(),e.j41(66,"p",4),e.EFF(67,"The toolbar is then imported with a ViewChild so that it can be configured. We also create a reference to the "),e.j41(68,"i"),e.EFF(69,"ToolbarHelper"),e.k0s(),e.EFF(70," in this example"),e.k0s(),e.j41(71,"pre"),e.nrm(72,"code",6),e.k0s(),e.j41(73,"h2"),e.EFF(74,"Event Listeners"),e.k0s(),e.j41(75,"p",4),e.EFF(76,"There are multiple event listeners available."),e.k0s(),e.j41(77,"table",12)(78,"thead")(79,"tr")(80,"th"),e.EFF(81," name"),e.k0s(),e.j41(82,"th"),e.EFF(83," example"),e.k0s(),e.j41(84,"th"),e.EFF(85," description"),e.k0s(),e.nrm(86,"th")(87,"th")(88,"th"),e.k0s()(),e.j41(89,"tbody"),e.DNE(90,v,16,3,"tr",13),e.k0s()(),e.j41(91,"h2"),e.EFF(92,"Creating and Accessing Toolbar Items"),e.k0s(),e.j41(93,"p",4),e.EFF(94,"Here is a basic list of available items and methods that can be used to add and manipulate items on the toolbar. For full API please see the API documentation "),e.j41(95,"a",10),e.EFF(96,"here"),e.k0s()(),e.j41(97,"table",12)(98,"thead")(99,"tr")(100,"th"),e.EFF(101," name"),e.k0s(),e.j41(102,"th"),e.EFF(103," method"),e.k0s(),e.j41(104,"th"),e.EFF(105," description"),e.k0s(),e.j41(106,"th"),e.EFF(107," related event"),e.k0s(),e.nrm(108,"th")(109,"th"),e.k0s()(),e.j41(110,"tbody"),e.DNE(111,C,19,4,"tr",13),e.k0s()(),e.j41(112,"h2"),e.EFF(113,"Submenus"),e.k0s(),e.j41(114,"p",4),e.EFF(115,"Submenus are passed in as a list of items for the controls that allow menus."),e.k0s(),e.j41(116,"p",4),e.EFF(117,"Example:"),e.k0s(),e.j41(118,"pre"),e.nrm(119,"code",6),e.k0s(),e.j41(120,"h2"),e.EFF(121,"Real Images or Web Fonts"),e.k0s(),e.j41(122,"p",4),e.EFF(123,"As shown at the top, "),e.j41(124,"i"),e.EFF(125,"toolbarSettings.treatImagesAsWebFonts = true;"),e.k0s(),e.EFF(126," tells the toolbar that every "),e.j41(127,"i"),e.EFF(128,"image"),e.k0s(),e.EFF(129," passed to it via parameters will be treated as a web font. If instead you set it to false, you define the base path to where your toolbar images are via "),e.j41(130,"i"),e.EFF(131,'toolbarSettings.imagePath = "assets/images/toolbar/";'),e.k0s(),e.EFF(132," and then pass in images in the parameters relative to that path, for example "),e.j41(133,"i"),e.EFF(134,'someMethod(..., ..., "image_enabled.png", "image_disabled.png)'),e.k0s()(),e.j41(135,"p",4),e.EFF(136,"You can also set up "),e.j41(137,"i"),e.EFF(138,"webFontPrepend"),e.k0s(),e.EFF(139," to include any css classes that every web font should have in front, for example:"),e.k0s(),e.j41(140,"pre"),e.nrm(141,"code",6),e.k0s(),e.j41(142,"h2"),e.EFF(143,"Tippy Tooltips"),e.k0s(),e.j41(144,"p",4),e.EFF(145,"The "),e.j41(146,"i"),e.EFF(147,"Tooltip"),e.k0s(),e.EFF(148," controls supports tooltips using "),e.j41(149,"a",14),e.EFF(150,"TippyJS"),e.k0s(),e.EFF(151,". To use them you need to add Tippy as a dependency in your "),e.j41(152,"i"),e.EFF(153,"package.json"),e.k0s(),e.EFF(154,":"),e.k0s(),e.j41(155,"pre"),e.nrm(156,"code",6),e.k0s(),e.j41(157,"p",4),e.EFF(158,"Ensure "),e.j41(159,"i"),e.EFF(160,"angular.json"),e.k0s(),e.EFF(161," has the scripts set up for Tippy:"),e.k0s(),e.j41(162,"pre"),e.nrm(163,"code",6),e.k0s(),e.j41(164,"p",4),e.EFF(165,"Then enable Tippy tooltips in the "),e.j41(166,"i"),e.EFF(167,"ToolbarSettings"),e.k0s(),e.EFF(168,":"),e.k0s(),e.j41(169,"pre"),e.nrm(170,"code",6),e.k0s(),e.nrm(171,"p",4),e.k0s()()),2&a&&(e.R7$(27),e.Y8G("highlight",i.toolbarInitCode),e.R7$(6),e.SpI("Result: ",i.toolbarOutput,""),e.R7$(21),e.Y8G("highlight",i.toolbarInitCode),e.R7$(9),e.Y8G("highlight",i.toolbarInitCodeTwo),e.R7$(9),e.Y8G("highlight",i.toolbarInitCodeThree),e.R7$(18),e.Y8G("ngForOf",i.eventData),e.R7$(21),e.Y8G("ngForOf",i.toolbarData),e.R7$(8),e.Y8G("highlight",i.menuCode),e.R7$(22),e.Y8G("highlight","toolbarSettings.webFontPrepend = fas"),e.R7$(15),e.Y8G("highlight",i.tippyCode),e.R7$(7),e.Y8G("highlight",i.tippyCodeTwo),e.R7$(7),e.Y8G("highlight","toolbarSettings.useTippyTooltips = true;"))},dependencies:[F.Sq,d.f4,n.M7],encapsulation:2,changeDetection:0})}}return t})();var p=s(4945);function I(t,r){1&t&&e.EFF(0," I am in the #header area ")}function x(t,r){1&t&&(e.j41(0,"div",26),e.EFF(1,"I'm in the #toolbar area"),e.k0s())}function G(t,r){1&t&&(e.j41(0,"div",27),e.EFF(1," Hi! I'm #body "),e.k0s())}function R(t,r){1&t&&(e.j41(0,"div",26),e.EFF(1,"I'm in the #footer area"),e.k0s())}function L(t,r){1&t&&(e.j41(0,"div",27),e.EFF(1," How are you? "),e.k0s())}function A(t,r){1&t&&(e.j41(0,"div",27),e.EFF(1," I'm good, thanks! "),e.k0s())}function V(t,r){1&t&&e.EFF(0," I am in the #header area ")}function B(t,r){1&t&&(e.j41(0,"div",11),e.EFF(1,"I'm in the #toolbar area"),e.k0s())}function $(t,r){1&t&&(e.j41(0,"div",12),e.EFF(1," Hi! I'm #body "),e.k0s())}function O(t,r){1&t&&(e.j41(0,"div",11),e.EFF(1,"I'm in the #footer area"),e.k0s())}const Y=b.iI.forChild([{path:"inlinesearch",component:k},{path:"splitlayout",component:(()=>{class t extends h.PJ{constructor(){super(),this.importCode='import {SplitLayoutModule} from "@six-group/base-angular-framework/controls";\n...\nimports: [ SplitLayoutModule, ... ]',this.cssCode=".slcArrows {\n background-image: url('/assets/images/layout/dhxlayout_cell_btns2_dark.png');\n}\n\n.slcArrows:hover {\n background-image: url('/assets/images/layout/dhxlayout_cell_btns_hover2.png');\n}\n\n.slcMaxMin {\n background-image: url('/assets/images/layout/dhxlayout_max_min2_dark.png');\n}\n\n.slcMaxMin:hover {\n background-image: url('/assets/images/layout/dhxlayout_max_min_hover2.png');\n}",this.maximizedCode='<div id="maximizedArea" style="width: 100%; height: 100%; position: relative; z-index: 1; display: none"></div>',this.innerCode='<as-split-area [size]="\'*\'" [maximizable]="false" [collapsible]="false">',this.rootCode='<as-split direction="vertical" [disabled]="false" [unit]="\'pixel\'" [gutterSize]="11">\n</as-split>',this.layoutCode='<div style="width: 100%; height: 600px; border: 2px solid green; position: relative">\n <as-split direction="horizontal" [disabled]="false" [unit]="\'percent\'" [gutterSize]="11">\n <as-split-area [size]="\'50%\'" [maximizable]="true" [collapsible]="true">\n <SplitLayoutContainer [header]="header" [body]="body" [toolbar]="toolbar" [footer]="footer" headerName="Left Side">\n <ng-template #header>\n I am in the #header area\n </ng-template>\n <ng-template #toolbar>\n <div style="display: flex; align-items: center; background: black; color: white; height: 30px; padding-left: 10px">I\'m in the #toolbar area</div>\n </ng-template>\n <ng-template #body>\n <div style="padding: 10px">\n Hi! I\'m #body\n </div>\n </ng-template>\n <ng-template #footer>\n <div style="display: flex; align-items: center; background: black; color: white; height: 30px; padding-left: 10px">I\'m in the #footer area</div>\n </ng-template>\n </SplitLayoutContainer>\n </as-split-area>\n <as-split-area [size]="\'50%\'" [maximizable]="true" [collapsible]="true">\n <as-split direction="vertical" [disabled]="false" [unit]="\'percent\'" [gutterSize]="11">\n <as-split-area [size]="\'50%\'" [maximizable]="true" [collapsible]="true">\n <SplitLayoutContainer [body]="bodytwo" headerName="Right Side">\n <ng-template #bodytwo>\n <div style="padding: 10px">\n How are you?\n </div>\n </ng-template>\n </SplitLayoutContainer>\n </as-split-area>\n <as-split-area [size]="\'50%\'" [maximizable]="true" [collapsible]="true">\n <SplitLayoutContainer [body]="bodythree" headerName="Bottom Right Side">\n <ng-template #bodythree>\n <div style="padding: 10px">\n I\'m good, thanks!\n </div>\n </ng-template>\n </SplitLayoutContainer>\n </as-split-area>\n </as-split>\n </as-split-area>\n </as-split>\n</div>'}getEventGrid(o){}hookObservables(){}ngOnInit(){super.ngOnInit()}ngAfterViewInit(){super.ngAfterViewInit()}ngOnDestroy(){super.ngOnDestroy()}static{this.\u0275fac=function(a){return new(a||t)}}static{this.\u0275cmp=e.VBU({type:t,selectors:[["SplitLayoutView"]],features:[e.Jv_([]),e.Vt3],decls:102,vars:30,consts:[["header",""],["toolbar",""],["body",""],["footer",""],["bodytwo",""],["bodythree",""],[1,"documentParent"],[1,"document"],[1,"description"],["href","https://angular-split.github.io/","target","_new"],["src","./assets/screenshots/splitlayout.jpg",1,"screenshot",2,"width","1000px"],["header","Result"],[2,"width","100%","height","600px","border","2px solid green","position","relative"],["direction","horizontal",3,"disabled","unit","gutterSize"],[3,"size","maximizable","collapsible"],["headerName","Left Side",3,"header","body","toolbar","footer"],["direction","vertical",3,"disabled","unit","gutterSize"],["headerName","Right Side",3,"body"],["headerName","Bottom Right Side",3,"body"],["header","Code"],["language","html",3,"highlight"],["language","ts",3,"highlight"],["href","","target","_new"],["href","https://angular-split.github.io/documentation","target","_new"],["language","scss",3,"highlight"],["href","./assets/layout_images.zip"],[2,"display","flex","align-items","center","background","black","color","white","height","30px","padding-left","10px"],[2,"padding","10px"]],template:function(a,i){if(1&a&&(e.j41(0,"div",6)(1,"div",7)(2,"h1"),e.EFF(3,"Split Layout View"),e.k0s(),e.j41(4,"p",8),e.EFF(5,'The split layout control is a further extended version of the "Angular Split" control to cover needs that the original doesn\'t have. This original control can be found '),e.j41(6,"a",9),e.EFF(7,"here"),e.k0s(),e.EFF(8,"."),e.k0s(),e.j41(9,"p",8),e.EFF(10,"It allows you to have any number of nested, resizable sections on a page, that can also be minimized and maximized (full screen overlay).:"),e.k0s(),e.nrm(11,"img",10),e.j41(12,"h2"),e.EFF(13,"Demo"),e.k0s(),e.j41(14,"p",8),e.EFF(15,"Here is a rather crude example of how the split layout works. The main view is split horizontally in 2, and the right side of that is split vertically in 2."),e.k0s(),e.j41(16,"p",8),e.EFF(17,"Each section is also using the "),e.j41(18,"i"),e.EFF(19,"SplitLayoutContainer"),e.k0s(),e.EFF(20," as a content holder, which has support for header, body, toolbar, and footer."),e.k0s(),e.j41(21,"p-tabView")(22,"p-tabPanel",11)(23,"div",12)(24,"as-split",13)(25,"as-split-area",14)(26,"SplitLayoutContainer",15),e.DNE(27,I,1,0,"ng-template",null,0,e.C5r)(29,x,2,0,"ng-template",null,1,e.C5r)(31,G,2,0,"ng-template",null,2,e.C5r)(33,R,2,0,"ng-template",null,3,e.C5r),e.k0s()(),e.j41(35,"as-split-area",14)(36,"as-split",16)(37,"as-split-area",14)(38,"SplitLayoutContainer",17),e.DNE(39,L,2,0,"ng-template",null,4,e.C5r),e.k0s()(),e.j41(41,"as-split-area",14)(42,"SplitLayoutContainer",18),e.DNE(43,A,2,0,"ng-template",null,5,e.C5r),e.k0s()()()()()()(),e.j41(45,"p-tabPanel",19)(46,"pre"),e.nrm(47,"code",20),e.k0s()()(),e.nrm(48,"p"),e.j41(49,"h2"),e.EFF(50,"Setup"),e.k0s(),e.j41(51,"p",8),e.EFF(52,"In your imports section of your module, define the usage of the SplitLayoutModule:"),e.k0s(),e.j41(53,"pre"),e.nrm(54,"code",21),e.k0s(),e.j41(55,"p",8),e.EFF(56,"Now you can use it. In your HTML. The root tags look like this."),e.k0s(),e.j41(57,"pre"),e.nrm(58,"code",21),e.k0s(),e.j41(59,"p",8),e.EFF(60,"For property options, please see the full documentation "),e.j41(61,"a",22),e.EFF(62,"here"),e.k0s(),e.EFF(63,". Any properties that are not part of the existing control will be documented in "),e.j41(64,"a",23),e.EFF(65,"here"),e.k0s(),e.EFF(66,"."),e.k0s(),e.j41(67,"p",8),e.EFF(68,"After defining the root, inside you define the split sections with:"),e.k0s(),e.j41(69,"pre"),e.nrm(70,"code",20),e.k0s(),e.j41(71,"h2"),e.EFF(72,"Defining the maximized view location"),e.k0s(),e.j41(73,"p",8),e.EFF(74,"The maximized view location is up to you. The ID for the tag by default is "),e.j41(75,"i"),e.EFF(76,"maximizedArea"),e.k0s(),e.EFF(77," and is usually defined like this:"),e.k0s(),e.j41(78,"pre"),e.nrm(79,"code",20),e.k0s(),e.j41(80,"p",8),e.EFF(81,"To override the tag name, you can set it with"),e.j41(82,"i"),e.EFF(83,"[maximizedDivId]=\"'thisNameIsBetter'\""),e.k0s(),e.EFF(84," in the "),e.j41(85,"i"),e.EFF(86,"as-split"),e.k0s(),e.EFF(87," tag as a property."),e.k0s(),e.j41(88,"h2"),e.EFF(89,"Defining the CSS for the images"),e.k0s(),e.j41(90,"p",8),e.EFF(91,"To override/setup the default image path and CSS, use the following:"),e.k0s(),e.j41(92,"pre"),e.nrm(93,"code",24),e.k0s(),e.j41(94,"h2"),e.EFF(95,"Images"),e.k0s(),e.j41(96,"p",8),e.EFF(97,"To download the images used in this demo, including a few extra in different colors, you can grab them "),e.j41(98,"a",25),e.EFF(99,"here"),e.k0s(),e.EFF(100,"."),e.k0s(),e.nrm(101,"p"),e.k0s()()),2&a){const l=e.sdS(28),c=e.sdS(30),u=e.sdS(32),m=e.sdS(34),N=e.sdS(40),J=e.sdS(44);e.R7$(24),e.Y8G("disabled",!1)("unit","percent")("gutterSize",11),e.R7$(),e.Y8G("size","50%")("maximizable",!0)("collapsible",!0),e.R7$(),e.Y8G("header",l)("body",u)("toolbar",c)("footer",m),e.R7$(9),e.Y8G("size","50%")("maximizable",!0)("collapsible",!0),e.R7$(),e.Y8G("disabled",!1)("unit","percent")("gutterSize",11),e.R7$(),e.Y8G("size","50%")("maximizable",!0)("collapsible",!0),e.R7$(),e.Y8G("body",N),e.R7$(3),e.Y8G("size","50%")("maximizable",!0)("collapsible",!0),e.R7$(),e.Y8G("body",J),e.R7$(5),e.Y8G("highlight",i.layoutCode),e.R7$(7),e.Y8G("highlight",i.importCode),e.R7$(4),e.Y8G("highlight",i.rootCode),e.R7$(12),e.Y8G("highlight",i.innerCode),e.R7$(9),e.Y8G("highlight",i.maximizedCode),e.R7$(14),e.Y8G("highlight",i.cssCode)}},dependencies:[d.f4,p.JQ,p.Kp,n.qN,n.FN,n.qU],encapsulation:2,changeDetection:0})}}return t})()},{path:"splitlayoutcontainer",component:(()=>{class t extends h.PJ{constructor(){super(),this.definitionCode='<SplitLayoutContainer [header]="header" [body]="body" [toolbar]="toolbar" [footer]="footer" headerName="I am the container">',this.templateCode='<ng-template #body>\n <div style="padding: 10px">Hi! I\'m #body</div>\n</ng-template>',this.demoCode='<SplitLayoutContainer [header]="header" [body]="body" [toolbar]="toolbar" [footer]="footer" headerName="I am the container">\n <ng-template #header>\n I am in the #header area\n </ng-template>\n <ng-template #toolbar>\n I\'m in the #toolbar area\n </ng-template>\n <ng-template #body>\n Hi! I\'m #body\n </ng-template>\n <ng-template #footer>\n I\'m in the #footer area\n </ng-template>\n</SplitLayoutContainer>'}getEventGrid(o){}hookObservables(){}ngOnInit(){super.ngOnInit()}ngAfterViewInit(){super.ngAfterViewInit()}ngOnDestroy(){super.ngOnDestroy()}static{this.\u0275fac=function(a){return new(a||t)}}static{this.\u0275cmp=e.VBU({type:t,selectors:[["SplitLayoutContainerView"]],features:[e.Jv_([]),e.Vt3],decls:64,vars:9,consts:[["header",""],["toolbar",""],["body",""],["footer",""],[1,"documentParent"],[1,"document"],[1,"description"],[2,"width","100%","height","400px","border","1px solid black","position","relative"],["headerName","I am the container",3,"header","body","toolbar","footer","standalone"],["language","ts",3,"highlight"],[3,"routerLink"],[2,"display","flex","align-items","center","background","black","color","white","height","30px","padding-left","10px"],[2,"padding","10px"]],template:function(a,i){if(1&a&&(e.j41(0,"div",4)(1,"div",5)(2,"h1"),e.EFF(3,"Split Layout Container View"),e.k0s(),e.j41(4,"p",6),e.EFF(5,"The split layout container control is generally considered to be used together with the "),e.j41(6,"i"),e.EFF(7,"SplitLayoutContainer"),e.k0s(),e.EFF(8," control. It essentially allows you to create content in different sections of the control. It also shows expand and collapse and maximize buttons in the header. If you wish to use this control without a split layout parent, please set "),e.j41(9,"i"),e.EFF(10,'[standalone]="true"'),e.k0s(),e.EFF(11,", which will hide functionality related to the split view."),e.k0s(),e.j41(12,"h2"),e.EFF(13,"Demo"),e.k0s(),e.j41(14,"p",6),e.EFF(15,"Here is an example of how the "),e.j41(16,"i"),e.EFF(17,"SplitLayoutContainer"),e.k0s(),e.EFF(18," works, showing each section with a bit of text. If you maximize a view, scroll up to the top to see it (as that's how it's set up for this demo, the location is up to you)"),e.k0s(),e.j41(19,"div",7)(20,"SplitLayoutContainer",8),e.DNE(21,V,1,0,"ng-template",null,0,e.C5r)(23,B,2,0,"ng-template",null,1,e.C5r)(25,$,2,0,"ng-template",null,2,e.C5r)(27,O,2,0,"ng-template",null,3,e.C5r),e.k0s()(),e.nrm(29,"p"),e.j41(30,"h2"),e.EFF(31,"Sections"),e.k0s(),e.j41(32,"p",6),e.EFF(33,"Each section that you wish to use is defined via parameters:"),e.k0s(),e.j41(34,"pre"),e.nrm(35,"code",9),e.k0s(),e.j41(36,"p",6),e.EFF(37,"And each section is then defined inside of the tag with templates:"),e.k0s(),e.j41(38,"pre"),e.nrm(39,"code",9),e.k0s(),e.j41(40,"p",6),e.EFF(41,"Here is an example that essentially makes up the demo above, which defines all sections ("),e.j41(42,"i"),e.EFF(43,"header"),e.k0s(),e.EFF(44,", "),e.j41(45,"i"),e.EFF(46,"body"),e.k0s(),e.EFF(47,", "),e.j41(48,"i"),e.EFF(49,"toolbar"),e.k0s(),e.EFF(50,", "),e.j41(51,"i"),e.EFF(52,"footer"),e.k0s(),e.EFF(53,"):"),e.k0s(),e.j41(54,"pre"),e.nrm(55,"code",9),e.k0s(),e.j41(56,"h2"),e.EFF(57,"Styling and Images"),e.k0s(),e.j41(58,"p",6),e.EFF(59,"See the same documentation for this in the "),e.j41(60,"a",10)(61,"i"),e.EFF(62,"SplitLayoutView"),e.k0s()(),e.EFF(63," control."),e.k0s()()()),2&a){const l=e.sdS(22),c=e.sdS(24),u=e.sdS(26),m=e.sdS(28);e.R7$(20),e.Y8G("header",l)("body",u)("toolbar",c)("footer",m)("standalone",!0),e.R7$(15),e.Y8G("highlight",i.definitionCode),e.R7$(4),e.Y8G("highlight",i.templateCode),e.R7$(16),e.Y8G("highlight",i.demoCode),e.R7$(5),e.Y8G("routerLink","/controls/splitlayout")}},dependencies:[b.Wk,d.f4,n.qU],encapsulation:2,changeDetection:0})}}return t})()},{path:"toolbar",component:T},{path:"pleasewait",component:w}]);var z=s(928),P=s(6160);let H=(()=>{class t extends h.of{destroy(){}handleInitializionError(o){console.error(o)}hookObservables(){}static{this.\u0275fac=(()=>{let o;return function(i){return(o||(o=e.xGo(t)))(i||t)}})()}static{this.\u0275prov=e.jDH({token:t,factory:t.\u0275fac})}}return t})();var M=s(4326);let W=(()=>{class t{static{this.\u0275fac=function(a){return new(a||t)}}static{this.\u0275mod=e.$C({type:t})}static{this.\u0275inj=e.G2t({providers:[H],imports:[F.MD,Y,z.G,P.$V,M.TestGridModule,n.nP,p.fd,n.LB,n.iX]})}}return t})()}}]);