carbon-components-angular 5.8.1 → 5.9.1

package/docs/storybook/1741.0cb8b504.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[1741],{"./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){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/link/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{r:()=>Link,L:()=>LinkModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let Link=class Link{constructor(){this.baseClass=!0,this.inline=!1}set disabled(disabled){this._disabled=disabled,this.tabindex=this.disabled?-1:null}get disabled(){return this._disabled}};Link.propDecorators={baseClass:[{type:core.HostBinding,args:["class.cds--link"]}],tabindex:[{type:core.HostBinding,args:["attr.tabindex"]}],inline:[{type:core.Input},{type:core.HostBinding,args:["class.cds--link--inline"]}],disabled:[{type:core.Input},{type:core.HostBinding,args:["attr.aria-disabled"]},{type:core.HostBinding,args:["class.cds--link--disabled"]}]},Link=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsLink], [ibmLink]"})],Link);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let LinkModule=class LinkModule{};LinkModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Link],exports:[Link],imports:[common.CommonModule]})],LinkModule)},"./src/tiles/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Oh:()=>ClickableTile,wN:()=>ExpandableTile,G9:()=>SelectionTile,n9:()=>Tile,B4:()=>TileGroup,i$:()=>TilesModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),router=__webpack_require__("./node_modules/@angular/router/fesm2020/router.mjs");let ClickableTile=class ClickableTile{constructor(router){this.router=router,this.theme="dark",this.href="#",this.disabled=!1,this.navigation=new core.EventEmitter}navigate(event){if(this.router&&this.route&&!this.disabled){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}}};ClickableTile.ctorParameters=()=>[{type:router.F0,decorators:[{type:core.Optional}]}],ClickableTile.propDecorators={theme:[{type:core.Input}],href:[{type:core.Input}],target:[{type:core.Input}],disabled:[{type:core.Input}],route:[{type:core.Input}],routeExtras:[{type:core.Input}],navigation:[{type:core.Output}]},ClickableTile=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-clickable-tile, ibm-clickable-tile",template:'\n\t<a\n\t\tcdsLink\n\t\tclass="cds--tile cds--tile--clickable"\n\t\t[ngClass]="{\n\t\t\t\'cds--tile--light\': theme === \'light\',\n\t\t\t\'cds--tile--disabled cds--link--disabled\' : disabled\n\t\t}"\n\t\ttabindex="0"\n\t\t(click)="navigate($event)"\n\t\t[attr.href]="disabled ? null : href"\n\t\t[attr.target]="target"\n\t\t[attr.aria-disabled]="disabled">\n\t\t<ng-content></ng-content>\n\t</a>'})],ClickableTile);var i18n=__webpack_require__("./src/i18n/index.ts"),utils=__webpack_require__("./src/utils/index.ts");let ExpandableTile=class ExpandableTile{constructor(i18n,elementRef){this.i18n=i18n,this.elementRef=elementRef,this.theme="dark",this.expanded=!1,this.tileMaxHeight=0,this.currentExpandedHeight=0,this.element=this.elementRef.nativeElement,this.expand=this.i18n.getOverridable("TILES.EXPAND"),this.collapse=this.i18n.getOverridable("TILES.COLLAPSE")}set translations(value){const valueWithDefaults=(0,utils.TS)(this.i18n.getMultiple("TILES"),value);this.expand.override(valueWithDefaults.EXPAND),this.collapse.override(valueWithDefaults.COLLAPSE)}ngAfterContentInit(){this.updateMaxHeight()}get expandedHeight(){const tile=this.element.querySelector(".cds--tile"),tilePadding=parseInt(getComputedStyle(tile).paddingBottom,10)+parseInt(getComputedStyle(tile).paddingTop,10),expandedHeight=this.tileMaxHeight+tilePadding;return isNaN(expandedHeight)||(this.currentExpandedHeight=expandedHeight),this.currentExpandedHeight}updateMaxHeight(){this.expanded?this.tileMaxHeight=this.element.querySelector(".cds--tile-content").getBoundingClientRect().height:this.tileMaxHeight=this.element.querySelector(".cds--tile-content__above-the-fold").getBoundingClientRect().height}onClick(){this.expanded=!this.expanded,this.updateMaxHeight()}};ExpandableTile.ctorParameters=()=>[{type:i18n.oc},{type:core.ElementRef}],ExpandableTile.propDecorators={theme:[{type:core.Input}],expanded:[{type:core.Input}],translations:[{type:core.Input}]},ExpandableTile=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-expandable-tile, ibm-expandable-tile",template:'\n\t\t<button\n\t\t\tclass="cds--tile cds--tile--expandable"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--tile--is-expanded\' : expanded,\n\t\t\t\t\'cds--tile--light\': theme === \'light\'\n\t\t\t}"\n\t\t\t[ngStyle]="{\'max-height\': expandedHeight + \'px\'}"\n\t\t\ttype="button"\n\t\t\t(click)="onClick()">\n\t\t\t<div class="cds--tile__chevron">\n\t\t\t\t<svg *ngIf="!expanded" width="12" height="7" viewBox="0 0 12 7" [attr.title]="expand.subject | async" role="img">\n\t\t\t\t\t<title>{{expand.subject | async}}</title>\n\t\t\t\t\t<path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z"/>\n\t\t\t\t</svg>\n\t\t\t\t<svg *ngIf="expanded" width="12" height="7" viewBox="0 0 12 7" [attr.title]="collapse.subject | async" role="img">\n\t\t\t\t\t<title>{{collapse.subject | async}}</title>\n\t\t\t\t\t<path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z"/>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<div class="cds--tile-content">\n\t\t\t\t<ng-content select=".cds--tile-content__above-the-fold"></ng-content>\n\t\t\t\t<ng-content select=".cds--tile-content__below-the-fold"></ng-content>\n\t\t\t</div>\n\t\t</button>\n\t'})],ExpandableTile);let SelectionTile=class SelectionTile{constructor(i18n){this.i18n=i18n,this.theme="dark",this.id=`tile-${SelectionTile.tileCount}`,this.change=new core.EventEmitter,this.disabled=!1,this.name="tile-group-unbound",this.multiple=!0,this._selected=null,SelectionTile.tileCount++}set selected(value){this._selected=!!value||null,this.input&&(this.input.nativeElement.checked=this._selected)}get selected(){return!!this.input&&this.input.nativeElement.checked}ngAfterViewInit(){this.input&&setTimeout((()=>{this.input.nativeElement.checked=this._selected}))}keyboardInput(event){"Enter"!==event.key&&"Spacebar"!==event.key&&" "!==event.key||(this.selected=!this.selected,this.change.emit(event))}onChange(event){this.change.emit(event)}};SelectionTile.tileCount=0,SelectionTile.ctorParameters=()=>[{type:i18n.oc}],SelectionTile.propDecorators={theme:[{type:core.Input}],id:[{type:core.Input}],selected:[{type:core.Input}],value:[{type:core.Input}],change:[{type:core.Output}],disabled:[{type:core.Input}],input:[{type:core.ViewChild,args:["input",{static:!0}]}],keyboardInput:[{type:core.HostListener,args:["keydown",["$event"]]}]},SelectionTile=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-selection-tile, ibm-selection-tile",template:'\n\t\t<input\n\t\t\t#input\n\t\t\t[attr.tabindex]="disabled ? null : 0"\n\t\t\tclass="cds--tile-input"\n\t\t\t[id]="id"\n\t\t\t[disabled]="disabled"\n\t\t\t[type]="(multiple ? \'checkbox\': \'radio\')"\n\t\t\t[value]="value"\n\t\t\t[name]="name"\n\t\t\t(change)="onChange($event)"/>\n\t\t<label\n\t\t\tclass="cds--tile cds--tile--selectable"\n\t\t\t[for]="id"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--tile--is-selected\' : selected,\n\t\t\t\t\'cds--tile--light\': theme === \'light\',\n\t\t\t\t\'cds--tile--disabled\' : disabled\n\t\t\t}"\n\t\t\t[attr.aria-label]="i18n.get(\'TILES.TILE\') | async">\n\t\t\t<div class="cds--tile__checkmark">\n\t\t\t\t<svg width="16" height="16" viewBox="0 0 16 16">\n\t\t\t\t\t<path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"\n\t\t\t\t\t\tfill-rule="evenodd"/>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<div class="cds--tile-content">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</label>\n\t'})],SelectionTile);var fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),Subject=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subject.js"),takeUntil=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/takeUntil.js");let TileGroup=class TileGroup{constructor(){this.name=`tile-group-${TileGroup.tileGroupCount}`,this.multiple=!1,this.selected=new core.EventEmitter,this.tileGroupClass=!0,this.unsubscribe$=new Subject.x,this.unsubscribeTiles$=new Subject.x,this.onChange=_=>{},this.onTouched=()=>{},TileGroup.tileGroupCount++}ngAfterContentInit(){const updateTiles=()=>{this.unsubscribeTiles$.next(),setTimeout((()=>{this.selectionTiles.forEach((tile=>{tile.name=this.name,tile.change.pipe((0,takeUntil.R)(this.unsubscribeTiles$)).subscribe((()=>{this.selected.emit({value:tile.value,selected:tile.selected,name:this.name}),this.onChange(tile.value)})),tile.multiple=this.multiple}))}))};updateTiles(),this.selectionTiles.changes.pipe((0,takeUntil.R)(this.unsubscribe$)).subscribe((_=>updateTiles()))}ngOnDestroy(){this.unsubscribe$.next(),this.unsubscribe$.complete(),this.unsubscribeTiles$.next(),this.unsubscribeTiles$.complete()}writeValue(value){this.selectionTiles&&this.selectionTiles.forEach((tile=>{tile.value===value?tile.selected=!0:tile.selected=!1}))}registerOnChange(fn){this.onChange=fn}registerOnTouched(fn){this.onTouched=fn}isTemplate(value){return value instanceof core.TemplateRef}};TileGroup.tileGroupCount=0,TileGroup.ctorParameters=()=>[],TileGroup.propDecorators={name:[{type:core.Input}],multiple:[{type:core.Input}],legend:[{type:core.Input}],selected:[{type:core.Output}],tileGroupClass:[{type:core.HostBinding,args:["class.cds--tile-group"]}],selectionTiles:[{type:core.ContentChildren,args:[SelectionTile]}]},TileGroup=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tile-group, ibm-tile-group",template:'\n\t\t<fieldset>\n\t\t\t<legend *ngIf="legend" class="cds--label">\n\t\t\t\t<ng-template *ngIf="isTemplate(legend); else legendLabel;" [ngTemplateOutlet]="legend"></ng-template>\n\t\t\t\t<ng-template #legendLabel>{{legend}}</ng-template>\n\t\t\t</legend>\n\t\t\t<ng-content select="ibm-selection-tile,cds-selection-tile"></ng-content>\n\t\t</fieldset>',providers:[{provide:fesm2020_forms.JU,useExisting:TileGroup,multi:!0}]})],TileGroup);let Tile=class Tile{constructor(){this.tileClass=!0,this.theme="dark"}get lightThemeEnabled(){return"light"===this.theme}};Tile.propDecorators={tileClass:[{type:core.HostBinding,args:["class.cds--tile"]}],lightThemeEnabled:[{type:core.HostBinding,args:["class.cds--tile--light"]}],theme:[{type:core.Input}]},Tile=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tile, ibm-tile",template:"<ng-content></ng-content>"})],Tile);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),src_link=__webpack_require__("./src/link/index.ts");let TilesModule=class TilesModule{};TilesModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Tile,ClickableTile,ExpandableTile,SelectionTile,TileGroup],exports:[Tile,ClickableTile,ExpandableTile,SelectionTile,TileGroup],imports:[common.CommonModule,i18n.LU,src_link.L]})],TilesModule)},"./node_modules/@storybook/angular/dist/client/decorators.js":(__unused_webpack_module,exports,__webpack_require__)=>{Object.defineProperty(exports,"__esModule",{value:!0}),exports.componentWrapperDecorator=exports.applicationConfig=exports.moduleMetadata=void 0;const ComputesTemplateFromComponent_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/angular-beta/ComputesTemplateFromComponent.js"),NgComponentAnalyzer_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/angular-beta/utils/NgComponentAnalyzer.js");exports.moduleMetadata=metadata=>storyFn=>{const story=storyFn(),storyMetadata=story.moduleMetadata||{};return metadata=metadata||{},{...story,moduleMetadata:{declarations:[...metadata.declarations||[],...storyMetadata.declarations||[]],entryComponents:[...metadata.entryComponents||[],...storyMetadata.entryComponents||[]],imports:[...metadata.imports||[],...storyMetadata.imports||[]],schemas:[...metadata.schemas||[],...storyMetadata.schemas||[]],providers:[...metadata.providers||[],...storyMetadata.providers||[]]}}},exports.applicationConfig=function applicationConfig(config){return storyFn=>{const story=storyFn(),storyConfig=story.applicationConfig;return{...story,applicationConfig:storyConfig||config?{...config,...storyConfig,providers:[...config?.providers||[],...storyConfig?.providers||[]]}:void 0}}};exports.componentWrapperDecorator=(element,props)=>(storyFn,storyContext)=>{const story=storyFn(),currentProps="function"==typeof props?props(storyContext):props,template=(0,NgComponentAnalyzer_1.isComponent)(element)?(0,ComputesTemplateFromComponent_1.computesTemplateFromComponent)(element,currentProps??{},story.template):element(story.template);return{...story,template,...currentProps||story.props?{props:{...currentProps,...story.props}}:{}}}},"./node_modules/@storybook/angular/dist/client/index.js":function(__unused_webpack_module,exports,__webpack_require__){var __createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){void 0===k2&&(k2=k);var desc=Object.getOwnPropertyDescriptor(m,k);desc&&!("get"in desc?!m.__esModule:desc.writable||desc.configurable)||(desc={enumerable:!0,get:function(){return m[k]}}),Object.defineProperty(o,k2,desc)}:function(o,m,k,k2){void 0===k2&&(k2=k),o[k2]=m[k]}),__exportStar=this&&this.__exportStar||function(m,exports){for(var p in m)"default"===p||Object.prototype.hasOwnProperty.call(exports,p)||__createBinding(exports,m,p)};Object.defineProperty(exports,"__esModule",{value:!0}),exports.applicationConfig=exports.componentWrapperDecorator=exports.moduleMetadata=void 0,__webpack_require__("./node_modules/@storybook/angular/dist/client/globals.js"),__exportStar(__webpack_require__("./node_modules/@storybook/angular/dist/client/public-api.js"),exports),__exportStar(__webpack_require__("./node_modules/@storybook/angular/dist/client/public-types.js"),exports);var decorators_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/decorators.js");Object.defineProperty(exports,"moduleMetadata",{enumerable:!0,get:function(){return decorators_1.moduleMetadata}}),Object.defineProperty(exports,"componentWrapperDecorator",{enumerable:!0,get:function(){return decorators_1.componentWrapperDecorator}}),Object.defineProperty(exports,"applicationConfig",{enumerable:!0,get:function(){return decorators_1.applicationConfig}})},"./node_modules/@storybook/angular/dist/client/public-api.js":function(__unused_webpack_module,exports,__webpack_require__){var __createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){void 0===k2&&(k2=k);var desc=Object.getOwnPropertyDescriptor(m,k);desc&&!("get"in desc?!m.__esModule:desc.writable||desc.configurable)||(desc={enumerable:!0,get:function(){return m[k]}}),Object.defineProperty(o,k2,desc)}:function(o,m,k,k2){void 0===k2&&(k2=k),o[k2]=m[k]}),__exportStar=this&&this.__exportStar||function(m,exports){for(var p in m)"default"===p||Object.prototype.hasOwnProperty.call(exports,p)||__createBinding(exports,m,p)},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.raw=exports.forceReRender=exports.configure=exports.storiesOf=void 0;const core_client_1=__webpack_require__("@storybook/core-client"),render_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/render.js"),decorateStory_1=__importDefault(__webpack_require__("./node_modules/@storybook/angular/dist/client/decorateStory.js"));__exportStar(__webpack_require__("./node_modules/@storybook/angular/dist/client/public-types.js"),exports);const api=(0,core_client_1.start)(render_1.renderToCanvas,{decorateStory:decorateStory_1.default,render:render_1.render});exports.storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({renderer:"angular"});exports.configure=(...args)=>api.configure("angular",...args),exports.forceReRender=api.forceReRender,exports.raw=api.clientApi.raw},"./node_modules/@storybook/angular/dist/client/public-types.js":(__unused_webpack_module,exports)=>{Object.defineProperty(exports,"__esModule",{value:!0})},"./node_modules/@storybook/angular/dist/index.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{var _client_index__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/angular/dist/client/index.js");__webpack_require__.o(_client_index__WEBPACK_IMPORTED_MODULE_0__,"componentWrapperDecorator")&&__webpack_require__.d(__webpack_exports__,{componentWrapperDecorator:function(){return _client_index__WEBPACK_IMPORTED_MODULE_0__.componentWrapperDecorator}}),__webpack_require__.o(_client_index__WEBPACK_IMPORTED_MODULE_0__,"moduleMetadata")&&__webpack_require__.d(__webpack_exports__,{moduleMetadata:function(){return _client_index__WEBPACK_IMPORTED_MODULE_0__.moduleMetadata}})}}]);

