carbon-components-angular 5.40.4 → 5.41.0

package/modal/modal.component.d.ts

@@ -130,7 +130,7 @@ export declare class Modal implements AfterViewInit, OnChanges, OnDestroy {
      * Creates an instance of `Modal`.
      */
     constructor(modalService: BaseModalService, document: Document, renderer: Renderer2);
-    ngOnChanges({ open }: SimpleChanges): void;
+    ngOnChanges({ open, hasScrollingContent }: SimpleChanges): void;
     /**
      * Set document focus to be on the modal component after it is initialized.
      */
@@ -149,6 +149,7 @@ export declare class Modal implements AfterViewInit, OnChanges, OnDestroy {
     get shouldShowScrollbar(): boolean;
     ngOnDestroy(): void;
     protected focusInitialElement(): void;
+    private updateScrollbar;
     static ɵfac: i0.ɵɵFactoryDeclaration<Modal, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<Modal, "cds-modal, ibm-modal", never, { "size": "size"; "theme": "theme"; "ariaLabel": "ariaLabel"; "open": "open"; "trigger": "trigger"; "hasScrollingContent": "hasScrollingContent"; }, { "overlaySelected": "overlaySelected"; "close": "close"; }, never, ["*"], false>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-angular",
-  "version": "5.40.4",
+  "version": "5.41.0",
   "description": "Next generation components",
   "main": "index.js",
   "repository": {

package/search/search.component.d.ts

@@ -39,6 +39,7 @@ export declare class Search implements ControlValueAccessor {
      */
     static searchCount: number;
     get containerClass(): boolean;
+    get fluidSkeletonClass(): boolean;
     /**
      * @deprecated since v5 - Use `cdsLayer` directive instead
      * `light` or `dark` search theme.
@@ -114,6 +115,10 @@ export declare class Search implements ControlValueAccessor {
      * Sets the aria label on the `div` element with the `search` role.
      */
     ariaLabel: string;
+    /**
+     * Experimental: enable fluid state
+     */
+    fluid: boolean;
     /**
      * Emits an event when value is changed.
      */
@@ -186,5 +191,5 @@ export declare class Search implements ControlValueAccessor {
      */
     compositionEnd(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<Search, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Search, "cds-search, ibm-search", never, { "theme": "theme"; "size": "size"; "disabled": "disabled"; "toolbar": "toolbar"; "expandable": "expandable"; "skeleton": "skeleton"; "active": "active"; "tableSearch": "tableSearch"; "name": "name"; "id": "id"; "required": "required"; "value": "value"; "autocomplete": "autocomplete"; "label": "label"; "placeholder": "placeholder"; "clearButtonTitle": "clearButtonTitle"; "searchTitle": "searchTitle"; "ariaLabel": "ariaLabel"; }, { "valueChange": "valueChange"; "open": "open"; "clear": "clear"; "search": "search"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Search, "cds-search, ibm-search", never, { "theme": "theme"; "size": "size"; "disabled": "disabled"; "toolbar": "toolbar"; "expandable": "expandable"; "skeleton": "skeleton"; "active": "active"; "tableSearch": "tableSearch"; "name": "name"; "id": "id"; "required": "required"; "value": "value"; "autocomplete": "autocomplete"; "label": "label"; "placeholder": "placeholder"; "clearButtonTitle": "clearButtonTitle"; "searchTitle": "searchTitle"; "ariaLabel": "ariaLabel"; "fluid": "fluid"; }, { "valueChange": "valueChange"; "open": "open"; "clear": "clear"; "search": "search"; }, never, never, false>;
 }

package/docs/storybook/5868.06f13966.iframe.bundle.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[5868],{"./src/search/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{o:()=>Search,t:()=>SearchModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),search_componentngResource=__webpack_require__("./src/search/search.component.html?ngResource"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),i18n=__webpack_require__("./src/i18n/index.ts");let Search=class Search{constructor(elementRef,i18n){this.elementRef=elementRef,this.i18n=i18n,this.theme="dark",this.size="md",this.disabled=!1,this.toolbar=!1,this.expandable=!1,this.skeleton=!1,this.active=!1,this.tableSearch=!1,this.id=`search-${Search.searchCount}`,this.value="",this.autocomplete="on",this.label=this.i18n.get().SEARCH.LABEL,this.placeholder=this.i18n.get().SEARCH.PLACEHOLDER,this.clearButtonTitle=this.i18n.get().SEARCH.CLEAR_BUTTON,this.searchTitle="",this.valueChange=new core.EventEmitter,this.open=new core.EventEmitter,this.clear=new core.EventEmitter,this.search=new core.EventEmitter,this.isComposing=!1,this.onTouched=()=>{},this.propagateChange=_=>{},Search.searchCount++}get containerClass(){return!(this.toolbar||this.expandable)}writeValue(value){this.value=value}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouched=fn}onSearch(search){this.isComposing||(this.value=search,this.doValueChange())}onEnter(){this.search.emit(this.value)}clearSearch(){this.value="",this.clear.emit(),this.propagateChange(this.value)}doValueChange(){this.valueChange.emit(this.value),this.propagateChange(this.value)}openSearch(){this.active=!0,this.open.emit(this.active),setTimeout((()=>this.inputRef.nativeElement.focus()))}keyDown(event){(this.toolbar||this.expandable)&&("Escape"===event.key?""===this.value&&(this.active=!1,this.open.emit(this.active)):"Enter"===event.key&&this.openSearch()),"Escape"===event.key&&""!==this.value&&this.clearSearch()}focusOut(event){this.onTouched(),(this.expandable||this.toolbar)&&this.inputRef&&""===this.inputRef.nativeElement.value&&!this.elementRef.nativeElement.contains(event.relatedTarget)&&(this.active=!1,this.open.emit(this.active))}focusIn(event){this.onTouched(),!this.expandable&&!this.toolbar||!this.inputRef||event.relatedTarget||this.elementRef.nativeElement.contains(event.relatedTarget)||this.openSearch()}compositionStart(event){this.isComposing=!0}compositionEnd(event){this.isComposing=!1,this.onSearch(this.value+event.data)}};Search.searchCount=0,Search.ctorParameters=()=>[{type:core.ElementRef},{type:i18n.oc}],Search.propDecorators={containerClass:[{type:core.HostBinding,args:["class.cds--form-item"]}],theme:[{type:core.Input}],size:[{type:core.Input}],disabled:[{type:core.Input}],toolbar:[{type:core.Input}],expandable:[{type:core.Input}],skeleton:[{type:core.Input}],active:[{type:core.Input}],tableSearch:[{type:core.Input}],name:[{type:core.Input}],id:[{type:core.Input}],required:[{type:core.Input}],value:[{type:core.Input}],autocomplete:[{type:core.Input}],label:[{type:core.Input}],placeholder:[{type:core.Input}],clearButtonTitle:[{type:core.Input}],searchTitle:[{type:core.Input}],ariaLabel:[{type:core.Input}],valueChange:[{type:core.Output}],open:[{type:core.Output}],clear:[{type:core.Output}],search:[{type:core.Output}],inputRef:[{type:core.ViewChild,args:["input"]}],keyDown:[{type:core.HostListener,args:["keydown",["$event"]]}],focusOut:[{type:core.HostListener,args:["focusout",["$event"]]}],focusIn:[{type:core.HostListener,args:["focusin",["$event"]]}],compositionStart:[{type:core.HostListener,args:["compositionstart",["$event"]]}],compositionEnd:[{type:core.HostListener,args:["compositionend",["$event"]]}]},Search=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-search, ibm-search",template:search_componentngResource,providers:[{provide:fesm2020_forms.JU,useExisting:Search,multi:!0}]})],Search);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let SearchModule=class SearchModule{};SearchModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Search],exports:[Search],imports:[fesm2020_forms.u5,common.CommonModule,i18n.LU,icon.QX]})],SearchModule)},"./src/table/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{iA:()=>Table,jr:()=>table_header_item_class.j,r8:()=>table_item_class.r,G0:()=>table_model_class.G,U$:()=>TableModule,SC:()=>TableRow});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),i18n=__webpack_require__("./src/i18n/index.ts");let TableToolbar=class TableToolbar{constructor(i18n){this.i18n=i18n,this.size="md",this.cancel=new core.EventEmitter,this.actionBarLabel=this.i18n.getOverridable("TABLE_TOOLBAR.ACTION_BAR"),this._cancelText=this.i18n.getOverridable("TABLE_TOOLBAR.CANCEL"),this._batchTextLegacy=this.i18n.getOverridable("TABLE_TOOLBAR.BATCH_TEXT"),this._batchTextSingle=this.i18n.getOverridable("TABLE_TOOLBAR.BATCH_TEXT_SINGLE"),this._batchTextMultiple=this.i18n.getOverridable("TABLE_TOOLBAR.BATCH_TEXT_MULTIPLE")}set batchText(value){"object"==typeof value?(this._batchTextSingle.override(value.SINGLE),this._batchTextMultiple.override(value.MULTIPLE)):this._batchTextLegacy.override(value)}set ariaLabel(value){this.actionBarLabel.override(value.ACTION_BAR)}set cancelText(value){this._cancelText.override(value.CANCEL)}get cancelText(){return{CANCEL:this._cancelText.value}}get count(){return this.model.totalDataLength>0?this.model.rowsSelected.reduce(((previous,current)=>previous+(current?1:0)),0):0}get selected(){return this.model.totalDataLength>0&&this.model.rowsSelected.some((item=>item))}onCancel(){this.model.selectAll(!1),this.cancel.emit()}};TableToolbar.ctorParameters=()=>[{type:i18n.oc}],TableToolbar.propDecorators={model:[{type:core.Input}],batchText:[{type:core.Input}],ariaLabel:[{type:core.Input}],cancelText:[{type:core.Input}],size:[{type:core.Input}],cancel:[{type:core.Output}]},TableToolbar=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-table-toolbar, ibm-table-toolbar",template:'\n\t<section\n\t\tclass="cds--table-toolbar"\n\t\t[ngClass]="{\'cds--table-toolbar--sm\' : size === \'sm\'}"\n\t\t[attr.aria-label]="actionBarLabel.subject | async">\n\t\t<div\n\t\t\t*ngIf="model"\n\t\t\tclass="cds--batch-actions"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--batch-actions--active\': selected\n\t\t\t}">\n\t\t\t<div class="cds--batch-summary">\n\t\t\t\t<p class="cds--batch-summary__para" *ngIf="count as n">\n\t\t\t\t\t<ng-container *ngIf="_batchTextLegacy.subject | async as legacyText; else batchTextBlock">\n\t\t\t\t\t\t<span>{{n}}</span> {{legacyText}}\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-template #batchTextBlock>\n\t\t\t\t\t\t<span *ngIf="n === 1">{{_batchTextSingle.subject | async}}</span>\n\t\t\t\t\t\t<span *ngIf="n !== 1">{{_batchTextMultiple.subject | i18nReplace: {count: n} | async}}</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t\t<div class="cds--action-list">\n\t\t\t\t<ng-content select="cds-table-toolbar-actions,ibm-table-toolbar-actions"></ng-content>\n\t\t\t\t<button\n\t\t\t\t\tcdsButton="primary"\n\t\t\t\t\tclass="cds--batch-summary__cancel"\n\t\t\t\t\t[tabindex]="selected ? 0 : -1"\n\t\t\t\t\t(click)="onCancel()">\n\t\t\t\t\t{{_cancelText.subject | async}}\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t\t<ng-content></ng-content>\n\t</section>\n\t'})],TableToolbar);let TableToolbarActions=class TableToolbarActions{};TableToolbarActions=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-table-toolbar-actions, ibm-table-toolbar-actions",template:"<ng-content></ng-content>"})],TableToolbarActions);var search_componentngResource=__webpack_require__("./src/search/search.component.html?ngResource"),search=__webpack_require__("./src/search/index.ts"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs");let TableToolbarSearch=class TableToolbarSearch extends search.o{constructor(){super(...arguments),this.tableSearch=!0,this.size="lg",this.hostClass=!0}ngAfterViewInit(){setTimeout((()=>{this.value&&this.openSearch()}))}};TableToolbarSearch.propDecorators={hostClass:[{type:core.HostBinding,args:["class.cds--toolbar-content"]}]},TableToolbarSearch=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-table-toolbar-search, ibm-table-toolbar-search",template:search_componentngResource,providers:[{provide:fesm2020_forms.JU,useExisting:TableToolbarSearch,multi:!0}]})],TableToolbarSearch);let TableToolbarContent=class TableToolbarContent{constructor(){this.class=!0}};TableToolbarContent.propDecorators={class:[{type:core.HostBinding,args:["class.cds--toolbar-content"]}]},TableToolbarContent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-table-toolbar-content, ibm-table-toolbar-content",template:"<ng-content></ng-content>"})],TableToolbarContent);let TableHeaderDescription=class TableHeaderDescription{constructor(){this.id="table-description-"+TableHeaderDescription.counter++,this.descriptionClass=!0}};TableHeaderDescription.counter=0,TableHeaderDescription.propDecorators={id:[{type:core.HostBinding,args:["attr.id"]},{type:core.Input}],descriptionClass:[{type:core.HostBinding,args:["class.cds--data-table-header__description"]}]},TableHeaderDescription=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsTableHeaderDescription], [ibmTableHeaderDescription]"})],TableHeaderDescription);let TableHeaderTitle=class TableHeaderTitle{constructor(){this.id="table-title-"+TableHeaderTitle.counter++,this.titleClass=!0}};TableHeaderTitle.counter=0,TableHeaderTitle.propDecorators={id:[{type:core.HostBinding,args:["attr.id"]},{type:core.Input}],titleClass:[{type:core.HostBinding,args:["class.cds--data-table-header__title"]}]},TableHeaderTitle=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsTableHeaderTitle], [ibmTableHeaderTitle]"})],TableHeaderTitle);var TableDomSpanDirection,Subscription=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subscription.js"),fromEvent=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/observable/fromEvent.js"),table_model_class=__webpack_require__("./src/table/table-model.class.ts"),table_header_item_class=__webpack_require__("./src/table/table-header-item.class.ts"),table_item_class=__webpack_require__("./src/table/table-item.class.ts"),tab_service=__webpack_require__("./src/common/tab.service.ts"),utils=__webpack_require__("./src/utils/index.ts"),BehaviorSubject=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/BehaviorSubject.js"),combineLatest=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/observable/combineLatest.js"),map=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/map.js");class DataGridInteractionModel{constructor(keyboardEventStream,clickEventStream,tableAdapter){this.keyboardEventStream=keyboardEventStream,this.clickEventStream=clickEventStream,this.tableAdapter=tableAdapter,this.rowSubject=new BehaviorSubject.X({current:0,previous:-1}),this.columnSubject=new BehaviorSubject.X({current:0,previous:-1}),this.rowIndex=this.rowSubject.asObservable(),this.columnIndex=this.columnSubject.asObservable(),this.position=(0,combineLatest.a)(this.rowIndex,this.columnIndex).pipe((0,map.U)((positions=>{const[row,column]=positions;return{current:[row.current,column.current],previous:[row.previous,column.previous]}}))),this.keyboardEventStream.subscribe(this.handleKeyboardEvent.bind(this)),this.clickEventStream.subscribe(this.handleClickEvent.bind(this))}get currentRow(){return this.rowSubject.getValue().current}get currentColumn(){return this.columnSubject.getValue().current}get lastColumn(){return this.tableAdapter.lastColumnIndex}get lastRow(){return this.tableAdapter.lastRowIndex}handleKeyboardEvent(event){const currentCell=this.tableAdapter.getCell(this.currentRow,this.currentColumn);let currentColumn=this.tableAdapter.findColumnIndex(currentCell),currentRow=this.tableAdapter.findRowIndex(currentCell);switch(event.key){case"ArrowRight":event.preventDefault(),this.goToColumn(currentColumn+currentCell.colSpan);break;case"ArrowLeft":event.preventDefault(),this.goToColumn(currentColumn-1);break;case"ArrowDown":event.preventDefault(),this.goToRow(currentRow+currentCell.rowSpan);break;case"ArrowUp":event.preventDefault(),this.goToRow(currentRow-1);break;case"Home":event.preventDefault(),event.ctrlKey?this.goTo({row:0,column:0}):this.goToColumn(0);break;case"End":event.preventDefault(),event.ctrlKey?this.goTo({row:this.lastRow,column:this.lastColumn}):this.goToColumn(this.lastColumn)}}handleClickEvent(event){const cell=event.target.closest("td, th"),[rowIndex,cellIndex]=this.tableAdapter.findIndex(cell);this.goTo({row:rowIndex,column:cellIndex})}goToColumn(index){index>this.lastColumn||index<0||this.goTo({row:this.currentRow,column:index})}goToRow(index){index>this.lastRow||index<0||this.goTo({row:index,column:this.currentColumn})}goTo({row,column}){this.rowSubject.next({current:row,previous:this.currentRow}),this.columnSubject.next({current:column,previous:this.currentColumn})}resetTabIndexes(newTabIndex=-1){for(let i=0;i<this.tableAdapter.lastRowIndex;i++){const row=this.tableAdapter.getRow(i);for(const cell of Array.from(row.cells)){(0,tab_service.ZW)(cell,tab_service.X9).forEach((node=>node.tabIndex=newTabIndex)),cell.tabIndex=newTabIndex}}this.reset()}reset(){this.rowSubject.next({current:0,previous:-1}),this.columnSubject.next({current:0,previous:-1})}}!function(TableDomSpanDirection){TableDomSpanDirection.colSpan="colSpan",TableDomSpanDirection.rowSpan="rowSpan"}(TableDomSpanDirection||(TableDomSpanDirection={}));class TableDomAdapter{constructor(tableElement){this.tableElement=tableElement}get lastColumnIndex(){return this.getRealRowLength(this.tableElement.rows[0])}get lastRowIndex(){return this.tableElement.rows.length-1}getCell(row,column){const col=this.getColumn(column);return this.findCellInColumn(col,row).cell}getColumn(column){const firstHeader=Array.from(this.tableElement.rows[0].cells),{cell:header,realIndex:realColumnIndex}=this.findCellInRow(firstHeader,column),linkedCells=[];for(let i=1;i<this.tableElement.rows.length;i++){const linkedRowCells=this.tableElement.rows[i].querySelectorAll(`[headers~='${header.id}']`);if(linkedRowCells.length>1){const{cell}=this.findCellInRow(Array.from(linkedRowCells),column-realColumnIndex);linkedCells.push(cell)}else linkedRowCells[0]&&linkedCells.push(linkedRowCells[0])}return linkedCells?[header,...linkedCells]:[]}getRow(row){return this.tableElement.rows[row]}findColumnIndex(cell){const row=this.getRow(this.findRowIndex(cell));if(!row)return;if(cell&&cell.headers){const ids=cell.headers.split(" "),headerRows=Array.from(this.tableElement.tHead.rows),indexes=[];for(const headerRow of headerRows.reverse()){const headerCells=Array.from(headerRow.cells),header=headerCells.find((headerCell=>ids.includes(headerCell.id)));if(header){let cellIndex=0;for(const c of headerCells){if(c===header)break;cellIndex+=c.colSpan}indexes.push(cellIndex)}}const firstIndex=indexes.sort(((a,b)=>b-a))[0];let similarCells=[];for(const id of ids){const rowCells=Array.from(row.querySelectorAll(`[headers~='${id}']`));for(const rowCell of rowCells)similarCells.includes(rowCell)||similarCells.push(rowCell)}return similarCells=similarCells.sort(((a,b)=>a.cellIndex-b.cellIndex)),firstIndex+similarCells.indexOf(cell)}let cellIndex=0;for(const c of Array.from(row.cells)){if(c===cell)break;cellIndex+=c.colSpan}return cellIndex}findRowIndex(cell){for(const row of Array.from(this.tableElement.rows))if(row.contains(cell))return row.rowIndex}findIndex(cell){return[this.findRowIndex(cell),this.findColumnIndex(cell)]}getRealRowLength(row){return Array.from(row.cells).reduce(((count,cell)=>count+cell.colSpan),-1)}findCell(cells,targetIndex,spanDirection){let realIndex=0;for(let i=0;i<targetIndex&&(i+=cells[realIndex][spanDirection],!(i>targetIndex));)realIndex++;return{cell:cells[realIndex],realIndex}}findCellInRow(row,index){return this.findCell(row,index,TableDomSpanDirection.colSpan)}findCellInColumn(col,index){return this.findCell(col,index,TableDomSpanDirection.rowSpan)}}let Table=class Table{constructor(elementRef,applicationRef,i18n){this.elementRef=elementRef,this.applicationRef=applicationRef,this.i18n=i18n,this.size="md",this.skeleton=!1,this.sortable=!0,this.noBorder=!0,this.showSelectionColumn=!0,this.enableSingleSelect=!1,this.scrollLoadDistance=0,this.striped=!0,this.tableContent=!0,this.stickyHeader=!1,this.sort=new core.EventEmitter,this.selectAll=new core.EventEmitter,this.deselectAll=new core.EventEmitter,this.selectRow=new core.EventEmitter,this.deselectRow=new core.EventEmitter,this.rowClick=new core.EventEmitter,this.scrollLoad=new core.EventEmitter,this.selectAllCheckbox=!1,this.selectAllCheckboxSomeSelected=!1,this.isColumnDragging=!1,this.columnDraggedHoverIndex=-1,this.columnDraggedPosition="",this._isDataGrid=!1,this.isViewReady=!1,this.subscriptions=new Subscription.w0,this._expandButtonAriaLabel=this.i18n.getOverridable("TABLE.EXPAND_BUTTON"),this._sortDescendingLabel=this.i18n.getOverridable("TABLE.SORT_DESCENDING"),this._sortAscendingLabel=this.i18n.getOverridable("TABLE.SORT_ASCENDING"),this._checkboxHeaderLabel=this.i18n.getOverridable("TABLE.CHECKBOX_HEADER"),this._checkboxRowLabel=this.i18n.getOverridable("TABLE.CHECKBOX_ROW"),this._endOfDataText=this.i18n.getOverridable("TABLE.END_OF_DATA"),this._scrollTopText=this.i18n.getOverridable("TABLE.SCROLL_TOP"),this._filterTitle=this.i18n.getOverridable("TABLE.FILTER")}static skeletonModel(rowCount,columnCount){const model=new table_model_class.G;let header=new Array,data=new Array,row=new Array;for(let i=0;i<columnCount;i++)header.push(new table_header_item_class.j),row.push(new table_item_class.r);for(let i=0;i<rowCount-1;i++)data.push(row);return model.header=header,model.data=data,model}static setTabIndex(element,index){const focusElementList=(0,tab_service.ZW)(element,tab_service.X9);element.firstElementChild&&element.firstElementChild.classList.contains("cds--table-sort")&&focusElementList.length>1?focusElementList[1].tabIndex=index:focusElementList.length>0?focusElementList[0].tabIndex=index:element.tabIndex=index}static focus(element){const focusElementList=(0,tab_service.ZW)(element,tab_service.X9);element.firstElementChild?.classList.contains("cds--table-sort")&&focusElementList.length>1||focusElementList.length>0?focusElementList[0].focus():element.focus()}set model(m){this._model&&(this.subscriptions.unsubscribe(),this.subscriptions=new Subscription.w0),this._model=m;const rowsChange=this._model.rowsSelectedChange.subscribe((()=>this.updateSelectAllCheckbox())),dataChange=this._model.dataChange.subscribe((()=>{this.isDataGrid&&this.resetTabIndex(),this.updateSelectAllCheckbox()}));if(this.subscriptions.add(rowsChange),this.subscriptions.add(dataChange),this.isDataGrid){const expandedChange=this._model.rowsExpandedChange.subscribe((()=>{setTimeout((()=>{const expandedRows=this.elementRef.nativeElement.querySelectorAll(".cds--expandable-row:not(.cds--parent-row)");Array.from(expandedRows).forEach((row=>{void 0!==row.firstElementChild.tabIndex&&-1===row.firstElementChild.tabIndex||(row.firstElementChild.tabIndex=-1)}))}))}));this.subscriptions.add(expandedChange)}}get model(){return this._model}set isDataGrid(value){this._isDataGrid=value,this.isViewReady&&(value?this.enableDataGridInteractions():this.disableDataGridInteractions())}get isDataGrid(){return this._isDataGrid}set expandButtonAriaLabel(value){this._expandButtonAriaLabel.override(value)}get expandButtonAriaLabel(){return this._expandButtonAriaLabel.value}set sortDescendingLabel(value){this._sortDescendingLabel.override(value)}get sortDescendingLabel(){return this._sortDescendingLabel.value}set sortAscendingLabel(value){this._sortAscendingLabel.override(value)}get sortAscendingLabel(){return this._sortAscendingLabel.value}set translations(value){const valueWithDefaults=(0,utils.TS)(this.i18n.getMultiple("TABLE"),value);this._filterTitle.override(valueWithDefaults.FILTER),this._endOfDataText.override(valueWithDefaults.END_OF_DATA),this._scrollTopText.override(valueWithDefaults.SCROLL_TOP),this._checkboxHeaderLabel.override(valueWithDefaults.CHECKBOX_HEADER),this._checkboxRowLabel.override(valueWithDefaults.CHECKBOX_ROW)}get noData(){return!this.model.data||0===this.model.data.length||1===this.model.data.length&&0===this.model.data[0].length}ngOnInit(){this.updateSelectAllCheckbox()}ngAfterViewInit(){this.isViewReady=!0,this.isDataGrid&&this.enableDataGridInteractions()}ngOnDestroy(){this.subscriptions.unsubscribe(),this.positionSubscription&&this.positionSubscription.unsubscribe()}enableDataGridInteractions(){if(this.interactionModel)return;const table=this.elementRef.nativeElement.querySelector("table"),tableAdapter=new TableDomAdapter(table),keydownEventStream=(0,fromEvent.R)(table,"keydown"),clickEventStream=(0,fromEvent.R)(table,"click");this.interactionModel=new DataGridInteractionModel(keydownEventStream,clickEventStream,tableAdapter),this.positionSubscription=this.interactionModel.position.subscribe((event=>{const[currentRow,currentColumn]=event.current,[previousRow,previousColumn]=event.previous,currentElement=tableAdapter.getCell(currentRow,currentColumn);if(Table.setTabIndex(currentElement,0),-1!==previousRow&&-1!==previousColumn){if(previousRow!==currentRow||previousColumn!==currentColumn){const previousElement=tableAdapter.getCell(previousRow,previousColumn);Table.setTabIndex(previousElement,-1)}Table.focus(currentElement)}})),this.resetTabIndex()}disableDataGridInteractions(){this.positionSubscription&&this.positionSubscription.unsubscribe(),this.resetTabIndex(0),this.interactionModel=null}onSelectAll(){this.model.selectAll(!0),this.selectAll.emit(this.model)}onDeselectAll(){this.model.selectAll(!1),this.deselectAll.emit(this.model)}onSelectRow(event){Object.keys(event).includes("selectedRowIndex")?(this.enableSingleSelect&&this.model.selectAll(!1),this.model.selectRow(event.selectedRowIndex,!0),this.selectRow.emit(event)):(this.model.selectRow(event.deselectedRowIndex,!1),this.deselectRow.emit(event))}onRowClick(index){this.rowClick.emit(index)}updateSelectAllCheckbox(){const selectedRowsCount=this.model.selectedRowsCount();selectedRowsCount<=0?(this.selectAllCheckbox=!1,this.selectAllCheckboxSomeSelected=!1):selectedRowsCount<this.model.data.length?(this.selectAllCheckbox=!0,this.selectAllCheckboxSomeSelected=!0):(this.selectAllCheckbox=!0,this.selectAllCheckboxSomeSelected=!1)}resetTabIndex(newTabIndex=-1){setTimeout((()=>{const focusElementList=(0,tab_service.ZW)(this.elementRef.nativeElement,tab_service.X9);focusElementList&&focusElementList.forEach((tabbable=>{tabbable.tabIndex=newTabIndex})),this.interactionModel&&this.interactionModel.resetTabIndexes(newTabIndex)}))}columnResizeStart(event,column){this.columnResizeWidth=parseInt(column.style.width,10),this.columnResizeMouseX=event.clientX,event.preventDefault(),this.mouseMoveSubscription=(0,fromEvent.R)(document.body,"mousemove").subscribe((event=>{this.columnResizeProgress(event,column)})),this.mouseUpSubscription=(0,fromEvent.R)(document.body,"mouseup").subscribe((event=>{this.columnResizeEnd(event,column)}))}columnResizeProgress(event,column){const move=event.clientX-this.columnResizeMouseX;column.style.width=`${this.columnResizeWidth+move}px`}columnResizeEnd(event,column){this.mouseMoveSubscription.unsubscribe(),this.mouseUpSubscription.unsubscribe()}onScroll(event){event.target.scrollHeight-event.target.clientHeight-event.target.scrollTop<=this.scrollLoadDistance?this.scrollLoad.emit(this.model):this.model.isEnd=!1}columnDragStart(event,columnIndex){this.isColumnDragging=!0,this.columnDraggedHoverIndex=columnIndex,event.dataTransfer.setData("columnIndex",JSON.stringify(columnIndex))}columnDragEnd(event,columnIndex){this.isColumnDragging=!1,this.columnDraggedHoverIndex=-1}columnDragEnter(event,position,columnIndex){this.columnDraggedPosition=position,this.columnDraggedHoverIndex=columnIndex}columnDragLeave(event,position,columnIndex){this.columnDraggedPosition=""}columnDragover(event,position,columnIndex){this.columnDraggedHoverIndex=columnIndex,this.columnDraggedPosition=position,event.preventDefault()}columnDrop(event,position,columnIndex){this.isColumnDragging=!1,this.columnDraggedHoverIndex=-1,this.columnDraggedPosition="",this.model.moveColumn(parseInt(event.dataTransfer.getData("columnIndex"),10),columnIndex+("right"===position?1:0))}doSort(index){0===this.sort.observers.length&&(this.model.cycleSortState(index),this.model.sort(index)),this.sort.emit(index)}scrollToTop(event){event.target.parentElement.parentElement.parentElement.parentElement.children[1].scrollTop=0,this.model.isEnd=!1}getSelectionLabelValue(row){return this.selectionLabelColumn?{value:row[this.selectionLabelColumn].data}:{value:this.i18n.get().TABLE.ROW}}getExpandButtonAriaLabel(){return this._expandButtonAriaLabel.subject}getSortDescendingLabel(){return this._sortDescendingLabel.subject}getSortAscendingLabel(){return this._sortAscendingLabel.subject}getCheckboxHeaderLabel(){return this._checkboxHeaderLabel.subject}getCheckboxRowLabel(){return this._checkboxRowLabel.subject}getEndOfDataText(){return this._endOfDataText.subject}getScrollTopText(){return this._scrollTopText.subject}getFilterTitle(){return this._filterTitle.subject}};Table.ctorParameters=()=>[{type:core.ElementRef},{type:core.ApplicationRef},{type:i18n.oc}],Table.propDecorators={ariaLabelledby:[{type:core.Input}],ariaDescribedby:[{type:core.Input}],model:[{type:core.Input}],size:[{type:core.Input}],skeleton:[{type:core.Input}],isDataGrid:[{type:core.Input}],sortable:[{type:core.Input}],noBorder:[{type:core.Input}],showSelectionColumn:[{type:core.Input}],enableSingleSelect:[{type:core.Input}],scrollLoadDistance:[{type:core.Input}],expandButtonAriaLabel:[{type:core.Input}],sortDescendingLabel:[{type:core.Input}],sortAscendingLabel:[{type:core.Input}],translations:[{type:core.Input}],striped:[{type:core.Input}],tableContent:[{type:core.HostBinding,args:["class.cds--data-table-content"]}],stickyHeader:[{type:core.HostBinding,args:["class.cds--data-table_inner-container"]},{type:core.Input}],footerTemplate:[{type:core.Input}],selectionLabelColumn:[{type:core.Input}],sort:[{type:core.Output}],selectAll:[{type:core.Output}],deselectAll:[{type:core.Output}],selectRow:[{type:core.Output}],deselectRow:[{type:core.Output}],rowClick:[{type:core.Output}],scrollLoad:[{type:core.Output}]},Table=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-table, ibm-table",template:'\n\t<table\n\t\tcdsTable\n\t\t[sortable]="sortable"\n\t\t[noBorder]="noBorder"\n\t\t[ngClass]="{\'cds--data-table--sticky-header\': stickyHeader}"\n\t\t[size]="size"\n\t\t[striped]="striped"\n\t\t[skeleton]="skeleton"\n\t\t[attr.aria-labelledby]="ariaLabelledby"\n\t\t[attr.aria-describedby]="ariaDescribedby">\n\t\t<thead\n\t\t\tcdsTableHead\n\t\t\t[sortable]="sortable"\n\t\t\t(deselectAll)="onDeselectAll()"\n\t\t\t(selectAll)="onSelectAll()"\n\t\t\t(sort)="doSort($event)"\n\t\t\t[checkboxHeaderLabel]="getCheckboxHeaderLabel()"\n\t\t\t[filterTitle]="getFilterTitle()"\n\t\t\t[model]="model"\n\t\t\t[selectAllCheckbox]="selectAllCheckbox"\n\t\t\t[selectAllCheckboxSomeSelected]="selectAllCheckboxSomeSelected"\n\t\t\t[showSelectionColumn]="showSelectionColumn"\n\t\t\t[enableSingleSelect]="enableSingleSelect"\n\t\t\t[skeleton]="skeleton"\n\t\t\t[sortAscendingLabel]="sortAscendingLabel"\n\t\t\t[sortDescendingLabel]="sortDescendingLabel"\n\t\t\t[stickyHeader]="stickyHeader">\n\t\t</thead>\n\t\t<tbody\n\t\t\tcdsTableBody\n\t\t\t(deselectRow)="onSelectRow($event)"\n\t\t\t(scroll)="onScroll($event)"\n\t\t\t(selectRow)="onSelectRow($event)"\n\t\t\t[checkboxRowLabel]="getCheckboxRowLabel()"\n\t\t\t[enableSingleSelect]="enableSingleSelect"\n\t\t\t(rowClick)="onRowClick($event)"\n\t\t\t[expandButtonAriaLabel]="expandButtonAriaLabel"\n\t\t\t[model]="model"\n\t\t\t[size]="size"\n\t\t\t[ngStyle]="{\'overflow-y\': \'scroll\'}"\n\t\t\t[selectionLabelColumn]="selectionLabelColumn"\n\t\t\t[showSelectionColumn]="showSelectionColumn"\n\t\t\t[skeleton]="skeleton"\n\t\t\t*ngIf="!noData; else noDataTemplate">\n\t\t</tbody>\n\t\t<ng-template #noDataTemplate><ng-content></ng-content></ng-template>\n\t\t<tfoot>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]="footerTemplate">\n\t\t\t</ng-template>\n\t\t\t<tr *ngIf="this.model.isLoading">\n\t\t\t\t<td class="table_loading-indicator">\n\t\t\t\t\t<div class="cds--loading cds--loading--small">\n\t\t\t\t\t\t<svg class="cds--loading__svg" viewBox="-75 -75 150 150">\n\t\t\t\t\t\t\t<circle class="cds--loading__stroke" cx="0" cy="0" r="37.5" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t\t<tr *ngIf="this.model.isEnd">\n\t\t\t\t<td class="table_end-indicator">\n\t\t\t\t\t<h5>{{getEndOfDataText() | async}}</h5>\n\t\t\t\t\t<button (click)="scrollToTop($event)" class="btn--secondary-sm">\n\t\t\t\t\t\t{{getScrollTopText() | async}}\n\t\t\t\t\t</button>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</tfoot>\n\t</table>\n\t',styles:["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"]})],Table);let TableContainer=class TableContainer{constructor(){this.containerClass=!0}ngAfterContentInit(){this.table&&(this.table.ariaLabelledby=this.headerTitle?.id,this.table.ariaDescribedby=this.headerDescription?.id)}};TableContainer.propDecorators={containerClass:[{type:core.HostBinding,args:["class.cds--data-table-container"]}],headerTitle:[{type:core.ContentChild,args:[TableHeaderTitle]}],headerDescription:[{type:core.ContentChild,args:[TableHeaderDescription]}],table:[{type:core.ContentChild,args:[Table]}]},TableContainer=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-table-container, ibm-table-container",template:"<ng-content></ng-content>",styles:["\n\t\t:host { display: block }\n\t"]})],TableContainer);let TableHeader=class TableHeader{constructor(){this.headerClass=!0,this.displayStyle="block"}};TableHeader.propDecorators={headerClass:[{type:core.HostBinding,args:["class.cds--data-table-header"]}],displayStyle:[{type:core.HostBinding,args:["style.display"]}]},TableHeader=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-table-header, ibm-table-header",template:"\n\t\t<ng-content></ng-content>\n\t"})],TableHeader);let TableHeadCellLabel=class TableHeadCellLabel{constructor(){this.baseClass=!0}};TableHeadCellLabel.propDecorators={baseClass:[{type:core.HostBinding,args:["class.cds--table-header-label"]}]},TableHeadCellLabel=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsTableHeadCellLabel], [ibmTableHeadCellLabel]"})],TableHeadCellLabel);let ExpandedRowHover=class ExpandedRowHover{addHoverClass(event){event.target.previousElementSibling.classList.add("cds--expandable-row--hover")}removeHoverClass(event){event.target.previousElementSibling.classList.remove("cds--expandable-row--hover")}};ExpandedRowHover.propDecorators={addHoverClass:[{type:core.HostListener,args:["mouseenter",["$event"]]}],removeHoverClass:[{type:core.HostListener,args:["mouseleave",["$event"]]}]},ExpandedRowHover=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsExpandedRowHover], [ibmExpandedRowHover]"})],ExpandedRowHover);let TableDirective=class TableDirective{constructor(){this.sortable=!0,this.noBorder=!0,this.striped=!1,this.skeleton=!1,this.size="md",this.tableClass=!0}get extraSmallSize(){return"xs"===this.size}get smallSize(){return"sm"===this.size}get mediumSize(){return"md"===this.size}get LargeSize(){return"lg"===this.size}get extraLargeSize(){return"xl"===this.size}};TableDirective.propDecorators={sortable:[{type:core.Input},{type:core.HostBinding,args:["class.cds--data-table--sort"]}],noBorder:[{type:core.Input},{type:core.HostBinding,args:["class.cds--data-table--no-border"]}],striped:[{type:core.Input},{type:core.HostBinding,args:["class.cds--data-table--zebra"]}],skeleton:[{type:core.Input},{type:core.HostBinding,args:["class.cds--skeleton"]}],size:[{type:core.Input}],tableClass:[{type:core.HostBinding,args:["class.cds--data-table"]}],extraSmallSize:[{type:core.HostBinding,args:["class.cds--data-table--xs"]}],smallSize:[{type:core.HostBinding,args:["class.cds--data-table--sm"]}],mediumSize:[{type:core.HostBinding,args:["class.cds--data-table--md"]}],LargeSize:[{type:core.HostBinding,args:["class.cds--data-table--lg"]}],extraLargeSize:[{type:core.HostBinding,args:["class.cds--data-table--xl"]}]},TableDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsTable], [ibmTable]"})],TableDirective);let TableHead=class TableHead{constructor(i18n){this.i18n=i18n,this.showSelectionColumn=!0,this.enableSingleSelect=!1,this.selectAllCheckboxSomeSelected=!1,this.selectAllCheckbox=!1,this.skeleton=!1,this.stickyHeader=!1,this.sortable=!0,this.sort=new core.EventEmitter,this.selectAll=new core.EventEmitter,this.deselectAll=new core.EventEmitter,this.scrollbarWidth=0,this._checkboxHeaderLabel=this.i18n.getOverridable("TABLE.CHECKBOX_HEADER"),this._sortDescendingLabel=this.i18n.getOverridable("TABLE.SORT_DESCENDING"),this._sortAscendingLabel=this.i18n.getOverridable("TABLE.SORT_ASCENDING"),this._filterTitle=this.i18n.getOverridable("TABLE.FILTER")}set checkboxHeaderLabel(value){this._checkboxHeaderLabel.override(value)}get checkboxHeaderLabel(){return this._checkboxHeaderLabel.value}set sortDescendingLabel(value){this._sortDescendingLabel.override(value)}get sortDescendingLabel(){return this._sortDescendingLabel.value}set sortAscendingLabel(value){this._sortAscendingLabel.override(value)}get sortAscendingLabel(){return this._sortAscendingLabel.value}set filterTitle(value){this._filterTitle.override(value)}get filterTitle(){return this._filterTitle.value}ngAfterViewInit(){setTimeout((()=>{this.scrollbarWidth=(0,utils.np)()}))}onSelectAllCheckboxChange(){this.selectAllCheckbox||this.selectAllCheckboxSomeSelected?this.deselectAll.emit(this.model):this.selectAll.emit(this.model)}getCheckboxHeaderLabel(){return this._checkboxHeaderLabel.subject}getSortDescendingLabel(){return this._sortDescendingLabel.subject}getSortAscendingLabel(){return this._sortAscendingLabel.subject}getFilterTitle(){return this._filterTitle.subject}};TableHead.ctorParameters=()=>[{type:i18n.oc}],TableHead.propDecorators={model:[{type:core.Input}],showSelectionColumn:[{type:core.Input}],enableSingleSelect:[{type:core.Input}],selectAllCheckboxSomeSelected:[{type:core.Input}],selectAllCheckbox:[{type:core.Input}],skeleton:[{type:core.Input}],stickyHeader:[{type:core.Input}],sortable:[{type:core.Input}],checkboxHeaderLabel:[{type:core.Input}],sortDescendingLabel:[{type:core.Input}],sortAscendingLabel:[{type:core.Input}],filterTitle:[{type:core.Input}],sort:[{type:core.Output}],selectAll:[{type:core.Output}],deselectAll:[{type:core.Output}]},TableHead=(0,tslib_es6.gn)([(0,core.Component)({selector:"[cdsTableHead], [ibmTableHead]",template:'\n\t<ng-container *ngIf="model">\n\t\t<tr>\n\t\t\t<th\n\t\t\t\tcdsTableHeadExpand\n\t\t\t\t*ngIf="model.hasExpandableRows()"\n\t\t\t\tscope="col"\n\t\t\t\t[ngClass]="{\'cds--table-expand-v2\': stickyHeader}"\n\t\t\t\t[id]="model.getId(\'expand\')">\n\t\t\t</th>\n\t\t\t<th\n\t\t\t\t*ngIf="!skeleton && showSelectionColumn && enableSingleSelect"\n\t\t\t\tscope="col"\n\t\t\t\t[id]="model.getId(\'select\')">\n\t\t\t\t\x3c!-- add width 0; since the carbon styles don\'t seem to constrain this headers width --\x3e\n\t\t\t</th>\n\t\t\t<th\n\t\t\t\tcdsTableHeadCheckbox\n\t\t\t\t*ngIf="!skeleton && showSelectionColumn && !enableSingleSelect"\n\t\t\t\tscope="col"\n\t\t\t\t[checked]="selectAllCheckbox"\n\t\t\t\t[indeterminate]="selectAllCheckboxSomeSelected"\n\t\t\t\t[ariaLabel]="getCheckboxHeaderLabel()"\n\t\t\t\t[skeleton]="skeleton"\n\t\t\t\t[name]="model.getHeaderId(\'select\')"\n\t\t\t\t(change)="onSelectAllCheckboxChange()"\n\t\t\t\t[id]="model.getId(\'select\')">\n\t\t\t</th>\n\t\t\t<ng-container *ngFor="let column of model.header; let i = index">\n\t\t\t\t<th\n\t\t\t\t\t*ngIf="column && column.visible"\n\t\t\t\t\t[ngStyle]="column.style"\n\t\t\t\t\tcdsTableHeadCell\n\t\t\t\t\tscope="col"\n\t\t\t\t\t[class]="column.className"\n\t\t\t\t\t[sortable]="sortable"\n\t\t\t\t\t[skeleton]="skeleton"\n\t\t\t\t\t[id]="model.getId(i)"\n\t\t\t\t\t[column]="column"\n\t\t\t\t\t[filterTitle]="getFilterTitle()"\n\t\t\t\t\t[attr.colspan]="column.colSpan"\n\t\t\t\t\t[attr.rowspan]="column.rowSpan"\n\t\t\t\t\t(sort)="sort.emit(i)">\n\t\t\t\t</th>\n\t\t\t</ng-container>\n\t\t\t<th *ngIf="!skeleton && stickyHeader && scrollbarWidth"\n\t\t\t\tscope="col"\n\t\t\t\t[ngStyle]="{\'width\': scrollbarWidth + \'px\', \'padding\': 0, \'border\': 0}">\n\t\t\t\t\x3c!--\n\t\t\t\t\tScrollbar pushes body to the left so this header column is added to push\n\t\t\t\t\tthe title bar the same amount and keep the header and body columns aligned.\n\t\t\t\t--\x3e\n\t\t\t</th>\n\t\t</tr>\n\t</ng-container>\n\t<ng-content></ng-content>\n\t',styles:["\n\t\t.cds--table-expand-v2 {\n\t\t\tpadding-left: 2.5rem;\n\t\t}\n\t"]})],TableHead);let TableHeadCell=class TableHeadCell{constructor(i18n){this.i18n=i18n,this.skeleton=!1,this.sortable=!0,this.sort=new core.EventEmitter,this.theadAction=!1,this._sortDescendingLabel=this.i18n.getOverridable("TABLE.SORT_DESCENDING"),this._sortAscendingLabel=this.i18n.getOverridable("TABLE.SORT_ASCENDING"),this._filterTitle=this.i18n.getOverridable("TABLE.FILTER")}set sortDescendingLabel(value){this._sortDescendingLabel.override(value)}get sortDescendingLabel(){return this._sortDescendingLabel.value}set sortAscendingLabel(value){this._sortAscendingLabel.override(value)}get sortAscendingLabel(){return this._sortAscendingLabel.value}set filterTitle(value){this._filterTitle.override(value)}get filterTitle(){return this._filterTitle.value}ngOnChanges(){this.theadAction=!!this.column.filterTemplate||this.sort.observers.length>0}getSortDescendingLabel(){return this._sortDescendingLabel.subject.pipe(this.sortLabelMap())}getSortAscendingLabel(){return this._sortAscendingLabel.subject.pipe(this.sortLabelMap())}onClick(){this.skeleton||this.sort.emit()}sortLabelMap(){return(0,map.U)((str=>this.column.ariaSortLabel?this.column.ariaSortLabel:this.column.formatSortLabel?this.column.formatSortLabel(str,this.column.ariaSortLabel):`${this.column.data} - ${str}`))}};TableHeadCell.ctorParameters=()=>[{type:i18n.oc}],TableHeadCell.propDecorators={column:[{type:core.Input}],skeleton:[{type:core.Input}],sortable:[{type:core.Input}],sortDescendingLabel:[{type:core.Input}],sortAscendingLabel:[{type:core.Input}],filterTitle:[{type:core.Input}],sort:[{type:core.Output}],theadAction:[{type:core.HostBinding,args:["class.thead_action"]}]},TableHeadCell=(0,tslib_es6.gn)([(0,core.Component)({selector:"[cdsTableHeadCell], [ibmTableHeadCell]",template:'\n\t\t<button\n\t\t\tclass="cds--table-sort"\n\t\t\t*ngIf="sortable && this.sort.observers.length > 0 && column.sortable"\n\t\t\t[attr.aria-label]="(column.sorted && column.ascending ? getSortDescendingLabel() : getSortAscendingLabel()) | async"\n\t\t\taria-live="polite"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--table-sort--active\': column.sorted,\n\t\t\t\t\'cds--table-sort--descending\': column.ascending\n\t\t\t}"\n\t\t\t(click)="onClick()">\n\t\t\t<span\n\t\t\t\tclass="cds--table-sort__flex"\n\t\t\t\t[title]="column.title"\n\t\t\t\ttabindex="-1">\n\t\t\t\t<div *ngIf="!skeleton && !column.template" cdsTableHeadCellLabel>\n\t\t\t\t\t{{column.data}}\n\t\t\t\t</div>\n\t\t\t\t<ng-template\n\t\t\t\t\t*ngIf="!skeleton && column.template"\n\t\t\t\t\t[ngTemplateOutlet]="column.template"\n\t\t\t\t\t[ngTemplateOutletContext]="{data: column.data}">\n\t\t\t\t</ng-template>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf="!skeleton"\n\t\t\t\t\tfocusable="false"\n\t\t\t\t\tpreserveAspectRatio="xMidYMid meet"\n\t\t\t\t\tstyle="will-change: transform;"\n\t\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\t\tclass="cds--table-sort__icon"\n\t\t\t\t\twidth="16"\n\t\t\t\t\theight="16"\n\t\t\t\t\tviewBox="0 0 16 16"\n\t\t\t\t\taria-hidden="true">\n\t\t\t\t\t<path d="M12.3 9.3l-3.8 3.8V1h-1v12.1L3.7 9.3 3 10l5 5 5-5z"></path>\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf="!skeleton"\n\t\t\t\t\tfocusable="false"\n\t\t\t\t\tpreserveAspectRatio="xMidYMid meet"\n\t\t\t\t\tstyle="will-change: transform;"\n\t\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\t\tclass="cds--table-sort__icon-unsorted"\n\t\t\t\t\twidth="16"\n\t\t\t\t\theight="16"\n\t\t\t\t\tviewBox="0 0 16 16"\n\t\t\t\t\taria-hidden="true">\n\t\t\t\t\t<path d="M13.8 10.3L12 12.1V2h-1v10.1l-1.8-1.8-.7.7 3 3 3-3zM4.5 2l-3 3 .7.7L4 3.9V14h1V3.9l1.8 1.8.7-.7z"></path>\n\t\t\t\t</svg>\n\t\t\t</span>\n\t\t</button>\n\t\t<div\n\t\t\tclass="cds--table-header-label"\n\t\t\t*ngIf="!skeleton && this.sort.observers.length === 0 || (this.sort.observers.length > 0 && !column.sortable) || !sortable">\n\t\t\t<span *ngIf="!column.template" [title]="column.data">\n\t\t\t\t<ng-container *ngIf="!skeleton">\n\t\t\t\t\t{{column.data}}\n\t\t\t\t</ng-container>\n\t\t\t</span>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]="column.template" [ngTemplateOutletContext]="{data: column.data}">\n\t\t\t</ng-template>\n\t\t</div>\n\t'})],TableHeadCell);let TableHeadCheckbox=class TableHeadCheckbox{constructor(i18n){this.i18n=i18n,this.checked=!1,this.indeterminate=!1,this.skeleton=!1,this.name="select-all-"+TableHeadCheckbox.tableSelectAllCount++,this.change=new core.EventEmitter,this.hostClass=!0,this._ariaLabel=this.i18n.getOverridable("TABLE.CHECKBOX_HEADER")}set ariaLabel(value){this._ariaLabel.override(value)}get ariaLabel(){return this._ariaLabel.value}getAriaLabel(){return this._ariaLabel.subject}};TableHeadCheckbox.tableSelectAllCount=0,TableHeadCheckbox.ctorParameters=()=>[{type:i18n.oc}],TableHeadCheckbox.propDecorators={checked:[{type:core.Input}],indeterminate:[{type:core.Input}],skeleton:[{type:core.Input}],name:[{type:core.Input}],ariaLabel:[{type:core.Input}],change:[{type:core.Output}],hostClass:[{type:core.HostBinding,args:["class.cds--table-column-checkbox"]}]},TableHeadCheckbox=(0,tslib_es6.gn)([(0,core.Component)({selector:"[cdsTableHeadCheckbox], [ibmTableHeadCheckbox]",template:'\n\t\t<cds-checkbox\n\t\t\t*ngIf="!skeleton"\n\t\t\tinline="true"\n\t\t\t[name]="name"\n\t\t\t[checked]="checked"\n\t\t\t[indeterminate]="indeterminate"\n\t\t\t(checkedChange)="change.emit()"\n\t\t\t[hideLabel]="true">\n\t\t\t\t{{getAriaLabel() | async}}\n\t\t</cds-checkbox>\n\t',styles:["\n        :host { width: 10px; }\n    "]})],TableHeadCheckbox);let TableHeadExpand=class TableHeadExpand{constructor(){this.hostClass=!0}};TableHeadExpand.propDecorators={hostClass:[{type:core.HostBinding,args:["class.cds--table-expand"]}]},TableHeadExpand=(0,tslib_es6.gn)([(0,core.Component)({selector:"[cdsTableHeadExpand], [ibmTableHeadExpand]",template:"\n\t\t<ng-content></ng-content>\n\t"})],TableHeadExpand);let TableBody=class TableBody{constructor(i18n){this.i18n=i18n,this.enableSingleSelect=!1,this.showSelectionColumn=!0,this.size="md",this.skeleton=!1,this.selectRow=new core.EventEmitter,this.deselectRow=new core.EventEmitter,this.rowClick=new core.EventEmitter,this._checkboxRowLabel=this.i18n.getOverridable("TABLE.CHECKBOX_ROW"),this._expandButtonAriaLabel=this.i18n.getOverridable("TABLE.EXPAND_BUTTON")}set expandButtonAriaLabel(value){this._expandButtonAriaLabel.override(value)}get expandButtonAriaLabel(){return this._expandButtonAriaLabel.value}set checkboxRowLabel(value){this._checkboxRowLabel.override(value)}get checkboxRowLabel(){return this._checkboxRowLabel.value}onRowCheckboxChange(index){this.model.isRowSelected(index)?this.deselectRow.emit({model:this.model,deselectedRowIndex:index}):this.selectRow.emit({model:this.model,selectedRowIndex:index})}onRowClick(index){this.rowClick.emit(index)}getCheckboxRowLabel(){return this._checkboxRowLabel.subject}getExpandButtonAriaLabel(){return this._expandButtonAriaLabel.subject}firstExpandedDataInRow(row){const found=row.find((d=>d.expandedData));return found?found.expandedData:found}shouldExpandAsTable(row){return row.some((d=>d.expandAsTable))}};TableBody.ctorParameters=()=>[{type:i18n.oc}],TableBody.propDecorators={model:[{type:core.Input}],enableSingleSelect:[{type:core.Input}],expandButtonAriaLabel:[{type:core.Input}],checkboxRowLabel:[{type:core.Input}],showSelectionColumn:[{type:core.Input}],size:[{type:core.Input}],selectionLabelColumn:[{type:core.Input}],skeleton:[{type:core.Input}],selectRow:[{type:core.Output}],deselectRow:[{type:core.Output}],rowClick:[{type:core.Output}]},TableBody=(0,tslib_es6.gn)([(0,core.Component)({selector:"[cdsTableBody], [ibmTableBody]",template:'\n\t\t<ng-container *ngIf="model">\n\t\t\t<ng-container *ngFor="let row of model.data; let i = index">\n\t\t\t\t<tr\n\t\t\t\t\tcdsTableRow\n\t\t\t\t\t[model]="model"\n\t\t\t\t\t[row]="row"\n\t\t\t\t\t[size]="size"\n\t\t\t\t\t[selected]="model.isRowSelected(i)"\n\t\t\t\t\t[expandable]="model.isRowExpandable(i)"\n\t\t\t\t\t[expanded]="model.isRowExpanded(i)"\n\t\t\t\t\t[checkboxLabel]="getCheckboxRowLabel()"\n\t\t\t\t\t[expandButtonAriaLabel]="getExpandButtonAriaLabel()"\n\t\t\t\t\t[showSelectionColumn]="showSelectionColumn"\n\t\t\t\t\t[enableSingleSelect]="enableSingleSelect"\n\t\t\t\t\t[skeleton]="skeleton"\n\t\t\t\t\t(selectRow)="onRowCheckboxChange(i)"\n\t\t\t\t\t(deselectRow)="onRowCheckboxChange(i)"\n\t\t\t\t\t(expandRow)="model.expandRow(i, !model.isRowExpanded(i))"\n\t\t\t\t\t(rowClick)="onRowClick(i)"\n\t\t\t\t\t*ngIf="!model.isRowFiltered(i)"\n\t\t\t\t\t[class]="(model.rowsClass[i] ? model.rowsClass[i] : null)"\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'tbody_row--success\': !model.isRowSelected(i) && model.getRowContext(i) === \'success\',\n\t\t\t\t\t\t\'tbody_row--warning\': !model.isRowSelected(i) && model.getRowContext(i) === \'warning\',\n\t\t\t\t\t\t\'tbody_row--info\': !model.isRowSelected(i) && model.getRowContext(i) === \'info\',\n\t\t\t\t\t\t\'tbody_row--error\': !model.isRowSelected(i) && model.getRowContext(i) === \'error\'\n\t\t\t\t\t}">\n\t\t\t\t</tr>\n\t\t\t\t<tr\n\t\t\t\t\t*ngIf="model.isRowExpandable(i) && !shouldExpandAsTable(row) && !model.isRowFiltered(i)"\n\t\t\t\t\tcdsTableExpandedRow\n\t\t\t\t\tcdsExpandedRowHover\n\t\t\t\t\t[row]="row"\n\t\t\t\t\t[expanded]="model.isRowExpanded(i)"\n\t\t\t\t\t[skeleton]="skeleton">\n\t\t\t\t</tr>\n\t\t\t\t<ng-container\n\t\t\t\t\t*ngIf="model.isRowExpandable(i) && shouldExpandAsTable(row) && model.isRowExpanded(i) && !model.isRowFiltered(i)">\n\t\t\t\t\t<tr\n\t\t\t\t\t\t*ngFor="let expandedDataRow of firstExpandedDataInRow(row)"\n\t\t\t\t\t\tcdsTableRow\n\t\t\t\t\t\t[model]="model"\n\t\t\t\t\t\t[showSelectionColumnCheckbox]="false"\n\t\t\t\t\t\t[showSelectionColumn]="showSelectionColumn"\n\t\t\t\t\t\t[row]="expandedDataRow"\n\t\t\t\t\t\t[size]="size"\n\t\t\t\t\t\t[skeleton]="skeleton">\n\t\t\t\t\t</tr>\n\t\t\t\t</ng-container>\n\t\t\t</ng-container>\n\t\t</ng-container>\n\t\t<ng-content></ng-content>\n\t'})],TableBody);let TableRowComponent=class TableRowComponent{constructor(i18n){this.i18n=i18n,this.expanded=!1,this.expandable=!1,this.selected=!1,this.size="md",this.enableSingleSelect=!1,this.showSelectionColumn=!0,this.showSelectionColumnCheckbox=!0,this.skeleton=!1,this.selectRow=new core.EventEmitter,this.deselectRow=new core.EventEmitter,this.expandRow=new core.EventEmitter,this.rowClick=new core.EventEmitter,this._checkboxLabel=this.i18n.getOverridable("TABLE.CHECKBOX_ROW"),this._expandButtonAriaLabel=this.i18n.getOverridable("TABLE.EXPAND_BUTTON")}set expandButtonAriaLabel(value){this._expandButtonAriaLabel.override(value)}get expandButtonAriaLabel(){return this._expandButtonAriaLabel.value}set checkboxLabel(value){this._checkboxLabel.override(value)}get checkboxLabel(){return this._checkboxLabel.value}get selectedClass(){return this.selected}get parentRowClass(){return this.expandable}get expandableRowClass(){return this.expanded}get selectableClass(){return!1}get isParentRow(){return!!this.expandable||null}get isAccessible(){return this.enableSingleSelect&&!this.showSelectionColumn?0:null}onHostClick(){this.enableSingleSelect&&!this.showSelectionColumn&&this.onSelectionChange()}onRowClick(){this.rowClick.emit()}onSelectionChange(){this.selected?this.deselectRow.emit():this.selectRow.emit()}getCheckboxLabel(){return this._checkboxLabel.subject}getExpandButtonAriaLabel(){return this._expandButtonAriaLabel.subject}};TableRowComponent.ctorParameters=()=>[{type:i18n.oc}],TableRowComponent.propDecorators={model:[{type:core.Input}],row:[{type:core.Input}],expanded:[{type:core.Input}],expandable:[{type:core.Input}],selected:[{type:core.Input}],size:[{type:core.Input}],enableSingleSelect:[{type:core.Input}],expandButtonAriaLabel:[{type:core.Input}],checkboxLabel:[{type:core.Input}],showSelectionColumn:[{type:core.Input}],showSelectionColumnCheckbox:[{type:core.Input}],selectionLabelColumn:[{type:core.Input}],skeleton:[{type:core.Input}],selectRow:[{type:core.Output}],deselectRow:[{type:core.Output}],expandRow:[{type:core.Output}],rowClick:[{type:core.Output}],selectedClass:[{type:core.HostBinding,args:["class.cds--data-table--selected"]}],parentRowClass:[{type:core.HostBinding,args:["class.cds--parent-row"]}],expandableRowClass:[{type:core.HostBinding,args:["class.cds--expandable-row"]}],selectableClass:[{type:core.HostBinding,args:["class.tbody_row--selectable"]}],isParentRow:[{type:core.HostBinding,args:["attr.data-parent-row"]}],isAccessible:[{type:core.HostBinding,args:["attr.tabindex"]}],onHostClick:[{type:core.HostListener,args:["click"]}]},TableRowComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"[cdsTableRow], [ibmTableRow]",template:'\n\t\t<ng-container *ngIf="model">\n\t\t\t<td\n\t\t\t\t*ngIf="model.hasExpandableRows()"\n\t\t\t\tcdsTableExpandButton\n\t\t\t\tclass="cds--table-expand-v2"\n\t\t\t\t[expanded]="expanded"\n\t\t\t\t[expandable]="expandable"\n\t\t\t\t[skeleton]="skeleton"\n\t\t\t\t[ariaLabel]="getExpandButtonAriaLabel()"\n\t\t\t\t[headers]="model.getHeaderId(\'expand\')"\n\t\t\t\t(expandRow)="expandRow.emit()">\n\t\t\t</td>\n\t\t\t<ng-container *ngIf="!skeleton && showSelectionColumn && !enableSingleSelect">\n\t\t\t\t<td\n\t\t\t\t\t*ngIf="!showSelectionColumnCheckbox; else tableCheckboxTemplate">\n\t\t\t\t</td>\n\t\t\t\t<ng-template #tableCheckboxTemplate>\n\t\t\t\t\t<td\n\t\t\t\t\t\tcdsTableCheckbox\n\t\t\t\t\t\tclass="cds--table-column-checkbox"\n\t\t\t\t\t\t[size]="size"\n\t\t\t\t\t\t[selected]="selected"\n\t\t\t\t\t\t[label]="getCheckboxLabel()"\n\t\t\t\t\t\t[row]="row"\n\t\t\t\t\t\t[skeleton]="skeleton"\n\t\t\t\t\t\t[headers]="model.getHeaderId(\'select\')"\n\t\t\t\t\t\t(selectedChange)="onSelectionChange()">\n\t\t\t\t\t</td>\n\t\t\t\t</ng-template>\n\t\t\t</ng-container>\n\t\t\t<td\n\t\t\t\t*ngIf="!skeleton && showSelectionColumn && enableSingleSelect"\n\t\t\t\tcdsTableRadio\n\t\t\t\t[selected]="selected"\n\t\t\t\t[label]="getCheckboxLabel()"\n\t\t\t\t[row]="row"\n\t\t\t\t[skeleton]="skeleton"\n\t\t\t\t[headers]="model.getHeaderId(\'select\')"\n\t\t\t\t(change)="onSelectionChange()">\n\t\t\t</td>\n\t\t\t<ng-container *ngFor="let item of row; let j = index">\n\t\t\t\t<td\n\t\t\t\t\t*ngIf="item && model.getHeader(j) && model.getHeader(j).visible"\n\t\t\t\t\tcdsTableData\n\t\t\t\t\t[headers]="model.getHeaderId(j, item.colSpan)"\n\t\t\t\t\t[item]="item"\n\t\t\t\t\t[title]="item.title"\n\t\t\t\t\t[class]="model.getHeader(j).className"\n\t\t\t\t\t[ngStyle]="model.getHeader(j).style"\n\t\t\t\t\t[skeleton]="skeleton"\n\t\t\t\t\t[attr.colspan]="item.colSpan"\n\t\t\t\t\t[attr.rowspan]="item.rowSpan"\n\t\t\t\t\t(click)="onRowClick()"\n\t\t\t\t\t(keydown.enter)="onRowClick()">\n\t\t\t\t</td>\n\t\t\t\t<td\n\t\t\t\t\t*ngIf="item && model.getHeader(j) == null"\n\t\t\t\t\tcdsTableData\n\t\t\t\t\t[headers]="model.getHeaderId(j, item.colSpan)"\n\t\t\t\t\t[item]="item"\n\t\t\t\t\t[title]="item.title"\n\t\t\t\t\t[skeleton]="skeleton"\n\t\t\t\t\t[attr.colspan]="item.colSpan"\n\t\t\t\t\t[attr.rowspan]="item.rowSpan"\n\t\t\t\t\t(click)="onRowClick()"\n\t\t\t\t\t(keydown.enter)="onRowClick()">\n\t\t\t\t</td>\n\t\t\t</ng-container>\n\t\t</ng-container>\n\t\t<ng-content></ng-content>\n\t'})],TableRowComponent);let TableExpandedRow=class TableExpandedRow{constructor(){this.skeleton=!1,this.expandableRowClass=!0,this.dataChildRow=!0,this.expanded=!1}get displayStyle(){return this.expanded?null:"none"}firstExpandedTemplateInRow(row){const found=row.find((d=>d.expandedTemplate));return found?found.expandedTemplate:found}firstExpandedDataInRow(row){const found=row.find((d=>d.expandedData));return found?found.expandedData:found}};TableExpandedRow.propDecorators={row:[{type:core.Input}],skeleton:[{type:core.Input}],expandableRowClass:[{type:core.HostBinding,args:["class.cds--expandable-row"]}],dataChildRow:[{type:core.HostBinding,args:["attr.data-child-row"]}],expanded:[{type:core.Input}],displayStyle:[{type:core.HostBinding,args:["style.display"]}]},TableExpandedRow=(0,tslib_es6.gn)([(0,core.Component)({selector:"[cdsTableExpandedRow], [ibmTableExpandedRow]",template:'\n\t\t<td [attr.colspan]="row.length + 2">\n\t\t\t<ng-container *ngIf="!firstExpandedTemplateInRow(row)">\n\t\t\t\t{{firstExpandedDataInRow(row)}}\n\t\t\t</ng-container>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]="firstExpandedTemplateInRow(row)"\n\t\t\t\t[ngTemplateOutletContext]="{data: firstExpandedDataInRow(row)}">\n\t\t\t</ng-template>\n\t\t</td>\n\t'})],TableExpandedRow);let TableData=class TableData{constructor(){this.skeleton=!1}};TableData.propDecorators={item:[{type:core.Input}],skeleton:[{type:core.Input}]},TableData=(0,tslib_es6.gn)([(0,core.Component)({selector:"[cdsTableData], [ibmTableData]",template:'\n\t\t<ng-container *ngIf="!skeleton && !item.template">{{item.data}}</ng-container>\n\t\t<ng-template\n\t\t\t*ngIf="!skeleton"\n\t\t\t[ngTemplateOutlet]="item.template"\n\t\t\t[ngTemplateOutletContext]="{data: item.data}">\n\t\t</ng-template>\n\t'})],TableData);let TableCheckbox=class TableCheckbox{constructor(i18n){this.i18n=i18n,this.selected=!1,this.name="",this.size="md",this.skeleton=!1,this.selectedChange=new core.EventEmitter,this._label=this.i18n.getOverridable("TABLE.CHECKBOX_ROW")}get disabled(){return!!this.row&&!!this.row.disabled}set label(value){this._label.override(value)}get label(){return this._label.value}getSelectionLabelValue(row){return this.selectionLabelColumn?{value:row[this.selectionLabelColumn].data}:{value:this.i18n.get().TABLE.ROW}}getLabel(){return this._label.subject}};TableCheckbox.ctorParameters=()=>[{type:i18n.oc}],TableCheckbox.propDecorators={row:[{type:core.Input}],selected:[{type:core.Input}],name:[{type:core.Input}],size:[{type:core.Input}],label:[{type:core.Input}],selectionLabelColumn:[{type:core.Input}],skeleton:[{type:core.Input}],selectedChange:[{type:core.Output}]},TableCheckbox=(0,tslib_es6.gn)([(0,core.Component)({selector:"[cdsTableCheckbox], [ibmTableCheckbox]",template:'\n\t\t<cds-checkbox\n\t\t\t*ngIf="!skeleton"\n\t\t\tinline="true"\n\t\t\t[name]="name"\n\t\t\t[checked]="selected"\n\t\t\t[disabled]="disabled"\n\t\t\t(checkedChange)="selectedChange.emit()"\n\t\t\t[hideLabel]="true">\n\t\t\t\t{{getLabel() | i18nReplace:getSelectionLabelValue(row) | async}}\n\t\t</cds-checkbox>\n\t'})],TableCheckbox);let TableRadio=class TableRadio{constructor(i18n){this.i18n=i18n,this.selected=!1,this.radioColumn=!0,this.selectableColumn=!0,this.skeleton=!1,this.change=new core.EventEmitter,this._label=this.i18n.getOverridable("TABLE.CHECKBOX_ROW")}set label(value){this._label.override(value)}get label(){return this._label.value}get disabled(){return!!this.row&&!!this.row.disabled}getSelectionLabelValue(row){return this.selectionLabelColumn?{value:row[this.selectionLabelColumn].data}:{value:this.i18n.get().TABLE.ROW}}getLabel(){return this._label.subject}};TableRadio.ctorParameters=()=>[{type:i18n.oc}],TableRadio.propDecorators={row:[{type:core.Input}],selected:[{type:core.Input}],label:[{type:core.Input}],radioColumn:[{type:core.HostBinding,args:["class.cds--table-column-radio"]}],selectableColumn:[{type:core.HostBinding,args:["class.cds--table-column-checkbox"]}],selectionLabelColumn:[{type:core.Input}],skeleton:[{type:core.Input}],change:[{type:core.Output}]},TableRadio=(0,tslib_es6.gn)([(0,core.Component)({selector:"[cdsTableRadio], [ibmTableRadio]",template:'\n\t\t<cds-radio\n\t\t\t*ngIf="!skeleton"\n\t\t\t[attr.aria-label]="getLabel() | i18nReplace:getSelectionLabelValue(row) | async"\n\t\t\t[ariaLabel]="getLabel() | i18nReplace:getSelectionLabelValue(row) | async"\n\t\t\t[checked]="selected"\n\t\t\t[disabled]="disabled"\n\t\t\t(change)="change.emit()">\n\t\t</cds-radio>\n\t'})],TableRadio);let TableExpandButton=class TableExpandButton{constructor(i18n){this.i18n=i18n,this.expanded=!1,this.expandable=!1,this.skeleton=!1,this.expandClass=!0,this.expandRow=new core.EventEmitter,this._ariaLabel=this.i18n.getOverridable("TABLE.EXPAND_BUTTON")}set ariaLabel(value){this._ariaLabel.override(value)}get ariaLabel(){return this._ariaLabel.value}get previousValue(){return this.expanded?"collapsed":null}getAriaLabel(){return this._ariaLabel.subject}};TableExpandButton.ctorParameters=()=>[{type:i18n.oc}],TableExpandButton.propDecorators={expanded:[{type:core.Input}],expandable:[{type:core.Input}],ariaLabel:[{type:core.Input}],skeleton:[{type:core.Input}],expandClass:[{type:core.HostBinding,args:["class.cds--table-expand"]}],previousValue:[{type:core.HostBinding,args:["attr.data-previous-value"]}],expandRow:[{type:core.Output}]},TableExpandButton=(0,tslib_es6.gn)([(0,core.Component)({selector:"[cdsTableExpandButton], [ibmTableExpandButton]",template:'\n\t\t<button\n\t\t\t*ngIf="expandable"\n\t\t\tclass="cds--table-expand__button"\n\t\t\t[attr.aria-label]="getAriaLabel() | async"\n\t\t\t(click)="expandRow.emit()">\n\t\t\t<svg cdsIcon="chevron--right" size="16" class="cds--table-expand__svg"></svg>\n\t\t</button>\n\t'})],TableExpandButton);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),src_forms=__webpack_require__("./src/forms/index.ts"),dialog=__webpack_require__("./src/dialog/index.ts"),src_button=__webpack_require__("./src/button/index.ts"),icon=__webpack_require__("./src/icon/index.ts");class TableRow extends Array{constructor(){super(...arguments),this.disabled=!1}}let TableModule=class TableModule{};TableModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[TableToolbar,TableContainer,TableHeader,TableHeaderTitle,TableHeaderDescription,TableHeadCellLabel,TableToolbarActions,TableToolbarSearch,TableToolbarContent,ExpandedRowHover,Table,TableDirective,TableHead,TableHeadCell,TableHeadCheckbox,TableHeadExpand,TableBody,TableRowComponent,TableExpandedRow,TableData,TableCheckbox,TableRadio,TableExpandButton],exports:[TableToolbar,TableContainer,TableHeader,TableHeaderTitle,TableHeaderDescription,TableHeadCellLabel,TableToolbarActions,TableToolbarSearch,TableToolbarContent,ExpandedRowHover,Table,TableDirective,TableHead,TableHeadCell,TableHeadCheckbox,TableHeadExpand,TableBody,TableRowComponent,TableExpandedRow,TableData,TableCheckbox,TableRadio,TableExpandButton],imports:[common.CommonModule,src_forms.s,fesm2020_forms.u5,dialog.Su,src_button.hJ,search.t,i18n.LU,icon.QX]})],TableModule)},"./src/table/table-header-item.class.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{j:()=>TableHeaderItem});class TableHeaderItem{constructor(rawData){this.visible=!0,this.sorted=!1,this.sortable=!0,this.filterCount=0,this.rowSpan=1,this.colSpan=1,this.style={},this.sortDirection="NONE";const defaults={data:"",visible:this.visible,style:this.style,filterCount:this.filterCount,filterData:{data:""}},data=Object.assign({},defaults,rawData);for(let property of Object.getOwnPropertyNames(data))data.hasOwnProperty(property)&&(this[property]=data[property])}set ascending(asc){this.sortDirection=asc?"ASCENDING":"DESCENDING"}get ascending(){return"ASCENDING"===this.sortDirection}set descending(desc){this.sortDirection=desc?"DESCENDING":"ASCENDING"}get descending(){return"DESCENDING"===this.sortDirection}get title(){return this._title?this._title:this.data?"string"==typeof this.data?this.data:this.data.toString&&this.data.constructor!=={}.constructor?this.data.toString():"":""}set title(title){this._title=title}compare(one,two){return one&&two?"string"==typeof one.data?one.data.localeCompare(two.data):one.data<two.data?-1:one.data>two.data?1:0:0}filter(item){return this.filterCount=0,!1}}},"./src/table/table-item.class.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{r:()=>TableItem});class TableItem{constructor(rawData){this.rowSpan=1,this.colSpan=1;const data=Object.assign({},{data:""},rawData);for(const property of Object.getOwnPropertyNames(data))data.hasOwnProperty(property)&&(this[property]=data[property])}get title(){return"string"==typeof this._title?this._title:this.data?"string"==typeof this.data?this.data:this.data.toString&&this.data.constructor!=={}.constructor?this.data.toString():"":""}set title(title){this._title=title}}},"./src/table/table-model.class.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{G:()=>TableModel});var _angular_core__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_table_header_item_class__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/table/table-header-item.class.ts"),_table_item_class__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/table/table-item.class.ts"),rxjs__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subject.js");class TableModel{constructor(){this.dataChange=new _angular_core__WEBPACK_IMPORTED_MODULE_0__.EventEmitter,this.rowsSelectedChange=new _angular_core__WEBPACK_IMPORTED_MODULE_0__.EventEmitter,this.rowsExpandedChange=new _angular_core__WEBPACK_IMPORTED_MODULE_0__.EventEmitter,this.selectAllChange=new rxjs__WEBPACK_IMPORTED_MODULE_1__.x,this.rowsSelected=[],this.rowsExpanded=[],this.rowsIndices=[],this.rowsContext=[],this.rowsClass=[],this.header=[],this.currentPage=1,this.pageLength=10,this.isEnd=!1,this.isLoading=!1,this._data=[[]],this.tableModelCount=0,this.tableModelCount=TableModel.COUNT++}set data(newData){if((!newData||Array.isArray(newData)&&0===newData.length)&&(newData=[[]]),this._data=newData,this.rowsSelected=new Array(this._data.length).fill(!1),this.rowsExpanded=new Array(this._data.length).fill(!1),this.rowsIndices=[...Array(this._data.length).keys()],this.rowsContext=new Array(this._data.length),this.rowsClass=new Array(this._data.length),null==this.header||this.header.length!==this._data[0].length&&this._data[0].length>0){let header=new Array;for(let i=0;i<this._data[0].length;i++)header.push(new _table_header_item_class__WEBPACK_IMPORTED_MODULE_2__.j);this.header=header}this.dataChange.emit()}get data(){return this._data}set totalDataLength(length){this._totalDataLength=isNaN(length)?null:length}get totalDataLength(){return null!==this._totalDataLength&&this._totalDataLength>=0?this._totalDataLength:this.data&&1===this.data.length&&0===this.data[0].length?0:this.data.length}getId(column,row=0){return`table-header-${row}-${column}-${this.tableModelCount}`}getHeaderId(column,colSpan=1){if("select"===column||"expand"===column)return this.getId(column);let ids=[];for(let i=column;i>=0;i--)if(this.header[i]){for(let j=0;j<colSpan;j++)ids.push(this.getId(i+j));break}return ids.join(" ")}getHeader(column){if(!this.header)return null;for(let i=column;i>=0;i--){const headerCell=this.header[i];if(headerCell)return headerCell}return null}selectedRowsCount(){let count=0;return this.rowsSelected&&this.rowsSelected.forEach((rowSelected=>{rowSelected&&count++})),count}expandedRowsCount(){let count=0;return this.rowsExpanded&&this.rowsExpanded.forEach((rowExpanded=>{rowExpanded&&count++})),count}row(index){return this.data[this.realRowIndex(index)]}addRow(row,index){if(!this.data||0===this.data.length||0===this.data[0].length){let newData=new Array;return newData.push(row||[new _table_item_class__WEBPACK_IMPORTED_MODULE_3__.r]),void(this.data=newData)}let realRow=row;const columnCount=this.data[0].length;if(null==row){realRow=new Array;for(let i=0;i<columnCount;i++)realRow.push(new _table_item_class__WEBPACK_IMPORTED_MODULE_3__.r)}if(realRow.length<columnCount){const difference=columnCount-realRow.length;for(let i=0;i<difference;i++)realRow.push(new _table_item_class__WEBPACK_IMPORTED_MODULE_3__.r)}else if(realRow.length>columnCount){let difference=realRow.length-this.header.length;for(let j=0;j<difference;j++)this.header.push(new _table_header_item_class__WEBPACK_IMPORTED_MODULE_2__.j);for(let i=0;i<this.data.length;i++){let currentRow=this.data[i];difference=realRow.length-currentRow.length;for(let j=0;j<difference;j++)currentRow.push(new _table_item_class__WEBPACK_IMPORTED_MODULE_3__.r)}}if(null==index)this.data.push(realRow),this.rowsSelected.push(!1),this.rowsExpanded.push(!1),this.rowsContext.push(void 0),this.rowsClass.push(void 0),this.rowsIndices.push(this.data.length-1);else{const ri=this.realRowIndex(index);this.data.splice(ri,0,realRow),this.rowsSelected.splice(ri,0,!1),this.rowsExpanded.splice(ri,0,!1),this.rowsContext.splice(ri,0,void 0),this.rowsClass.splice(ri,0,void 0),this.rowsIndices.splice(ri,0,this.data.length-1)}this.dataChange.emit()}deleteRow(index){const rri=this.realRowIndex(index);this.data.splice(rri,1),this.rowsSelected.splice(rri,1),this.rowsExpanded.splice(rri,1),this.rowsContext.splice(rri,1),this.rowsClass.splice(rri,1);const rowIndex=this.rowsIndices[rri];this.rowsIndices.splice(rri,1),this.rowsIndices=this.rowsIndices.map((value=>value>rowIndex?--value:value)),this.dataChange.emit()}hasExpandableRows(){return this.data.some((data=>data.some((d=>d&&d.expandedData))))}isRowExpandable(index){return this.data[index].some((d=>d&&d.expandedData))}isRowExpanded(index){return this.rowsExpanded[index]}getRowContext(index){return this.rowsContext[index]}column(index){let column=new Array;const ri=this.realColumnIndex(index),rc=this.data.length;for(let i=0;i<rc;i++){const row=this.data[i];column.push(row[ri])}return column}addColumn(column,index){if(!this.data||0===this.data.length||0===this.data[0].length){let newData=new Array;if(null==column)newData.push([new _table_item_class__WEBPACK_IMPORTED_MODULE_3__.r]);else for(let i=0;i<column.length;i++){let item=column[i];newData.push([item])}return void(this.data=newData)}let rc=this.data.length,ci=this.realColumnIndex(index);for(let i=0;null!=column&&i<column.length-rc;i++)this.addRow();if(rc=this.data.length,null==index){for(let i=0;i<rc;i++){this.data[i].push(null==column||null==column[i]?new _table_item_class__WEBPACK_IMPORTED_MODULE_3__.r:column[i])}this.header.length<this.data[0].length&&this.header.push(new _table_header_item_class__WEBPACK_IMPORTED_MODULE_2__.j)}else{index>=this.data[0].length&&ci++;for(let i=0;i<rc;i++){this.data[i].splice(ci,0,null==column||null==column[i]?new _table_item_class__WEBPACK_IMPORTED_MODULE_3__.r:column[i])}this.header.length<this.data[0].length&&this.header.splice(ci,0,new _table_header_item_class__WEBPACK_IMPORTED_MODULE_2__.j)}this.dataChange.emit()}deleteColumn(index){const rci=this.realColumnIndex(index),rowCount=this.data.length;for(let i=0;i<rowCount;i++)this.data[i].splice(rci,1);this.header.length>this.data[0].length&&this.header.splice(rci,1),this.dataChange.emit()}moveColumn(indexFrom,indexTo){const headerFrom=this.header[indexFrom];this.addColumn(this.column(indexFrom),indexTo),this.deleteColumn(indexFrom+(indexTo<indexFrom?1:0)),this.header[indexTo+(indexTo>indexFrom?-1:0)]=headerFrom}cycleSortState(index){switch(this.header[index].sortDirection){case"ASCENDING":this.header[index].sortDirection="DESCENDING";break;case"DESCENDING":this.header[index].sortDirection="NONE";break;default:this.header[index].sortDirection="ASCENDING"}}sort(index){this.pushRowStateToModelData();const headerSorted=this.header[index].sorted;if(this.header.forEach((column=>column.sorted=!1)),"NONE"===this.header[index].sortDirection&&headerSorted){const oldData=this._data;this._data=[];for(let i=0;i<this.rowsIndices.length;i++){const ri=this.rowsIndices[i];this._data[ri]=oldData[i]}}else{const descending="DESCENDING"===this.header[index].sortDirection?-1:1;this.data.sort(((a,b)=>descending*this.header[index].compare(a[index],b[index]))),this.header[index].sorted=!0}this.popRowStateFromModelData()}pushRowStateToModelData(){for(let i=0;i<this.data.length;i++){const rowSelectedMark=new _table_item_class__WEBPACK_IMPORTED_MODULE_3__.r;rowSelectedMark.data=this.rowsSelected[i],this.data[i].push(rowSelectedMark);const rowExpandedMark=new _table_item_class__WEBPACK_IMPORTED_MODULE_3__.r;rowExpandedMark.data=this.rowsExpanded[i],this.data[i].push(rowExpandedMark);const rowContext=new _table_item_class__WEBPACK_IMPORTED_MODULE_3__.r;rowContext.data=this.rowsContext[i],this.data[i].push(rowContext);const rowClass=new _table_item_class__WEBPACK_IMPORTED_MODULE_3__.r;rowClass.data=this.rowsClass[i],this.data[i].push(rowClass);const rowIndex=new _table_item_class__WEBPACK_IMPORTED_MODULE_3__.r;rowIndex.data=this.rowsIndices[i],this.data[i].push(rowIndex)}}popRowStateFromModelData(){for(let i=0;i<this.data.length;i++)this.rowsIndices[i]=this.data[i].pop().data,this.rowsClass[i]=this.data[i].pop().data,this.rowsContext[i]=this.data[i].pop().data,this.rowsExpanded[i]=!!this.data[i].pop().data,this.rowsSelected[i]=!!this.data[i].pop().data}isRowFiltered(index){const realIndex=this.realRowIndex(index);return this.header.some(((item,i)=>item&&item.filter(this.row(realIndex)[i])))}selectRow(index,value=!0){this.isRowDisabled(index)||(this.rowsSelected[index]=value,this.rowsSelectedChange.emit(index))}selectAll(value=!0){if(this.data.length>=1&&this.data[0].length>=1)for(let i=0;i<this.rowsSelected.length;i++)this.selectRow(i,value);this.selectAllChange.next(value)}isRowSelected(index){return this.rowsSelected[index]}isRowDisabled(index){return!!this.data[index].disabled}expandRow(index,value=!0){this.rowsExpanded[index]=value,this.rowsExpandedChange.emit(index)}realRowIndex(index){return this.realIndex(index,this.data.length)}realColumnIndex(index){return this.realIndex(index,this.data[0].length)}realIndex(index,length){return null==index?length-1:index>=0?index>=length?length-1:index:-index>=length?0:length+index}}TableModel.COUNT=0},"./src/search/search.component.html?ngResource":module=>{module.exports='<div\n\tclass="cds--search"\n\t[ngClass]="{\n\t\t\'cds--search--sm\': size === \'sm\',\n\t\t\'cds--search--md\': size === \'md\',\n\t\t\'cds--search--lg\': size === \'lg\',\n\t\t\'cds--search--light\': theme === \'light\',\n\t\t\'cds--skeleton\': skeleton,\n\t\t\'cds--search--expandable\': expandable && !tableSearch,\n\t\t\'cds--search--expanded\': expandable && !tableSearch && active,\n\t\t\'cds--toolbar-search\': toolbar && !expandable,\n\t\t\'cds--toolbar-search--active\': toolbar && !expandable && active,\n\t\t\'cds--toolbar-search-container-persistent\': tableSearch && !expandable,\n\t\t\'cds--toolbar-search-container-expandable\': tableSearch && expandable,\n\t\t\'cds--toolbar-search-container-active\': tableSearch && expandable && active\n\t}"\n\trole="search"\n\t[attr.aria-label]="ariaLabel"\n\t(click)="openSearch()">\n\t<label class="cds--label" [for]="id">{{label}}</label>\n\n\t<div *ngIf="skeleton; else enableInput" class="cds--search-input"></div>\n\t<ng-template #enableInput>\n\t\t<input\n\t\t\t#input\n\t\t\tclass="cds--search-input"\n\t\t\t[type]="tableSearch || !toolbar ? \'text\' : \'search\'"\n\t\t\t[id]="id"\n\t\t\t[value]="value"\n\t\t\t[autocomplete]="autocomplete"\n\t\t\t[placeholder]="placeholder"\n\t\t\t[disabled]="disabled"\n\t\t\t[required]="required"\n\t\t\t(input)="onSearch($event.target.value)"\n\t\t\t(keyup.enter)="onEnter()"/>\n\t\t<button\n\t\t\t*ngIf="!tableSearch && toolbar"\n\t\t\tclass="cds--toolbar-search__btn"\n\t\t\t(click)="openSearch()"\n\t\t\taria-label="Open search">\n\t\t\t<svg cdsIcon="search" size="16" class="cds--search-magnifier-icon"></svg>\n\t\t</button>\n\t\t<svg\n\t\t\tcdsIcon="search"\n\t\t\t*ngIf="tableSearch || !toolbar"\n\t\t\tclass="cds--search-magnifier-icon"\n\t\t\tsize="16">\n\t\t</svg>\n\t</ng-template>\n\n\t<button\n\t\t*ngIf="tableSearch || !toolbar"\n\t\tclass="cds--search-close"\n\t\t[ngClass]="{\n\t\t\t\'cds--search-close--hidden\': !value || value.length === 0\n\t\t}"\n\t\t[title]="clearButtonTitle"\n\t\t(click)="clearSearch()">\n\t\t<span class="cds--visually-hidden">{{ clearButtonTitle }}</span>\n\t\t<svg cdsIcon="close" size="16"></svg>\n\t</button>\n</div>\n'}}]);

