carbon-components-angular/docs/storybook/ui-shell-ui-shell-stories.214d3ae0.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[9660],{"./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.fluid=!1,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)}get fluidSkeletonClass(){return this.skeleton&&this.fluid}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.doValueChange(),this.clear.emit()}doValueChange(){this.propagateChange(this.value),this.valueChange.emit(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"]}],fluidSkeletonClass:[{type:core.HostBinding,args:["class.cds--text-input--fluid__skeleton"]}],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}],fluid:[{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 && !fluid,\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\t\'cds--search--fluid\': fluid,\n\t\t\'cds--search--disabled\': disabled\n\t}"\n\trole="search"\n\t[attr.aria-label]="ariaLabel"\n\t(click)="openSearch()">\n\t<label\n\t\tclass="cds--label"\n\t\t[for]="id"\n\t\t[ngClass]="{ \'cds--skeleton\': skeleton && fluid }">\n\t\t{{ !skeleton ? label : \'\'}}\n\t</label>\n\n\t<div *ngIf="skeleton; else enableInput" class="cds--text-input cds--skeleton"></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[