package/docs/storybook/1895.d4241266.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[1895],{"./src/checkbox/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{XZ:()=>Checkbox,nD:()=>CheckboxModule});var CheckboxState,tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs");!function(CheckboxState){CheckboxState[CheckboxState.Init=0]="Init",CheckboxState[CheckboxState.Indeterminate=1]="Indeterminate",CheckboxState[CheckboxState.Checked=2]="Checked",CheckboxState[CheckboxState.Unchecked=3]="Unchecked"}(CheckboxState||(CheckboxState={}));let Checkbox=class Checkbox{constructor(changeDetectorRef){this.changeDetectorRef=changeDetectorRef,this.disabled=!1,this.skeleton=!1,this.hideLabel=!1,this.id=`checkbox-${Checkbox.checkboxCount}`,this.ariaLabel="",this.click=new core.EventEmitter,this.checkedChange=new core.EventEmitter,this.indeterminateChange=new core.EventEmitter,this._checked=!1,this._indeterminate=!1,this.currentCheckboxState=CheckboxState.Init,this.onTouched=()=>{},this.propagateChange=_=>{},Checkbox.checkboxCount++}set indeterminate(indeterminate){indeterminate!==this._indeterminate&&(this._indeterminate=indeterminate,this._indeterminate?this.transitionCheckboxState(CheckboxState.Indeterminate):this.transitionCheckboxState(this.checked?CheckboxState.Checked:CheckboxState.Unchecked),this.inputCheckbox&&this.inputCheckbox.nativeElement&&(this.inputCheckbox.nativeElement.indeterminate=indeterminate),this.changeDetectorRef.markForCheck(),this.indeterminateChange.emit(this._indeterminate))}get indeterminate(){return this._indeterminate}set checked(checked){this.setChecked(checked,!1)}get checked(){return this._checked}toggle(){this.setChecked(!this.checked,!0)}writeValue(value){this.setChecked(!!value,!0)}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouched=fn}setDisabledState(isDisabled){this.disabled=isDisabled,this.changeDetectorRef.markForCheck()}focusOut(){this.onTouched()}onChange(event){event.stopPropagation()}onClick(event){if(this.click.observers.length)return event.preventDefault(),void this.click.emit();this.disabled||(this.toggle(),this.transitionCheckboxState(this._checked?CheckboxState.Checked:CheckboxState.Unchecked),this.emitChangeEvent())}transitionCheckboxState(newState){this.currentCheckboxState=newState}emitChangeEvent(){this.checkedChange.emit(this.checked),this.propagateChange(this.checked)}ngAfterViewInit(){this.indeterminate&&this.inputCheckbox&&this.inputCheckbox.nativeElement&&(this.inputCheckbox.nativeElement.indeterminate=!0)}setChecked(checked,resetIndeterminate){checked!==this._checked&&(this._checked=checked,resetIndeterminate&&this._indeterminate&&(this._indeterminate=!1,Promise.resolve().then((()=>{this.indeterminateChange.emit(this._indeterminate)}))),this.changeDetectorRef.markForCheck())}};Checkbox.checkboxCount=0,Checkbox.ctorParameters=()=>[{type:core.ChangeDetectorRef}],Checkbox.propDecorators={disabled:[{type:core.Input}],skeleton:[{type:core.Input}],hideLabel:[{type:core.Input}],name:[{type:core.Input}],id:[{type:core.Input}],required:[{type:core.Input}],value:[{type:core.Input}],ariaLabel:[{type:core.Input}],ariaLabelledby:[{type:core.Input}],indeterminate:[{type:core.Input}],checked:[{type:core.Input}],click:[{type:core.Output}],checkedChange:[{type:core.Output}],indeterminateChange:[{type:core.Output}],inputCheckbox:[{type:core.ViewChild,args:["inputCheckbox"]}],focusOut:[{type:core.HostListener,args:["focusout"]}]},Checkbox=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-checkbox, ibm-checkbox",template:'\n\t\t<div class="cds--form-item cds--checkbox-wrapper">\n\t\t\t<input\n\t\t\t\t#inputCheckbox\n\t\t\t\tclass="cds--checkbox"\n\t\t\t\ttype="checkbox"\n\t\t\t\t[id]="id + \'_input\'"\n\t\t\t\t[value]="value"\n\t\t\t\t[name]="name"\n\t\t\t\t[required]="required"\n\t\t\t\t[checked]="checked"\n\t\t\t\t[disabled]="disabled"\n\t\t\t\t[attr.aria-labelledby]="ariaLabelledby"\n\t\t\t\t(change)="onChange($event)"\n\t\t\t\t(click)="onClick($event)">\n\t\t\t<label\n\t\t\t\t[for]="id + \'_input\'"\n\t\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t\tclass="cds--checkbox-label"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--skeleton\' : skeleton\n\t\t\t\t}">\n\t\t\t\t<span [ngClass]="{\'cds--visually-hidden\' : hideLabel}" class="cds--checkbox-label-text">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:Checkbox,multi:!0}],changeDetection:core.ChangeDetectionStrategy.OnPush})],Checkbox);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let CheckboxModule=class CheckboxModule{};CheckboxModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Checkbox],exports:[Checkbox],imports:[common.CommonModule,fesm2020_forms.u5]})],CheckboxModule)},"./src/forms/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{hJ:()=>src_button.hJ,s:()=>NFormsModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),src_checkbox=__webpack_require__("./src/checkbox/index.ts"),toggle=__webpack_require__("./src/toggle/index.ts"),src_radio=__webpack_require__("./src/radio/index.ts"),input=__webpack_require__("./src/input/index.ts"),src_button=__webpack_require__("./src/button/index.ts");let NFormsModule=class NFormsModule{};NFormsModule=(0,tslib_es6.gn)([(0,core.NgModule)({exports:[src_checkbox.nD,toggle.vm,src_radio.dU,input.gP,src_button.hJ,input.gP],imports:[common.CommonModule,fesm2020_forms.u5,src_checkbox.nD,toggle.vm,src_radio.dU,input.gP,src_button.hJ]})],NFormsModule)},"./src/radio/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Y8:()=>Radio,Ee:()=>RadioGroup,dU:()=>RadioModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs");class RadioChange{constructor(source,value){this.source=source,this.value=value}}let Radio=class Radio{constructor(){this.checked=!1,this.name="",this.disabled=!1,this.labelPlacement="right",this.ariaLabel="",this.required=!1,this.value="",this.skeleton=!1,this.id="radio-"+Radio.radioCount++,this.change=new core.EventEmitter,this.hostClass=!0,this.disabledFromGroup=!1,this._labelledby="",this.radioChangeHandler=event=>{}}set ariaLabelledby(value){this._labelledby=value}get ariaLabelledby(){return this._labelledby?this._labelledby:`label-${this.id}`}get labelLeft(){return"left"===this.labelPlacement}onChange(event){event.stopPropagation()}onClick(event){this.checked=event.target.checked;const radioEvent=new RadioChange(this,this.value);this.change.emit(radioEvent),this.radioChangeHandler(radioEvent)}registerRadioChangeHandler(fn){this.radioChangeHandler=fn}setDisabledFromGroup(disabled){this.disabledFromGroup=disabled}};Radio.radioCount=0,Radio.propDecorators={checked:[{type:core.Input}],name:[{type:core.Input}],disabled:[{type:core.Input}],labelPlacement:[{type:core.Input}],ariaLabelledby:[{type:core.Input}],ariaLabel:[{type:core.Input}],required:[{type:core.Input}],value:[{type:core.Input}],skeleton:[{type:core.Input}],id:[{type:core.Input}],change:[{type:core.Output}],hostClass:[{type:core.HostBinding,args:["class.cds--radio-button-wrapper"]}],labelLeft:[{type:core.HostBinding,args:["class.cds--radio-button-wrapper--label-left"]}]},Radio=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-radio, ibm-radio",template:'\n\t\t<input\n\t\t\t*ngIf="!skeleton"\n\t\t\tclass="cds--radio-button"\n\t\t\ttype="radio"\n\t\t\t[checked]="checked"\n\t\t\t[disabled]="disabled || disabledFromGroup"\n\t\t\t[name]="name"\n\t\t\t[id]="id"\n\t\t\t[required]="required"\n\t\t\t[value]="value"\n\t\t\t[attr.aria-labelledby]="ariaLabelledby"\n\t\t\t(change)="onChange($event)"\n\t\t\t(click)="onClick($event)">\n\t\t<div *ngIf="skeleton" class="cds--radio-button cds--skeleton"></div>\n\t\t<label\n\t\t\tclass="cds--radio-button__label"\n\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--skeleton\': skeleton\n\t\t\t}"\n\t\t\t[for]="id"\n\t\t\tid="label-{{id}}">\n\t\t\t<span class="cds--radio-button__appearance"></span>\n\t\t\t<ng-content></ng-content>\n\t\t</label>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:Radio,multi:!0}]})],Radio);let RadioGroup=class RadioGroup{constructor(){this.orientation="horizontal",this.labelPlacement="right",this.change=new core.EventEmitter,this.radioButtonGroupClass=!0,this.isInitialized=!1,this._disabled=!1,this._skeleton=!1,this._value=null,this._selected=null,this._name="radio-group-"+RadioGroup.radioGroupCount++,this.onTouched=()=>{},this.propagateChange=_=>{}}set selected(selected){(this._selected&&this._selected.value)===(selected&&selected.value)||(this._selected&&(this._selected.checked=!1),this._selected=selected,this.value=selected?selected.value:null,this.checkSelectedRadio())}get selected(){return this._selected}set value(newValue){this._value!==newValue&&(this._value=newValue,this.updateSelectedRadioFromValue(),this.checkSelectedRadio())}get value(){return this._value}set name(name){this._name=name,this.updateRadios()}get name(){return this._name}set disabled(disabled){this._disabled=disabled,this.updateRadios()}get disabled(){return this._disabled}get skeleton(){return this._skeleton}set skeleton(value){this._skeleton=value,this.updateChildren()}checkSelectedRadio(){this.selected&&!this._selected.checked&&(this.selected.checked=!0)}updateSelectedRadioFromValue(){let alreadySelected=null!=this._selected&&this._selected.value===this._value;this.radios&&!alreadySelected&&(this.selected&&this.value&&(this.selected.checked=!1),this._selected=null,this.radios.forEach((radio=>{(radio.checked||radio.value===this._value)&&(this._selected=radio)})),this.selected&&!this.value&&(this._value=this.selected.value))}setDisabledState(isDisabled){this.disabled=isDisabled}emitChangeEvent(event){this.change.emit(event),this.propagateChange(event.value),this.onTouched()}updateRadios(){this.radios&&setTimeout((()=>{this.radios.forEach((radio=>{radio.name=this.name,radio.setDisabledFromGroup(this.disabled),"left"===this.labelPlacement&&(radio.labelPlacement="left")}))}))}writeValue(value){this.value=value,setTimeout((()=>{this.updateSelectedRadioFromValue(),this.checkSelectedRadio()}))}ngAfterContentInit(){this.radios.changes.subscribe((()=>{this.updateRadios(),this.updateRadioChangeHandler()})),this.updateChildren(),this.updateRadioChangeHandler()}ngAfterViewInit(){this.updateRadios()}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouched=fn}focusOut(){this.onTouched()}updateChildren(){this.radios&&this.radios.forEach((child=>child.skeleton=this.skeleton))}updateRadioChangeHandler(){this.radios.forEach((radio=>{radio.registerRadioChangeHandler((event=>{(this.selected&&this.selected.value)!==event.value&&(this.selected&&(this.selected.checked=!1),this._selected=event.source,this._value=event.value,this.emitChangeEvent(event))}))}))}};RadioGroup.radioGroupCount=0,RadioGroup.propDecorators={orientation:[{type:core.Input}],labelPlacement:[{type:core.Input}],ariaLabel:[{type:core.Input}],ariaLabelledby:[{type:core.Input}],change:[{type:core.Output}],radios:[{type:core.ContentChildren,args:[(0,core.forwardRef)((()=>Radio))]}],selected:[{type:core.Input}],value:[{type:core.Input}],name:[{type:core.Input}],disabled:[{type:core.Input}],skeleton:[{type:core.Input}],radioButtonGroupClass:[{type:core.HostBinding,args:["class.cds--form-item"]}],focusOut:[{type:core.HostListener,args:["focusout"]}]},RadioGroup=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-radio-group, ibm-radio-group",template:"\n\t\t<div\n\t\t\tclass=\"cds--radio-button-group\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--radio-button-group--vertical': orientation === 'vertical',\n\t\t\t\t'cds--radio-button-group--label-left': labelPlacement === 'left'\n\t\t\t}\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t",providers:[{provide:fesm2020_forms.JU,useExisting:RadioGroup,multi:!0}]})],RadioGroup);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let RadioModule=class RadioModule{};RadioModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Radio,RadioGroup],exports:[Radio,RadioGroup],imports:[common.CommonModule,fesm2020_forms.u5]})],RadioModule)},"./src/toggle/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{ZD:()=>Toggle,vm:()=>ToggleModule});var ToggleState,tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),src_checkbox=__webpack_require__("./src/checkbox/index.ts"),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");!function(ToggleState){ToggleState[ToggleState.Init=0]="Init",ToggleState[ToggleState.Checked=1]="Checked",ToggleState[ToggleState.Unchecked=2]="Unchecked"}(ToggleState||(ToggleState={}));let Toggle=class Toggle extends src_checkbox.XZ{constructor(changeDetectorRef,i18n){super(changeDetectorRef),this.changeDetectorRef=changeDetectorRef,this.i18n=i18n,this.size="md",this.hideLabel=!1,this.toggleClass=!0,this.formItem=!0,this.id="toggle-"+Toggle.toggleCount,this._offValues=this.i18n.getOverridable("TOGGLE.OFF"),this._onValues=this.i18n.getOverridable("TOGGLE.ON"),Toggle.toggleCount++}set offText(value){this._offValues.override(value)}get offText(){return this._offValues.value}set onText(value){this._onValues.override(value)}get onText(){return this._onValues.value}get disabledClass(){return this.disabled}setDisabledState(isDisabled){this.disabled=isDisabled}getOffText(){return this._offValues.subject}getOnText(){return this._onValues.subject}getCheckedText(){return this.checked?this._onValues.subject:this._offValues.subject}emitChangeEvent(){this.checkedChange.emit(this.checked),this.propagateChange(this.checked)}isTemplate(value){return value instanceof core.TemplateRef}};Toggle.toggleCount=0,Toggle.ctorParameters=()=>[{type:core.ChangeDetectorRef},{type:i18n.oc}],Toggle.propDecorators={offText:[{type:core.Input}],onText:[{type:core.Input}],label:[{type:core.Input}],size:[{type:core.Input}],hideLabel:[{type:core.Input}],toggleClass:[{type:core.HostBinding,args:["class.cds--toggle"]}],disabledClass:[{type:core.HostBinding,args:["class.cds--toggle--disabled"]}],formItem:[{type:core.HostBinding,args:["class.cds--form-item"]}]},Toggle=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-toggle, ibm-toggle",template:'\n\t\t<button\n\t\t\tclass="cds--toggle__button"\n\t\t\t[disabled]="disabled"\n\t\t\t[id]="id"\n\t\t\trole="switch"\n\t\t\ttype="button"\n\t\t\t[attr.aria-checked]="checked"\n\t\t\t(click)="onClick($event)">\n\t\t</button>\n\t\t<label\n\t\t\tclass="cds--toggle__label"\n\t\t\t[for]="id">\n\t\t\t<span\n\t\t\t\tclass="cds--toggle__label-text"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--visually-hidden\': hideLabel\n\t\t\t\t}">\n\t\t\t\t<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>\n\t\t\t</span>\n\t\t\t<div\n\t\t\t\tclass="cds--toggle__appearance"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--toggle__appearance--sm\': size === \'sm\'\n\t\t\t\t}">\n\t\t\t\t<div\n\t\t\t\t\tclass="cds--toggle__switch"\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'cds--toggle__switch--checked\': checked\n\t\t\t\t\t}">\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf="size === \'sm\'"\n\t\t\t\t\t\tclass=\'cds--toggle__check\'\n\t\t\t\t\t\twidth="6px"\n\t\t\t\t\t\theight="5px"\n\t\t\t\t\t\tviewBox="0 0 6 5">\n\t\t\t\t\t\t<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t\t<span class="cds--toggle__text">\n\t\t\t\t\t{{(hideLabel ? label : (getCheckedText() | async))}}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t</label>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:Toggle,multi:!0}]})],Toggle);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let ToggleModule=class ToggleModule{};ToggleModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Toggle],exports:[Toggle],imports:[common.CommonModule,fesm2020_forms.u5,i18n.LU]})],ToggleModule)}}]);

package/docs/storybook/{3224.acb75ed6.iframe.bundle.js → 3224.8b16624b.iframe.bundle.js}