package/docs/storybook/ui-shell-ui-shell-stories.b8c5a541.iframe.bundle.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[9660],{"./src/button/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{HL:()=>BaseIconButton,zx:()=>Button,hJ:()=>ButtonModule,uV:()=>ButtonSet,hU:()=>IconButton});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let Button=class Button{constructor(){this.cdsButton="primary",this.skeleton=!1,this.iconOnly=!1,this.isExpressive=!1,this.baseClass=!0}set ibmButton(type){this.cdsButton=type}get primaryButton(){return"primary"===this.cdsButton||!this.cdsButton}get secondaryButton(){return"secondary"===this.cdsButton}get tertiaryButton(){return"tertiary"===this.cdsButton}get ghostButton(){return"ghost"===this.cdsButton}get dangerButton(){return"danger"===this.cdsButton||"danger--primary"===this.cdsButton}get dangerTertiary(){return"danger--tertiary"===this.cdsButton}get dangerGhost(){return"danger--ghost"===this.cdsButton}get smallSize(){return"sm"===this.size&&!this.isExpressive}get mediumSize(){return"md"===this.size&&!this.isExpressive}get largeSize(){return"lg"===this.size}get extraLargeSize(){return"xl"===this.size}get twoExtraLargeSize(){return"2xl"===this.size}get smallLayoutSize(){return"sm"===this.size&&!this.isExpressive}get mediumLayoutSize(){return"md"===this.size&&!this.isExpressive}get largeLayoutSize(){return"lg"===this.size}get extraLargeLayoutSize(){return"xl"===this.size}get twoExtraLargeLayoutSize(){return"2xl"===this.size}};Button.propDecorators={ibmButton:[{type:core.Input}],cdsButton:[{type:core.Input}],size:[{type:core.Input}],skeleton:[{type:core.HostBinding,args:["class.cds--skeleton"]},{type:core.Input}],iconOnly:[{type:core.HostBinding,args:["class.cds--btn--icon-only"]},{type:core.Input}],isExpressive:[{type:core.HostBinding,args:["class.cds--btn--expressive"]},{type:core.Input}],baseClass:[{type:core.HostBinding,args:["class.cds--btn"]}],primaryButton:[{type:core.HostBinding,args:["class.cds--btn--primary"]}],secondaryButton:[{type:core.HostBinding,args:["class.cds--btn--secondary"]}],tertiaryButton:[{type:core.HostBinding,args:["class.cds--btn--tertiary"]}],ghostButton:[{type:core.HostBinding,args:["class.cds--btn--ghost"]}],dangerButton:[{type:core.HostBinding,args:["class.cds--btn--danger"]}],dangerTertiary:[{type:core.HostBinding,args:["class.cds--btn--danger--tertiary"]}],dangerGhost:[{type:core.HostBinding,args:["class.cds--btn--danger--ghost"]}],smallSize:[{type:core.HostBinding,args:["class.cds--btn--sm"]}],mediumSize:[{type:core.HostBinding,args:["class.cds--btn--md"]}],largeSize:[{type:core.HostBinding,args:["class.cds--btn--lg"]}],extraLargeSize:[{type:core.HostBinding,args:["class.cds--btn--xl"]}],twoExtraLargeSize:[{type:core.HostBinding,args:["class.cds--btn--2xl"]}],smallLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-sm"]}],mediumLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-md"]}],largeLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-lg"]}],extraLargeLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-xl"]}],twoExtraLargeLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-2xl"]}]},Button=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsButton], [ibmButton]"})],Button);let ButtonSet=class ButtonSet{constructor(){this.buttonSetClass=!0}};ButtonSet.propDecorators={buttonSetClass:[{type:core.HostBinding,args:["class.cds--btn-set"]}]},ButtonSet=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-button-set, ibm-button-set",template:"<ng-content></ng-content>"})],ButtonSet);let BaseIconButton=class BaseIconButton{constructor(){this.caret=!0,this.dropShadow=!0,this.highContrast=!0,this.isOpen=!1,this.align="bottom",this.autoAlign=!1,this.enterDelayMs=100,this.leaveDelayMs=300}};BaseIconButton.propDecorators={caret:[{type:core.Input}],dropShadow:[{type:core.Input}],highContrast:[{type:core.Input}],isOpen:[{type:core.Input}],align:[{type:core.Input}],autoAlign:[{type:core.Input}],enterDelayMs:[{type:core.Input}],leaveDelayMs:[{type:core.Input}]},BaseIconButton=(0,tslib_es6.gn)([(0,core.Component)({template:""})],BaseIconButton);let IconButton=class IconButton extends BaseIconButton{constructor(renderer){super(),this.renderer=renderer,this.buttonId="icon-btn-"+IconButton.iconButtonCounter++,this.kind="primary",this.size="lg",this.type="button",this.isExpressive=!1,this.disabled=!1,this.click=new core.EventEmitter,this.focus=new core.EventEmitter,this.blur=new core.EventEmitter,this.tooltipClick=new core.EventEmitter,this.classList={},this.attributeList={}}set buttonNgClass(obj){this.classList=Object.assign({"cds--btn--disabled":this.disabled},obj)}get buttonNgClass(){return this.classList}set buttonAttributes(obj){this.button&&(Object.keys(this.attributeList).forEach((key=>{this.renderer.removeAttribute(this.button.nativeElement,key)})),Object.keys(obj).forEach((key=>{this.renderer.setAttribute(this.button.nativeElement,key,obj[key])}))),this.attributeList=obj}get buttonAttributes(){return this.buttonAttributes}ngAfterViewInit(){this.buttonAttributes=this.attributeList}emitClickEvent(event,element="button"){event.preventDefault(),event.stopPropagation(),"tooltip"!==element?this.click.emit(event):this.tooltipClick.emit(event)}};IconButton.iconButtonCounter=0,IconButton.ctorParameters=()=>[{type:core.Renderer2}],IconButton.propDecorators={buttonNgClass:[{type:core.Input}],buttonAttributes:[{type:core.Input}],button:[{type:core.ViewChild,args:["button"]}],buttonId:[{type:core.Input}],kind:[{type:core.Input}],size:[{type:core.Input}],type:[{type:core.Input}],isExpressive:[{type:core.Input}],disabled:[{type:core.Input}],description:[{type:core.Input}],click:[{type:core.Output}],focus:[{type:core.Output}],blur:[{type:core.Output}],tooltipClick:[{type:core.Output}]},IconButton=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-icon-button, ibm-icon-button",template:'\n\t<cds-tooltip\n\t\tclass="cds--icon-tooltip"\n\t\t[description]="description"\n\t\t[disabled]="disabled"\n\t\t[caret]="caret"\n\t\t[dropShadow]="dropShadow"\n\t\t[highContrast]="highContrast"\n\t\t[isOpen]="isOpen"\n\t\t[align]="align"\n\t\t[autoAlign]="autoAlign"\n\t\t[enterDelayMs]="enterDelayMs"\n\t\t[leaveDelayMs]="leaveDelayMs"\n\t\t(click)="emitClickEvent($event, \'tooltip\')">\n\t\t<button\n\t\t\t#button\n\t\t\t[id]="buttonId"\n\t\t\t[disabled]="disabled"\n\t\t\t[attr.type]="type"\n\t\t\t[iconOnly]="true"\n\t\t\t[ngClass]="buttonNgClass"\n\t\t\t[cdsButton]="kind"\n\t\t\t[size]="size"\n\t\t\t[isExpressive]="isExpressive"\n\t\t\t(click)="emitClickEvent($event)"\n\t\t\t(focus)="focus.emit($event)"\n\t\t\t(blur)="blur.emit($event)">\n\t\t\t<ng-content></ng-content>\n\t\t</button>\n\t</cds-tooltip>\n\t'})],IconButton);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),tooltip=__webpack_require__("./src/tooltip/index.ts");let ButtonModule=class ButtonModule{};ButtonModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Button,ButtonSet,BaseIconButton,IconButton],exports:[Button,ButtonSet,IconButton],imports:[common.CommonModule,tooltip.z8]})],ButtonModule)},"./src/icon/icon.directive.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{a:()=>IconDirective});var tslib__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_icon_service__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/icon/icon.service.ts"),_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@carbon/icon-helpers/es/index.js");let IconDirective=class IconDirective{constructor(elementRef,iconService){this.elementRef=elementRef,this.iconService=iconService,this.cdsIcon="",this.size="16",this.title="",this.ariaLabel="",this.ariaLabelledBy="",this.ariaHidden="",this.isFocusable=!1}set ibmIcon(iconName){this.cdsIcon=iconName}renderIcon(iconName){const root=this.elementRef.nativeElement;let icon;try{icon=this.iconService.get(iconName,this.size.toString())}catch(error){return void console.warn(error)}const domParser=new DOMParser,rawSVG=icon.svg,svgElement=domParser.parseFromString(rawSVG,"image/svg+xml").documentElement;let node="SVG"!==root.tagName.toUpperCase()?svgElement:svgElement.firstChild;for(root.innerHTML="";node;)root.appendChild(root.ownerDocument.importNode(node,!0)),node=node.nextSibling;const svg="SVG"!==root.tagName.toUpperCase()?svgElement:root;svg.setAttribute("xmlns","http://www.w3.org/2000/svg");const attributes=(0,_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_1__.u9)({width:icon.attrs.width,height:icon.attrs.height,viewBox:icon.attrs.viewBox,title:this.title,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledBy,"aria-hidden":this.ariaHidden,focusable:this.isFocusable.toString()}),attrKeys=Object.keys(attributes);for(let i=0;i<attrKeys.length;i++){const key=attrKeys[i],value=attributes[key];"title"!==key&&(value&&svg.setAttribute(key,value))}if(attributes.title){const title=document.createElement("title");title.textContent=attributes.title,IconDirective.titleIdCounter++,title.setAttribute("id",`${icon.name}-title-${IconDirective.titleIdCounter}`),svg.insertBefore(title,svg.firstElementChild),svg.setAttribute("aria-labelledby",`${icon.name}-title-${IconDirective.titleIdCounter}`)}}ngAfterViewInit(){this.renderIcon(this.cdsIcon)}ngOnChanges({cdsIcon}){cdsIcon&&!cdsIcon.isFirstChange()&&this.renderIcon(this.cdsIcon)}};IconDirective.titleIdCounter=0,IconDirective.ctorParameters=()=>[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.ElementRef},{type:_icon_service__WEBPACK_IMPORTED_MODULE_0__.C6}],IconDirective.propDecorators={ibmIcon:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],cdsIcon:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],size:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],title:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaLabel:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaLabelledBy:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaHidden:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],isFocusable:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}]},IconDirective=(0,tslib__WEBPACK_IMPORTED_MODULE_3__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_2__.Directive)({selector:"[cdsIcon], [ibmIcon]"})],IconDirective)},"./src/icon/icon.module.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{QX:()=>IconModule});var tslib__WEBPACK_IMPORTED_MODULE_56__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_55__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_angular_common__WEBPACK_IMPORTED_MODULE_57__=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),_icon_directive__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/icon/icon.directive.ts"),_icon_service__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/icon/icon.service.ts"),_carbon_icons_es_add_16__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@carbon/icons/es/add/16.js"),_carbon_icons_es_add_20__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@carbon/icons/es/add/20.js"),_carbon_icons_es_bee_16__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@carbon/icons/es/bee/16.js"),_carbon_icons_es_bee_20__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@carbon/icons/es/bee/20.js"),_carbon_icons_es_calendar_16__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@carbon/icons/es/calendar/16.js"),_carbon_icons_es_carbon_16__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@carbon/icons/es/carbon/16.js"),_carbon_icons_es_carbon_20__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/@carbon/icons/es/carbon/20.js"),_carbon_icons_es_caret_down_16__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/@carbon/icons/es/caret--down/16.js"),_carbon_icons_es_caret_left_16__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./node_modules/@carbon/icons/es/caret--left/16.js"),_carbon_icons_es_caret_right_16__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./node_modules/@carbon/icons/es/caret--right/16.js"),_carbon_icons_es_caret_up_16__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("./node_modules/@carbon/icons/es/caret--up/16.js"),_carbon_icons_es_checkmark_16__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark/16.js"),_carbon_icons_es_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--filled/16.js"),_carbon_icons_es_checkmark_filled_20__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--filled/20.js"),_carbon_icons_es_checkmark_outline_16__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--outline/16.js"),_carbon_icons_es_chevron_down_16__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__("./node_modules/@carbon/icons/es/chevron--down/16.js"),_carbon_icons_es_chevron_right_16__WEBPACK_IMPORTED_MODULE_18__=__webpack_require__("./node_modules/@carbon/icons/es/chevron--right/16.js"),_carbon_icons_es_circle_dash_16__WEBPACK_IMPORTED_MODULE_19__=__webpack_require__("./node_modules/@carbon/icons/es/circle-dash/16.js"),_carbon_icons_es_close_16__WEBPACK_IMPORTED_MODULE_20__=__webpack_require__("./node_modules/@carbon/icons/es/close/16.js"),_carbon_icons_es_close_20__WEBPACK_IMPORTED_MODULE_21__=__webpack_require__("./node_modules/@carbon/icons/es/close/20.js"),_carbon_icons_es_copy_16__WEBPACK_IMPORTED_MODULE_22__=__webpack_require__("./node_modules/@carbon/icons/es/copy/16.js"),_carbon_icons_es_copy_20__WEBPACK_IMPORTED_MODULE_23__=__webpack_require__("./node_modules/@carbon/icons/es/copy/20.js"),_carbon_icons_es_data_2_16__WEBPACK_IMPORTED_MODULE_24__=__webpack_require__("./node_modules/@carbon/icons/es/data--2/16.js"),_carbon_icons_es_data_2_20__WEBPACK_IMPORTED_MODULE_25__=__webpack_require__("./node_modules/@carbon/icons/es/data--2/20.js"),_carbon_icons_es_document_16__WEBPACK_IMPORTED_MODULE_26__=__webpack_require__("./node_modules/@carbon/icons/es/document/16.js"),_carbon_icons_es_document_20__WEBPACK_IMPORTED_MODULE_27__=__webpack_require__("./node_modules/@carbon/icons/es/document/20.js"),_carbon_icons_es_download_16__WEBPACK_IMPORTED_MODULE_28__=__webpack_require__("./node_modules/@carbon/icons/es/download/16.js"),_carbon_icons_es_error_filled_16__WEBPACK_IMPORTED_MODULE_29__=__webpack_require__("./node_modules/@carbon/icons/es/error--filled/16.js"),_carbon_icons_es_error_filled_20__WEBPACK_IMPORTED_MODULE_30__=__webpack_require__("./node_modules/@carbon/icons/es/error--filled/20.js"),_carbon_icons_es_fade_16__WEBPACK_IMPORTED_MODULE_31__=__webpack_require__("./node_modules/@carbon/icons/es/fade/16.js"),_carbon_icons_es_fade_20__WEBPACK_IMPORTED_MODULE_32__=__webpack_require__("./node_modules/@carbon/icons/es/fade/20.js"),_carbon_icons_es_folder_16__WEBPACK_IMPORTED_MODULE_33__=__webpack_require__("./node_modules/@carbon/icons/es/folder/16.js"),_carbon_icons_es_incomplete_16__WEBPACK_IMPORTED_MODULE_34__=__webpack_require__("./node_modules/@carbon/icons/es/incomplete/16.js"),_carbon_icons_es_information_filled_16__WEBPACK_IMPORTED_MODULE_35__=__webpack_require__("./node_modules/@carbon/icons/es/information--filled/16.js"),_carbon_icons_es_information_filled_20__WEBPACK_IMPORTED_MODULE_36__=__webpack_require__("./node_modules/@carbon/icons/es/information--filled/20.js"),_carbon_icons_es_information_square_filled_20__WEBPACK_IMPORTED_MODULE_37__=__webpack_require__("./node_modules/@carbon/icons/es/information--square--filled/20.js"),_carbon_icons_es_menu_16__WEBPACK_IMPORTED_MODULE_38__=__webpack_require__("./node_modules/@carbon/icons/es/menu/16.js"),_carbon_icons_es_menu_20__WEBPACK_IMPORTED_MODULE_39__=__webpack_require__("./node_modules/@carbon/icons/es/menu/20.js"),_carbon_icons_es_overflow_menu_vertical_16__WEBPACK_IMPORTED_MODULE_40__=__webpack_require__("./node_modules/@carbon/icons/es/overflow-menu--vertical/16.js"),_carbon_icons_es_overflow_menu_horizontal_16__WEBPACK_IMPORTED_MODULE_41__=__webpack_require__("./node_modules/@carbon/icons/es/overflow-menu--horizontal/16.js"),_carbon_icons_es_save_16__WEBPACK_IMPORTED_MODULE_42__=__webpack_require__("./node_modules/@carbon/icons/es/save/16.js"),_carbon_icons_es_search_16__WEBPACK_IMPORTED_MODULE_43__=__webpack_require__("./node_modules/@carbon/icons/es/search/16.js"),_carbon_icons_es_settings_16__WEBPACK_IMPORTED_MODULE_44__=__webpack_require__("./node_modules/@carbon/icons/es/settings/16.js"),_carbon_icons_es_settings_adjust_16__WEBPACK_IMPORTED_MODULE_45__=__webpack_require__("./node_modules/@carbon/icons/es/settings--adjust/16.js"),_carbon_icons_es_subtract_16__WEBPACK_IMPORTED_MODULE_46__=__webpack_require__("./node_modules/@carbon/icons/es/subtract/16.js"),_carbon_icons_es_trash_can_16__WEBPACK_IMPORTED_MODULE_47__=__webpack_require__("./node_modules/@carbon/icons/es/trash-can/16.js"),_carbon_icons_es_warning_16__WEBPACK_IMPORTED_MODULE_48__=__webpack_require__("./node_modules/@carbon/icons/es/warning/16.js"),_carbon_icons_es_warning_filled_16__WEBPACK_IMPORTED_MODULE_49__=__webpack_require__("./node_modules/@carbon/icons/es/warning--filled/16.js"),_carbon_icons_es_warning_filled_20__WEBPACK_IMPORTED_MODULE_50__=__webpack_require__("./node_modules/@carbon/icons/es/warning--filled/20.js"),_carbon_icons_es_warning_alt_filled_16__WEBPACK_IMPORTED_MODULE_51__=__webpack_require__("./node_modules/@carbon/icons/es/warning--alt--filled/16.js"),_carbon_icons_es_warning_alt_filled_20__WEBPACK_IMPORTED_MODULE_52__=__webpack_require__("./node_modules/@carbon/icons/es/warning--alt--filled/20.js"),_carbon_icons_es_view_16__WEBPACK_IMPORTED_MODULE_53__=__webpack_require__("./node_modules/@carbon/icons/es/view/16.js"),_carbon_icons_es_view_off_16__WEBPACK_IMPORTED_MODULE_54__=__webpack_require__("./node_modules/@carbon/icons/es/view--off/16.js");const ICON_SERVICE_PROVIDER={provide:_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6,deps:[[new _angular_core__WEBPACK_IMPORTED_MODULE_55__.Optional,new _angular_core__WEBPACK_IMPORTED_MODULE_55__.SkipSelf,_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6]],useFactory:function ICON_SERVICE_PROVIDER_FACTORY(parentService){return parentService||new _icon_service__WEBPACK_IMPORTED_MODULE_1__.C6}};let IconModule=class IconModule{constructor(iconService){this.iconService=iconService,iconService.registerAll([_carbon_icons_es_add_16__WEBPACK_IMPORTED_MODULE_2__.Z,_carbon_icons_es_add_20__WEBPACK_IMPORTED_MODULE_3__.Z,_carbon_icons_es_bee_16__WEBPACK_IMPORTED_MODULE_4__.Z,_carbon_icons_es_bee_20__WEBPACK_IMPORTED_MODULE_5__.Z,_carbon_icons_es_calendar_16__WEBPACK_IMPORTED_MODULE_6__.Z,_carbon_icons_es_carbon_16__WEBPACK_IMPORTED_MODULE_7__.Z,_carbon_icons_es_carbon_20__WEBPACK_IMPORTED_MODULE_8__.Z,_carbon_icons_es_caret_down_16__WEBPACK_IMPORTED_MODULE_9__.Z,_carbon_icons_es_caret_left_16__WEBPACK_IMPORTED_MODULE_10__.Z,_carbon_icons_es_caret_right_16__WEBPACK_IMPORTED_MODULE_11__.Z,_carbon_icons_es_caret_up_16__WEBPACK_IMPORTED_MODULE_12__.Z,_carbon_icons_es_checkmark_16__WEBPACK_IMPORTED_MODULE_13__.Z,_carbon_icons_es_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_14__.Z,_carbon_icons_es_checkmark_filled_20__WEBPACK_IMPORTED_MODULE_15__.Z,_carbon_icons_es_checkmark_outline_16__WEBPACK_IMPORTED_MODULE_16__.Z,_carbon_icons_es_chevron_down_16__WEBPACK_IMPORTED_MODULE_17__.Z,_carbon_icons_es_chevron_right_16__WEBPACK_IMPORTED_MODULE_18__.Z,_carbon_icons_es_circle_dash_16__WEBPACK_IMPORTED_MODULE_19__.Z,_carbon_icons_es_close_16__WEBPACK_IMPORTED_MODULE_20__.Z,_carbon_icons_es_close_20__WEBPACK_IMPORTED_MODULE_21__.Z,_carbon_icons_es_copy_16__WEBPACK_IMPORTED_MODULE_22__.Z,_carbon_icons_es_copy_20__WEBPACK_IMPORTED_MODULE_23__.Z,_carbon_icons_es_data_2_16__WEBPACK_IMPORTED_MODULE_24__.Z,_carbon_icons_es_data_2_20__WEBPACK_IMPORTED_MODULE_25__.Z,_carbon_icons_es_document_16__WEBPACK_IMPORTED_MODULE_26__.Z,_carbon_icons_es_document_20__WEBPACK_IMPORTED_MODULE_27__.Z,_carbon_icons_es_download_16__WEBPACK_IMPORTED_MODULE_28__.Z,_carbon_icons_es_error_filled_16__WEBPACK_IMPORTED_MODULE_29__.Z,_carbon_icons_es_error_filled_20__WEBPACK_IMPORTED_MODULE_30__.Z,_carbon_icons_es_fade_16__WEBPACK_IMPORTED_MODULE_31__.Z,_carbon_icons_es_fade_20__WEBPACK_IMPORTED_MODULE_32__.Z,_carbon_icons_es_folder_16__WEBPACK_IMPORTED_MODULE_33__.Z,_carbon_icons_es_incomplete_16__WEBPACK_IMPORTED_MODULE_34__.Z,_carbon_icons_es_information_filled_16__WEBPACK_IMPORTED_MODULE_35__.Z,_carbon_icons_es_information_filled_20__WEBPACK_IMPORTED_MODULE_36__.Z,_carbon_icons_es_information_square_filled_20__WEBPACK_IMPORTED_MODULE_37__.Z,_carbon_icons_es_menu_16__WEBPACK_IMPORTED_MODULE_38__.Z,_carbon_icons_es_menu_20__WEBPACK_IMPORTED_MODULE_39__.Z,_carbon_icons_es_overflow_menu_vertical_16__WEBPACK_IMPORTED_MODULE_40__.Z,_carbon_icons_es_overflow_menu_horizontal_16__WEBPACK_IMPORTED_MODULE_41__.Z,_carbon_icons_es_save_16__WEBPACK_IMPORTED_MODULE_42__.Z,_carbon_icons_es_search_16__WEBPACK_IMPORTED_MODULE_43__.Z,_carbon_icons_es_settings_16__WEBPACK_IMPORTED_MODULE_44__.Z,_carbon_icons_es_settings_adjust_16__WEBPACK_IMPORTED_MODULE_45__.Z,_carbon_icons_es_subtract_16__WEBPACK_IMPORTED_MODULE_46__.Z,_carbon_icons_es_trash_can_16__WEBPACK_IMPORTED_MODULE_47__.Z,_carbon_icons_es_view_16__WEBPACK_IMPORTED_MODULE_53__.Z,_carbon_icons_es_view_off_16__WEBPACK_IMPORTED_MODULE_54__.Z,_carbon_icons_es_warning_16__WEBPACK_IMPORTED_MODULE_48__.Z,_carbon_icons_es_warning_filled_16__WEBPACK_IMPORTED_MODULE_49__.Z,_carbon_icons_es_warning_filled_20__WEBPACK_IMPORTED_MODULE_50__.Z,_carbon_icons_es_warning_alt_filled_16__WEBPACK_IMPORTED_MODULE_51__.Z,_carbon_icons_es_warning_alt_filled_20__WEBPACK_IMPORTED_MODULE_52__.Z])}};IconModule.ctorParameters=()=>[{type:_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6}],IconModule=(0,tslib__WEBPACK_IMPORTED_MODULE_56__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_55__.NgModule)({declarations:[_icon_directive__WEBPACK_IMPORTED_MODULE_0__.a],exports:[_icon_directive__WEBPACK_IMPORTED_MODULE_0__.a],imports:[_angular_common__WEBPACK_IMPORTED_MODULE_57__.CommonModule],providers:[ICON_SERVICE_PROVIDER]})],IconModule)},"./src/icon/icon.service.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{C6:()=>IconService});var tslib__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@carbon/icon-helpers/es/index.js");class IconNameNotFoundError extends Error{constructor(name){super(`Icon ${name} not found`)}}class IconSizeNotFoundError extends Error{constructor(size,name){super("Size ${size} for ${name} not found")}}class IconMemoryCache extends class IconCache{}{constructor(){super(...arguments),this.iconMap=new Map}get(name,size){if(!this.iconMap.has(name))throw new IconNameNotFoundError(name);const sizeMap=this.iconMap.get(name);if(!sizeMap.has(size))throw new IconSizeNotFoundError(size,name);return sizeMap.get(size)}set(name,size,descriptor){this.iconMap.has(name)||this.iconMap.set(name,new Map);this.iconMap.get(name).set(size,descriptor)}}let IconService=class IconService{constructor(){this.iconCache=new IconMemoryCache}registerAll(descriptors){descriptors.forEach((icon=>this.register(icon)))}register(descriptor){const{name}=descriptor;this.registerAs(name,descriptor)}registerAs(name,descriptor){const{size}=descriptor;this.iconCache.set(name,size.toString(),descriptor)}get(name,size){try{const icon=this.iconCache.get(name,size.toString());return icon.svg||(icon.svg=(0,_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_0__.BB)(icon)),icon}catch(e){throw e}}configure(options){this.iconCache=options.cache}};IconService=(0,tslib__WEBPACK_IMPORTED_MODULE_1__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_2__.Injectable)()],IconService)},"./src/icon/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{ar:()=>icon_directive.a,QX:()=>icon_module.QX,C6:()=>icon_service.C6});var icon_directive=__webpack_require__("./src/icon/icon.directive.ts"),icon_module=__webpack_require__("./src/icon/icon.module.ts"),icon_service=__webpack_require__("./src/icon/icon.service.ts")},"./src/layer/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>LayerDirective,D:()=>LayerModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let LayerDirective=class LayerDirective{set ibmLayer(level){this.cdsLayer=level}set cdsLayer(level){"number"==typeof level&&(this._passedLevel=level,this.layer=level)}get cdsLayer(){return this._passedLevel}set layer(level){"number"==typeof level&&(this._level=Math.max(0,Math.min(level,2)),this.layerChildren&&this.layerChildren.forEach((layer=>{layer!==this&&(layer.layer="number"==typeof layer._passedLevel?layer._passedLevel:this.layer+1)})))}get layer(){return this._level}get layerOneClass(){return 0===this.layer}get layerTwoClass(){return 1===this.layer}get layerThreeClass(){return 2===this.layer}ngAfterContentInit(){"number"!=typeof this.cdsLayer&&(this.layer=1)}};LayerDirective.propDecorators={ibmLayer:[{type:core.Input}],cdsLayer:[{type:core.Input}],layerOneClass:[{type:core.HostBinding,args:["class.cds--layer-one"]}],layerTwoClass:[{type:core.HostBinding,args:["class.cds--layer-two"]}],layerThreeClass:[{type:core.HostBinding,args:["class.cds--layer-three"]}],layerChildren:[{type:core.ContentChildren,args:[LayerDirective,{descendants:!1}]}]},LayerDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsLayer], [ibmLayer]",exportAs:"layer"})],LayerDirective);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let LayerModule=class LayerModule{};LayerModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[LayerDirective],exports:[LayerDirective],imports:[common.CommonModule]})],LayerModule)},"./src/search/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{o:()=>Search,t:()=>SearchModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),search_componentngResource=__webpack_require__("./src/search/search.component.html?ngResource"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),i18n=__webpack_require__("./src/i18n/index.ts");let Search=class Search{constructor(elementRef,i18n){this.elementRef=elementRef,this.i18n=i18n,this.theme="dark",this.size="md",this.disabled=!1,this.toolbar=!1,this.expandable=!1,this.skeleton=!1,this.active=!1,this.tableSearch=!1,this.id=`search-${Search.searchCount}`,this.value="",this.autocomplete="on",this.label=this.i18n.get().SEARCH.LABEL,this.placeholder=this.i18n.get().SEARCH.PLACEHOLDER,this.clearButtonTitle=this.i18n.get().SEARCH.CLEAR_BUTTON,this.searchTitle="",this.valueChange=new core.EventEmitter,this.open=new core.EventEmitter,this.clear=new core.EventEmitter,this.search=new core.EventEmitter,this.isComposing=!1,this.onTouched=()=>{},this.propagateChange=_=>{},Search.searchCount++}get containerClass(){return!(this.toolbar||this.expandable)}writeValue(value){this.value=value}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouched=fn}onSearch(search){this.isComposing||(this.value=search,this.doValueChange())}onEnter(){this.search.emit(this.value)}clearSearch(){this.value="",this.clear.emit(),this.propagateChange(this.value)}doValueChange(){this.valueChange.emit(this.value),this.propagateChange(this.value)}openSearch(){this.active=!0,this.open.emit(this.active),setTimeout((()=>this.inputRef.nativeElement.focus()))}keyDown(event){(this.toolbar||this.expandable)&&("Escape"===event.key?""===this.value&&(this.active=!1,this.open.emit(this.active)):"Enter"===event.key&&this.openSearch()),"Escape"===event.key&&""!==this.value&&this.clearSearch()}focusOut(event){this.onTouched(),(this.expandable||this.toolbar)&&this.inputRef&&""===this.inputRef.nativeElement.value&&!this.elementRef.nativeElement.contains(event.relatedTarget)&&(this.active=!1,this.open.emit(this.active))}focusIn(event){this.onTouched(),!this.expandable&&!this.toolbar||!this.inputRef||event.relatedTarget||this.elementRef.nativeElement.contains(event.relatedTarget)||this.openSearch()}compositionStart(event){this.isComposing=!0}compositionEnd(event){this.isComposing=!1,this.onSearch(this.value+event.data)}};Search.searchCount=0,Search.ctorParameters=()=>[{type:core.ElementRef},{type:i18n.oc}],Search.propDecorators={containerClass:[{type:core.HostBinding,args:["class.cds--form-item"]}],theme:[{type:core.Input}],size:[{type:core.Input}],disabled:[{type:core.Input}],toolbar:[{type:core.Input}],expandable:[{type:core.Input}],skeleton:[{type:core.Input}],active:[{type:core.Input}],tableSearch:[{type:core.Input}],name:[{type:core.Input}],id:[{type:core.Input}],required:[{type:core.Input}],value:[{type:core.Input}],autocomplete:[{type:core.Input}],label:[{type:core.Input}],placeholder:[{type:core.Input}],clearButtonTitle:[{type:core.Input}],searchTitle:[{type:core.Input}],ariaLabel:[{type:core.Input}],valueChange:[{type:core.Output}],open:[{type:core.Output}],clear:[{type:core.Output}],search:[{type:core.Output}],inputRef:[{type:core.ViewChild,args:["input"]}],keyDown:[{type:core.HostListener,args:["keydown",["$event"]]}],focusOut:[{type:core.HostListener,args:["focusout",["$event"]]}],focusIn:[{type:core.HostListener,args:["focusin",["$event"]]}],compositionStart:[{type:core.HostListener,args:["compositionstart",["$event"]]}],compositionEnd:[{type:core.HostListener,args:["compositionend",["$event"]]}]},Search=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-search, ibm-search",template:search_componentngResource,providers:[{provide:fesm2020_forms.JU,useExisting:Search,multi:!0}]})],Search);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let SearchModule=class SearchModule{};SearchModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Search],exports:[Search],imports:[fesm2020_forms.u5,common.CommonModule,i18n.LU,icon.QX]})],SearchModule)},"./src/theme/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{E:()=>ThemeDirective,O:()=>ThemeModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),src_layer=__webpack_require__("./src/layer/index.ts");let ThemeDirective=class ThemeDirective{constructor(){this.cdsTheme="white",this.layerClass=!0}set ibmTheme(type){this.cdsTheme=type}get whiteThemeClass(){return"white"===this.cdsTheme||!this.cdsTheme}get g10ThemeClass(){return"g10"===this.cdsTheme}get g90ThemeClass(){return"g90"===this.cdsTheme}get g100ThemeClass(){return"g100"===this.cdsTheme}ngAfterContentChecked(){this.layerChildren.toArray().forEach((layer=>{"number"!=typeof layer.cdsLayer&&(layer.cdsLayer=1)}))}};ThemeDirective.propDecorators={ibmTheme:[{type:core.Input}],cdsTheme:[{type:core.Input}],layerChildren:[{type:core.ContentChildren,args:[src_layer.A,{descendants:!1}]}],whiteThemeClass:[{type:core.HostBinding,args:["class.cds--white"]}],g10ThemeClass:[{type:core.HostBinding,args:["class.cds--g10"]}],g90ThemeClass:[{type:core.HostBinding,args:["class.cds--g90"]}],g100ThemeClass:[{type:core.HostBinding,args:["class.cds--g100"]}],layerClass:[{type:core.HostBinding,args:["class.cds--layer-one"]}]},ThemeDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsTheme], [ibmTheme]",exportAs:"theme"})],ThemeDirective);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let ThemeModule=class ThemeModule{};ThemeModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[ThemeDirective],exports:[ThemeDirective],imports:[common.CommonModule,src_layer.D]})],ThemeModule)},"./src/ui-shell/ui-shell.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{AngularRouting:()=>AngularRouting,Header:()=>Header,HeaderFluid:()=>HeaderFluid,HeaderWithRouter:()=>HeaderWithRouter,HeaderWithTemp:()=>HeaderWithTemp,SideNavigation:()=>SideNavigation,SideNavigationRail:()=>SideNavigationRail,SideNavigationRouter:()=>SideNavigationRouter,SideNavigationUseRouter:()=>SideNavigationUseRouter,SidePanel:()=>SidePanel,Together:()=>Together,WithModel:()=>WithModel,__namedExportsOrder:()=>__namedExportsOrder,default:()=>ui_shell_stories});var core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),router=__webpack_require__("./node_modules/@angular/router/fesm2020/router.mjs"),dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),search=__webpack_require__("./src/search/index.ts"),icon=__webpack_require__("./src/icon/index.ts"),theme=__webpack_require__("./src/theme/index.ts"),ui_shell=__webpack_require__("./src/ui-shell/index.ts"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js");let BarComponent=class BarComponent{};BarComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-bar",template:"<h1>bar</h1>"})],BarComponent);let FooComponent=class FooComponent{};FooComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-foo",template:"<h1>foo</h1>"})],FooComponent);let HeaderFluidComponent=class HeaderFluidComponent{constructor(){this.hasHamburger=!1}};HeaderFluidComponent.propDecorators={headerItems:[{type:core.Input}]},HeaderFluidComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-header-fluid",template:'\n\t\t<cds-header name="[Platform]">\n\t\t\t<cds-hamburger\n\t\t\t\t(selected)="hasHamburger = !hasHamburger"\n\t\t\t\tclass="cds--header__menu-toggle__hidden"></cds-hamburger>\n\t\t\t<cds-header-navigation [navigationItems]="headerItems"></cds-header-navigation>\n\t\t\t<cds-sidenav\n\t\t\t\t*ngIf="hasHamburger"\n\t\t\t\t[navigationItems]="headerItems"\n\t\t\t\tclass="cds--header__menu-toggle__hidden"></cds-sidenav>\n\t\t</cds-header>\n\t'})],HeaderFluidComponent);const ui_shell_stories={title:"Components/UI Shell",decorators:[(0,dist.applicationConfig)({providers:[(0,core.importProvidersFrom)(router.Bz.forRoot([{path:"bar",component:BarComponent},{path:"foo",component:FooComponent}],{useHash:!0}))]}),(0,dist.moduleMetadata)({declarations:[BarComponent,FooComponent,HeaderFluidComponent],imports:[theme.O,ui_shell.p5,icon.QX,search.t,router.Bz]})],args:{theme:"white"},argTypes:{theme:{options:["white","g10","g90","g100"],control:"radio"}},parameters:{docs:{story:{height:"30rem"}}}},Header=(args=>({props:args,template:'\n        <div [cdsTheme]="theme">\n            <cds-header name="[Platform]">\n                <cds-hamburger *ngIf="hasHamburger" (click)="expanded($event)"></cds-hamburger>\n                <cds-header-navigation>\n                    <cds-header-item>Catalog</cds-header-item>\n                    <cds-header-item isCurrentPage="true">Docs</cds-header-item>\n                    <cds-header-item>Support</cds-header-item>\n                    <cds-header-menu title="Manage">\n                        <cds-header-item>Link 1</cds-header-item>\n                        <cds-header-item>Link 2</cds-header-item>\n                        <cds-header-item>Link 3</cds-header-item>\n                    </cds-header-menu>\n                </cds-header-navigation>\n                <cds-header-global>\n                    <cds-header-action description="action">\n                        <svg cdsIcon="fade" size="20"></svg>\n                    </cds-header-action>\n                    <cds-header-action description="action">\n                        <svg cdsIcon="fade" size="20"></svg>\n                    </cds-header-action>\n                </cds-header-global>\n            </cds-header>\n        </div>\n    '})).bind({});Header.args={hasHamburger:!0},Header.argTypes={expanded:{action:"Menu clicked!"}};const HeaderFluid=(args=>({props:args,template:'\n        \x3c!--\n        app-* components are for demo purposes only.\n        You can create your own implementation by using the component source found at:\n        https://github.com/IBM/carbon-components-angular/tree/master/src/ui-shell/stories/header-fluid.component.ts\n        --\x3e\n        <app-header-fluid [headerItems]="headerItems"></app-header-fluid>\n    '})).bind({});HeaderFluid.storyName="Header fluid items to side navigation",HeaderFluid.args={headerItems:[{type:"item",content:"Catalog",title:"Catalog"},{type:"item",content:"Docs",isCurrentPage:!0},{type:"item",content:"Support"},{type:"menu",title:"Manage",menuItems:[{type:"item",content:"Link 1"},{type:"item",content:"Link 2"},{type:"item",content:"Link 3"}]}]},HeaderFluid.argTypes={headerItems:{control:!1},theme:{control:!1}};const HeaderWithTemp=(args=>({props:args,template:'\n        <div [cdsTheme]="theme">\n            <cds-header name="[Platform]" [brand]="brandTemplate">\n                <cds-hamburger *ngIf="hasHamburger" (click)="expanded($event)"></cds-hamburger>\n                <cds-header-navigation>\n                    <cds-header-item>Catalog</cds-header-item>\n                    <cds-header-item>Docs</cds-header-item>\n                    <cds-header-item>Support</cds-header-item>\n                    <cds-header-menu title="Manage">\n                        <cds-header-item>Link 1</cds-header-item>\n                        <cds-header-item>Link 2</cds-header-item>\n                        <cds-header-item>Link 3</cds-header-item>\n                    </cds-header-menu>\n                </cds-header-navigation>\n                <cds-header-global>\n                    <cds-header-action description="action">\n                        <svg cdsIcon="fade" size="20"></svg>\n                    </cds-header-action>\n                    <cds-header-action description="action">\n                        <svg cdsIcon="fade" size="20"></svg>\n                    </cds-header-action>\n                </cds-header-global>\n            </cds-header>\n        </div>\n        <ng-template #brandTemplate>\n            <a class="cds--header__name">\n                <svg cdsIcon="carbon" size="32" style="stroke:white;fill:white"></svg>\n                <span class="cds--header__name--prefix">IBM</span>\n                [Platform]\n            </a>\n        </ng-template>\n    '})).bind({});HeaderWithTemp.storyName="Header with template",HeaderWithTemp.args={hasHamburger:!0},HeaderWithTemp.argTypes={expanded:{action:"Menu clicked!"}};const HeaderWithRouter=(args=>({props:args,template:'\n        <div [cdsTheme]="theme">\n            <cds-header name="[Platform]" [route]="[\'bar\']">\n                <cds-header-navigation>\n                    <cds-header-item [route]="[\'foo\']">Catalog</cds-header-item>\n                    <cds-header-item [route]="[\'bar\']">Docs</cds-header-item>\n                    <cds-header-item [route]="[\'foo\']">Support</cds-header-item>\n                    <cds-header-menu title="Manage">\n                        <cds-header-item [route]="[\'foo\']">Link 1</cds-header-item>\n                        <cds-header-item [route]="[\'bar\']">Link 2</cds-header-item>\n                        <cds-header-item [route]="[\'foo\']">Link 3</cds-header-item>\n                    </cds-header-menu>\n                </cds-header-navigation>\n            </cds-header>\n        </div>\n        <div style="margin-top: 2rem">\n            <router-outlet></router-outlet>\n        </div>\n    '})).bind({});HeaderWithRouter.argTypes={expanded:{action:"Menu clicked!"}};const SideNavigation=(args=>({props:args,template:'\n        <div [cdsTheme]="theme">\n            <cds-sidenav>\n                <cds-sidenav-item [active]="true">\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-item>\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-menu title="Category title">\n                    <svg cdsIcon="fade" icon size="16"></svg>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                </cds-sidenav-menu>\n            </cds-sidenav>\n        </div>\n    '})).bind({});SideNavigation.args={options:[{content:"Option 1",value:1},{content:"Option 2",value:2},{content:"Option 3",value:3}]},SideNavigation.argTypes={options:{control:!1}};const SideNavigationRouter=(args=>({props:args,template:'\n        <div [cdsTheme]="theme">\n            <cds-sidenav>\n                <cds-sidenav-item [route]="[\'foo\']">\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-item [route]="[\'bar\']">\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-menu title="Category title">\n                    <svg cdsIcon="fade" icon size="16"></svg>\n                    <cds-sidenav-item [route]="[\'foo\']">Link</cds-sidenav-item>\n                    <cds-sidenav-item [route]="[\'bar\']">Link</cds-sidenav-item>\n                    <cds-sidenav-item [route]="[\'foo\']">Link</cds-sidenav-item>\n                </cds-sidenav-menu>\n            </cds-sidenav>\n        </div>\n        <div style="margin-left: 18rem">\n            <router-outlet></router-outlet>\n        </div>\n    '})).bind({});SideNavigationRouter.storyName="Side Navigation with router";const SideNavigationUseRouter=(args=>({props:args,template:'\n        <div [cdsTheme]="theme">\n            <cds-sidenav>\n                <cds-sidenav-item [route]="[\'foo\']" [useRouter]="true">\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-item [route]="[\'bar\']" [useRouter]="true" [routeExtras]="routeExtras">\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link with query params\n                </cds-sidenav-item>\n                <cds-sidenav-menu title="Category title">\n                    <svg cdsIcon="fade" icon size="16"></svg>\n                    <cds-sidenav-item [route]="[\'foo\']" [useRouter]="true">Link</cds-sidenav-item>\n                    <cds-sidenav-item [route]="[\'bar\']" [useRouter]="true">Link</cds-sidenav-item>\n                    <cds-sidenav-item [route]="[\'foo\']" [useRouter]="true">Link</cds-sidenav-item>\n                </cds-sidenav-menu>\n            </cds-sidenav>\n        </div>\n        <div style="margin-left: 256px">\n            <router-outlet></router-outlet>\n        </div>\n    '})).bind({});SideNavigationUseRouter.storyName="Side Navigation with useRouter",SideNavigationUseRouter.args={routeExtras:{queryParams:{key:"value"}}};const SidePanel=(args=>({props:args,template:'\n        <div [cdsTheme]="theme">\n            <cds-panel expanded="true">\n                <cds-switcher-list>\n                    <cds-switcher-list-item [route]="[\'foo\']">Switcher item one</cds-switcher-list-item>\n                    <cds-switcher-list-item [route]="[\'bar\']">Switcher item two</cds-switcher-list-item>\n                    <cds-switcher-list-item [route]="[\'foo\']">Switcher item three</cds-switcher-list-item>\n                    <cds-switcher-list-item [route]="[\'bar\']">Switcher item four</cds-switcher-list-item>\n                </cds-switcher-list>\n            </cds-panel>\n        </div>\n        <div>\n            <router-outlet></router-outlet>\n        </div>\n    '})).bind({});SidePanel.storyName="Side Panel with router";const Together=(args=>({props:args,template:'\n        <div>\n            <cds-header name="[Platform]">\n                <cds-hamburger *ngIf="hasHamburger" [active]="active" (selected)="active = !active"></cds-hamburger>\n                <cds-header-navigation>\n                    <cds-header-item>Catalog</cds-header-item>\n                    <cds-header-item>Docs</cds-header-item>\n                    <cds-header-item>Support</cds-header-item>\n                    <cds-header-menu title="Manage">\n                        <cds-header-item>Link 1</cds-header-item>\n                        <cds-header-item>Link 2</cds-header-item>\n                        <cds-header-item>Link 3</cds-header-item>\n                    </cds-header-menu>\n                </cds-header-navigation>\n                <cds-header-global>\n                    <cds-header-action #firstAction description="action">\n                        <svg cdsIcon="fade" size="20"></svg>\n                    </cds-header-action>\n                    <cds-header-action [(active)]="secondAction" description="action">\n                        <svg cdsIcon="fade" size="20"></svg>\n                    </cds-header-action>\n                </cds-header-global>\n            </cds-header>\n            <cds-sidenav [expanded]="active" style="margin-top: 3rem">\n                <cds-sidenav-item>\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-item>\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-menu title="Category title">\n                    <svg cdsIcon="fade" size="16"></svg>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                    <cds-sidenav-item [active]="hasActiveChild">Link</cds-sidenav-item>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                </cds-sidenav-menu>\n            </cds-sidenav>\n            <cds-panel [expanded]="firstAction.active"></cds-panel>\n            <cds-panel [expanded]="secondAction">\n                <cds-switcher-list>\n                    <cds-switcher-list-item active="true">Switcher item one</cds-switcher-list-item>\n                    <cds-switcher-list-item>Switcher item two</cds-switcher-list-item>\n                    <cds-switcher-list-item>Switcher item three</cds-switcher-list-item>\n                    <cds-switcher-list-item>Switcher item four</cds-switcher-list-item>\n                </cds-switcher-list>\n            </cds-panel>\n        </div>\n    '})).bind({});Together.args={hasHamburger:!0,active:!0,secondAction:!1,hasActiveChild:!0,options:[{content:"Option 1",value:1},{content:"Option 2",value:2},{content:"Option 3",value:3}]},Together.argTypes={options:{control:!1}};const SideNavigationRail=(args=>({props:args,template:'\n        <div [cdsTheme]="theme">\n            <cds-sidenav rail="true" [expanded]="false">\n                <cds-sidenav-item>\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-item>\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-menu title="Category title">\n                    <svg cdsIcon="fade" icon size="16"></svg>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                </cds-sidenav-menu>\n            </cds-sidenav>\n        </div>\n    '})).bind({});SideNavigationRail.args={options:[{content:"Option 1",value:1},{content:"Option 2",value:2},{content:"Option 3",value:3}]},SideNavigationRail.argTypes={options:{control:!1}};const WithModel=(args=>({props:args,template:'\n        <div [cdsTheme]="theme">\n            <cds-header name="[Platform]">\n                <cds-hamburger *ngIf="hasHamburger" [active]="active" (selected)="active = !active"></cds-hamburger>\n                <cds-header-navigation [navigationItems]="headerItems">\n                </cds-header-navigation>\n                <cds-header-global>\n                    <cds-header-action #firstAction description="action">\n                        <svg\n                            width="20"\n                            height="20"\n                            xmlns="http://www.w3.org/2000/svg"\n                            viewBox="0 0 32 32"\n                            aria-hidden="true">\n                            <path\n                                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n                                12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n                                23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n                                14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n                                10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n                                10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />\n                        </svg>\n                    </cds-header-action>\n                    <cds-header-action #secondAction description="action">\n                        <svg\n                            width="20"\n                            height="20"\n                            xmlns="http://www.w3.org/2000/svg"\n                            viewBox="0 0 32 32"\n                            aria-hidden="true">\n                            <path\n                                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n                                12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n                                23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n                                14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n                                10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n                                10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />\n                        </svg>\n                    </cds-header-action>\n                </cds-header-global>\n            </cds-header>\n            <cds-sidenav [navigationItems]="headerItems" style="margin-top: 3rem">\n                <cds-sidenav-menu title="Category title">\n                    <svg icon width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">\n                        <path\n                            d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n                            12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n                            23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n                            14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n                            10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n                            10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />\n                    </svg>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                </cds-sidenav-menu>\n            </cds-sidenav>\n            <cds-panel [expanded]="firstAction.active"></cds-panel>\n            <cds-panel [expanded]="secondAction.active">\n                <cds-switcher-list>\n                    <cds-switcher-list-item active="true">Switcher item one</cds-switcher-list-item>\n                    <cds-switcher-list-item>Switcher item two</cds-switcher-list-item>\n                    <cds-switcher-list-item>Switcher item three</cds-switcher-list-item>\n                    <cds-switcher-list-item>Switcher item four</cds-switcher-list-item>\n                </cds-switcher-list>\n            </cds-panel>\n        </div>\n        <router-outlet></router-outlet>\n    '})).bind({});WithModel.args={options:[{content:"Option 1",value:1},{content:"Option 2",value:2},{content:"Option 3",value:3}],headerItems:[{type:"item",route:["foo"],content:"Catalog"},{type:"item",route:["bar"],content:"Docs"},{type:"item",route:["foo"],content:"Support"},{type:"menu",title:"Manage",trigger:"click",menuItems:[{type:"item",route:["foo"],content:"Link 1"},{type:"item",route:["bar"],content:"Link 2"}]}]},WithModel.argTypes={options:{control:!1},headerItems:{control:!1}};const AngularRouting=(args=>({props:args,template:'\n        <div [cdsTheme]="theme">\n            <cds-sidenav rail="true" [expanded]="false">\n                <cds-sidenav-item>\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-item>\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-menu title="Category title">\n                    <svg cdsIcon="fade" icon size="16"></svg>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                </cds-sidenav-menu>\n            </cds-sidenav>\n        <div>\n    '})).bind({});AngularRouting.storyName="Use angular router attributes for routing",Header.parameters={...Header.parameters,docs:{...Header.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div [cdsTheme]="theme">\n            <cds-header name="[Platform]">\n                <cds-hamburger *ngIf="hasHamburger" (click)="expanded($event)"></cds-hamburger>\n                <cds-header-navigation>\n                    <cds-header-item>Catalog</cds-header-item>\n                    <cds-header-item isCurrentPage="true">Docs</cds-header-item>\n                    <cds-header-item>Support</cds-header-item>\n                    <cds-header-menu title="Manage">\n                        <cds-header-item>Link 1</cds-header-item>\n                        <cds-header-item>Link 2</cds-header-item>\n                        <cds-header-item>Link 3</cds-header-item>\n                    </cds-header-menu>\n                </cds-header-navigation>\n                <cds-header-global>\n                    <cds-header-action description="action">\n                        <svg cdsIcon="fade" size="20"></svg>\n                    </cds-header-action>\n                    <cds-header-action description="action">\n                        <svg cdsIcon="fade" size="20"></svg>\n                    </cds-header-action>\n                </cds-header-global>\n            </cds-header>\n        </div>\n    `\n})',...Header.parameters?.docs?.source}}},HeaderFluid.parameters={...HeaderFluid.parameters,docs:{...HeaderFluid.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        \x3c!--\n        app-* components are for demo purposes only.\n        You can create your own implementation by using the component source found at:\n        https://github.com/IBM/carbon-components-angular/tree/master/src/ui-shell/stories/header-fluid.component.ts\n        --\x3e\n        <app-header-fluid [headerItems]="headerItems"></app-header-fluid>\n    `\n})',...HeaderFluid.parameters?.docs?.source}}},HeaderWithTemp.parameters={...HeaderWithTemp.parameters,docs:{...HeaderWithTemp.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div [cdsTheme]="theme">\n            <cds-header name="[Platform]" [brand]="brandTemplate">\n                <cds-hamburger *ngIf="hasHamburger" (click)="expanded($event)"></cds-hamburger>\n                <cds-header-navigation>\n                    <cds-header-item>Catalog</cds-header-item>\n                    <cds-header-item>Docs</cds-header-item>\n                    <cds-header-item>Support</cds-header-item>\n                    <cds-header-menu title="Manage">\n                        <cds-header-item>Link 1</cds-header-item>\n                        <cds-header-item>Link 2</cds-header-item>\n                        <cds-header-item>Link 3</cds-header-item>\n                    </cds-header-menu>\n                </cds-header-navigation>\n                <cds-header-global>\n                    <cds-header-action description="action">\n                        <svg cdsIcon="fade" size="20"></svg>\n                    </cds-header-action>\n                    <cds-header-action description="action">\n                        <svg cdsIcon="fade" size="20"></svg>\n                    </cds-header-action>\n                </cds-header-global>\n            </cds-header>\n        </div>\n        <ng-template #brandTemplate>\n            <a class="cds--header__name">\n                <svg cdsIcon="carbon" size="32" style="stroke:white;fill:white"></svg>\n                <span class="cds--header__name--prefix">IBM</span>\n                [Platform]\n            </a>\n        </ng-template>\n    `\n})',...HeaderWithTemp.parameters?.docs?.source}}},HeaderWithRouter.parameters={...HeaderWithRouter.parameters,docs:{...HeaderWithRouter.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div [cdsTheme]="theme">\n            <cds-header name="[Platform]" [route]="[\'bar\']">\n                <cds-header-navigation>\n                    <cds-header-item [route]="[\'foo\']">Catalog</cds-header-item>\n                    <cds-header-item [route]="[\'bar\']">Docs</cds-header-item>\n                    <cds-header-item [route]="[\'foo\']">Support</cds-header-item>\n                    <cds-header-menu title="Manage">\n                        <cds-header-item [route]="[\'foo\']">Link 1</cds-header-item>\n                        <cds-header-item [route]="[\'bar\']">Link 2</cds-header-item>\n                        <cds-header-item [route]="[\'foo\']">Link 3</cds-header-item>\n                    </cds-header-menu>\n                </cds-header-navigation>\n            </cds-header>\n        </div>\n        <div style="margin-top: 2rem">\n            <router-outlet></router-outlet>\n        </div>\n    `\n})',...HeaderWithRouter.parameters?.docs?.source}}},SideNavigation.parameters={...SideNavigation.parameters,docs:{...SideNavigation.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div [cdsTheme]="theme">\n            <cds-sidenav>\n                <cds-sidenav-item [active]="true">\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-item>\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-menu title="Category title">\n                    <svg cdsIcon="fade" icon size="16"></svg>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                </cds-sidenav-menu>\n            </cds-sidenav>\n        </div>\n    `\n})',...SideNavigation.parameters?.docs?.source}}},SideNavigationRouter.parameters={...SideNavigationRouter.parameters,docs:{...SideNavigationRouter.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div [cdsTheme]="theme">\n            <cds-sidenav>\n                <cds-sidenav-item [route]="[\'foo\']">\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-item [route]="[\'bar\']">\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-menu title="Category title">\n                    <svg cdsIcon="fade" icon size="16"></svg>\n                    <cds-sidenav-item [route]="[\'foo\']">Link</cds-sidenav-item>\n                    <cds-sidenav-item [route]="[\'bar\']">Link</cds-sidenav-item>\n                    <cds-sidenav-item [route]="[\'foo\']">Link</cds-sidenav-item>\n                </cds-sidenav-menu>\n            </cds-sidenav>\n        </div>\n        <div style="margin-left: 18rem">\n            <router-outlet></router-outlet>\n        </div>\n    `\n})',...SideNavigationRouter.parameters?.docs?.source}}},SideNavigationUseRouter.parameters={...SideNavigationUseRouter.parameters,docs:{...SideNavigationUseRouter.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div [cdsTheme]="theme">\n            <cds-sidenav>\n                <cds-sidenav-item [route]="[\'foo\']" [useRouter]="true">\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-item [route]="[\'bar\']" [useRouter]="true" [routeExtras]="routeExtras">\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link with query params\n                </cds-sidenav-item>\n                <cds-sidenav-menu title="Category title">\n                    <svg cdsIcon="fade" icon size="16"></svg>\n                    <cds-sidenav-item [route]="[\'foo\']" [useRouter]="true">Link</cds-sidenav-item>\n                    <cds-sidenav-item [route]="[\'bar\']" [useRouter]="true">Link</cds-sidenav-item>\n                    <cds-sidenav-item [route]="[\'foo\']" [useRouter]="true">Link</cds-sidenav-item>\n                </cds-sidenav-menu>\n            </cds-sidenav>\n        </div>\n        <div style="margin-left: 256px">\n            <router-outlet></router-outlet>\n        </div>\n    `\n})',...SideNavigationUseRouter.parameters?.docs?.source}}},SidePanel.parameters={...SidePanel.parameters,docs:{...SidePanel.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div [cdsTheme]="theme">\n            <cds-panel expanded="true">\n                <cds-switcher-list>\n                    <cds-switcher-list-item [route]="[\'foo\']">Switcher item one</cds-switcher-list-item>\n                    <cds-switcher-list-item [route]="[\'bar\']">Switcher item two</cds-switcher-list-item>\n                    <cds-switcher-list-item [route]="[\'foo\']">Switcher item three</cds-switcher-list-item>\n                    <cds-switcher-list-item [route]="[\'bar\']">Switcher item four</cds-switcher-list-item>\n                </cds-switcher-list>\n            </cds-panel>\n        </div>\n        <div>\n            <router-outlet></router-outlet>\n        </div>\n    `\n})',...SidePanel.parameters?.docs?.source}}},Together.parameters={...Together.parameters,docs:{...Together.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div>\n            <cds-header name="[Platform]">\n                <cds-hamburger *ngIf="hasHamburger" [active]="active" (selected)="active = !active"></cds-hamburger>\n                <cds-header-navigation>\n                    <cds-header-item>Catalog</cds-header-item>\n                    <cds-header-item>Docs</cds-header-item>\n                    <cds-header-item>Support</cds-header-item>\n                    <cds-header-menu title="Manage">\n                        <cds-header-item>Link 1</cds-header-item>\n                        <cds-header-item>Link 2</cds-header-item>\n                        <cds-header-item>Link 3</cds-header-item>\n                    </cds-header-menu>\n                </cds-header-navigation>\n                <cds-header-global>\n                    <cds-header-action #firstAction description="action">\n                        <svg cdsIcon="fade" size="20"></svg>\n                    </cds-header-action>\n                    <cds-header-action [(active)]="secondAction" description="action">\n                        <svg cdsIcon="fade" size="20"></svg>\n                    </cds-header-action>\n                </cds-header-global>\n            </cds-header>\n            <cds-sidenav [expanded]="active" style="margin-top: 3rem">\n                <cds-sidenav-item>\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-item>\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-menu title="Category title">\n                    <svg cdsIcon="fade" size="16"></svg>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                    <cds-sidenav-item [active]="hasActiveChild">Link</cds-sidenav-item>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                </cds-sidenav-menu>\n            </cds-sidenav>\n            <cds-panel [expanded]="firstAction.active"></cds-panel>\n            <cds-panel [expanded]="secondAction">\n                <cds-switcher-list>\n                    <cds-switcher-list-item active="true">Switcher item one</cds-switcher-list-item>\n                    <cds-switcher-list-item>Switcher item two</cds-switcher-list-item>\n                    <cds-switcher-list-item>Switcher item three</cds-switcher-list-item>\n                    <cds-switcher-list-item>Switcher item four</cds-switcher-list-item>\n                </cds-switcher-list>\n            </cds-panel>\n        </div>\n    `\n})',...Together.parameters?.docs?.source}}},SideNavigationRail.parameters={...SideNavigationRail.parameters,docs:{...SideNavigationRail.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div [cdsTheme]="theme">\n            <cds-sidenav rail="true" [expanded]="false">\n                <cds-sidenav-item>\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-item>\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-menu title="Category title">\n                    <svg cdsIcon="fade" icon size="16"></svg>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                </cds-sidenav-menu>\n            </cds-sidenav>\n        </div>\n    `\n})',...SideNavigationRail.parameters?.docs?.source}}},WithModel.parameters={...WithModel.parameters,docs:{...WithModel.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div [cdsTheme]="theme">\n            <cds-header name="[Platform]">\n                <cds-hamburger *ngIf="hasHamburger" [active]="active" (selected)="active = !active"></cds-hamburger>\n                <cds-header-navigation [navigationItems]="headerItems">\n                </cds-header-navigation>\n                <cds-header-global>\n                    <cds-header-action #firstAction description="action">\n                        <svg\n                            width="20"\n                            height="20"\n                            xmlns="http://www.w3.org/2000/svg"\n                            viewBox="0 0 32 32"\n                            aria-hidden="true">\n                            <path\n                                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n                                12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n                                23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n                                14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n                                10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n                                10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />\n                        </svg>\n                    </cds-header-action>\n                    <cds-header-action #secondAction description="action">\n                        <svg\n                            width="20"\n                            height="20"\n                            xmlns="http://www.w3.org/2000/svg"\n                            viewBox="0 0 32 32"\n                            aria-hidden="true">\n                            <path\n                                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n                                12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n                                23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n                                14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n                                10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n                                10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />\n                        </svg>\n                    </cds-header-action>\n                </cds-header-global>\n            </cds-header>\n            <cds-sidenav [navigationItems]="headerItems" style="margin-top: 3rem">\n                <cds-sidenav-menu title="Category title">\n                    <svg icon width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">\n                        <path\n                            d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12\n                            12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86\n                            23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14\n                            14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59\n                            10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59\n                            10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />\n                    </svg>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                </cds-sidenav-menu>\n            </cds-sidenav>\n            <cds-panel [expanded]="firstAction.active"></cds-panel>\n            <cds-panel [expanded]="secondAction.active">\n                <cds-switcher-list>\n                    <cds-switcher-list-item active="true">Switcher item one</cds-switcher-list-item>\n                    <cds-switcher-list-item>Switcher item two</cds-switcher-list-item>\n                    <cds-switcher-list-item>Switcher item three</cds-switcher-list-item>\n                    <cds-switcher-list-item>Switcher item four</cds-switcher-list-item>\n                </cds-switcher-list>\n            </cds-panel>\n        </div>\n        <router-outlet></router-outlet>\n    `\n})',...WithModel.parameters?.docs?.source}}},AngularRouting.parameters={...AngularRouting.parameters,docs:{...AngularRouting.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div [cdsTheme]="theme">\n            <cds-sidenav rail="true" [expanded]="false">\n                <cds-sidenav-item>\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-item>\n                    <svg cdsIcon="fade" size="16"></svg>\n                    Link\n                </cds-sidenav-item>\n                <cds-sidenav-menu title="Category title">\n                    <svg cdsIcon="fade" icon size="16"></svg>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                    <cds-sidenav-item>Link</cds-sidenav-item>\n                </cds-sidenav-menu>\n            </cds-sidenav>\n        <div>\n    `\n})',...AngularRouting.parameters?.docs?.source}}};const __namedExportsOrder=["Header","HeaderFluid","HeaderWithTemp","HeaderWithRouter","SideNavigation","SideNavigationRouter","SideNavigationUseRouter","SidePanel","Together","SideNavigationRail","WithModel","AngularRouting"]},"./src/search/search.component.html?ngResource":module=>{module.exports='<div\n\tclass="cds--search"\n\t[ngClass]="{\n\t\t\'cds--search--sm\': size === \'sm\',\n\t\t\'cds--search--md\': size === \'md\',\n\t\t\'cds--search--lg\': size === \'lg\',\n\t\t\'cds--search--light\': theme === \'light\',\n\t\t\'cds--skeleton\': skeleton,\n\t\t\'cds--search--expandable\': expandable && !tableSearch,\n\t\t\'cds--search--expanded\': expandable && !tableSearch && active,\n\t\t\'cds--toolbar-search\': toolbar && !expandable,\n\t\t\'cds--toolbar-search--active\': toolbar && !expandable && active,\n\t\t\'cds--toolbar-search-container-persistent\': tableSearch && !expandable,\n\t\t\'cds--toolbar-search-container-expandable\': tableSearch && expandable,\n\t\t\'cds--toolbar-search-container-active\': tableSearch && expandable && active\n\t}"\n\trole="search"\n\t[attr.aria-label]="ariaLabel"\n\t(click)="openSearch()">\n\t<label class="cds--label" [for]="id">{{label}}</label>\n\n\t<div *ngIf="skeleton; else enableInput" class="cds--search-input"></div>\n\t<ng-template #enableInput>\n\t\t<input\n\t\t\t#input\n\t\t\tclass="cds--search-input"\n\t\t\t[type]="tableSearch || !toolbar ? \'text\' : \'search\'"\n\t\t\t[id]="id"\n\t\t\t[value]="value"\n\t\t\t[autocomplete]="autocomplete"\n\t\t\t[placeholder]="placeholder"\n\t\t\t[disabled]="disabled"\n\t\t\t[required]="required"\n\t\t\t(input)="onSearch($event.target.value)"\n\t\t\t(keyup.enter)="onEnter()"/>\n\t\t<button\n\t\t\t*ngIf="!tableSearch && toolbar"\n\t\t\tclass="cds--toolbar-search__btn"\n\t\t\t(click)="openSearch()"\n\t\t\taria-label="Open search">\n\t\t\t<svg cdsIcon="search" size="16" class="cds--search-magnifier-icon"></svg>\n\t\t</button>\n\t\t<svg\n\t\t\tcdsIcon="search"\n\t\t\t*ngIf="tableSearch || !toolbar"\n\t\t\tclass="cds--search-magnifier-icon"\n\t\t\tsize="16">\n\t\t</svg>\n\t</ng-template>\n\n\t<button\n\t\t*ngIf="tableSearch || !toolbar"\n\t\tclass="cds--search-close"\n\t\t[ngClass]="{\n\t\t\t\'cds--search-close--hidden\': !value || value.length === 0\n\t\t}"\n\t\t[title]="clearButtonTitle"\n\t\t(click)="clearSearch()">\n\t\t<span class="cds--visually-hidden">{{ clearButtonTitle }}</span>\n\t\t<svg cdsIcon="close" size="16"></svg>\n\t</button>\n</div>\n'}}]);