@@ -1 +1 @@
-"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3224],{"./src/dropdown/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{jq:()=>AbstractDropdownView,Lt:()=>Dropdown,kW:()=>DropdownModule,Vn:()=>DropdownService});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),Subscription=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subscription.js"),of=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/observable/of.js");let AbstractDropdownView=class AbstractDropdownView{constructor(){this.type="single",this.size="md"}set items(value){}get items(){}getNextItem(){}hasNextElement(){}getNextElement(){}getPrevItem(){}hasPrevElement(){}getPrevElement(){}getSelected(){}getCurrentItem(){}getCurrentElement(){}getListItems(){}propagateSelected(value){}filterBy(value){}initFocus(){}onItemsReady(subcription){}reorderSelected(moveFocus){}};AbstractDropdownView.propDecorators={items:[{type:core.Input}],select:[{type:core.Output}],blurIntent:[{type:core.Output}]},AbstractDropdownView=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsAbstractDropdownView], [ibmAbstractDropdownView]"})],AbstractDropdownView);var i18n=__webpack_require__("./src/i18n/index.ts"),placeholder=__webpack_require__("./src/placeholder/index.ts"),utils_position=__webpack_require__("./node_modules/@carbon/utils-position/index.js"),utils=__webpack_require__("./src/utils/index.ts");const defaultOffset={top:0,left:0};let DropdownService=class DropdownService{constructor(placeholderService,animationFrameService){this.placeholderService=placeholderService,this.animationFrameService=animationFrameService,this.animationFrameSubscription=new Subscription.w0,this._offset=defaultOffset}set offset(value){this._offset=Object.assign({},defaultOffset,value)}get offset(){return this._offset}appendToBody(parentRef,menuRef,classList){menuRef.style.display="block";const dropdownWrapper=document.createElement("div");return dropdownWrapper.className=`dropdown ${classList}`,dropdownWrapper.style.width=parentRef.offsetWidth+"px",dropdownWrapper.style.position="absolute",dropdownWrapper.appendChild(menuRef),this.placeholderService.hasPlaceholderRef()?this.placeholderService.appendElement(dropdownWrapper):document.body.appendChild(dropdownWrapper),this.menuInstance=dropdownWrapper,this.animationFrameSubscription=this.animationFrameService.tick.subscribe((()=>{this.positionDropdown(parentRef,dropdownWrapper)})),this.positionDropdown(parentRef,dropdownWrapper),dropdownWrapper}appendToDropdown(hostRef){if(!this.menuInstance)return;const instance=this.menuInstance,menu=instance.firstElementChild;return this.menuInstance=null,menu.style.display="none",hostRef.appendChild(menu),this.animationFrameSubscription.unsubscribe(),this.placeholderService.hasPlaceholderRef()&&this.placeholderService.hasElement(instance)?this.placeholderService.removeElement(instance):document.body.contains(instance)&&document.body.removeChild(instance),instance}updatePosition(parentRef){this.positionDropdown(parentRef,this.menuInstance)}ngOnDestroy(){this.animationFrameSubscription.unsubscribe()}positionDropdown(parentRef,menuRef){if(!menuRef)return;let leftOffset=0;const boxMenu=menuRef.querySelector(".cds--list-box__menu");if(boxMenu)if(parentRef.getBoundingClientRect().left!==boxMenu.getBoundingClientRect().left){parentRef.getBoundingClientRect().left-boxMenu.getBoundingClientRect().left+boxMenu.getBoundingClientRect().right>(window.innerWidth||document.documentElement.clientWidth)&&(leftOffset=parentRef.offsetWidth-boxMenu.offsetWidth)}else boxMenu.getBoundingClientRect().right>(window.innerWidth||document.documentElement.clientWidth)&&(leftOffset=parentRef.offsetWidth-boxMenu.offsetWidth);const closestMenuWithPos=(0,utils._K)("position",["relative","fixed","absolute"],menuRef.parentElement),topPos=closestMenuWithPos?-1*closestMenuWithPos.getBoundingClientRect().top:this.offset.top,leftPos=closestMenuWithPos?-1*closestMenuWithPos.getBoundingClientRect().left:this.offset.left+leftOffset;let pos=utils_position.FK.findAbsolute(parentRef,menuRef,"bottom");pos=utils_position.FK.addOffset(pos,topPos,leftPos),utils_position.FK.setElement(menuRef,pos)}};DropdownService.ctorParameters=()=>[{type:placeholder.Q_},{type:utils.NV}],DropdownService=(0,tslib_es6.gn)([(0,core.Injectable)()],DropdownService);let Dropdown=class Dropdown{constructor(elementRef,i18n,dropdownService,elementService){this.elementRef=elementRef,this.i18n=i18n,this.dropdownService=dropdownService,this.elementService=elementService,this.id="dropdown-"+Dropdown.dropdownCount++,this.placeholder="",this.displayValue="",this.clearText=this.i18n.get().DROPDOWN.CLEAR,this.size="md",this.type="single",this.theme="dark",this.disabled=!1,this.skeleton=!1,this.inline=!1,this.disableArrowKeys=!1,this.invalid=!1,this.warn=!1,this.appendInline=null,this.selectionFeedback="top-after-reopen",this.menuButtonLabel=this.i18n.get().DROPDOWN.OPEN,this.selectedLabel=this.i18n.get().DROPDOWN.SELECTED,this.selected=new core.EventEmitter,this.onClose=new core.EventEmitter,this.close=new core.EventEmitter,this.hostClass=!0,this.menuIsClosed=!0,this._dropUp=!1,this.noop=this._noop.bind(this),this.outsideClick=this._outsideClick.bind(this),this.outsideKey=this._outsideKey.bind(this),this.keyboardNav=this._keyboardNav.bind(this),this.visibilitySubscription=new Subscription.w0,this.onTouchedCallback=this._noop,this._writtenValue=[],this.propagateChange=_=>{}}get writtenValue(){return this._writtenValue}set writtenValue(val){val&&0===val.length&&this.clearSelected(),this._writtenValue=val}ngOnInit(){this.view&&(this.view.type=this.type)}ngAfterContentInit(){if(!this.view)return;(this.writtenValue&&this.writtenValue.length||"number"==typeof this.writtenValue)&&this.writeValue(this.writtenValue),this.view.type=this.type,this.view.size=this.size;const isUpdate=event=>event&&event.isUpdate;this.view.select.subscribe((event=>{if("single"!==this.type||isUpdate(event)||Array.isArray(event)||(this.closeMenu(),event.item&&event.item.selected?this.itemValueKey?this.propagateChange(event.item[this.itemValueKey]):this.propagateChange(event.item):this.propagateChange(null)),"multi"===this.type&&!isUpdate(event))if(this.itemValueKey&&this.view.getSelected()){const values=this.view.getSelected().map((item=>item[this.itemValueKey]));this.propagateChange(values)}else this.propagateChange(this.view.getSelected());isUpdate(event)||(this.checkForReorder(),this.selected.emit(event))}))}ngAfterViewInit(){null===this.appendInline&&(0,utils.OQ)(this.elementRef.nativeElement)?this.appendInline=!1:null===this.appendInline&&(this.appendInline=!0),this.checkForReorder()}ngOnDestroy(){this.appendInline||this._appendToDropdown()}writeValue(value){this.writtenValue=value,this.view.onItemsReady((()=>{if(value)if("single"===this.type)if(this.itemValueKey){const newValue=Object.assign({},this.view.getListItems().find((item=>item[this.itemValueKey]===value)));newValue.selected=!0,this.view.propagateSelected([newValue])}else this.view.propagateSelected([value]);else if(this.itemValueKey){let newValues=[];for(const v of value)for(const item of this.view.getListItems())item[this.itemValueKey]===v&&newValues.push(Object.assign({},item,{selected:!0}));this.view.propagateSelected(newValues)}else this.view.propagateSelected(value);else this.view.propagateSelected([value]);this.checkForReorder()}))}onBlur(){this.onTouchedCallback()}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouchedCallback=fn}setDisabledState(isDisabled){this.disabled=isDisabled}onKeyDown(event){if("Escape"!==event.key||this.menuIsClosed||event.stopImmediatePropagation(),"Escape"===event.key)event.preventDefault(),this.closeMenu(),this.dropdownButton.nativeElement.focus();else if(this.menuIsClosed&&(" "===event.key||"ArrowDown"===event.key||"ArrowUp"===event.key)){if(this.disableArrowKeys&&("ArrowDown"===event.key||"ArrowUp"===event.key))return;event.preventDefault(),this.openMenu()}!this.menuIsClosed&&"Tab"===event.key&&this.dropdownMenu.nativeElement.contains(event.target)&&this.closeMenu(),!this.menuIsClosed&&"Tab"===event.key&&event.shiftKey&&this.closeMenu(),"multi"!==this.type&&this.menuIsClosed&&this.closedDropdownNavigation(event)}closedDropdownNavigation(event){if("ArrowDown"===event.key){event.preventDefault(),this.view.getCurrentItem().selected=!1;let item=this.view.getNextItem();item&&(item.selected=!0)}else if("ArrowUp"===event.key){event.preventDefault(),this.view.getCurrentItem().selected=!1;let item=this.view.getPrevItem();item&&(item.selected=!0)}}getDisplayStringValue(){if(!this.view)return;let selected=this.view.getSelected();return!selected.length||this.displayValue&&this.isRenderString()?selected.length&&this.isRenderString()?(0,of.of)(this.displayValue):(0,of.of)(this.placeholder):"multi"===this.type?(0,of.of)(this.placeholder):(0,of.of)(selected[0].content)}isRenderString(){return"string"==typeof this.displayValue}getRenderTemplateContext(){if(!this.view)return;let selected=this.view.getSelected();return"multi"===this.type?{items:selected}:selected&&selected.length>0?{item:selected[0]}:{}}getSelectedCount(){if(this.view.getSelected())return this.view.getSelected().length}clearSelected(){if(!this.disabled&&0!==this.getSelectedCount()){for(const item of this.view.getListItems())item.selected=!1;this.selected.emit([]),this.propagateChange([])}}valueSelected(){return!!this.view.getSelected()}_noop(){}_outsideClick(event){this.elementRef.nativeElement.contains(event.target)||this.dropdownMenu.nativeElement.contains(event.target)||this.closeMenu()}_outsideKey(event){!this.menuIsClosed&&"Tab"===event.key&&this.dropdownMenu.nativeElement.contains(event.target)&&this.closeMenu()}_keyboardNav(event){"Escape"!==event.key||this.menuIsClosed||event.stopImmediatePropagation(),"Escape"===event.key?(event.preventDefault(),this.closeMenu(),this.dropdownButton.nativeElement.focus()):this.menuIsClosed||"Tab"!==event.key||(this.dropdownButton.nativeElement.focus(),this.dropdownButton.nativeElement.dispatchEvent(new KeyboardEvent("keydown",{bubbles:!0,cancelable:!0,key:"Tab"})),this.closeMenu())}_appendToDropdown(){this.dropdownService.appendToDropdown(this.elementRef.nativeElement),this.dropdownMenu.nativeElement.removeEventListener("keydown",this.keyboardNav,!0)}_appendToBody(){const lightClass="light"===this.theme?" cds--list-box--light":"",expandedClass=this.menuIsClosed?"":" cds--list-box--expanded";this.dropdownService.appendToBody(this.dropdownButton.nativeElement,this.dropdownMenu.nativeElement,`${this.elementRef.nativeElement.className}${lightClass}${expandedClass}`),this.dropdownMenu.nativeElement.addEventListener("keydown",this.keyboardNav,!0)}_shouldDropUp(){const menu=this.dropdownMenu&&this.dropdownMenu.nativeElement.querySelector(".cds--list-box__menu"),menuRect=menu&&menu.getBoundingClientRect();if(menu&&menuRect){return(0,utils.O3)(menu).reduce(((shouldDropUp,parent)=>{const parentRect=parent.getBoundingClientRect(),isBelowParent=!(menuRect.bottom<=parentRect.bottom);return shouldDropUp||isBelowParent}),!1)}return!1}openMenu(){if(0!==this.view.getListItems().length){if(this._dropUp=!1,this.menuIsClosed=!1,!this.appendInline){const target=this.dropdownButton.nativeElement,parent=this.elementRef.nativeElement;this.visibilitySubscription=this.elementService.visibility(target,parent).subscribe((value=>{value.visible||this.closeMenu()})),this._appendToBody()}setTimeout((()=>{null!==this.dropUp&&void 0!==this.dropUp||(this._dropUp=this._shouldDropUp())}),0),document.body.firstElementChild.addEventListener("click",this.noop,!0),document.body.firstElementChild.addEventListener("keydown",this.noop,!0),document.addEventListener("click",this.outsideClick,!0),document.addEventListener("keydown",this.outsideKey,!0),setTimeout((()=>this.view.initFocus()),0)}}closeMenu(){this.menuIsClosed||(this.menuIsClosed=!0,this.checkForReorder(),this.onClose.emit(),this.close.emit(),this.dropdownButton.nativeElement.focus(),this.view.disableScroll&&this.view.disableScroll(),this.appendInline||(this.visibilitySubscription.unsubscribe(),this._appendToDropdown()),document.body.firstElementChild.removeEventListener("click",this.noop,!0),document.body.firstElementChild.removeEventListener("keydown",this.noop,!0),document.removeEventListener("click",this.outsideClick,!0),document.removeEventListener("keydown",this.outsideKey,!0))}toggleMenu(){this.menuIsClosed?this.openMenu():this.closeMenu()}isTemplate(value){return value instanceof core.TemplateRef}checkForReorder(){const topAfterReopen=this.menuIsClosed&&"top-after-reopen"===this.selectionFeedback;"multi"!==this.type||!topAfterReopen&&"top"!==this.selectionFeedback||this.view.reorderSelected()}};Dropdown.dropdownCount=0,Dropdown.ctorParameters=()=>[{type:core.ElementRef},{type:i18n.oc},{type:DropdownService},{type:utils.d2}],Dropdown.propDecorators={id:[{type:core.Input}],label:[{type:core.Input}],helperText:[{type:core.Input}],placeholder:[{type:core.Input}],displayValue:[{type:core.Input}],clearText:[{type:core.Input}],size:[{type:core.Input}],type:[{type:core.Input}],theme:[{type:core.Input}],disabled:[{type:core.Input}],skeleton:[{type:core.Input}],inline:[{type:core.Input}],disableArrowKeys:[{type:core.Input}],invalid:[{type:core.Input}],invalidText:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],appendInline:[{type:core.Input}],scrollableContainer:[{type:core.Input}],itemValueKey:[{type:core.Input}],selectionFeedback:[{type:core.Input}],menuButtonLabel:[{type:core.Input}],selectedLabel:[{type:core.Input}],dropUp:[{type:core.Input}],selected:[{type:core.Output}],onClose:[{type:core.Output}],close:[{type:core.Output}],view:[{type:core.ContentChild,args:[AbstractDropdownView,{static:!0}]}],dropdownButton:[{type:core.ViewChild,args:["dropdownButton",{static:!0}]}],dropdownMenu:[{type:core.ViewChild,args:["dropdownMenu",{static:!0}]}],hostClass:[{type:core.HostBinding,args:["class.cds--dropdown__wrapper"]}],onKeyDown:[{type:core.HostListener,args:["keydown",["$event"]]}]},Dropdown=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-dropdown, ibm-dropdown",template:'\n\t<label\n\t\t*ngIf="label"\n\t\t[for]="id"\n\t\tclass="cds--label"\n\t\t[ngClass]="{\'cds--label--disabled\': disabled}">\n\t\t<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>\n\t\t<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>\n\t</label>\n\t<div\n\t\tclass="cds--list-box"\n\t\t[ngClass]="{\n\t\t\t\'cds--dropdown\': type !== \'multi\',\n\t\t\t\'cds--multiselect\': type === \'multi\',\n\t\t\t\'cds--multi-select--selected\': type === \'multi\' && getSelectedCount() > 0,\n\t\t\t\'cds--dropdown--light\': theme === \'light\',\n\t\t\t\'cds--list-box--light\': theme === \'light\',\n\t\t\t\'cds--list-box--inline\': inline,\n\t\t\t\'cds--skeleton\': skeleton,\n\t\t\t\'cds--dropdown--disabled cds--list-box--disabled\': disabled,\n\t\t\t\'cds--dropdown--invalid\': invalid,\n\t\t\t\'cds--dropdown--warning cds--list-box--warning\': warn,\n\t\t\t\'cds--dropdown--sm cds--list-box--sm\': size === \'sm\',\n\t\t\t\'cds--dropdown--md cds--list-box--md\': size === \'md\',\n\t\t\t\'cds--dropdown--lg cds--list-box--lg\': size === \'lg\',\n\t\t\t\'cds--list-box--expanded\': !menuIsClosed\n\t\t}">\n\t\t<button\n\t\t\t#dropdownButton\n\t\t\t[id]="id"\n\t\t\ttype="button"\n\t\t\tclass="cds--list-box__field"\n\t\t\t[ngClass]="{\'a\': !menuIsClosed}"\n\t\t\t[attr.aria-expanded]="!menuIsClosed"\n\t\t\t[attr.aria-disabled]="disabled"\n\t\t\taria-haspopup="listbox"\n\t\t\t(click)="disabled ? $event.stopPropagation() : toggleMenu()"\n\t\t\t(blur)="onBlur()"\n\t\t\t[attr.disabled]="disabled ? true : null">\n\t\t\t<div\n\t\t\t\t(click)="clearSelected()"\n\t\t\t\t(keydown.enter)="clearSelected()"\n\t\t\t\t*ngIf="type === \'multi\' && getSelectedCount() > 0"\n\t\t\t\tclass="cds--list-box__selection cds--tag--filter cds--list-box__selection--multi"\n\t\t\t\ttabindex="0"\n\t\t\t\t[title]="clearText">\n\t\t\t\t{{getSelectedCount()}}\n\t\t\t\t<svg\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\trole="img"\n\t\t\t\t\txmlns="http://www.w3.org/2000/svg"\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 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<span *ngIf="isRenderString()" class="cds--list-box__label">{{getDisplayStringValue() | async}}</span>\n\t\t\t<ng-template\n\t\t\t\t*ngIf="!isRenderString()"\n\t\t\t\t[ngTemplateOutletContext]="getRenderTemplateContext()"\n\t\t\t\t[ngTemplateOutlet]="displayValue">\n\t\t\t</ng-template>\n\t\t\t<svg\n\t\t\t\t*ngIf="!warn && invalid"\n\t\t\t\tclass="cds--dropdown__invalid-icon"\n\t\t\t\tcdsIcon="warning--filled"\n\t\t\t\tsize="16">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf="!invalid && warn"\n\t\t\t\tcdsIcon="warning--alt--filled"\n\t\t\t\tsize="16"\n\t\t\t\tclass="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning">\n\t\t\t</svg>\n\t\t\t<span class="cds--list-box__menu-icon">\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf="!skeleton"\n\t\t\t\t\tcdsIcon="chevron--down"\n\t\t\t\t\tsize="16"\n\t\t\t\t\t[attr.aria-label]="menuButtonLabel"\n\t\t\t\t\t[ngClass]="{\'cds--list-box__menu-icon--open\': !menuIsClosed }">\n\t\t\t\t</svg>\n\t\t\t</span>\n\t\t</button>\n\t\t<div\n\t\t\t#dropdownMenu\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--list-box--up\': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t}">\n\t\t\t<ng-content *ngIf="!menuIsClosed"></ng-content>\n\t\t</div>\n\t</div>\n\t<div\n\t\t*ngIf="helperText && !invalid && !warn"\n\t\tclass="cds--form__helper-text"\n\t\t[ngClass]="{\n\t\t\t\'cds--form__helper-text--disabled\': disabled\n\t\t}">\n\t\t<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>\n\t</div>\n\t<div *ngIf="!warn && invalid" class="cds--form-requirement">\n\t\t<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>\n\t\t<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>\n\t</div>\n\t<div *ngIf="!invalid && warn" class="cds--form-requirement">\n\t\t<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>\n\t</div>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:Dropdown,multi:!0}]})],Dropdown);var isObservable=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/util/isObservable.js"),Observable=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Observable.js"),first=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/first.js"),fromEvent=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/observable/fromEvent.js"),debounceTime=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/debounceTime.js"),map=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/map.js"),filter=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/filter.js");let DropdownList=class DropdownList{constructor(elementRef,i18n,appRef){this.elementRef=elementRef,this.i18n=i18n,this.appRef=appRef,this.ariaLabel=this.i18n.get().DROPDOWN_LIST.LABEL,this.listTpl=null,this.select=new core.EventEmitter,this.scroll=new core.EventEmitter,this.blurIntent=new core.EventEmitter,this.type="single",this.showTitles=!0,this.size="md",this.listId="listbox-"+DropdownList.listCount++,this.highlightedItem=null,this.displayItems=[],this.index=-1,this._items=[]}set items(value){(0,isObservable.b)(value)?(this._itemsSubscription&&this._itemsSubscription.unsubscribe(),this._itemsReady=new Observable.y((observer=>{this._itemsSubscription=value.subscribe((v=>{this.updateList(v),observer.next(!0),observer.complete()}))})),this.onItemsReady(null)):this.updateList(value),this._originalItems=value}get items(){return this._originalItems}ngAfterViewInit(){this.index=this.getListItems().findIndex((item=>item.selected)),this.setupFocusObservable(),setTimeout((()=>{this.doEmitSelect(!0)}))}ngOnDestroy(){this.focusJump&&this.focusJump.unsubscribe(),this._itemsSubscription&&this._itemsSubscription.unsubscribe()}doEmitSelect(isUpdate=!0){if("single"===this.type)this.select.emit({item:this._items.find((item=>item.selected)),isUpdate});else{const selected=this.getSelected()||[];selected.isUpdate=isUpdate,this.select.emit(selected)}}getItemId(index){return`${this.listId}-${index}`}updateList(items){this._items=items.map((item=>Object.assign({},item))),this.displayItems=this._items,this.updateIndex(),this.setupFocusObservable(),this.doEmitSelect()}filterBy(query=""){this.displayItems=query?this.getListItems().filter((item=>item.content.toLowerCase().includes(query.toLowerCase()))):this.getListItems(),this.updateIndex()}setupFocusObservable(){if(!this.list)return;this.focusJump&&this.focusJump.unsubscribe();let elList=Array.from(this.list.nativeElement.querySelectorAll("li"));this.focusJump=function watchFocusJump(target,elements){return(0,fromEvent.R)(target,"keydown").pipe((0,debounceTime.b)(150),(0,map.U)((ev=>{let el=elements.find((itemEl=>itemEl.textContent.trim().toLowerCase().startsWith(ev.key)));if(el)return el})),(0,filter.h)((el=>!!el)))}(this.list.nativeElement,elList).subscribe((el=>{el.focus()}))}getNextItem(){return this.index<this.displayItems.length-1&&this.index++,this.displayItems[this.index]}hasNextElement(){return this.index<this.displayItems.length-1&&(!(this.index===this.displayItems.length-2)||!this.displayItems[this.index+1].disabled)}getNextElement(){if(this.index<this.displayItems.length-1&&this.index++,this.displayItems[this.index].disabled)return this.getNextElement();let elemList=this.listElementList?this.listElementList.toArray():[];return elemList[this.index]&&elemList[this.index].nativeElement?elemList[this.index].nativeElement:null}getPrevItem(){return this.index>0&&this.index--,this.displayItems[this.index]}hasPrevElement(){return this.index>0&&(!(1===this.index)||!this.displayItems[0].disabled)}getPrevElement(){if(this.index>0&&this.index--,this.displayItems[this.index].disabled)return this.getPrevElement();let elemList=this.listElementList?this.listElementList.toArray():[];return elemList[this.index]&&elemList[this.index].nativeElement?elemList[this.index].nativeElement:null}getCurrentItem(){return this.index<0?this.displayItems[0]:this.displayItems[this.index]}getCurrentElement(){return this.index<0?this.listElementList.first.nativeElement:this.listElementList.toArray()[this.index].nativeElement}getListItems(){return this._items}getSelected(){let selected=this.getListItems().filter((item=>item.selected));return 0===selected.length?[]:selected}propagateSelected(value){Array.isArray(value)||console.error(`${this.constructor.name}.propagateSelected expects an Array<ListItem>, got ${JSON.stringify(value)}`),this.onItemsReady((()=>{for(let oldItem of this.getListItems()){let tempOldItem=Object.assign({},oldItem);delete tempOldItem.selected,tempOldItem=JSON.stringify(tempOldItem);for(let newItem of value){let tempNewItem=Object.assign({},newItem);if(delete tempNewItem.selected,tempNewItem=JSON.stringify(tempNewItem),tempOldItem.includes(tempNewItem)){oldItem.selected=newItem.selected;break}oldItem.selected=!1}}}))}initFocus(){this.index<0&&this.updateIndex(),this.list.nativeElement.focus(),setTimeout((()=>{this.highlightedItem=this.getItemId(this.index)}))}updateIndex(){const selected=this.getSelected();selected.length?this.index=this.displayItems.indexOf(selected[0]):this.hasNextElement()&&this.getNextElement()}navigateList(event){"Enter"===event.key||" "===event.key?(this.listElementList.some((option=>option.nativeElement===event.target))&&event.preventDefault(),"Enter"===event.key&&this.doClick(event,this.getCurrentItem())):"ArrowDown"!==event.key&&"ArrowUp"!==event.key||(event.preventDefault(),"ArrowDown"===event.key?this.hasNextElement()?this.getNextElement().scrollIntoView({block:"end"}):this.blurIntent.emit("bottom"):"ArrowUp"===event.key&&(this.hasPrevElement()?this.getPrevElement().scrollIntoView():this.blurIntent.emit("top")),setTimeout((()=>{this.highlightedItem=this.getItemId(this.index)})))}doClick(event,item){if(event.preventDefault(),!item.disabled){if(this.list.nativeElement.focus(),"single"===this.type){item.selected=!0;for(let otherItem of this.getListItems())item!==otherItem&&(otherItem.selected=!1)}else item.selected=!item.selected;this.index=this.displayItems.indexOf(item),this.highlightedItem=this.getItemId(this.index),this.doEmitSelect(!1),this.appRef.tick()}}onItemFocus(index){const element=this.listElementList.toArray()[index].nativeElement;element.classList.add("cds--list-box__menu-item--highlighted"),element.tabIndex=0}onItemBlur(index){const element=this.listElementList.toArray()[index].nativeElement;element.classList.remove("cds--list-box__menu-item--highlighted"),element.tabIndex=-1}emitScroll(event){const customScrollEvent={atTop:0===event.srcElement.scrollTop,atBottom:event.srcElement.scrollHeight-event.srcElement.scrollTop===event.srcElement.clientHeight,event};this.scroll.emit(customScrollEvent)}onItemsReady(subcription){(this._itemsReady||(0,of.of)(!0)).pipe((0,first.P)()).subscribe(subcription)}reorderSelected(moveFocus=!0){this.displayItems=[...this.getSelected(),...this.getListItems().filter((item=>!item.selected))],moveFocus&&setTimeout((()=>{this.updateIndex(),this.highlightedItem=this.getItemId(this.index)}))}};DropdownList.listCount=0,DropdownList.ctorParameters=()=>[{type:core.ElementRef},{type:i18n.oc},{type:core.ApplicationRef}],DropdownList.propDecorators={ariaLabel:[{type:core.Input}],items:[{type:core.Input}],listTpl:[{type:core.Input}],select:[{type:core.Output}],scroll:[{type:core.Output}],blurIntent:[{type:core.Output}],list:[{type:core.ViewChild,args:["list",{static:!0}]}],type:[{type:core.Input}],showTitles:[{type:core.Input}],listElementList:[{type:core.ViewChildren,args:["listItem"]}]},DropdownList=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-dropdown-list, ibm-dropdown-list",template:'\n\t\t<ul\n\t\t\t#list\n\t\t\t[id]="listId"\n\t\t\trole="listbox"\n\t\t\tclass="cds--list-box__menu cds--multi-select"\n\t\t\t(scroll)="emitScroll($event)"\n\t\t\t(keydown)="navigateList($event)"\n\t\t\ttabindex="-1"\n\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t[attr.aria-activedescendant]="highlightedItem">\n\t\t\t<li\n\t\t\t\trole="option"\n\t\t\t\t*ngFor="let item of displayItems; let i = index"\n\t\t\t\t(click)="doClick($event, item)"\n\t\t\t\tclass="cds--list-box__menu-item"\n\t\t\t\t[attr.aria-selected]="item.selected"\n\t\t\t\t[id]="getItemId(i)"\n\t\t\t\t[attr.title]=" showTitles ? item.content : null"\n\t\t\t\t[attr.disabled]="item.disabled ? true : null"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--list-box__menu-item--active\': item.selected,\n\t\t\t\t\t\'cds--list-box__menu-item--highlighted\': highlightedItem === getItemId(i)\n\t\t\t\t}">\n\t\t\t\t<div\n\t\t\t\t\t#listItem\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tclass="cds--list-box__menu-item__option">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf="!listTpl && type === \'multi\'"\n\t\t\t\t\t\tclass="cds--form-item cds--checkbox-wrapper">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t[attr.data-contained-checkbox-state]="item.selected"\n\t\t\t\t\t\t\tclass="cds--checkbox-label">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass="cds--checkbox"\n\t\t\t\t\t\t\t\ttype="checkbox"\n\t\t\t\t\t\t\t\t[checked]="item.selected"\n\t\t\t\t\t\t\t\t[disabled]="item.disabled"\n\t\t\t\t\t\t\t\ttabindex="-1">\n\t\t\t\t\t\t\t<span class="cds--checkbox-appearance"></span>\n\t\t\t\t\t\t\t<span class="cds--checkbox-label-text">{{item.content}}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-container *ngIf="!listTpl && type === \'single\'">{{item.content}}</ng-container>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf="!listTpl && type === \'single\'"\n\t\t\t\t\t\tcdsIcon="checkmark"\n\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\tclass="cds--list-box__menu-item__selected-icon">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf="listTpl"\n\t\t\t\t\t\t[ngTemplateOutletContext]="{item: item}"\n\t\t\t\t\t\t[ngTemplateOutlet]="listTpl">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t</ul>',providers:[{provide:AbstractDropdownView,useExisting:DropdownList}]})],DropdownList);let ScrollableList=class ScrollableList{constructor(elementRef){this.elementRef=elementRef,this.nScrollableList=null,this.scrollEnabled=!0,this.scrollBy=10,this.canScrollUp=!1,this.canScrollDown=!1,this.list=this.elementRef.nativeElement}ngOnChanges(changes){changes.scrollEnabled&&(changes.scrollEnabled.currentValue?(this.list.style.overflow="hidden",this.scrollUpTarget.style.display="flex",this.scrollDownTarget.style.display="flex",this.canScrollUp=!0,this.canScrollDown=!0,this.updateScrollHeight(),this.checkScrollArrows(),setTimeout((()=>{this.checkScrollArrows()}))):(this.scrollUpTarget.style.display="none",this.scrollDownTarget.style.display="none",this.canScrollUp=!1,this.canScrollDown=!1,this.list.style.height=null,this.list.style.overflow=null,clearInterval(this.hoverScrollInterval)))}ngAfterViewInit(){this.nScrollableList&&(this.list=this.elementRef.nativeElement.querySelector(this.nScrollableList)),this.scrollUpTarget.addEventListener("mouseover",(()=>this.onHoverUp(!0))),this.scrollUpTarget.addEventListener("mouseout",(()=>this.onHoverUp(!1))),this.scrollDownTarget.addEventListener("mouseover",(()=>this.onHoverDown(!0))),this.scrollDownTarget.addEventListener("mouseout",(()=>this.onHoverDown(!1)))}updateScrollHeight(){if(this.scrollEnabled){const containerRect=this.elementRef.nativeElement.parentElement.getBoundingClientRect(),innerHeightDiff=this.list.getBoundingClientRect().top-containerRect.top,height=containerRect.height-(containerRect.bottom-window.innerHeight)-innerHeightDiff-40;this.list.style.height=`${height}px`}}checkScrollArrows(){const scrollUpHeight=this.scrollUpTarget.offsetHeight,scrollDownHeight=this.scrollDownTarget.offsetHeight;0===this.list.scrollTop?(this.canScrollUp&&(this.list.style.height=`${parseInt(this.list.style.height,10)+scrollUpHeight}px`),this.scrollUpTarget.style.display="none",this.canScrollUp=!1):this.list.scrollTop===this.list.scrollTopMax?(this.canScrollDown&&(this.list.style.height=`${parseInt(this.list.style.height,10)+scrollDownHeight}px`),this.scrollDownTarget.style.display="none",this.canScrollDown=!1):(this.canScrollUp||(this.list.style.height=parseInt(this.list.style.height,10)-scrollUpHeight+"px"),this.canScrollDown||(this.list.style.height=parseInt(this.list.style.height,10)-scrollDownHeight+"px"),this.scrollUpTarget.style.display="flex",this.scrollDownTarget.style.display="flex",this.canScrollUp=!0,this.canScrollDown=!0)}onWheel(event){event.deltaY<0?this.list.scrollTop-=this.scrollBy:this.list.scrollTop+=this.scrollBy,this.list.scrollTop!==this.list.scrollTopMax&&0!==this.list.scrollTop&&(event.preventDefault(),event.stopPropagation()),this.checkScrollArrows()}onTouchStart(event){event.touches[0]&&(this.lastTouch=event.touches[0].clientY)}onTouchMove(event){if(event.preventDefault(),event.stopPropagation(),event.touches[0]){const touch=event.touches[0];this.list.scrollTop+=this.lastTouch-touch.clientY,this.lastTouch=touch.clientY,this.checkScrollArrows()}}hoverScrollBy(hovering,amount){hovering?this.hoverScrollInterval=setInterval((()=>{this.list.scrollTop+=amount,this.checkScrollArrows()}),1):clearInterval(this.hoverScrollInterval)}onHoverUp(hovering){this.hoverScrollBy(hovering,-3)}onHoverDown(hovering){this.hoverScrollBy(hovering,3)}onKeyDown(event){"ArrowDown"!==event.key&&"ArrowUp"!==event.key||this.checkScrollArrows()}};ScrollableList.ctorParameters=()=>[{type:core.ElementRef}],ScrollableList.propDecorators={nScrollableList:[{type:core.Input}],scrollEnabled:[{type:core.Input}],scrollUpTarget:[{type:core.Input}],scrollDownTarget:[{type:core.Input}],scrollBy:[{type:core.Input}],onWheel:[{type:core.HostListener,args:["wheel",["$event"]]}],onTouchStart:[{type:core.HostListener,args:["touchstart",["$event"]]}],onTouchMove:[{type:core.HostListener,args:["touchmove",["$event"]]}],onKeyDown:[{type:core.HostListener,args:["keydown",["$event"]]}]},ScrollableList=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsScrollableList], [ibmScrollableList]",exportAs:"scrollable-list"})],ScrollableList);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let DropdownModule=class DropdownModule{};DropdownModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Dropdown,DropdownList,ScrollableList,AbstractDropdownView],exports:[Dropdown,DropdownList,ScrollableList,AbstractDropdownView],imports:[common.CommonModule,fesm2020_forms.u5,i18n.LU,placeholder.Qq,utils.As,icon.QX],providers:[DropdownService]})],DropdownModule)}}]);
+"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3224],{"./src/dropdown/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{jq:()=>AbstractDropdownView,Lt:()=>Dropdown,kW:()=>DropdownModule,Vn:()=>DropdownService});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),Subscription=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subscription.js"),of=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/observable/of.js");let AbstractDropdownView=class AbstractDropdownView{constructor(){this.type="single",this.size="md"}set items(value){}get items(){}getNextItem(){}hasNextElement(){}getNextElement(){}getPrevItem(){}hasPrevElement(){}getPrevElement(){}getSelected(){}getCurrentItem(){}getCurrentElement(){}getListItems(){}propagateSelected(value){}filterBy(value){}initFocus(){}onItemsReady(subcription){}reorderSelected(moveFocus){}};AbstractDropdownView.propDecorators={items:[{type:core.Input}],select:[{type:core.Output}],blurIntent:[{type:core.Output}]},AbstractDropdownView=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsAbstractDropdownView], [ibmAbstractDropdownView]"})],AbstractDropdownView);var i18n=__webpack_require__("./src/i18n/index.ts"),placeholder=__webpack_require__("./src/placeholder/index.ts"),utils_position=__webpack_require__("./node_modules/@carbon/utils-position/index.js"),utils=__webpack_require__("./src/utils/index.ts");const defaultOffset={top:0,left:0};let DropdownService=class DropdownService{constructor(placeholderService,animationFrameService){this.placeholderService=placeholderService,this.animationFrameService=animationFrameService,this.animationFrameSubscription=new Subscription.w0,this._offset=defaultOffset}set offset(value){this._offset=Object.assign({},defaultOffset,value)}get offset(){return this._offset}appendToBody(parentRef,menuRef,classList){menuRef.style.display="block";const dropdownWrapper=document.createElement("div");return dropdownWrapper.className=`dropdown ${classList}`,dropdownWrapper.style.width=parentRef.offsetWidth+"px",dropdownWrapper.style.position="absolute",dropdownWrapper.appendChild(menuRef),this.placeholderService.hasPlaceholderRef()?this.placeholderService.appendElement(dropdownWrapper):document.body.appendChild(dropdownWrapper),this.menuInstance=dropdownWrapper,this.animationFrameSubscription=this.animationFrameService.tick.subscribe((()=>{this.positionDropdown(parentRef,dropdownWrapper)})),this.positionDropdown(parentRef,dropdownWrapper),dropdownWrapper}appendToDropdown(hostRef){if(!this.menuInstance)return;const instance=this.menuInstance,menu=instance.firstElementChild;return this.menuInstance=null,menu.style.display="none",hostRef.appendChild(menu),this.animationFrameSubscription.unsubscribe(),this.placeholderService.hasPlaceholderRef()&&this.placeholderService.hasElement(instance)?this.placeholderService.removeElement(instance):document.body.contains(instance)&&document.body.removeChild(instance),instance}updatePosition(parentRef){this.positionDropdown(parentRef,this.menuInstance)}ngOnDestroy(){this.animationFrameSubscription.unsubscribe()}positionDropdown(parentRef,menuRef){if(!menuRef)return;let leftOffset=0;const boxMenu=menuRef.querySelector(".cds--list-box__menu");if(boxMenu)if(parentRef.getBoundingClientRect().left!==boxMenu.getBoundingClientRect().left){parentRef.getBoundingClientRect().left-boxMenu.getBoundingClientRect().left+boxMenu.getBoundingClientRect().right>(window.innerWidth||document.documentElement.clientWidth)&&(leftOffset=parentRef.offsetWidth-boxMenu.offsetWidth)}else boxMenu.getBoundingClientRect().right>(window.innerWidth||document.documentElement.clientWidth)&&(leftOffset=parentRef.offsetWidth-boxMenu.offsetWidth);const closestMenuWithPos=(0,utils._K)("position",["relative","fixed","absolute"],menuRef.parentElement),topPos=closestMenuWithPos?-1*closestMenuWithPos.getBoundingClientRect().top:this.offset.top,leftPos=closestMenuWithPos?-1*closestMenuWithPos.getBoundingClientRect().left:this.offset.left+leftOffset;let pos=utils_position.FK.findAbsolute(parentRef,menuRef,"bottom");pos=utils_position.FK.addOffset(pos,topPos,leftPos),utils_position.FK.setElement(menuRef,pos)}};DropdownService.ctorParameters=()=>[{type:placeholder.Q_},{type:utils.NV}],DropdownService=(0,tslib_es6.gn)([(0,core.Injectable)()],DropdownService);let Dropdown=class Dropdown{constructor(elementRef,i18n,dropdownService,elementService){this.elementRef=elementRef,this.i18n=i18n,this.dropdownService=dropdownService,this.elementService=elementService,this.id="dropdown-"+Dropdown.dropdownCount++,this.placeholder="",this.displayValue="",this.clearText=this.i18n.get().DROPDOWN.CLEAR,this.size="md",this.type="single",this.theme="dark",this.disabled=!1,this.skeleton=!1,this.inline=!1,this.disableArrowKeys=!1,this.invalid=!1,this.warn=!1,this.appendInline=null,this.selectionFeedback="top-after-reopen",this.menuButtonLabel=this.i18n.get().DROPDOWN.OPEN,this.selectedLabel=this.i18n.get().DROPDOWN.SELECTED,this.selected=new core.EventEmitter,this.onClose=new core.EventEmitter,this.close=new core.EventEmitter,this.hostClass=!0,this.menuIsClosed=!0,this._dropUp=!1,this.noop=this._noop.bind(this),this.outsideClick=this._outsideClick.bind(this),this.outsideKey=this._outsideKey.bind(this),this.keyboardNav=this._keyboardNav.bind(this),this.visibilitySubscription=new Subscription.w0,this.onTouchedCallback=this._noop,this._writtenValue=[],this.propagateChange=_=>{}}get writtenValue(){return this._writtenValue}set writtenValue(val){val&&0===val.length&&this.clearSelected(),this._writtenValue=val}ngOnInit(){this.view&&(this.view.type=this.type)}ngAfterContentInit(){if(!this.view)return;(this.writtenValue&&this.writtenValue.length||"number"==typeof this.writtenValue)&&this.writeValue(this.writtenValue),this.view.type=this.type,this.view.size=this.size;const isUpdate=event=>event&&event.isUpdate;this.view.select.subscribe((event=>{if("single"!==this.type||isUpdate(event)||Array.isArray(event)||(this.closeMenu(),event.item&&event.item.selected?this.itemValueKey?this.propagateChange(event.item[this.itemValueKey]):this.propagateChange(event.item):this.propagateChange(null)),"multi"===this.type&&!isUpdate(event))if(this.itemValueKey&&this.view.getSelected()){const values=this.view.getSelected().map((item=>item[this.itemValueKey]));this.propagateChange(values)}else this.propagateChange(this.view.getSelected());isUpdate(event)||(this.checkForReorder(),this.selected.emit(event))}))}ngAfterViewInit(){null===this.appendInline&&(0,utils.OQ)(this.elementRef.nativeElement)?this.appendInline=!1:null===this.appendInline&&(this.appendInline=!0),this.checkForReorder()}ngOnDestroy(){this.appendInline||this._appendToDropdown()}writeValue(value){this.writtenValue=value,this.view.onItemsReady((()=>{if(value)if("single"===this.type)if(this.itemValueKey){const newValue=Object.assign({},this.view.getListItems().find((item=>item[this.itemValueKey]===value)));newValue.selected=!0,this.view.propagateSelected([newValue])}else this.view.propagateSelected([value]);else if(this.itemValueKey){let newValues=[];for(const v of value)for(const item of this.view.getListItems())item[this.itemValueKey]===v&&newValues.push(Object.assign({},item,{selected:!0}));this.view.propagateSelected(newValues)}else this.view.propagateSelected(value);else this.view.propagateSelected([value]);this.checkForReorder()}))}onBlur(){this.onTouchedCallback()}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouchedCallback=fn}setDisabledState(isDisabled){this.disabled=isDisabled}onKeyDown(event){if("Escape"!==event.key||this.menuIsClosed||event.stopImmediatePropagation(),"Escape"===event.key)event.preventDefault(),this.closeMenu(),this.dropdownButton.nativeElement.focus();else if(this.menuIsClosed&&(" "===event.key||"ArrowDown"===event.key||"ArrowUp"===event.key)){if(this.disableArrowKeys&&("ArrowDown"===event.key||"ArrowUp"===event.key))return;event.preventDefault(),this.openMenu()}!this.menuIsClosed&&"Tab"===event.key&&this.dropdownMenu.nativeElement.contains(event.target)&&this.closeMenu(),!this.menuIsClosed&&"Tab"===event.key&&event.shiftKey&&this.closeMenu(),"multi"!==this.type&&this.menuIsClosed&&this.closedDropdownNavigation(event)}closedDropdownNavigation(event){if("ArrowDown"===event.key){event.preventDefault(),this.view.getCurrentItem().selected=!1;let item=this.view.getNextItem();item&&(item.selected=!0)}else if("ArrowUp"===event.key){event.preventDefault(),this.view.getCurrentItem().selected=!1;let item=this.view.getPrevItem();item&&(item.selected=!0)}}getDisplayStringValue(){if(!this.view)return;let selected=this.view.getSelected();return!selected.length||this.displayValue&&this.isRenderString()?selected.length&&this.isRenderString()?(0,of.of)(this.displayValue):(0,of.of)(this.placeholder):"multi"===this.type?(0,of.of)(this.placeholder):(0,of.of)(selected[0].content)}isRenderString(){return"string"==typeof this.displayValue}getRenderTemplateContext(){if(!this.view)return;let selected=this.view.getSelected();return"multi"===this.type?{items:selected}:selected&&selected.length>0?{item:selected[0]}:{}}getSelectedCount(){if(this.view.getSelected())return this.view.getSelected().length}clearSelected(){if(!this.disabled&&0!==this.getSelectedCount()){for(const item of this.view.getListItems())item.selected=!1;this.selected.emit([]),this.propagateChange([])}}valueSelected(){return!!this.view.getSelected()}_noop(){}_outsideClick(event){this.elementRef.nativeElement.contains(event.target)||this.dropdownMenu.nativeElement.contains(event.target)||this.closeMenu()}_outsideKey(event){!this.menuIsClosed&&"Tab"===event.key&&this.dropdownMenu.nativeElement.contains(event.target)&&this.closeMenu()}_keyboardNav(event){"Escape"!==event.key||this.menuIsClosed||event.stopImmediatePropagation(),"Escape"===event.key?(event.preventDefault(),this.closeMenu(),this.dropdownButton.nativeElement.focus()):this.menuIsClosed||"Tab"!==event.key||(this.dropdownButton.nativeElement.focus(),this.dropdownButton.nativeElement.dispatchEvent(new KeyboardEvent("keydown",{bubbles:!0,cancelable:!0,key:"Tab"})),this.closeMenu())}_appendToDropdown(){this.dropdownService.appendToDropdown(this.elementRef.nativeElement),this.dropdownMenu.nativeElement.removeEventListener("keydown",this.keyboardNav,!0)}_appendToBody(){const lightClass="light"===this.theme?" cds--list-box--light":"",expandedClass=this.menuIsClosed?"":" cds--list-box--expanded";this.dropdownService.appendToBody(this.dropdownButton.nativeElement,this.dropdownMenu.nativeElement,`${this.elementRef.nativeElement.className}${lightClass}${expandedClass}`),this.dropdownMenu.nativeElement.addEventListener("keydown",this.keyboardNav,!0)}_shouldDropUp(){const menu=this.dropdownMenu&&this.dropdownMenu.nativeElement.querySelector(".cds--list-box__menu"),menuRect=menu&&menu.getBoundingClientRect();if(menu&&menuRect){return(0,utils.O3)(menu).reduce(((shouldDropUp,parent)=>{const parentRect=parent.getBoundingClientRect(),isBelowParent=!(menuRect.bottom<=parentRect.bottom);return shouldDropUp||isBelowParent}),!1)}return!1}openMenu(){if(0!==this.view.getListItems().length){if(this._dropUp=!1,this.menuIsClosed=!1,!this.appendInline){const target=this.dropdownButton.nativeElement,parent=this.elementRef.nativeElement;this.visibilitySubscription=this.elementService.visibility(target,parent).subscribe((value=>{value.visible||this.closeMenu()})),this._appendToBody()}setTimeout((()=>{null!==this.dropUp&&void 0!==this.dropUp||(this._dropUp=this._shouldDropUp())}),0),document.body.firstElementChild.addEventListener("click",this.noop,!0),document.body.firstElementChild.addEventListener("keydown",this.noop,!0),document.addEventListener("click",this.outsideClick,!0),document.addEventListener("keydown",this.outsideKey,!0),setTimeout((()=>this.view.initFocus()),0)}}closeMenu(){this.menuIsClosed||(this.menuIsClosed=!0,this.checkForReorder(),this.onClose.emit(),this.close.emit(),this.dropdownButton.nativeElement.focus(),this.view.disableScroll&&this.view.disableScroll(),this.appendInline||(this.visibilitySubscription.unsubscribe(),this._appendToDropdown()),document.body.firstElementChild.removeEventListener("click",this.noop,!0),document.body.firstElementChild.removeEventListener("keydown",this.noop,!0),document.removeEventListener("click",this.outsideClick,!0),document.removeEventListener("keydown",this.outsideKey,!0))}toggleMenu(){this.menuIsClosed?this.openMenu():this.closeMenu()}isTemplate(value){return value instanceof core.TemplateRef}checkForReorder(){const topAfterReopen=this.menuIsClosed&&"top-after-reopen"===this.selectionFeedback;"multi"!==this.type||!topAfterReopen&&"top"!==this.selectionFeedback||this.view.reorderSelected()}};Dropdown.dropdownCount=0,Dropdown.ctorParameters=()=>[{type:core.ElementRef},{type:i18n.oc},{type:DropdownService},{type:utils.d2}],Dropdown.propDecorators={id:[{type:core.Input}],label:[{type:core.Input}],helperText:[{type:core.Input}],placeholder:[{type:core.Input}],displayValue:[{type:core.Input}],clearText:[{type:core.Input}],size:[{type:core.Input}],type:[{type:core.Input}],theme:[{type:core.Input}],disabled:[{type:core.Input}],skeleton:[{type:core.Input}],inline:[{type:core.Input}],disableArrowKeys:[{type:core.Input}],invalid:[{type:core.Input}],invalidText:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],appendInline:[{type:core.Input}],scrollableContainer:[{type:core.Input}],itemValueKey:[{type:core.Input}],selectionFeedback:[{type:core.Input}],menuButtonLabel:[{type:core.Input}],selectedLabel:[{type:core.Input}],dropUp:[{type:core.Input}],selected:[{type:core.Output}],onClose:[{type:core.Output}],close:[{type:core.Output}],view:[{type:core.ContentChild,args:[AbstractDropdownView,{static:!0}]}],dropdownButton:[{type:core.ViewChild,args:["dropdownButton",{static:!0}]}],dropdownMenu:[{type:core.ViewChild,args:["dropdownMenu",{static:!0}]}],hostClass:[{type:core.HostBinding,args:["class.cds--dropdown__wrapper"]}],onKeyDown:[{type:core.HostListener,args:["keydown",["$event"]]}]},Dropdown=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-dropdown, ibm-dropdown",template:'\n\t<label\n\t\t*ngIf="label"\n\t\t[for]="id"\n\t\tclass="cds--label"\n\t\t[ngClass]="{\'cds--label--disabled\': disabled}">\n\t\t<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>\n\t\t<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>\n\t</label>\n\t<div\n\t\tclass="cds--list-box"\n\t\t[ngClass]="{\n\t\t\t\'cds--dropdown\': type !== \'multi\',\n\t\t\t\'cds--multiselect\': type === \'multi\',\n\t\t\t\'cds--multi-select--selected\': type === \'multi\' && getSelectedCount() > 0,\n\t\t\t\'cds--dropdown--light\': theme === \'light\',\n\t\t\t\'cds--list-box--light\': theme === \'light\',\n\t\t\t\'cds--list-box--inline\': inline,\n\t\t\t\'cds--skeleton\': skeleton,\n\t\t\t\'cds--dropdown--disabled cds--list-box--disabled\': disabled,\n\t\t\t\'cds--dropdown--invalid\': invalid,\n\t\t\t\'cds--dropdown--warning cds--list-box--warning\': warn,\n\t\t\t\'cds--dropdown--sm cds--list-box--sm\': size === \'sm\',\n\t\t\t\'cds--dropdown--md cds--list-box--md\': size === \'md\',\n\t\t\t\'cds--dropdown--lg cds--list-box--lg\': size === \'lg\',\n\t\t\t\'cds--list-box--expanded\': !menuIsClosed\n\t\t}">\n\t\t<button\n\t\t\t#dropdownButton\n\t\t\t[id]="id"\n\t\t\ttype="button"\n\t\t\tclass="cds--list-box__field"\n\t\t\t[ngClass]="{\'a\': !menuIsClosed}"\n\t\t\t[attr.aria-expanded]="!menuIsClosed"\n\t\t\t[attr.aria-disabled]="disabled"\n\t\t\taria-haspopup="listbox"\n\t\t\t(click)="disabled ? $event.stopPropagation() : toggleMenu()"\n\t\t\t(blur)="onBlur()"\n\t\t\t[attr.disabled]="disabled ? true : null">\n\t\t\t<div\n\t\t\t\t(click)="clearSelected()"\n\t\t\t\t(keydown.enter)="clearSelected()"\n\t\t\t\t*ngIf="type === \'multi\' && getSelectedCount() > 0"\n\t\t\t\tclass="cds--list-box__selection cds--tag--filter cds--list-box__selection--multi"\n\t\t\t\ttabindex="0"\n\t\t\t\t[title]="clearText">\n\t\t\t\t{{getSelectedCount()}}\n\t\t\t\t<svg\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\trole="img"\n\t\t\t\t\txmlns="http://www.w3.org/2000/svg"\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 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<span *ngIf="isRenderString()" class="cds--list-box__label">{{getDisplayStringValue() | async}}</span>\n\t\t\t<ng-template\n\t\t\t\t*ngIf="!isRenderString()"\n\t\t\t\t[ngTemplateOutletContext]="getRenderTemplateContext()"\n\t\t\t\t[ngTemplateOutlet]="displayValue">\n\t\t\t</ng-template>\n\t\t\t<svg\n\t\t\t\t*ngIf="!warn && invalid"\n\t\t\t\tclass="cds--dropdown__invalid-icon"\n\t\t\t\tcdsIcon="warning--filled"\n\t\t\t\tsize="16">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf="!invalid && warn"\n\t\t\t\tcdsIcon="warning--alt--filled"\n\t\t\t\tsize="16"\n\t\t\t\tclass="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning">\n\t\t\t</svg>\n\t\t\t<span class="cds--list-box__menu-icon">\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf="!skeleton"\n\t\t\t\t\tcdsIcon="chevron--down"\n\t\t\t\t\tsize="16"\n\t\t\t\t\t[attr.aria-label]="menuButtonLabel"\n\t\t\t\t\t[ngClass]="{\'cds--list-box__menu-icon--open\': !menuIsClosed }">\n\t\t\t\t</svg>\n\t\t\t</span>\n\t\t</button>\n\t\t<div\n\t\t\t#dropdownMenu\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--list-box--up\': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t}">\n\t\t\t<ng-content *ngIf="!menuIsClosed"></ng-content>\n\t\t</div>\n\t</div>\n\t<div\n\t\t*ngIf="helperText && !invalid && !warn"\n\t\tclass="cds--form__helper-text"\n\t\t[ngClass]="{\n\t\t\t\'cds--form__helper-text--disabled\': disabled\n\t\t}">\n\t\t<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>\n\t</div>\n\t<div *ngIf="!warn && invalid" class="cds--form-requirement">\n\t\t<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>\n\t\t<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>\n\t</div>\n\t<div *ngIf="!invalid && warn" class="cds--form-requirement">\n\t\t<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>\n\t</div>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:Dropdown,multi:!0}]})],Dropdown);var isObservable=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/util/isObservable.js"),Observable=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Observable.js"),first=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/first.js"),fromEvent=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/observable/fromEvent.js"),debounceTime=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/debounceTime.js"),map=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/map.js"),filter=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/filter.js");let DropdownList=class DropdownList{constructor(elementRef,i18n,appRef){this.elementRef=elementRef,this.i18n=i18n,this.appRef=appRef,this.ariaLabel=this.i18n.get().DROPDOWN_LIST.LABEL,this.listTpl=null,this.select=new core.EventEmitter,this.scroll=new core.EventEmitter,this.blurIntent=new core.EventEmitter,this.type="single",this.showTitles=!0,this.size="md",this.listId="listbox-"+DropdownList.listCount++,this.highlightedItem=null,this.displayItems=[],this.index=-1,this._items=[]}set items(value){(0,isObservable.b)(value)?(this._itemsSubscription&&this._itemsSubscription.unsubscribe(),this._itemsReady=new Observable.y((observer=>{this._itemsSubscription=value.subscribe((v=>{this.updateList(v),observer.next(!0),observer.complete()}))})),this.onItemsReady(null)):this.updateList(value),this._originalItems=value}get items(){return this._originalItems}ngAfterViewInit(){this.index=this.getListItems().findIndex((item=>item.selected)),this.setupFocusObservable(),setTimeout((()=>{this.doEmitSelect(!0)}))}ngOnDestroy(){this.focusJump&&this.focusJump.unsubscribe(),this._itemsSubscription&&this._itemsSubscription.unsubscribe()}doEmitSelect(isUpdate=!0){if("single"===this.type)this.select.emit({item:this._items.find((item=>item.selected)),isUpdate});else{const selected=this.getSelected()||[];selected.isUpdate=isUpdate,this.select.emit(selected)}}getItemId(index){return`${this.listId}-${index}`}updateList(items){this._items=items.map((item=>Object.assign({},item))),this.displayItems=this._items,this.updateIndex(),this.setupFocusObservable(),this.doEmitSelect()}filterBy(query=""){query?(this.displayItems=this.getListItems().filter((item=>item.content.toLowerCase().includes(query.toLowerCase()))),this.displayItems&&(this.index=0)):this.displayItems=this.getListItems(),this.updateIndex()}setupFocusObservable(){if(!this.list)return;this.focusJump&&this.focusJump.unsubscribe();let elList=Array.from(this.list.nativeElement.querySelectorAll("li"));this.focusJump=function watchFocusJump(target,elements){return(0,fromEvent.R)(target,"keydown").pipe((0,debounceTime.b)(150),(0,map.U)((ev=>{let el=elements.find((itemEl=>itemEl.textContent.trim().toLowerCase().startsWith(ev.key)));if(el)return el})),(0,filter.h)((el=>!!el)))}(this.list.nativeElement,elList).subscribe((el=>{el.focus()}))}getNextItem(){return this.index<this.displayItems.length-1&&this.index++,this.displayItems[this.index]}hasNextElement(){return this.index<this.displayItems.length-1&&(!(this.index===this.displayItems.length-2)||!this.displayItems[this.index+1].disabled)}getNextElement(){const elemList=this.listElementList?this.listElementList.toArray():[];if(!elemList.length)return null;for(let i=this.index+1;i<elemList.length;i++)if(!this.displayItems[i].disabled)return this.index=i,elemList[i].nativeElement;return elemList[this.index].nativeElement}getPrevItem(){return this.index>0&&this.index--,this.displayItems[this.index]}hasPrevElement(){return this.index>0&&(!(1===this.index)||!this.displayItems[0].disabled)}getPrevElement(){const elemList=this.listElementList?this.listElementList.toArray():[];if(!elemList.length)return null;for(let i=this.index-1;i<this.index&&i>=0;i--)if(!this.displayItems[i].disabled)return this.index=i,elemList[i].nativeElement;return elemList[this.index].nativeElement}getCurrentItem(){return this.index<0?this.displayItems[0]:this.displayItems[this.index]}getCurrentElement(){return this.index<0?this.listElementList.first.nativeElement:this.listElementList.toArray()[this.index].nativeElement}getListItems(){return this._items}getSelected(){let selected=this.getListItems().filter((item=>item.selected));return 0===selected.length?[]:selected}propagateSelected(value){Array.isArray(value)||console.error(`${this.constructor.name}.propagateSelected expects an Array<ListItem>, got ${JSON.stringify(value)}`),this.onItemsReady((()=>{for(let oldItem of this.getListItems()){let tempOldItem=Object.assign({},oldItem);delete tempOldItem.selected,tempOldItem=JSON.stringify(tempOldItem);for(let newItem of value){let tempNewItem=Object.assign({},newItem);if(delete tempNewItem.selected,tempNewItem=JSON.stringify(tempNewItem),tempOldItem.includes(tempNewItem)){oldItem.selected=newItem.selected;break}oldItem.selected=!1}}}))}initFocus(){this.index<0&&this.updateIndex(),this.list.nativeElement.focus(),setTimeout((()=>{this.highlightedItem=this.getItemId(this.index)}))}updateIndex(){const selected=this.getSelected();selected.length?this.index=this.displayItems.indexOf(selected[0]):this.hasNextElement()&&this.getNextElement()}navigateList(event){"Enter"===event.key||" "===event.key?(this.listElementList.some((option=>option.nativeElement===event.target))&&event.preventDefault(),"Enter"===event.key&&this.doClick(event,this.getCurrentItem())):"ArrowDown"!==event.key&&"ArrowUp"!==event.key||(event.preventDefault(),"ArrowDown"===event.key?this.hasNextElement()?this.getNextElement().scrollIntoView({block:"end"}):this.blurIntent.emit("bottom"):"ArrowUp"===event.key&&(this.hasPrevElement()?this.getPrevElement().scrollIntoView():this.blurIntent.emit("top")),setTimeout((()=>{this.highlightedItem=this.getItemId(this.index)})))}doClick(event,item){if(event.preventDefault(),item&&!item.disabled){if(this.list.nativeElement.focus(),"single"===this.type){item.selected=!0;for(let otherItem of this.getListItems())item!==otherItem&&(otherItem.selected=!1)}else item.selected=!item.selected;this.index=this.displayItems.indexOf(item),this.highlightedItem=this.getItemId(this.index),this.doEmitSelect(!1),this.appRef.tick()}}onItemFocus(index){const element=this.listElementList.toArray()[index].nativeElement;element.classList.add("cds--list-box__menu-item--highlighted"),element.tabIndex=0}onItemBlur(index){const element=this.listElementList.toArray()[index].nativeElement;element.classList.remove("cds--list-box__menu-item--highlighted"),element.tabIndex=-1}emitScroll(event){const customScrollEvent={atTop:0===event.srcElement.scrollTop,atBottom:event.srcElement.scrollHeight-event.srcElement.scrollTop===event.srcElement.clientHeight,event};this.scroll.emit(customScrollEvent)}onItemsReady(subcription){(this._itemsReady||(0,of.of)(!0)).pipe((0,first.P)()).subscribe(subcription)}reorderSelected(moveFocus=!0){this.displayItems=[...this.getSelected(),...this.getListItems().filter((item=>!item.selected))],moveFocus&&setTimeout((()=>{this.updateIndex(),this.highlightedItem=this.getItemId(this.index)}))}};DropdownList.listCount=0,DropdownList.ctorParameters=()=>[{type:core.ElementRef},{type:i18n.oc},{type:core.ApplicationRef}],DropdownList.propDecorators={ariaLabel:[{type:core.Input}],items:[{type:core.Input}],listTpl:[{type:core.Input}],select:[{type:core.Output}],scroll:[{type:core.Output}],blurIntent:[{type:core.Output}],list:[{type:core.ViewChild,args:["list",{static:!0}]}],type:[{type:core.Input}],showTitles:[{type:core.Input}],listElementList:[{type:core.ViewChildren,args:["listItem"]}]},DropdownList=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-dropdown-list, ibm-dropdown-list",template:'\n\t\t<ul\n\t\t\t#list\n\t\t\t[id]="listId"\n\t\t\trole="listbox"\n\t\t\tclass="cds--list-box__menu cds--multi-select"\n\t\t\t(scroll)="emitScroll($event)"\n\t\t\t(keydown)="navigateList($event)"\n\t\t\ttabindex="-1"\n\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t[attr.aria-activedescendant]="highlightedItem">\n\t\t\t<li\n\t\t\t\trole="option"\n\t\t\t\t*ngFor="let item of displayItems; let i = index"\n\t\t\t\t(click)="doClick($event, item)"\n\t\t\t\tclass="cds--list-box__menu-item"\n\t\t\t\t[attr.aria-selected]="item.selected"\n\t\t\t\t[id]="getItemId(i)"\n\t\t\t\t[attr.title]=" showTitles ? item.content : null"\n\t\t\t\t[attr.disabled]="item.disabled ? true : null"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--list-box__menu-item--active\': item.selected,\n\t\t\t\t\t\'cds--list-box__menu-item--highlighted\': highlightedItem === getItemId(i)\n\t\t\t\t}">\n\t\t\t\t<div\n\t\t\t\t\t#listItem\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tclass="cds--list-box__menu-item__option">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf="!listTpl && type === \'multi\'"\n\t\t\t\t\t\tclass="cds--form-item cds--checkbox-wrapper">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t[attr.data-contained-checkbox-state]="item.selected"\n\t\t\t\t\t\t\tclass="cds--checkbox-label">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass="cds--checkbox"\n\t\t\t\t\t\t\t\ttype="checkbox"\n\t\t\t\t\t\t\t\t[checked]="item.selected"\n\t\t\t\t\t\t\t\t[disabled]="item.disabled"\n\t\t\t\t\t\t\t\ttabindex="-1">\n\t\t\t\t\t\t\t<span class="cds--checkbox-appearance"></span>\n\t\t\t\t\t\t\t<span class="cds--checkbox-label-text">{{item.content}}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-container *ngIf="!listTpl && type === \'single\'">{{item.content}}</ng-container>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf="!listTpl && type === \'single\'"\n\t\t\t\t\t\tcdsIcon="checkmark"\n\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\tclass="cds--list-box__menu-item__selected-icon">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf="listTpl"\n\t\t\t\t\t\t[ngTemplateOutletContext]="{item: item}"\n\t\t\t\t\t\t[ngTemplateOutlet]="listTpl">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t</ul>',providers:[{provide:AbstractDropdownView,useExisting:DropdownList}]})],DropdownList);let ScrollableList=class ScrollableList{constructor(elementRef){this.elementRef=elementRef,this.nScrollableList=null,this.scrollEnabled=!0,this.scrollBy=10,this.canScrollUp=!1,this.canScrollDown=!1,this.list=this.elementRef.nativeElement}ngOnChanges(changes){changes.scrollEnabled&&(changes.scrollEnabled.currentValue?(this.list.style.overflow="hidden",this.scrollUpTarget.style.display="flex",this.scrollDownTarget.style.display="flex",this.canScrollUp=!0,this.canScrollDown=!0,this.updateScrollHeight(),this.checkScrollArrows(),setTimeout((()=>{this.checkScrollArrows()}))):(this.scrollUpTarget.style.display="none",this.scrollDownTarget.style.display="none",this.canScrollUp=!1,this.canScrollDown=!1,this.list.style.height=null,this.list.style.overflow=null,clearInterval(this.hoverScrollInterval)))}ngAfterViewInit(){this.nScrollableList&&(this.list=this.elementRef.nativeElement.querySelector(this.nScrollableList)),this.scrollUpTarget.addEventListener("mouseover",(()=>this.onHoverUp(!0))),this.scrollUpTarget.addEventListener("mouseout",(()=>this.onHoverUp(!1))),this.scrollDownTarget.addEventListener("mouseover",(()=>this.onHoverDown(!0))),this.scrollDownTarget.addEventListener("mouseout",(()=>this.onHoverDown(!1)))}updateScrollHeight(){if(this.scrollEnabled){const containerRect=this.elementRef.nativeElement.parentElement.getBoundingClientRect(),innerHeightDiff=this.list.getBoundingClientRect().top-containerRect.top,height=containerRect.height-(containerRect.bottom-window.innerHeight)-innerHeightDiff-40;this.list.style.height=`${height}px`}}checkScrollArrows(){const scrollUpHeight=this.scrollUpTarget.offsetHeight,scrollDownHeight=this.scrollDownTarget.offsetHeight;0===this.list.scrollTop?(this.canScrollUp&&(this.list.style.height=`${parseInt(this.list.style.height,10)+scrollUpHeight}px`),this.scrollUpTarget.style.display="none",this.canScrollUp=!1):this.list.scrollTop===this.list.scrollTopMax?(this.canScrollDown&&(this.list.style.height=`${parseInt(this.list.style.height,10)+scrollDownHeight}px`),this.scrollDownTarget.style.display="none",this.canScrollDown=!1):(this.canScrollUp||(this.list.style.height=parseInt(this.list.style.height,10)-scrollUpHeight+"px"),this.canScrollDown||(this.list.style.height=parseInt(this.list.style.height,10)-scrollDownHeight+"px"),this.scrollUpTarget.style.display="flex",this.scrollDownTarget.style.display="flex",this.canScrollUp=!0,this.canScrollDown=!0)}onWheel(event){event.deltaY<0?this.list.scrollTop-=this.scrollBy:this.list.scrollTop+=this.scrollBy,this.list.scrollTop!==this.list.scrollTopMax&&0!==this.list.scrollTop&&(event.preventDefault(),event.stopPropagation()),this.checkScrollArrows()}onTouchStart(event){event.touches[0]&&(this.lastTouch=event.touches[0].clientY)}onTouchMove(event){if(event.preventDefault(),event.stopPropagation(),event.touches[0]){const touch=event.touches[0];this.list.scrollTop+=this.lastTouch-touch.clientY,this.lastTouch=touch.clientY,this.checkScrollArrows()}}hoverScrollBy(hovering,amount){hovering?this.hoverScrollInterval=setInterval((()=>{this.list.scrollTop+=amount,this.checkScrollArrows()}),1):clearInterval(this.hoverScrollInterval)}onHoverUp(hovering){this.hoverScrollBy(hovering,-3)}onHoverDown(hovering){this.hoverScrollBy(hovering,3)}onKeyDown(event){"ArrowDown"!==event.key&&"ArrowUp"!==event.key||this.checkScrollArrows()}};ScrollableList.ctorParameters=()=>[{type:core.ElementRef}],ScrollableList.propDecorators={nScrollableList:[{type:core.Input}],scrollEnabled:[{type:core.Input}],scrollUpTarget:[{type:core.Input}],scrollDownTarget:[{type:core.Input}],scrollBy:[{type:core.Input}],onWheel:[{type:core.HostListener,args:["wheel",["$event"]]}],onTouchStart:[{type:core.HostListener,args:["touchstart",["$event"]]}],onTouchMove:[{type:core.HostListener,args:["touchmove",["$event"]]}],onKeyDown:[{type:core.HostListener,args:["keydown",["$event"]]}]},ScrollableList=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsScrollableList], [ibmScrollableList]",exportAs:"scrollable-list"})],ScrollableList);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let DropdownModule=class DropdownModule{};DropdownModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Dropdown,DropdownList,ScrollableList,AbstractDropdownView],exports:[Dropdown,DropdownList,ScrollableList,AbstractDropdownView],imports:[common.CommonModule,fesm2020_forms.u5,i18n.LU,placeholder.Qq,utils.As,icon.QX],providers:[DropdownService]})],DropdownModule)}}]);

package/docs/storybook/{3348.91a6fc53.iframe.bundle.js → 3348.683a45b7.iframe.bundle.js}

@@ -1 +1 @@
-"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3348],{"./src/ui-shell/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{p5:()=>UIShellModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),src_button=__webpack_require__("./src/button/index.ts"),i18n=__webpack_require__("./src/i18n/index.ts"),icon=__webpack_require__("./src/icon/index.ts"),platform_browser=__webpack_require__("./node_modules/@angular/platform-browser/fesm2020/platform-browser.mjs"),router=__webpack_require__("./node_modules/@angular/router/fesm2020/router.mjs");let Header=class Header{constructor(i18n,domSanitizer,router){this.i18n=i18n,this.domSanitizer=domSanitizer,this.router=router,this.brand="IBM",this.useRouter=!1,this.navigation=new core.EventEmitter,this._href="#"}set href(v){this._href=v}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}isTemplate(value){return value instanceof core.TemplateRef}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}else"#"===this._href&&event.preventDefault()}};Header.ctorParameters=()=>[{type:i18n.oc},{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],Header.propDecorators={skipTo:[{type:core.Input}],name:[{type:core.Input}],brand:[{type:core.Input}],href:[{type:core.Input}],route:[{type:core.Input}],routeExtras:[{type:core.Input}],useRouter:[{type:core.Input}],navigation:[{type:core.Output}]},Header=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header, ibm-header",template:'\n\t\t<header\n\t\t\tclass="cds--header"\n\t\t\t[attr.aria-label]="brand + \' \' + name">\n\t\t\t<a\n\t\t\t\t*ngIf="skipTo"\n\t\t\t\tclass="cds--skip-to-content"\n\t\t\t\t[href]="skipTo"\n\t\t\t\ttabindex="0">\n\t\t\t\t{{ i18n.get("UI_SHELL.SKIP_TO") | async }}\n\t\t\t</a>\n\t\t\t<ng-content select="cds-hamburger"></ng-content>\n\t\t\t<ng-template\n\t\t\t\t*ngIf="isTemplate(brand)"\n\t\t\t\t[ngTemplateOutlet]="brand">\n\t\t\t</ng-template>\n\t\t\t<ng-container *ngIf="!isTemplate(brand)" [ngSwitch]="useRouter">\n\t\t\t\t<a\n\t\t\t\t\t*ngSwitchCase="false"\n\t\t\t\t\tclass="cds--header__name"\n\t\t\t\t\t[href]="href"\n\t\t\t\t\t(click)="navigate($event)">\n\t\t\t\t\t<span class="cds--header__name--prefix">{{brand}}&nbsp;</span>\n\t\t\t\t\t{{name}}\n\t\t\t\t</a>\n\t\t\t\t<a\n\t\t\t\t\t*ngSwitchCase="true"\n\t\t\t\t\tclass="cds--header__name"\n\t\t\t\t\t[routerLink]="route">\n\t\t\t\t\t<span class="cds--header__name--prefix">{{brand}}&nbsp;</span>\n\t\t\t\t\t{{name}}\n\t\t\t\t</a>\n\t\t\t</ng-container>\n\t\t\t<ng-content></ng-content>\n\t\t</header>\n\t'})],Header);let HeaderItem=class HeaderItem{constructor(domSanitizer,router){this.domSanitizer=domSanitizer,this.router=router,this.role="listitem",this.useRouter=!1,this.navigation=new core.EventEmitter,this._href="#"}set href(v){void 0!==v&&(this._href=v)}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}else"#"===this._href&&event.preventDefault()}};HeaderItem.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],HeaderItem.propDecorators={role:[{type:core.HostBinding,args:["attr.role"]}],href:[{type:core.Input}],useRouter:[{type:core.Input}],activeLinkClass:[{type:core.Input}],isCurrentPage:[{type:core.Input}],route:[{type:core.Input}],routeExtras:[{type:core.Input}],navigation:[{type:core.Output}]},HeaderItem=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-item, ibm-header-item",template:'\n\t\t<ng-container [ngSwitch]="useRouter">\n\t\t\t<ng-template #content><ng-content></ng-content></ng-template>\n\t\t\t<a\n\t\t\t\t*ngSwitchCase="false"\n\t\t\t\tclass="cds--header__menu-item"\n\t\t\t\ttabindex="0"\n\t\t\t\t[ngClass]="{\'cds--header__menu-item--current\' : isCurrentPage}"\n\t\t\t\t[href]="href"\n\t\t\t\t(click)="navigate($event)">\n\t\t\t\t<ng-container *ngTemplateOutlet="content"></ng-container>\n\t\t\t</a>\n\t\t\t<a\n\t\t\t\t*ngSwitchCase="true"\n\t\t\t\tclass="cds--header__menu-item"\n\t\t\t\t[routerLinkActive]="[\'cds--header__menu-item--current\']"\n\t\t\t\ttabindex="0"\n\t\t\t\t[ngClass]="{\'cds--header__menu-item--current\' : isCurrentPage}"\n\t\t\t\t[routerLink]="route"\n\t\t\t\t[routerLinkActive]="activeLinkClass">\n\t\t\t\t<ng-container *ngTemplateOutlet="content"></ng-container>\n\t\t\t</a>\n\t\t</ng-container>\n\t',styles:["\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t"]})],HeaderItem);let HeaderMenu=class HeaderMenu{constructor(domSanitizer,elementRef){this.domSanitizer=domSanitizer,this.elementRef=elementRef,this.subMenu=!0,this.role="listitem",this.trigger="click",this.expanded=!1,this._href="#"}set href(v){void 0!==v&&(this._href=v)}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}onClick(){"click"===this.trigger&&(this.expanded=!this.expanded)}onMouseOver(){"mouseover"===this.trigger&&(this.expanded=!0)}onMouseOut(){"mouseover"===this.trigger&&(this.expanded=!1)}onFocusOut(event){this.elementRef.nativeElement.contains(event.relatedTarget)||(this.expanded=!1)}navigate(event){"#"===this._href&&event.preventDefault()}};HeaderMenu.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:core.ElementRef}],HeaderMenu.propDecorators={subMenu:[{type:core.HostBinding,args:["class.cds--header__submenu"]}],role:[{type:core.HostBinding,args:["attr.role"]}],title:[{type:core.Input}],href:[{type:core.Input}],trigger:[{type:core.Input}],headerItems:[{type:core.Input}],icon:[{type:core.Input}],onClick:[{type:core.HostListener,args:["click"]}],onMouseOver:[{type:core.HostListener,args:["mouseover"]}],onMouseOut:[{type:core.HostListener,args:["mouseout"]}],onFocusOut:[{type:core.HostListener,args:["focusout",["$event"]]}]},HeaderMenu=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-menu, ibm-header-menu",template:'\n\t\t<a\n\t\t\tclass="cds--header__menu-item cds--header__menu-title"\n\t\t\t[href]="href"\n\t\t\ttabindex="0"\n\t\t\taria-haspopup="menu"\n\t\t\t[attr.aria-expanded]="expanded"\n\t\t\t(click)="navigate($event)">\n\t\t\t{{title}}\n\t\t\t<ng-template *ngIf="icon; else defaultIcon" [ngTemplateOutlet]="icon"></ng-template>\n\t\t\t<ng-template #defaultIcon>\n\t\t\t\t<svg class="cds--header__menu-arrow" width="12" height="7" aria-hidden="true">\n\t\t\t\t\t<path d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />\n\t\t\t\t</svg>\n\t\t\t</ng-template>\n\t\t</a>\n\t\t<div class="cds--header__menu" [attr.aria-label]="title">\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-container *ngFor="let headerItem of headerItems">\n\t\t\t\t<cds-header-item\n\t\t\t\t\t[href]="headerItem.href"\n\t\t\t\t\t[route]="headerItem.route"\n\t\t\t\t\t[routeExtras]="headerItem.routeExtras">\n\t\t\t\t\t{{ headerItem.content }}\n\t\t\t\t</cds-header-item>\n\t\t\t</ng-container>\n\t\t</div>\n\t',styles:["\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t"]})],HeaderMenu);let HeaderNavigation=class HeaderNavigation{constructor(){this.height=100}};HeaderNavigation.propDecorators={height:[{type:core.HostBinding,args:["style.height.%"]}],ariaLabel:[{type:core.Input}],navigationItems:[{type:core.Input}]},HeaderNavigation=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-navigation, ibm-header-navigation",template:'\n\t\t<nav class="cds--header__nav" [attr.aria-label]="ariaLabel">\n\t\t\t<div class="cds--header__menu-bar" role="list">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t<ng-container *ngFor="let navigationItem of navigationItems">\n\t\t\t\t\t<cds-header-item\n\t\t\t\t\t\t*ngIf="navigationItem.type === \'item\'"\n\t\t\t\t\t\t[href]="navigationItem.href"\n\t\t\t\t\t\t[route]="navigationItem.route"\n\t\t\t\t\t\t[routeExtras]="navigationItem.routeExtras"\n\t\t\t\t\t\t[isCurrentPage]="!!navigationItem.isCurrentPage">\n\t\t\t\t\t\t{{ navigationItem.content }}\n\t\t\t\t\t</cds-header-item>\n\t\t\t\t\t<cds-header-menu\n\t\t\t\t\t\t*ngIf="navigationItem.type === \'menu\'"\n\t\t\t\t\t\t[href]="navigationItem.href"\n\t\t\t\t\t\t[title]="navigationItem.title"\n\t\t\t\t\t\t[trigger]="navigationItem.trigger ? navigationItem.trigger : \'click\'"\n\t\t\t\t\t\t[headerItems]="navigationItem.menuItems">\n\t\t\t\t\t</cds-header-menu>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t</nav>\n\t'})],HeaderNavigation);let HeaderGlobal=class HeaderGlobal{constructor(){this.hostClass=!0}};HeaderGlobal.propDecorators={hostClass:[{type:core.HostBinding,args:["class.cds--header__global"]}]},HeaderGlobal=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-global, ibm-header-global",template:"\n\t\t<ng-content></ng-content>\n\t"})],HeaderGlobal);let HeaderAction=class HeaderAction extends src_button.HL{constructor(){super(...arguments),this.active=!1,this.activeChange=new core.EventEmitter,this.selected=new core.EventEmitter}onClick(){this.active=!this.active,this.selected.emit(this.active),this.activeChange.emit(this.active)}};HeaderAction.propDecorators={description:[{type:core.Input}],ariaLabel:[{type:core.Input}],active:[{type:core.Input}],activeChange:[{type:core.Output}],selected:[{type:core.Output}]},HeaderAction=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-action, ibm-header-action",template:'\n\t\t<cds-icon-button\n\t\t\t[buttonNgClass]="{\n\t\t\t\t\'cds--header__action\': true,\n\t\t\t\t\'cds--header__action--active\': active\n\t\t\t}"\n\t\t\t(click)="onClick()"\n\t\t\t[align]="align"\n\t\t\t[caret]="caret"\n\t\t\t[dropShadow]="dropShadow"\n\t\t\t[highContrast]="highContrast"\n\t\t\t[isOpen]="isOpen"\n\t\t\t[enterDelayMs]="enterDelayMs"\n\t\t\t[leaveDelayMs]="leaveDelayMs"\n\t\t\t[description]="description"\n\t\t\t[buttonAttributes]="{\n\t\t\t\t\'aria-label\': ariaLabel\n\t\t\t}">\n\t\t\t<ng-content></ng-content>\n\t\t</cds-icon-button>\n\t'})],HeaderAction);let Hamburger=class Hamburger{constructor(i18n){this.i18n=i18n,this.active=!1,this.selected=new core.EventEmitter}doClick(){this.selected.emit(this.active)}};Hamburger.ctorParameters=()=>[{type:i18n.oc}],Hamburger.propDecorators={active:[{type:core.Input}],selected:[{type:core.Output}]},Hamburger=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-hamburger, ibm-hamburger",template:'\n\t\t<button\n\t\t\ttype="button"\n\t\t\t(click)="doClick()"\n\t\t\t[ngClass]="{\'cds--header__action--active\': active}"\n\t\t\tclass="cds--header__menu-trigger cds--header__action cds--header__menu-toggle"\n\t\t\t[attr.aria-label]="active\n\t\t\t\t? (i18n.get(\'UI_SHELL.HEADER.CLOSE_MENU\') | async)\n\t\t\t\t: (i18n.get(\'UI_SHELL.HEADER.OPEN_MENU\') | async)"\n\t\t\t[attr.title]="active\n\t\t\t\t? (i18n.get(\'UI_SHELL.HEADER.CLOSE_MENU\') | async)\n\t\t\t\t: (i18n.get(\'UI_SHELL.HEADER.OPEN_MENU\') | async)">\n\t\t\t<svg *ngIf="!active" cdsIcon="menu" size="20"></svg>\n\t\t\t<svg *ngIf="active" cdsIcon="close" size="20"></svg>\n\t\t</button>\n\t'})],Hamburger);let HeaderModule=class HeaderModule{};HeaderModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Header,HeaderItem,HeaderMenu,HeaderNavigation,HeaderGlobal,HeaderAction,Hamburger],imports:[common.CommonModule,src_button.hJ,i18n.LU,icon.QX,router.Bz],exports:[Header,HeaderItem,HeaderMenu,HeaderNavigation,HeaderGlobal,HeaderAction,Hamburger]})],HeaderModule);let SideNav=class SideNav{constructor(i18n){this.i18n=i18n,this.hostClass=!0,this.ariaLabel="Side navigation",this.expanded=!0,this.hidden=!1,this.rail=!1,this.ux=!0,this.allowExpansion=!1}toggle(){this.expanded=!this.expanded}};SideNav.ctorParameters=()=>[{type:i18n.oc}],SideNav.propDecorators={hostClass:[{type:core.HostBinding,args:["class.cds--side-nav"]}],ariaLabel:[{type:core.HostBinding,args:["attr.aria-label"]},{type:core.Input}],expanded:[{type:core.HostBinding,args:["class.cds--side-nav--expanded"]},{type:core.Input}],hidden:[{type:core.HostBinding,args:["class.cds--side-nav--hidden"]},{type:core.Input}],rail:[{type:core.HostBinding,args:["class.cds--side-nav--rail"]},{type:core.Input}],ux:[{type:core.HostBinding,args:["class.cds--side-nav--ux"]}],allowExpansion:[{type:core.Input}],navigationItems:[{type:core.Input}]},SideNav=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-sidenav, ibm-sidenav",template:'\n\t\t<nav class="cds--side-nav__navigation" [attr.aria-label]="ariaLabel">\n\t\t\t<ng-content select="cds-sidenav-header"></ng-content>\n\t\t\t<div class="cds--side-nav__items" role="list">\n\t\t\t\t<div\n\t\t\t\t\tclass="cds--side-nav__header-navigation cds--side-nav__header-divider">\n\t\t\t\t\t<ng-container *ngFor="let navigationItem of navigationItems">\n\t\t\t\t\t\t<cds-sidenav-item\n\t\t\t\t\t\t\t*ngIf="navigationItem.type === \'item\'"\n\t\t\t\t\t\t\t[href]="navigationItem.href"\n\t\t\t\t\t\t\t[route]="navigationItem.route"\n\t\t\t\t\t\t\t[routeExtras]="navigationItem.routeExtras"\n\t\t\t\t\t\t\t[title]="navigationItem.title">\n\t\t\t\t\t\t\t{{ navigationItem.content }}\n\t\t\t\t\t\t</cds-sidenav-item>\n\t\t\t\t\t\t<cds-sidenav-menu\n\t\t\t\t\t\t\t*ngIf="navigationItem.type === \'menu\'"\n\t\t\t\t\t\t\t[title]="navigationItem.title"\n\t\t\t\t\t\t\t[menuItems]="navigationItem.menuItems">\n\t\t\t\t\t\t</cds-sidenav-menu>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t\t<footer class="cds--side-nav__footer">\n\t\t\t\t<button\n\t\t\t\t\t*ngIf="allowExpansion"\n\t\t\t\t\tclass="cds--side-nav__toggle"\n\t\t\t\t\ttype="button"\n\t\t\t\t\t[title]="(expanded ? i18n.get(\'UI_SHELL.SIDE_NAV.TOGGLE_CLOSE\') : i18n.get(\'UI_SHELL.SIDE_NAV.TOGGLE_OPEN\')) | async"\n\t\t\t\t\t(click)="toggle()">\n\t\t\t\t\t<div class="cds--side-nav__icon">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf="expanded"\n\t\t\t\t\t\t\tfocusable="false"\n\t\t\t\t\t\t\tpreserveAspectRatio="xMidYMid meet"\n\t\t\t\t\t\t\tstyle="will-change: transform;"\n\t\t\t\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\t\t\t\twidth="20"\n\t\t\t\t\t\t\theight="20"\n\t\t\t\t\t\t\tviewBox="0 0 32 32"\n\t\t\t\t\t\t\taria-hidden="true">\n\t\t\t\t\t\t\t<path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4l6.6 6.6L8 22.6 9.4 24l6.6-6.6 6.6 6.6 1.4-1.4-6.6-6.6L24 9.4z"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf="!expanded"\n\t\t\t\t\t\t\tfocusable="false"\n\t\t\t\t\t\t\tpreserveAspectRatio="xMidYMid meet"\n\t\t\t\t\t\t\tstyle="will-change: transform;"\n\t\t\t\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\t\t\t\twidth="20"\n\t\t\t\t\t\t\theight="20"\n\t\t\t\t\t\t\tviewBox="0 0 32 32"\n\t\t\t\t\t\t\taria-hidden="true">\n\t\t\t\t\t\t\t<path d="M22 16L12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class="cds--assistive-text">\n\t\t\t\t\t\t{{(expanded ? i18n.get(\'UI_SHELL.SIDE_NAV.TOGGLE_CLOSE\') : i18n.get(\'UI_SHELL.SIDE_NAV.TOGGLE_OPEN\')) | async}}\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\t\t\t</footer>\n\t\t</nav>\n\t',encapsulation:core.ViewEncapsulation.None})],SideNav);let SideNavItem=class SideNavItem{constructor(domSanitizer,router){this.domSanitizer=domSanitizer,this.router=router,this.active=!1,this.isSubMenu=!1,this.navigation=new core.EventEmitter,this.selected=new core.EventEmitter,this.role="listitem",this._href="#"}set href(v){void 0!==v&&(this._href=v)}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}get sideNav(){return!this.isSubMenu}get menuItem(){return this.isSubMenu}ngOnChanges(changes){changes.active&&this.selected.emit(this.active)}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}else"#"===this._href&&event.preventDefault()}};SideNavItem.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],SideNavItem.propDecorators={href:[{type:core.Input}],sideNav:[{type:core.HostBinding,args:["class.cds--side-nav__item"]}],menuItem:[{type:core.HostBinding,args:["class.cds--side-nav__menu-item"]}],active:[{type:core.Input}],route:[{type:core.Input}],isSubMenu:[{type:core.Input}],routeExtras:[{type:core.Input}],title:[{type:core.Input}],navigation:[{type:core.Output}],selected:[{type:core.Output}],role:[{type:core.HostBinding,args:["attr.role"]}]},SideNavItem=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-sidenav-item, ibm-sidenav-item",template:'\n\t\t<a\n\t\t\tclass="cds--side-nav__link"\n\t\t\t[href]="href"\n\t\t\t[attr.aria-current]="(active ? \'page\' : null)"\n\t\t\t[attr.title]="title ? title : null"\n\t\t\t(click)="navigate($event)">\n\t\t\t<div *ngIf="!isSubMenu" class="cds--side-nav__icon">\n\t\t\t\t<ng-content select="svg, [icon]"></ng-content>\n\t\t\t</div>\n\t\t\t<span class="cds--side-nav__link-text">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t</a>\n\t',styles:["\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t"]})],SideNavItem);var Subscription=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subscription.js");let SideNavMenu=class SideNavMenu{constructor(){this.navItem=!0,this.navItemIcon=!0,this.role="listitem",this.expanded=!1,this.hasActiveChild=!1,this.activeItemsSubscription=new Subscription.w0}get navItemActive(){return this.hasActiveChild}ngAfterContentInit(){setTimeout((()=>{this.sidenavItems.forEach((item=>{item.isSubMenu=!0,this.findActiveChildren();const activeItemSubscription=item.selected.subscribe((()=>{this.findActiveChildren()}));this.activeItemsSubscription.add(activeItemSubscription)})),this.sidenavItems.changes.subscribe((()=>{this.sidenavItems.forEach((item=>{item.isSubMenu=!0,this.findActiveChildren();const activeItemSubscription=item.selected.subscribe((()=>{this.findActiveChildren()}));this.activeItemsSubscription.add(activeItemSubscription)}))}))}))}ngOnDestroy(){this.activeItemsSubscription.unsubscribe()}toggle(){this.expanded=!this.expanded}findActiveChildren(){this.sidenavItems.some((item=>item.active))?this.hasActiveChild=!0:this.hasActiveChild=!1}};SideNavMenu.propDecorators={navItem:[{type:core.HostBinding,args:["class.cds--side-nav__item"]}],navItemIcon:[{type:core.HostBinding,args:["class.cds--side-nav__item--icon"]}],navItemActive:[{type:core.HostBinding,args:["class.cds--side-nav__item--active"]}],role:[{type:core.HostBinding,args:["attr.role"]}],title:[{type:core.Input}],expanded:[{type:core.Input}],hasActiveChild:[{type:core.Input}],menuItems:[{type:core.Input}],sidenavItems:[{type:core.ContentChildren,args:[SideNavItem]}]},SideNavMenu=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-sidenav-menu, ibm-sidenav-menu",template:'\n\t\t<button\n\t\t\t(click)="toggle()"\n\t\t\tclass="cds--side-nav__submenu"\n\t\t\taria-haspopup="true"\n\t\t\t[attr.aria-expanded]="expanded"\n\t\t\ttype="button">\n\t\t\t<div class="cds--side-nav__icon">\n\t\t\t\t<ng-content select="[icon]"></ng-content>\n\t\t\t</div>\n\t\t\t<span class="cds--side-nav__submenu-title">{{title}}</span>\n\t\t\t<div class="cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron">\n\t\t\t\t<svg\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\twidth="20"\n\t\t\t\t\theight="20"\n\t\t\t\t\tviewBox="0 0 32 32"\n\t\t\t\t\taria-hidden="true">\n\t\t\t\t\t<path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</button>\n\t\t<div class="cds--side-nav__menu" role="list">\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-container *ngFor="let menuItem of menuItems">\n\t\t\t\t<cds-sidenav-item\n\t\t\t\t\t[href]="menuItem.href"\n\t\t\t\t\t[route]="menuItem.route"\n\t\t\t\t\t[routeExtras]="menuItem.routeExtras"\n\t\t\t\t\t[isSubMenu]="true">\n\t\t\t\t\t{{ menuItem.content }}\n\t\t\t\t</cds-sidenav-item>\n\t\t\t</ng-container>\n\t\t</div>\n\t'})],SideNavMenu);let SideNavModule=class SideNavModule{};SideNavModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[SideNav,SideNavItem,SideNavMenu],imports:[common.CommonModule,i18n.LU],exports:[SideNav,SideNavItem,SideNavMenu]})],SideNavModule);let Panel=class Panel{constructor(){this.expanded=!1,this.ariaLabel="Header panel"}};Panel.propDecorators={expanded:[{type:core.Input}],ariaLabel:[{type:core.Input}]},Panel=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-panel, ibm-panel",template:'\n\t\t<div\n\t\t\tclass="cds--header-panel"\n\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--header-panel--expanded\': expanded\n\t\t\t}">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t'})],Panel);let SwitcherList=class SwitcherList{constructor(){this.switcher=!0,this.role="list"}};SwitcherList.propDecorators={switcher:[{type:core.HostBinding,args:["class.cds--switcher"]}],role:[{type:core.HostBinding,args:["attr.role"]}]},SwitcherList=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-switcher-list, ibm-switcher-list",template:"\n\t\t\t<ng-content></ng-content>\n\t",styles:["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"]})],SwitcherList);let SwitcherListItem=class SwitcherListItem{constructor(domSanitizer,router){this.domSanitizer=domSanitizer,this.router=router,this.active=!1,this.navigation=new core.EventEmitter,this.itemClass=!0,this.itemRole="listitem",this._href="#",this._target=""}set href(value){this._href=value}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}set target(value){this._target=value}get target(){return this._target}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}else"#"===this._href&&event.preventDefault()}};SwitcherListItem.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],SwitcherListItem.propDecorators={active:[{type:core.Input}],route:[{type:core.Input}],routeExtras:[{type:core.Input}],href:[{type:core.Input}],navigation:[{type:core.Output}],target:[{type:core.Input}],itemClass:[{type:core.HostBinding,args:["class.cds--switcher__item"]}],itemRole:[{type:core.HostBinding,args:["attr.role"]}]},SwitcherListItem=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-switcher-list-item, ibm-switcher-list-item",template:'\n\t\t<a\n\t\t\tclass="cds--switcher__item-link"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--switcher__item-link--selected\': active\n\t\t\t}"\n\t\t\t[href]="href"\n\t\t\t[target]="target"\n\t\t\t(click)="navigate($event)">\n\t\t\t<ng-content></ng-content>\n\t\t</a>\n\t'})],SwitcherListItem);let PanelModule=class PanelModule{};PanelModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Panel,SwitcherList,SwitcherListItem],imports:[common.CommonModule,i18n.LU],exports:[Panel,SwitcherList,SwitcherListItem]})],PanelModule);let UIShellModule=class UIShellModule{};UIShellModule=(0,tslib_es6.gn)([(0,core.NgModule)({imports:[common.CommonModule,i18n.LU,HeaderModule,SideNavModule,PanelModule],exports:[HeaderModule,SideNavModule,PanelModule]})],UIShellModule)}}]);
+"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3348],{"./src/ui-shell/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{p5:()=>UIShellModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),src_button=__webpack_require__("./src/button/index.ts"),i18n=__webpack_require__("./src/i18n/index.ts"),icon=__webpack_require__("./src/icon/index.ts"),platform_browser=__webpack_require__("./node_modules/@angular/platform-browser/fesm2020/platform-browser.mjs"),router=__webpack_require__("./node_modules/@angular/router/fesm2020/router.mjs");let Header=class Header{constructor(i18n,domSanitizer,router){this.i18n=i18n,this.domSanitizer=domSanitizer,this.router=router,this.brand="IBM",this.useRouter=!1,this.navigation=new core.EventEmitter,this._href="#"}set href(v){this._href=v}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}isTemplate(value){return value instanceof core.TemplateRef}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}else"#"===this._href&&event.preventDefault()}};Header.ctorParameters=()=>[{type:i18n.oc},{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],Header.propDecorators={skipTo:[{type:core.Input}],name:[{type:core.Input}],brand:[{type:core.Input}],href:[{type:core.Input}],route:[{type:core.Input}],routeExtras:[{type:core.Input}],useRouter:[{type:core.Input}],navigation:[{type:core.Output}]},Header=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header, ibm-header",template:'\n\t\t<header\n\t\t\tclass="cds--header"\n\t\t\t[attr.aria-label]="brand + \' \' + name">\n\t\t\t<a\n\t\t\t\t*ngIf="skipTo"\n\t\t\t\tclass="cds--skip-to-content"\n\t\t\t\t[href]="skipTo"\n\t\t\t\ttabindex="0">\n\t\t\t\t{{ i18n.get("UI_SHELL.SKIP_TO") | async }}\n\t\t\t</a>\n\t\t\t<ng-content select="cds-hamburger"></ng-content>\n\t\t\t<ng-template\n\t\t\t\t*ngIf="isTemplate(brand)"\n\t\t\t\t[ngTemplateOutlet]="brand">\n\t\t\t</ng-template>\n\t\t\t<ng-container *ngIf="!isTemplate(brand)" [ngSwitch]="useRouter">\n\t\t\t\t<a\n\t\t\t\t\t*ngSwitchCase="false"\n\t\t\t\t\tclass="cds--header__name"\n\t\t\t\t\t[href]="href"\n\t\t\t\t\t(click)="navigate($event)">\n\t\t\t\t\t<span class="cds--header__name--prefix">{{brand}}&nbsp;</span>\n\t\t\t\t\t{{name}}\n\t\t\t\t</a>\n\t\t\t\t<a\n\t\t\t\t\t*ngSwitchCase="true"\n\t\t\t\t\tclass="cds--header__name"\n\t\t\t\t\t[routerLink]="route">\n\t\t\t\t\t<span class="cds--header__name--prefix">{{brand}}&nbsp;</span>\n\t\t\t\t\t{{name}}\n\t\t\t\t</a>\n\t\t\t</ng-container>\n\t\t\t<ng-content></ng-content>\n\t\t</header>\n\t'})],Header);let HeaderItem=class HeaderItem{constructor(domSanitizer,router){this.domSanitizer=domSanitizer,this.router=router,this.role="listitem",this.useRouter=!1,this.navigation=new core.EventEmitter,this._href="#"}set href(v){void 0!==v&&(this._href=v)}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}else"#"===this._href&&event.preventDefault()}};HeaderItem.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],HeaderItem.propDecorators={role:[{type:core.HostBinding,args:["attr.role"]}],href:[{type:core.Input}],useRouter:[{type:core.Input}],activeLinkClass:[{type:core.Input}],isCurrentPage:[{type:core.Input}],route:[{type:core.Input}],routeExtras:[{type:core.Input}],navigation:[{type:core.Output}]},HeaderItem=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-item, ibm-header-item",template:'\n\t\t<ng-container [ngSwitch]="useRouter">\n\t\t\t<ng-template #content><ng-content></ng-content></ng-template>\n\t\t\t<a\n\t\t\t\t*ngSwitchCase="false"\n\t\t\t\tclass="cds--header__menu-item"\n\t\t\t\ttabindex="0"\n\t\t\t\t[ngClass]="{\'cds--header__menu-item--current\' : isCurrentPage}"\n\t\t\t\t[href]="href"\n\t\t\t\t(click)="navigate($event)">\n\t\t\t\t<ng-container *ngTemplateOutlet="content"></ng-container>\n\t\t\t</a>\n\t\t\t<a\n\t\t\t\t*ngSwitchCase="true"\n\t\t\t\tclass="cds--header__menu-item"\n\t\t\t\t[routerLinkActive]="[\'cds--header__menu-item--current\']"\n\t\t\t\ttabindex="0"\n\t\t\t\t[ngClass]="{\'cds--header__menu-item--current\' : isCurrentPage}"\n\t\t\t\t[routerLink]="route"\n\t\t\t\t[routerLinkActive]="activeLinkClass">\n\t\t\t\t<ng-container *ngTemplateOutlet="content"></ng-container>\n\t\t\t</a>\n\t\t</ng-container>\n\t',styles:["\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t"]})],HeaderItem);let HeaderMenu=class HeaderMenu{constructor(domSanitizer,elementRef){this.domSanitizer=domSanitizer,this.elementRef=elementRef,this.subMenu=!0,this.role="listitem",this.trigger="click",this.expanded=!1,this._href="#"}set href(v){void 0!==v&&(this._href=v)}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}onClick(){"click"===this.trigger&&(this.expanded=!this.expanded)}onMouseOver(){"mouseover"===this.trigger&&(this.expanded=!0)}onMouseOut(){"mouseover"===this.trigger&&(this.expanded=!1)}onFocusOut(event){this.elementRef.nativeElement.contains(event.relatedTarget)||(this.expanded=!1)}navigate(event){"#"===this._href&&event.preventDefault()}};HeaderMenu.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:core.ElementRef}],HeaderMenu.propDecorators={subMenu:[{type:core.HostBinding,args:["class.cds--header__submenu"]}],role:[{type:core.HostBinding,args:["attr.role"]}],title:[{type:core.Input}],href:[{type:core.Input}],trigger:[{type:core.Input}],headerItems:[{type:core.Input}],icon:[{type:core.Input}],onClick:[{type:core.HostListener,args:["click"]}],onMouseOver:[{type:core.HostListener,args:["mouseover"]}],onMouseOut:[{type:core.HostListener,args:["mouseout"]}],onFocusOut:[{type:core.HostListener,args:["focusout",["$event"]]}]},HeaderMenu=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-menu, ibm-header-menu",template:'\n\t\t<a\n\t\t\tclass="cds--header__menu-item cds--header__menu-title"\n\t\t\t[href]="href"\n\t\t\ttabindex="0"\n\t\t\taria-haspopup="menu"\n\t\t\t[attr.aria-expanded]="expanded"\n\t\t\t(click)="navigate($event)">\n\t\t\t{{title}}\n\t\t\t<ng-template *ngIf="icon; else defaultIcon" [ngTemplateOutlet]="icon"></ng-template>\n\t\t\t<ng-template #defaultIcon>\n\t\t\t\t<svg class="cds--header__menu-arrow" width="12" height="7" aria-hidden="true">\n\t\t\t\t\t<path d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />\n\t\t\t\t</svg>\n\t\t\t</ng-template>\n\t\t</a>\n\t\t<div class="cds--header__menu" [attr.aria-label]="title">\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-container *ngFor="let headerItem of headerItems">\n\t\t\t\t<cds-header-item\n\t\t\t\t\t[href]="headerItem.href"\n\t\t\t\t\t[route]="headerItem.route"\n\t\t\t\t\t[routeExtras]="headerItem.routeExtras">\n\t\t\t\t\t{{ headerItem.content }}\n\t\t\t\t</cds-header-item>\n\t\t\t</ng-container>\n\t\t</div>\n\t',styles:["\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t"]})],HeaderMenu);let HeaderNavigation=class HeaderNavigation{constructor(){this.height=100}};HeaderNavigation.propDecorators={height:[{type:core.HostBinding,args:["style.height.%"]}],ariaLabel:[{type:core.Input}],navigationItems:[{type:core.Input}]},HeaderNavigation=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-navigation, ibm-header-navigation",template:'\n\t\t<nav class="cds--header__nav" [attr.aria-label]="ariaLabel">\n\t\t\t<div class="cds--header__menu-bar" role="list">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t<ng-container *ngFor="let navigationItem of navigationItems">\n\t\t\t\t\t<cds-header-item\n\t\t\t\t\t\t*ngIf="navigationItem.type === \'item\'"\n\t\t\t\t\t\t[href]="navigationItem.href"\n\t\t\t\t\t\t[route]="navigationItem.route"\n\t\t\t\t\t\t[routeExtras]="navigationItem.routeExtras"\n\t\t\t\t\t\t[isCurrentPage]="!!navigationItem.isCurrentPage">\n\t\t\t\t\t\t{{ navigationItem.content }}\n\t\t\t\t\t</cds-header-item>\n\t\t\t\t\t<cds-header-menu\n\t\t\t\t\t\t*ngIf="navigationItem.type === \'menu\'"\n\t\t\t\t\t\t[href]="navigationItem.href"\n\t\t\t\t\t\t[title]="navigationItem.title"\n\t\t\t\t\t\t[trigger]="navigationItem.trigger ? navigationItem.trigger : \'click\'"\n\t\t\t\t\t\t[headerItems]="navigationItem.menuItems">\n\t\t\t\t\t</cds-header-menu>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t</nav>\n\t'})],HeaderNavigation);let HeaderGlobal=class HeaderGlobal{constructor(){this.hostClass=!0}};HeaderGlobal.propDecorators={hostClass:[{type:core.HostBinding,args:["class.cds--header__global"]}]},HeaderGlobal=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-global, ibm-header-global",template:"\n\t\t<ng-content></ng-content>\n\t"})],HeaderGlobal);let HeaderAction=class HeaderAction extends src_button.HL{constructor(){super(...arguments),this.active=!1,this.activeChange=new core.EventEmitter,this.selected=new core.EventEmitter}onClick(){this.active=!this.active,this.selected.emit(this.active),this.activeChange.emit(this.active)}};HeaderAction.propDecorators={description:[{type:core.Input}],ariaLabel:[{type:core.Input}],active:[{type:core.Input}],activeChange:[{type:core.Output}],selected:[{type:core.Output}]},HeaderAction=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-header-action, ibm-header-action",template:'\n\t\t<cds-icon-button\n\t\t\t[buttonNgClass]="{\n\t\t\t\t\'cds--header__action\': true,\n\t\t\t\t\'cds--header__action--active\': active\n\t\t\t}"\n\t\t\t(click)="onClick()"\n\t\t\t[align]="align"\n\t\t\t[caret]="caret"\n\t\t\t[dropShadow]="dropShadow"\n\t\t\t[highContrast]="highContrast"\n\t\t\t[isOpen]="isOpen"\n\t\t\t[enterDelayMs]="enterDelayMs"\n\t\t\t[leaveDelayMs]="leaveDelayMs"\n\t\t\t[description]="description"\n\t\t\t[buttonAttributes]="{\n\t\t\t\t\'aria-label\': ariaLabel\n\t\t\t}">\n\t\t\t<ng-content></ng-content>\n\t\t</cds-icon-button>\n\t'})],HeaderAction);let Hamburger=class Hamburger{constructor(i18n){this.i18n=i18n,this.active=!1,this.selected=new core.EventEmitter}doClick(){this.selected.emit(this.active)}};Hamburger.ctorParameters=()=>[{type:i18n.oc}],Hamburger.propDecorators={active:[{type:core.Input}],selected:[{type:core.Output}]},Hamburger=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-hamburger, ibm-hamburger",template:'\n\t\t<button\n\t\t\ttype="button"\n\t\t\t(click)="doClick()"\n\t\t\t[ngClass]="{\'cds--header__action--active\': active}"\n\t\t\tclass="cds--header__menu-trigger cds--header__action cds--header__menu-toggle"\n\t\t\t[attr.aria-label]="active\n\t\t\t\t? (i18n.get(\'UI_SHELL.HEADER.CLOSE_MENU\') | async)\n\t\t\t\t: (i18n.get(\'UI_SHELL.HEADER.OPEN_MENU\') | async)"\n\t\t\t[attr.title]="active\n\t\t\t\t? (i18n.get(\'UI_SHELL.HEADER.CLOSE_MENU\') | async)\n\t\t\t\t: (i18n.get(\'UI_SHELL.HEADER.OPEN_MENU\') | async)">\n\t\t\t<svg *ngIf="!active" cdsIcon="menu" size="20"></svg>\n\t\t\t<svg *ngIf="active" cdsIcon="close" size="20"></svg>\n\t\t</button>\n\t'})],Hamburger);let HeaderModule=class HeaderModule{};HeaderModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Header,HeaderItem,HeaderMenu,HeaderNavigation,HeaderGlobal,HeaderAction,Hamburger],imports:[common.CommonModule,src_button.hJ,i18n.LU,icon.QX,router.Bz],exports:[Header,HeaderItem,HeaderMenu,HeaderNavigation,HeaderGlobal,HeaderAction,Hamburger]})],HeaderModule);let SideNav=class SideNav{constructor(i18n){this.i18n=i18n,this.hostClass=!0,this.ariaLabel="Side navigation",this.expanded=!0,this.hidden=!1,this.rail=!1,this.ux=!0,this.allowExpansion=!1}toggle(){this.expanded=!this.expanded}};SideNav.ctorParameters=()=>[{type:i18n.oc}],SideNav.propDecorators={hostClass:[{type:core.HostBinding,args:["class.cds--side-nav"]}],ariaLabel:[{type:core.HostBinding,args:["attr.aria-label"]},{type:core.Input}],expanded:[{type:core.HostBinding,args:["class.cds--side-nav--expanded"]},{type:core.Input}],hidden:[{type:core.HostBinding,args:["class.cds--side-nav--hidden"]},{type:core.Input}],rail:[{type:core.HostBinding,args:["class.cds--side-nav--rail"]},{type:core.Input}],ux:[{type:core.HostBinding,args:["class.cds--side-nav--ux"]}],allowExpansion:[{type:core.Input}],navigationItems:[{type:core.Input}]},SideNav=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-sidenav, ibm-sidenav",template:'\n\t\t<nav class="cds--side-nav__navigation" [attr.aria-label]="ariaLabel">\n\t\t\t<ng-content select="cds-sidenav-header"></ng-content>\n\t\t\t<div class="cds--side-nav__items" role="list">\n\t\t\t\t<div\n\t\t\t\t\tclass="cds--side-nav__header-navigation cds--side-nav__header-divider">\n\t\t\t\t\t<ng-container *ngFor="let navigationItem of navigationItems">\n\t\t\t\t\t\t<cds-sidenav-item\n\t\t\t\t\t\t\t*ngIf="navigationItem.type === \'item\'"\n\t\t\t\t\t\t\t[href]="navigationItem.href"\n\t\t\t\t\t\t\t[route]="navigationItem.route"\n\t\t\t\t\t\t\t[routeExtras]="navigationItem.routeExtras"\n\t\t\t\t\t\t\t[title]="navigationItem.title">\n\t\t\t\t\t\t\t{{ navigationItem.content }}\n\t\t\t\t\t\t</cds-sidenav-item>\n\t\t\t\t\t\t<cds-sidenav-menu\n\t\t\t\t\t\t\t*ngIf="navigationItem.type === \'menu\'"\n\t\t\t\t\t\t\t[title]="navigationItem.title"\n\t\t\t\t\t\t\t[menuItems]="navigationItem.menuItems">\n\t\t\t\t\t\t</cds-sidenav-menu>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t\t<footer class="cds--side-nav__footer">\n\t\t\t\t<button\n\t\t\t\t\t*ngIf="allowExpansion"\n\t\t\t\t\tclass="cds--side-nav__toggle"\n\t\t\t\t\ttype="button"\n\t\t\t\t\t[title]="(expanded ? i18n.get(\'UI_SHELL.SIDE_NAV.TOGGLE_CLOSE\') : i18n.get(\'UI_SHELL.SIDE_NAV.TOGGLE_OPEN\')) | async"\n\t\t\t\t\t(click)="toggle()">\n\t\t\t\t\t<div class="cds--side-nav__icon">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf="expanded"\n\t\t\t\t\t\t\tfocusable="false"\n\t\t\t\t\t\t\tpreserveAspectRatio="xMidYMid meet"\n\t\t\t\t\t\t\tstyle="will-change: transform;"\n\t\t\t\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\t\t\t\twidth="20"\n\t\t\t\t\t\t\theight="20"\n\t\t\t\t\t\t\tviewBox="0 0 32 32"\n\t\t\t\t\t\t\taria-hidden="true">\n\t\t\t\t\t\t\t<path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4l6.6 6.6L8 22.6 9.4 24l6.6-6.6 6.6 6.6 1.4-1.4-6.6-6.6L24 9.4z"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf="!expanded"\n\t\t\t\t\t\t\tfocusable="false"\n\t\t\t\t\t\t\tpreserveAspectRatio="xMidYMid meet"\n\t\t\t\t\t\t\tstyle="will-change: transform;"\n\t\t\t\t\t\t\txmlns="http://www.w3.org/2000/svg"\n\t\t\t\t\t\t\twidth="20"\n\t\t\t\t\t\t\theight="20"\n\t\t\t\t\t\t\tviewBox="0 0 32 32"\n\t\t\t\t\t\t\taria-hidden="true">\n\t\t\t\t\t\t\t<path d="M22 16L12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class="cds--assistive-text">\n\t\t\t\t\t\t{{(expanded ? i18n.get(\'UI_SHELL.SIDE_NAV.TOGGLE_CLOSE\') : i18n.get(\'UI_SHELL.SIDE_NAV.TOGGLE_OPEN\')) | async}}\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\t\t\t</footer>\n\t\t</nav>\n\t',encapsulation:core.ViewEncapsulation.None})],SideNav);let SideNavItem=class SideNavItem{constructor(domSanitizer,router){this.domSanitizer=domSanitizer,this.router=router,this.active=!1,this.isSubMenu=!1,this.navigation=new core.EventEmitter,this.selected=new core.EventEmitter,this.role="listitem",this._href="#"}set href(v){void 0!==v&&(this._href=v)}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}get sideNav(){return!this.isSubMenu}get menuItem(){return this.isSubMenu}ngOnChanges(changes){changes.active&&this.selected.emit(this.active)}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}else"#"===this._href&&event.preventDefault()}};SideNavItem.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],SideNavItem.propDecorators={href:[{type:core.Input}],sideNav:[{type:core.HostBinding,args:["class.cds--side-nav__item"]}],menuItem:[{type:core.HostBinding,args:["class.cds--side-nav__menu-item"]}],active:[{type:core.Input}],route:[{type:core.Input}],isSubMenu:[{type:core.Input}],routeExtras:[{type:core.Input}],title:[{type:core.Input}],navigation:[{type:core.Output}],selected:[{type:core.Output}],role:[{type:core.HostBinding,args:["attr.role"]}]},SideNavItem=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-sidenav-item, ibm-sidenav-item",template:'\n\t\t<a\n\t\t\tclass="cds--side-nav__link"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--side-nav__link--current\': active\n\t\t\t}"\n\t\t\t[href]="href"\n\t\t\t[attr.aria-current]="(active ? \'page\' : null)"\n\t\t\t[attr.title]="title ? title : null"\n\t\t\t(click)="navigate($event)">\n\t\t\t<div *ngIf="!isSubMenu" class="cds--side-nav__icon">\n\t\t\t\t<ng-content select="svg, [icon]"></ng-content>\n\t\t\t</div>\n\t\t\t<span class="cds--side-nav__link-text">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t</a>\n\t',styles:["\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t"]})],SideNavItem);var Subscription=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subscription.js");let SideNavMenu=class SideNavMenu{constructor(){this.navItem=!0,this.navItemIcon=!0,this.role="listitem",this.expanded=!1,this.hasActiveChild=!1,this.activeItemsSubscription=new Subscription.w0}get navItemActive(){return this.hasActiveChild}ngAfterContentInit(){setTimeout((()=>{this.sidenavItems.forEach((item=>{item.isSubMenu=!0,this.findActiveChildren();const activeItemSubscription=item.selected.subscribe((()=>{this.findActiveChildren()}));this.activeItemsSubscription.add(activeItemSubscription)})),this.sidenavItems.changes.subscribe((()=>{this.sidenavItems.forEach((item=>{item.isSubMenu=!0,this.findActiveChildren();const activeItemSubscription=item.selected.subscribe((()=>{this.findActiveChildren()}));this.activeItemsSubscription.add(activeItemSubscription)}))}))}))}ngOnDestroy(){this.activeItemsSubscription.unsubscribe()}toggle(){this.expanded=!this.expanded}findActiveChildren(){this.hasActiveChild=this.sidenavItems.some((item=>item.active))}};SideNavMenu.propDecorators={navItem:[{type:core.HostBinding,args:["class.cds--side-nav__item"]}],navItemIcon:[{type:core.HostBinding,args:["class.cds--side-nav__item--icon"]}],navItemActive:[{type:core.HostBinding,args:["class.cds--side-nav__item--active"]}],role:[{type:core.HostBinding,args:["attr.role"]}],title:[{type:core.Input}],expanded:[{type:core.Input}],hasActiveChild:[{type:core.Input}],menuItems:[{type:core.Input}],sidenavItems:[{type:core.ContentChildren,args:[SideNavItem]}]},SideNavMenu=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-sidenav-menu, ibm-sidenav-menu",template:'\n\t\t<button\n\t\t\t(click)="toggle()"\n\t\t\tclass="cds--side-nav__submenu"\n\t\t\taria-haspopup="true"\n\t\t\t[attr.aria-expanded]="expanded"\n\t\t\ttype="button">\n\t\t\t<div class="cds--side-nav__icon">\n\t\t\t\t<ng-content select="svg, [icon]"></ng-content>\n\t\t\t</div>\n\t\t\t<span class="cds--side-nav__submenu-title">{{title}}</span>\n\t\t\t<div class="cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron">\n\t\t\t\t<svg\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\twidth="20"\n\t\t\t\t\theight="20"\n\t\t\t\t\tviewBox="0 0 32 32"\n\t\t\t\t\taria-hidden="true">\n\t\t\t\t\t<path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</button>\n\t\t<div class="cds--side-nav__menu" role="list">\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-container *ngFor="let menuItem of menuItems">\n\t\t\t\t<cds-sidenav-item\n\t\t\t\t\t[href]="menuItem.href"\n\t\t\t\t\t[route]="menuItem.route"\n\t\t\t\t\t[routeExtras]="menuItem.routeExtras"\n\t\t\t\t\t[isSubMenu]="true">\n\t\t\t\t\t{{ menuItem.content }}\n\t\t\t\t</cds-sidenav-item>\n\t\t\t</ng-container>\n\t\t</div>\n\t'})],SideNavMenu);let SideNavModule=class SideNavModule{};SideNavModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[SideNav,SideNavItem,SideNavMenu],imports:[common.CommonModule,i18n.LU],exports:[SideNav,SideNavItem,SideNavMenu]})],SideNavModule);let Panel=class Panel{constructor(){this.expanded=!1,this.ariaLabel="Header panel"}};Panel.propDecorators={expanded:[{type:core.Input}],ariaLabel:[{type:core.Input}]},Panel=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-panel, ibm-panel",template:'\n\t\t<div\n\t\t\tclass="cds--header-panel"\n\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--header-panel--expanded\': expanded\n\t\t\t}">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t'})],Panel);let SwitcherList=class SwitcherList{constructor(){this.switcher=!0,this.role="list"}};SwitcherList.propDecorators={switcher:[{type:core.HostBinding,args:["class.cds--switcher"]}],role:[{type:core.HostBinding,args:["attr.role"]}]},SwitcherList=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-switcher-list, ibm-switcher-list",template:"\n\t\t\t<ng-content></ng-content>\n\t",styles:["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"]})],SwitcherList);let SwitcherListItem=class SwitcherListItem{constructor(domSanitizer,router){this.domSanitizer=domSanitizer,this.router=router,this.active=!1,this.navigation=new core.EventEmitter,this.itemClass=!0,this.itemRole="listitem",this._href="#",this._target=""}set href(value){this._href=value}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}set target(value){this._target=value}get target(){return this._target}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}else"#"===this._href&&event.preventDefault()}};SwitcherListItem.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],SwitcherListItem.propDecorators={active:[{type:core.Input}],route:[{type:core.Input}],routeExtras:[{type:core.Input}],href:[{type:core.Input}],navigation:[{type:core.Output}],target:[{type:core.Input}],itemClass:[{type:core.HostBinding,args:["class.cds--switcher__item"]}],itemRole:[{type:core.HostBinding,args:["attr.role"]}]},SwitcherListItem=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-switcher-list-item, ibm-switcher-list-item",template:'\n\t\t<a\n\t\t\tclass="cds--switcher__item-link"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--switcher__item-link--selected\': active\n\t\t\t}"\n\t\t\t[href]="href"\n\t\t\t[target]="target"\n\t\t\t(click)="navigate($event)">\n\t\t\t<ng-content></ng-content>\n\t\t</a>\n\t'})],SwitcherListItem);let PanelModule=class PanelModule{};PanelModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Panel,SwitcherList,SwitcherListItem],imports:[common.CommonModule,i18n.LU],exports:[Panel,SwitcherList,SwitcherListItem]})],PanelModule);let UIShellModule=class UIShellModule{};UIShellModule=(0,tslib_es6.gn)([(0,core.NgModule)({imports:[common.CommonModule,i18n.LU,HeaderModule,SideNavModule,PanelModule],exports:[HeaderModule,SideNavModule,PanelModule]})],UIShellModule)}}]);

package/docs/storybook/{3931.f22006ff.iframe.bundle.js → 3931.55f9fea9.iframe.bundle.js}

@@ -1 +1 @@
-"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3931],{"./node_modules/@carbon/utils-position/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{var _a,PLACEMENTS;__webpack_require__.d(__webpack_exports__,{FK:()=>position,ZP:()=>__WEBPACK_DEFAULT_EXPORT__}),function(PLACEMENTS){PLACEMENTS.LEFT="left",PLACEMENTS.RIGHT="right",PLACEMENTS.TOP="top",PLACEMENTS.BOTTOM="bottom"}(PLACEMENTS||(PLACEMENTS={}));var defaultPositions=((_a={})[PLACEMENTS.LEFT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left-target.offsetWidth)}},_a[PLACEMENTS.RIGHT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left+referenceRect.width)}},_a[PLACEMENTS.TOP]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top-target.offsetHeight),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a[PLACEMENTS.BOTTOM]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top+referenceRect.height),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a),windowRef="undefined"!=typeof window?window:{innerHeight:0,scrollY:0,innerWidth:0,scrollX:0},Position=function(){function Position(positions){void 0===positions&&(positions={}),this.positions=defaultPositions,this.positions=Object.assign({},defaultPositions,positions)}return Position.prototype.getRelativeOffset=function(target){for(var offsets={left:target.offsetLeft,top:target.offsetTop};target.offsetParent&&"static"===getComputedStyle(target.offsetParent).position;)offsets.left+=target.offsetLeft,offsets.top+=target.offsetTop,target=target.offsetParent;return offsets},Position.prototype.getAbsoluteOffset=function(target){for(var currentNode=target,margins={top:0,left:0};currentNode.offsetParent;){var computed=getComputedStyle(currentNode.offsetParent);"static"===computed.position&&computed.marginLeft&&computed.marginTop&&(parseInt(computed.marginTop,10)&&(margins.top+=parseInt(computed.marginTop,10)),parseInt(computed.marginLeft,10)&&(margins.left+=parseInt(computed.marginLeft,10))),currentNode=currentNode.offsetParent}var targetRect=target.getBoundingClientRect(),relativeRect=document.body.getBoundingClientRect();return{top:targetRect.top-relativeRect.top+margins.top,left:targetRect.left-relativeRect.left+margins.left}},Position.prototype.findRelative=function(reference,target,placement){var referenceOffset=this.getRelativeOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findAbsolute=function(reference,target,placement){var referenceOffset=this.getAbsoluteOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPosition=function(reference,target,placement,offsetFunction){void 0===offsetFunction&&(offsetFunction=this.getAbsoluteOffset.bind(this));var referenceOffset=offsetFunction(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPositionAt=function(offset,target,placement){return this.calculatePosition(offset,{top:0,left:0,height:0,width:0},target,placement)},Position.prototype.getPlacementBox=function(target,position){var targetBottom=target.offsetHeight+position.top,targetRight=target.offsetWidth+position.left;return{top:position.top,bottom:targetBottom,left:position.left,right:targetRight}},Position.prototype.addOffset=function(position,top,left){return void 0===top&&(top=0),void 0===left&&(left=0),Object.assign({},position,{top:position.top+top,left:position.left+left})},Position.prototype.setElement=function(element,position){element.style.top=position.top+"px",element.style.left=position.left+"px"},Position.prototype.findBestPlacement=function(reference,target,placements,containerFunction,positionFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this)),void 0===positionFunction&&(positionFunction=this.findPosition.bind(this));var weightedPlacements=placements.map((function(placement){var pos=positionFunction(reference,target,placement),box=_this.getPlacementBox(target,pos),hiddenHeight=0,hiddenWidth=0,container=containerFunction();box.top<container.top?hiddenHeight=container.top-box.top:box.bottom>container.height&&(hiddenHeight=box.bottom-container.height),box.left<container.left?hiddenWidth=container.left-box.left:box.right>container.width&&(hiddenWidth=box.right-container.width),hiddenHeight&&!hiddenWidth?hiddenWidth=1:hiddenWidth&&!hiddenHeight&&(hiddenHeight=1);var area=target.offsetHeight*target.offsetWidth;return{placement,weight:(area-hiddenHeight*hiddenWidth)/area}}));return weightedPlacements.sort((function(a,b){return b.weight-a.weight})),weightedPlacements[0].placement},Position.prototype.findBestPlacementAt=function(offset,target,placements,containerFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this));return this.findBestPlacement(null,target,placements,containerFunction,(function(_,target,placement){return _this.findPositionAt(offset,target,placement)}))},Position.prototype.defaultContainerFunction=function(){return{top:0,left:0,height:windowRef.innerHeight,width:windowRef.innerWidth}},Position.prototype.calculatePosition=function(referenceOffset,referenceRect,target,placement){return this.positions[placement]?this.positions[placement](referenceOffset,target,referenceRect):(console.error("No function found for placement, defaulting to 0,0"),{left:0,top:0})},Position}(),position=new Position;const __WEBPACK_DEFAULT_EXPORT__=Position},"./src/modal/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{IX:()=>BaseModal,JF:()=>ModalButtonType,zk:()=>ModalModule,Z7:()=>ModalService});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let BaseModal=class BaseModal{constructor(){this.close=new core.EventEmitter,this.open=!1}closeModal(){this.close.emit()}};BaseModal.propDecorators={close:[{type:core.Output}],open:[{type:core.Input}]},BaseModal=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsBaseModal], [ibmBaseModal]"})],BaseModal);let AlertModal=class AlertModal extends BaseModal{constructor(type="default",label,title,content,size,hasScrollingContent=null,buttons=[],onClose,showCloseButton=!0){super(),this.type=type,this.label=label,this.title=title,this.content=content,this.size=size,this.hasScrollingContent=hasScrollingContent,this.buttons=buttons,this.onClose=onClose,this.showCloseButton=showCloseButton;for(let i=0;i<this.buttons.length;i++){const button=this.buttons[i];button.id||(button.id=`alert-modal-button-${i}`),button.type||(button.type="secondary")}}ngAfterViewInit(){if(!this.modalContent)return!1;const element=this.modalContent.nativeElement;element.scrollHeight>element.clientHeight?element.tabIndex=0:element.tabIndex=-1}buttonClicked(buttonIndex){const button=this.buttons[buttonIndex];button.click&&button.click(),this.closeModal()}dismissModal(trigger){this.onClose&&!1===this.onClose(trigger)||this.closeModal()}};var AlertModalType,ModalButtonType;AlertModal.ctorParameters=()=>[{type:void 0,decorators:[{type:core.Optional},{type:core.Inject,args:["type"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["label"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["title"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["content"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["size"]}]},{type:Boolean,decorators:[{type:core.Optional},{type:core.Inject,args:["hasScrollingContent"]}]},{type:void 0,decorators:[{type:core.Optional},{type:core.Inject,args:["buttons"]}]},{type:Function,decorators:[{type:core.Optional},{type:core.Inject,args:["close"]}]},{type:void 0,decorators:[{type:core.Optional},{type:core.Inject,args:["showCloseButton"]}]}],AlertModal.propDecorators={modalContent:[{type:core.ViewChild,args:["modalContent",{static:!0}]}]},AlertModal=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-alert-modal, ibm-alert-modal",template:'\n\t\t<cds-modal\n\t\t\t[size]="size"\n\t\t\t[theme]="type"\n\t\t\t[ariaLabel]="title"\n\t\t\t[hasScrollingContent]="hasScrollingContent"\n\t\t\t[open]="open"\n\t\t\t(overlaySelected)="dismissModal(\'overlay\')">\n\t\t\t<cds-modal-header (closeSelect)="dismissModal(\'close\')" [showCloseButton]="showCloseButton">\n\t\t\t\t<p cdsModalHeaderLabel class="cds--type-delta">{{label}}</p>\n\t\t\t\t<p cdsModalHeaderHeading class="cds--type-beta">{{title}}</p>\n\t\t\t</cds-modal-header>\n\t\t\t<div cdsModalContent #modalContent>\n\t\t\t\t<p [innerHTML]="content"></p>\n\t\t\t</div>\n\t\t\t<cds-modal-footer *ngIf="buttons.length > 0">\n\t\t\t\t<ng-container *ngFor="let button of buttons; let i = index">\n\t\t\t\t\t<button\n\t\t\t\t\t\t[cdsButton]="button.type"\n\t\t\t\t\t\t(click)="buttonClicked(i)"\n\t\t\t\t\t\t[id]="button.id"\n\t\t\t\t\t\t[attr.modal-primary-focus]="(button.type.indexOf(\'primary\') !== -1 ? \'\' : null)">\n\t\t\t\t\t\t{{button.text}}\n\t\t\t\t\t</button>\n\t\t\t\t</ng-container>\n\t\t\t</cds-modal-footer>\n\t\t</cds-modal>\n\t'})],AlertModal),function(AlertModalType){AlertModalType.default="default",AlertModalType.danger="danger"}(AlertModalType||(AlertModalType={})),function(ModalButtonType){ModalButtonType.primary="primary",ModalButtonType.secondary="secondary",ModalButtonType.tertiary="tertiary",ModalButtonType.ghost="ghost",ModalButtonType.danger="danger",ModalButtonType.danger_primary="danger--primary"}(ModalButtonType||(ModalButtonType={}));let ModalFooter=class ModalFooter{};ModalFooter=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-modal-footer, ibm-modal-footer",template:'\n\t\t<footer class="cds--modal-footer">\n\t\t\t<ng-content></ng-content>\n\t\t</footer>\n\t'})],ModalFooter);var i18n=__webpack_require__("./src/i18n/index.ts"),experimental=__webpack_require__("./src/experimental/index.ts");let ModalHeader=class ModalHeader{constructor(i18n,experimental){this.i18n=i18n,this.experimental=experimental,this.theme="default",this.closeLabel=this.i18n.get().MODAL.CLOSE,this.showCloseButton=!0,this.closeSelect=new core.EventEmitter}onClose(){this.closeSelect.emit()}};ModalHeader.ctorParameters=()=>[{type:i18n.oc},{type:experimental.tM}],ModalHeader.propDecorators={theme:[{type:core.Input}],closeLabel:[{type:core.Input}],showCloseButton:[{type:core.Input}],closeSelect:[{type:core.Output}]},ModalHeader=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-modal-header, ibm-modal-header",template:'\n\t\t<header class="cds--modal-header {{theme}}">\n\t\t\t<ng-content></ng-content>\n\t\t\t<button\n\t\t\t\t*ngIf="showCloseButton"\n\t\t\t\ttype="button"\n\t\t\t\tclass="cds--modal-close"\n\t\t\t\t(click)="onClose()">\n\t\t\t\t<span class="cds--assistive-text">{{ closeLabel }}</span>\n\t\t\t\t<svg cdsIcon="close" size="20" class="cds--modal-close__icon"></svg>\n\t\t\t</button>\n\t\t</header>\n\n\t'})],ModalHeader);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),tab_service=__webpack_require__("./src/common/tab.service.ts"),placeholder=__webpack_require__("./src/placeholder/index.ts"),tap=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/tap.js"),delay=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/delay.js");let BaseModalService=class BaseModalService{constructor(placeholderService){this.placeholderService=placeholderService}create(data){data=Object.assign({},{inputs:{}},data);const inputProviders=Object.keys(data.inputs).map((inputName=>({provide:inputName,useValue:data.inputs[inputName]}))),injector=core.Injector.create({providers:inputProviders}),component=this.placeholderService.createComponent(data.component,injector);let focusedElement=document.activeElement;return setTimeout((()=>{component.instance.open=!0})),component.previouslyFocusedElement=focusedElement,component.instance.close.pipe((0,tap.b)((()=>{component.instance.open=!1})),(0,delay.g)(240)).subscribe((()=>{this.placeholderService.destroyComponent(component),BaseModalService.modalList=BaseModalService.modalList.filter((c=>c!==component))})),component.onDestroy((()=>{focusedElement.focus()})),BaseModalService.modalList.push(component),component}destroy(index=-1){index>=BaseModalService.modalList.length||0===BaseModalService.modalList.length||(index<0&&(index=BaseModalService.modalList.length-1),setTimeout((()=>{BaseModalService.modalList[index]&&(this.placeholderService.destroyComponent(BaseModalService.modalList[index]),BaseModalService.modalList.splice(index,1))}),240))}};BaseModalService.modalList=[],BaseModalService.ctorParameters=()=>[{type:placeholder.Q_}],BaseModalService=(0,tslib_es6.gn)([(0,core.Injectable)()],BaseModalService);let Modal=class Modal{constructor(modalService,document,renderer){this.modalService=modalService,this.document=document,this.renderer=renderer,this.size="md",this.theme="default",this.ariaLabel="default",this.open=!1,this.hasScrollingContent=null,this.overlaySelected=new core.EventEmitter,this.close=new core.EventEmitter,this.selectorPrimaryFocus="[modal-primary-focus]"}ngOnChanges({open}){open&&(open.currentValue?(setTimeout((()=>this.focusInitialElement()),100),this.renderer.addClass(this.document.body,"cds--body--with-modal-open")):open.currentValue?this.trigger&&this.trigger.focus():this.renderer.removeClass(this.document.body,"cds--body--with-modal-open"))}ngAfterViewInit(){this.focusInitialElement()}handleKeyboardEvent(event){switch(event.key){case"Escape":event.stopImmediatePropagation(),this.open=!1,this.close.emit(),this.modalService.destroy();break;case"Tab":(0,tab_service.nW)(event,this.modal.nativeElement)}}get shouldShowScrollbar(){const modalContent=this.modal?this.modal.nativeElement.querySelector(".cds--modal-content"):null;if(modalContent){const modalContentHeight=Math.ceil(modalContent.getBoundingClientRect().height);return modalContent.scrollHeight>modalContentHeight}return!1}ngOnDestroy(){this.renderer.removeClass(this.document.body,"cds--body--with-modal-open")}focusInitialElement(){const primaryFocusElement=this.modal.nativeElement.querySelector(this.selectorPrimaryFocus);primaryFocusElement&&primaryFocusElement.focus?setTimeout((()=>primaryFocusElement.focus())):(0,tab_service.ZW)(this.modal.nativeElement).length>0?setTimeout((()=>(0,tab_service.ZW)(this.modal.nativeElement)[0].focus())):setTimeout((()=>this.modal.nativeElement.focus()))}};Modal.ctorParameters=()=>[{type:BaseModalService},{type:Document,decorators:[{type:core.Inject,args:[common.DOCUMENT]}]},{type:core.Renderer2}],Modal.propDecorators={size:[{type:core.Input}],theme:[{type:core.Input}],ariaLabel:[{type:core.Input}],open:[{type:core.Input}],trigger:[{type:core.Input}],hasScrollingContent:[{type:core.Input}],overlaySelected:[{type:core.Output}],close:[{type:core.Output}],modal:[{type:core.ViewChild,args:["modal",{static:!0}]}],handleKeyboardEvent:[{type:core.HostListener,args:["keydown",["$event"]]}]},Modal=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-modal, ibm-modal",template:'\n\t\t<cds-overlay\n\t\t\t[theme]="theme"\n\t\t\t[open]="open"\n\t\t\t(overlaySelect)="overlaySelected.emit()">\n\t\t\t<div\n\t\t\t\tclass="cds--modal-container"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--modal-container--xs\': size === \'xs\',\n\t\t\t\t\t\'cds--modal-container--sm\': size === \'sm\',\n\t\t\t\t\t\'cds--modal-container--md\': size === \'md\',\n\t\t\t\t\t\'cds--modal-container--lg\': size === \'lg\'\n\t\t\t\t}"\n\t\t\t\trole="dialog"\n\t\t\t\taria-modal="true"\n\t\t\t\tstyle="z-index:1;"\n\t\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t\t#modal>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf="hasScrollingContent !== null ? hasScrollingContent : shouldShowScrollbar"\n\t\t\t\t\tclass="cds--modal-content--overflow-indicator">\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</cds-overlay>\n\t'})],Modal);let ModalService=class ModalService extends BaseModalService{constructor(placeholderService){super(placeholderService),this.placeholderService=placeholderService}show(data){return this.create({component:AlertModal,inputs:{type:data.type,label:data.label,title:data.title,content:data.content,hasScrollingContent:void 0!==data.hasScrollingContent?data.hasScrollingContent:null,size:data.size,buttons:data.buttons||[],close:data.close||(()=>{}),showCloseButton:data.showCloseButton}})}};ModalService.ctorParameters=()=>[{type:placeholder.Q_}],ModalService=(0,tslib_es6.gn)([(0,core.Injectable)()],ModalService);let Overlay=class Overlay{constructor(){this.theme="default",this.open=!1,this.overlaySelect=new core.EventEmitter}overlayClick(event){event.target===this.overlay.nativeElement&&(event.stopPropagation(),this.overlaySelect.emit(event))}};Overlay.propDecorators={theme:[{type:core.Input}],open:[{type:core.Input}],overlaySelect:[{type:core.Output}],overlay:[{type:core.ViewChild,args:["overlay",{static:!0}]}]},Overlay=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-overlay, ibm-overlay",template:"\n\t\t<section\n\t\t\tclass=\"cds--modal cds--modal-tall\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--modal--danger': theme === 'danger',\n\t\t\t\t'is-visible': open\n\t\t\t}\"\n\t\t\t(click)=\"overlayClick($event)\"\n\t\t\t#overlay>\n\t\t\t<ng-content></ng-content>\n\t\t</section>\n\t"})],Overlay);var src_forms=__webpack_require__("./src/forms/index.ts");let ModalContent=class ModalContent{constructor(){this.modalContentClass=!0,this.hasForm=!1}};ModalContent.propDecorators={modalContentClass:[{type:core.HostBinding,args:["class.cds--modal-content"]}],hasForm:[{type:core.HostBinding,args:["class.cds--modal-content--with-form"]},{type:core.Input}]},ModalContent=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalContent], [ibmModalContent]"})],ModalContent);let ModalContentText=class ModalContentText{constructor(){this.modalContentTextClass=!0}};ModalContentText.propDecorators={modalContentTextClass:[{type:core.HostBinding,args:["class.cds--modal-content__text"]}]},ModalContentText=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalContentText], [ibmModalContentText]"})],ModalContentText);let ModalHeaderHeading=class ModalHeaderHeading{constructor(){this.modalHeaderHeadingClass=!0}};ModalHeaderHeading.propDecorators={modalHeaderHeadingClass:[{type:core.HostBinding,args:["class.cds--modal-header__heading"]}]},ModalHeaderHeading=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalHeaderHeading], [ibmModalHeaderHeading]"})],ModalHeaderHeading);let ModalHeaderLabel=class ModalHeaderLabel{constructor(){this.modalHeaderLabelClass=!0}};ModalHeaderLabel.propDecorators={modalHeaderLabelClass:[{type:core.HostBinding,args:["class.cds--modal-header__label"]}]},ModalHeaderLabel=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalHeaderLabel], [ibmModalHeaderLabel]"})],ModalHeaderLabel);var icon=__webpack_require__("./src/icon/index.ts");let ModalModule=class ModalModule{};ModalModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[AlertModal,Modal,ModalHeader,ModalFooter,Overlay,ModalContent,ModalContentText,ModalHeaderHeading,ModalHeaderLabel,BaseModal],exports:[AlertModal,Modal,ModalHeader,ModalFooter,ModalContent,ModalContentText,ModalHeaderHeading,ModalHeaderLabel,BaseModal],providers:[BaseModalService,ModalService],imports:[common.CommonModule,src_forms.hJ,i18n.LU,placeholder.Qq,experimental.OV,icon.QX]})],ModalModule)}}]);
+"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3931],{"./node_modules/@carbon/utils-position/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{var _a,PLACEMENTS;__webpack_require__.d(__webpack_exports__,{FK:()=>position,ZP:()=>__WEBPACK_DEFAULT_EXPORT__}),function(PLACEMENTS){PLACEMENTS.LEFT="left",PLACEMENTS.RIGHT="right",PLACEMENTS.TOP="top",PLACEMENTS.BOTTOM="bottom"}(PLACEMENTS||(PLACEMENTS={}));var defaultPositions=((_a={})[PLACEMENTS.LEFT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left-target.offsetWidth)}},_a[PLACEMENTS.RIGHT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left+referenceRect.width)}},_a[PLACEMENTS.TOP]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top-target.offsetHeight),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a[PLACEMENTS.BOTTOM]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top+referenceRect.height),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a),windowRef="undefined"!=typeof window?window:{innerHeight:0,scrollY:0,innerWidth:0,scrollX:0},Position=function(){function Position(positions){void 0===positions&&(positions={}),this.positions=defaultPositions,this.positions=Object.assign({},defaultPositions,positions)}return Position.prototype.getRelativeOffset=function(target){for(var offsets={left:target.offsetLeft,top:target.offsetTop};target.offsetParent&&"static"===getComputedStyle(target.offsetParent).position;)offsets.left+=target.offsetLeft,offsets.top+=target.offsetTop,target=target.offsetParent;return offsets},Position.prototype.getAbsoluteOffset=function(target){for(var currentNode=target,margins={top:0,left:0};currentNode.offsetParent;){var computed=getComputedStyle(currentNode.offsetParent);"static"===computed.position&&computed.marginLeft&&computed.marginTop&&(parseInt(computed.marginTop,10)&&(margins.top+=parseInt(computed.marginTop,10)),parseInt(computed.marginLeft,10)&&(margins.left+=parseInt(computed.marginLeft,10))),currentNode=currentNode.offsetParent}var targetRect=target.getBoundingClientRect(),relativeRect=document.body.getBoundingClientRect();return{top:targetRect.top-relativeRect.top+margins.top,left:targetRect.left-relativeRect.left+margins.left}},Position.prototype.findRelative=function(reference,target,placement){var referenceOffset=this.getRelativeOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findAbsolute=function(reference,target,placement){var referenceOffset=this.getAbsoluteOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPosition=function(reference,target,placement,offsetFunction){void 0===offsetFunction&&(offsetFunction=this.getAbsoluteOffset.bind(this));var referenceOffset=offsetFunction(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPositionAt=function(offset,target,placement){return this.calculatePosition(offset,{top:0,left:0,height:0,width:0},target,placement)},Position.prototype.getPlacementBox=function(target,position){var targetBottom=target.offsetHeight+position.top,targetRight=target.offsetWidth+position.left;return{top:position.top,bottom:targetBottom,left:position.left,right:targetRight}},Position.prototype.addOffset=function(position,top,left){return void 0===top&&(top=0),void 0===left&&(left=0),Object.assign({},position,{top:position.top+top,left:position.left+left})},Position.prototype.setElement=function(element,position){element.style.top=position.top+"px",element.style.left=position.left+"px"},Position.prototype.findBestPlacement=function(reference,target,placements,containerFunction,positionFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this)),void 0===positionFunction&&(positionFunction=this.findPosition.bind(this));var weightedPlacements=placements.map((function(placement){var pos=positionFunction(reference,target,placement),box=_this.getPlacementBox(target,pos),hiddenHeight=0,hiddenWidth=0,container=containerFunction();box.top<container.top?hiddenHeight=container.top-box.top:box.bottom>container.height&&(hiddenHeight=box.bottom-container.height),box.left<container.left?hiddenWidth=container.left-box.left:box.right>container.width&&(hiddenWidth=box.right-container.width),hiddenHeight&&!hiddenWidth?hiddenWidth=1:hiddenWidth&&!hiddenHeight&&(hiddenHeight=1);var area=target.offsetHeight*target.offsetWidth;return{placement,weight:(area-hiddenHeight*hiddenWidth)/area}}));return weightedPlacements.sort((function(a,b){return b.weight-a.weight})),weightedPlacements[0].placement},Position.prototype.findBestPlacementAt=function(offset,target,placements,containerFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this));return this.findBestPlacement(null,target,placements,containerFunction,(function(_,target,placement){return _this.findPositionAt(offset,target,placement)}))},Position.prototype.defaultContainerFunction=function(){return{top:0,left:0,height:windowRef.innerHeight,width:windowRef.innerWidth}},Position.prototype.calculatePosition=function(referenceOffset,referenceRect,target,placement){return this.positions[placement]?this.positions[placement](referenceOffset,target,referenceRect):(console.error("No function found for placement, defaulting to 0,0"),{left:0,top:0})},Position}(),position=new Position;const __WEBPACK_DEFAULT_EXPORT__=Position},"./src/modal/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{IX:()=>BaseModal,JF:()=>ModalButtonType,zk:()=>ModalModule,Z7:()=>ModalService});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let BaseModal=class BaseModal{constructor(){this.close=new core.EventEmitter,this.open=!1}closeModal(){this.close.emit()}};BaseModal.propDecorators={close:[{type:core.Output}],open:[{type:core.Input}]},BaseModal=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsBaseModal], [ibmBaseModal]"})],BaseModal);let AlertModal=class AlertModal extends BaseModal{constructor(type="default",label,title,content,size,hasScrollingContent=null,buttons=[],onClose,showCloseButton=!0){super(),this.type=type,this.label=label,this.title=title,this.content=content,this.size=size,this.hasScrollingContent=hasScrollingContent,this.buttons=buttons,this.onClose=onClose,this.showCloseButton=showCloseButton;for(let i=0;i<this.buttons.length;i++){const button=this.buttons[i];button.id||(button.id=`alert-modal-button-${i}`),button.type||(button.type="secondary")}}ngAfterViewInit(){if(!this.modalContent)return!1;const element=this.modalContent.nativeElement;element.scrollHeight>element.clientHeight?element.tabIndex=0:element.tabIndex=-1}buttonClicked(buttonIndex){const button=this.buttons[buttonIndex];button.click&&button.click(),this.closeModal()}dismissModal(trigger){this.onClose&&!1===this.onClose(trigger)||this.closeModal()}};var AlertModalType,ModalButtonType;AlertModal.ctorParameters=()=>[{type:void 0,decorators:[{type:core.Optional},{type:core.Inject,args:["type"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["label"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["title"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["content"]}]},{type:String,decorators:[{type:core.Optional},{type:core.Inject,args:["size"]}]},{type:Boolean,decorators:[{type:core.Optional},{type:core.Inject,args:["hasScrollingContent"]}]},{type:void 0,decorators:[{type:core.Optional},{type:core.Inject,args:["buttons"]}]},{type:Function,decorators:[{type:core.Optional},{type:core.Inject,args:["close"]}]},{type:void 0,decorators:[{type:core.Optional},{type:core.Inject,args:["showCloseButton"]}]}],AlertModal.propDecorators={modalContent:[{type:core.ViewChild,args:["modalContent",{static:!0}]}]},AlertModal=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-alert-modal, ibm-alert-modal",template:'\n\t\t<cds-modal\n\t\t\t[size]="size"\n\t\t\t[theme]="type"\n\t\t\t[ariaLabel]="title"\n\t\t\t[hasScrollingContent]="hasScrollingContent"\n\t\t\t[open]="open"\n\t\t\t(overlaySelected)="dismissModal(\'overlay\')">\n\t\t\t<cds-modal-header (closeSelect)="dismissModal(\'close\')" [showCloseButton]="showCloseButton">\n\t\t\t\t<p cdsModalHeaderLabel class="cds--type-delta">{{label}}</p>\n\t\t\t\t<p cdsModalHeaderHeading class="cds--type-beta">{{title}}</p>\n\t\t\t</cds-modal-header>\n\t\t\t<div cdsModalContent #modalContent>\n\t\t\t\t<p [innerHTML]="content"></p>\n\t\t\t</div>\n\t\t\t<cds-modal-footer *ngIf="buttons.length > 0">\n\t\t\t\t<ng-container *ngFor="let button of buttons; let i = index">\n\t\t\t\t\t<button\n\t\t\t\t\t\t[cdsButton]="button.type"\n\t\t\t\t\t\t(click)="buttonClicked(i)"\n\t\t\t\t\t\t[id]="button.id"\n\t\t\t\t\t\t[attr.modal-primary-focus]="(button.type.indexOf(\'primary\') !== -1 ? \'\' : null)">\n\t\t\t\t\t\t{{button.text}}\n\t\t\t\t\t</button>\n\t\t\t\t</ng-container>\n\t\t\t</cds-modal-footer>\n\t\t</cds-modal>\n\t'})],AlertModal),function(AlertModalType){AlertModalType.default="default",AlertModalType.danger="danger"}(AlertModalType||(AlertModalType={})),function(ModalButtonType){ModalButtonType.primary="primary",ModalButtonType.secondary="secondary",ModalButtonType.tertiary="tertiary",ModalButtonType.ghost="ghost",ModalButtonType.danger="danger",ModalButtonType.danger_primary="danger--primary"}(ModalButtonType||(ModalButtonType={}));let ModalFooter=class ModalFooter{};ModalFooter=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-modal-footer, ibm-modal-footer",template:'\n\t\t<footer class="cds--modal-footer">\n\t\t\t<ng-content></ng-content>\n\t\t</footer>\n\t'})],ModalFooter);var i18n=__webpack_require__("./src/i18n/index.ts");let ModalHeader=class ModalHeader{constructor(i18n){this.i18n=i18n,this.theme="default",this.closeLabel=this.i18n.get().MODAL.CLOSE,this.showCloseButton=!0,this.closeSelect=new core.EventEmitter}onClose(){this.closeSelect.emit()}};ModalHeader.ctorParameters=()=>[{type:i18n.oc}],ModalHeader.propDecorators={theme:[{type:core.Input}],closeLabel:[{type:core.Input}],showCloseButton:[{type:core.Input}],closeSelect:[{type:core.Output}]},ModalHeader=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-modal-header, ibm-modal-header",template:'\n\t\t<header class="cds--modal-header {{theme}}">\n\t\t\t<ng-content></ng-content>\n\t\t\t<button\n\t\t\t\t*ngIf="showCloseButton"\n\t\t\t\ttype="button"\n\t\t\t\tclass="cds--modal-close"\n\t\t\t\t(click)="onClose()">\n\t\t\t\t<span class="cds--assistive-text">{{ closeLabel }}</span>\n\t\t\t\t<svg cdsIcon="close" size="20" class="cds--modal-close__icon"></svg>\n\t\t\t</button>\n\t\t</header>\n\n\t'})],ModalHeader);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),tab_service=__webpack_require__("./src/common/tab.service.ts"),placeholder=__webpack_require__("./src/placeholder/index.ts"),tap=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/tap.js"),delay=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/operators/delay.js");let BaseModalService=class BaseModalService{constructor(placeholderService){this.placeholderService=placeholderService}create(data){data=Object.assign({},{inputs:{}},data);const inputProviders=Object.keys(data.inputs).map((inputName=>({provide:inputName,useValue:data.inputs[inputName]}))),injector=core.Injector.create({providers:inputProviders}),component=this.placeholderService.createComponent(data.component,injector);let focusedElement=document.activeElement;return setTimeout((()=>{component.instance.open=!0})),component.previouslyFocusedElement=focusedElement,component.instance.close.pipe((0,tap.b)((()=>{component.instance.open=!1})),(0,delay.g)(240)).subscribe((()=>{this.placeholderService.destroyComponent(component),BaseModalService.modalList=BaseModalService.modalList.filter((c=>c!==component))})),component.onDestroy((()=>{focusedElement.focus()})),BaseModalService.modalList.push(component),component}destroy(index=-1){index>=BaseModalService.modalList.length||0===BaseModalService.modalList.length||(index<0&&(index=BaseModalService.modalList.length-1),setTimeout((()=>{BaseModalService.modalList[index]&&(this.placeholderService.destroyComponent(BaseModalService.modalList[index]),BaseModalService.modalList.splice(index,1))}),240))}};BaseModalService.modalList=[],BaseModalService.ctorParameters=()=>[{type:placeholder.Q_}],BaseModalService=(0,tslib_es6.gn)([(0,core.Injectable)()],BaseModalService);let Modal=class Modal{constructor(modalService,document,renderer){this.modalService=modalService,this.document=document,this.renderer=renderer,this.size="md",this.theme="default",this.ariaLabel="default",this.open=!1,this.hasScrollingContent=null,this.overlaySelected=new core.EventEmitter,this.close=new core.EventEmitter,this.selectorPrimaryFocus="[modal-primary-focus]"}ngOnChanges({open}){open&&(open.currentValue?(setTimeout((()=>this.focusInitialElement()),100),this.renderer.addClass(this.document.body,"cds--body--with-modal-open")):open.currentValue?this.trigger&&this.trigger.focus():this.renderer.removeClass(this.document.body,"cds--body--with-modal-open"))}ngAfterViewInit(){this.focusInitialElement()}handleKeyboardEvent(event){switch(event.key){case"Escape":event.stopImmediatePropagation(),this.open=!1,this.close.emit(),this.modalService.destroy();break;case"Tab":(0,tab_service.nW)(event,this.modal.nativeElement)}}get shouldShowScrollbar(){const modalContent=this.modal?this.modal.nativeElement.querySelector(".cds--modal-content"):null;if(modalContent){const modalContentHeight=Math.ceil(modalContent.getBoundingClientRect().height);return modalContent.scrollHeight>modalContentHeight}return!1}ngOnDestroy(){this.renderer.removeClass(this.document.body,"cds--body--with-modal-open")}focusInitialElement(){const primaryFocusElement=this.modal.nativeElement.querySelector(this.selectorPrimaryFocus);primaryFocusElement&&primaryFocusElement.focus?setTimeout((()=>primaryFocusElement.focus())):(0,tab_service.ZW)(this.modal.nativeElement).length>0?setTimeout((()=>(0,tab_service.ZW)(this.modal.nativeElement)[0].focus())):setTimeout((()=>this.modal.nativeElement.focus()))}};Modal.ctorParameters=()=>[{type:BaseModalService},{type:Document,decorators:[{type:core.Inject,args:[common.DOCUMENT]}]},{type:core.Renderer2}],Modal.propDecorators={size:[{type:core.Input}],theme:[{type:core.Input}],ariaLabel:[{type:core.Input}],open:[{type:core.Input}],trigger:[{type:core.Input}],hasScrollingContent:[{type:core.Input}],overlaySelected:[{type:core.Output}],close:[{type:core.Output}],modal:[{type:core.ViewChild,args:["modal",{static:!0}]}],handleKeyboardEvent:[{type:core.HostListener,args:["keydown",["$event"]]}]},Modal=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-modal, ibm-modal",template:'\n\t\t<cds-overlay\n\t\t\t[theme]="theme"\n\t\t\t[open]="open"\n\t\t\t(overlaySelect)="overlaySelected.emit()">\n\t\t\t<div\n\t\t\t\tclass="cds--modal-container"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--modal-container--xs\': size === \'xs\',\n\t\t\t\t\t\'cds--modal-container--sm\': size === \'sm\',\n\t\t\t\t\t\'cds--modal-container--md\': size === \'md\',\n\t\t\t\t\t\'cds--modal-container--lg\': size === \'lg\'\n\t\t\t\t}"\n\t\t\t\trole="dialog"\n\t\t\t\taria-modal="true"\n\t\t\t\tstyle="z-index:1;"\n\t\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t\t#modal>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf="hasScrollingContent !== null ? hasScrollingContent : shouldShowScrollbar"\n\t\t\t\t\tclass="cds--modal-content--overflow-indicator">\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</cds-overlay>\n\t'})],Modal);let ModalService=class ModalService extends BaseModalService{constructor(placeholderService){super(placeholderService),this.placeholderService=placeholderService}show(data){return this.create({component:AlertModal,inputs:{type:data.type,label:data.label,title:data.title,content:data.content,hasScrollingContent:void 0!==data.hasScrollingContent?data.hasScrollingContent:null,size:data.size,buttons:data.buttons||[],close:data.close||(()=>{}),showCloseButton:data.showCloseButton}})}};ModalService.ctorParameters=()=>[{type:placeholder.Q_}],ModalService=(0,tslib_es6.gn)([(0,core.Injectable)()],ModalService);let Overlay=class Overlay{constructor(){this.theme="default",this.open=!1,this.overlaySelect=new core.EventEmitter}overlayClick(event){event.target===this.overlay.nativeElement&&(event.stopPropagation(),this.overlaySelect.emit(event))}};Overlay.propDecorators={theme:[{type:core.Input}],open:[{type:core.Input}],overlaySelect:[{type:core.Output}],overlay:[{type:core.ViewChild,args:["overlay",{static:!0}]}]},Overlay=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-overlay, ibm-overlay",template:"\n\t\t<section\n\t\t\tclass=\"cds--modal cds--modal-tall\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--modal--danger': theme === 'danger',\n\t\t\t\t'is-visible': open\n\t\t\t}\"\n\t\t\t(click)=\"overlayClick($event)\"\n\t\t\t#overlay>\n\t\t\t<ng-content></ng-content>\n\t\t</section>\n\t"})],Overlay);var src_forms=__webpack_require__("./src/forms/index.ts"),experimental=__webpack_require__("./src/experimental/index.ts");let ModalContent=class ModalContent{constructor(){this.modalContentClass=!0,this.hasForm=!1}};ModalContent.propDecorators={modalContentClass:[{type:core.HostBinding,args:["class.cds--modal-content"]}],hasForm:[{type:core.HostBinding,args:["class.cds--modal-content--with-form"]},{type:core.Input}]},ModalContent=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalContent], [ibmModalContent]"})],ModalContent);let ModalContentText=class ModalContentText{constructor(){this.modalContentTextClass=!0}};ModalContentText.propDecorators={modalContentTextClass:[{type:core.HostBinding,args:["class.cds--modal-content__text"]}]},ModalContentText=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalContentText], [ibmModalContentText]"})],ModalContentText);let ModalHeaderHeading=class ModalHeaderHeading{constructor(){this.modalHeaderHeadingClass=!0}};ModalHeaderHeading.propDecorators={modalHeaderHeadingClass:[{type:core.HostBinding,args:["class.cds--modal-header__heading"]}]},ModalHeaderHeading=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalHeaderHeading], [ibmModalHeaderHeading]"})],ModalHeaderHeading);let ModalHeaderLabel=class ModalHeaderLabel{constructor(){this.modalHeaderLabelClass=!0}};ModalHeaderLabel.propDecorators={modalHeaderLabelClass:[{type:core.HostBinding,args:["class.cds--modal-header__label"]}]},ModalHeaderLabel=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsModalHeaderLabel], [ibmModalHeaderLabel]"})],ModalHeaderLabel);var icon=__webpack_require__("./src/icon/index.ts");let ModalModule=class ModalModule{};ModalModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[AlertModal,Modal,ModalHeader,ModalFooter,Overlay,ModalContent,ModalContentText,ModalHeaderHeading,ModalHeaderLabel,BaseModal],exports:[AlertModal,Modal,ModalHeader,ModalFooter,ModalContent,ModalContentText,ModalHeaderHeading,ModalHeaderLabel,BaseModal],providers:[BaseModalService,ModalService],imports:[common.CommonModule,src_forms.hJ,i18n.LU,placeholder.Qq,experimental.OV,icon.QX]})],ModalModule)}}]);