npm - carbon-components-angular - Versions diffs - 5.57.3 → 5.57.4 - Mend

carbon-components-angular 5.57.3 → 5.57.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/docs/storybook/contained-list-contained-list-stories.b7913db8.iframe.bundle.js ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3523],{"./node_modules/@carbon/icons/es/apple/16.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>_16});var _16={elem:"svg",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",width:16,height:16},content:[{elem:"path",attrs:{d:"M21.7788,8a11.4843,11.4843,0,0,0-3.0547.5342,14.5665,14.5665,0,0,1-1.8225.4126A6.0054,6.0054,0,0,0,11,4V6a3.9933,3.9933,0,0,1,3.8267,2.9c-.5181-.0879-1.0569-.2207-1.6172-.3648A12.89,12.89,0,0,0,10.0317,8C6.311,8,4,11.0652,4,16c0,7.51,4.0679,11.999,8.0005,12h.0015a7.1576,7.1576,0,0,0,2.49-.59A5.0128,5.0128,0,0,1,16,27a5.0266,5.0266,0,0,1,1.5112.41A7.15,7.15,0,0,0,20,28h0c3.9307-.001,8-4.49,8-12C28,12.3094,26.3706,8,21.7788,8ZM20,26h0a5.5038,5.5038,0,0,1-1.7905-.4639A6.4168,6.4168,0,0,0,16,25a6.4043,6.4043,0,0,0-2.2061.5361A5.5343,5.5343,0,0,1,12,26h.0015C9.0513,25.9988,6,22.2586,6,16c0-1.8037.3931-6,4.0317-6a11.2363,11.2363,0,0,1,2.6807.4726A12.9819,12.9819,0,0,0,15.7612,11h.4922a11.7955,11.7955,0,0,0,2.9956-.5361A9.8483,9.8483,0,0,1,21.7788,10C25.7964,10,26,14.9978,26,16,26,22.2586,22.9482,25.9988,20,26Z"}},{elem:"path",attrs:{d:"M18,7H17V6a2.0021,2.0021,0,0,1,2-2h1V5A2.0021,2.0021,0,0,1,18,7Z"}}],name:"apple",size:16}},"./node_modules/@carbon/icons/es/fish/16.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>_16});var _16={elem:"svg",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",width:16,height:16},content:[{elem:"circle",attrs:{cx:"24",cy:"7",r:"1"}},{elem:"path",attrs:{d:"M26,2A16.0183,16.0183,0,0,0,10,18v2H3a1,1,0,0,0-.707,1.707l8,8A1,1,0,0,0,12,29V22h2A16.0183,16.0183,0,0,0,30,6V2ZM10,26.5857,5.4141,22H10ZM12,20V18a13.9394,13.9394,0,0,1,3.908-9.6777l7.77,7.7695A13.94,13.94,0,0,1,14,20ZM28,6a13.9163,13.9163,0,0,1-2.98,8.6055L17.3945,6.98A13.9163,13.9163,0,0,1,26,4h2Z"}}],name:"fish",size:16}},"./node_modules/@carbon/icons/es/strawberry/16.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>_16});var _16={elem:"svg",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",width:16,height:16},content:[{elem:"path",attrs:{d:"M9 10H11V12H9zM9 14H11V16H9zM13 12H15V14H13z"}},{elem:"path",attrs:{d:"M9 28a5.169 5.169 0 01-.7441-.054A5.0935 5.0935 0 014 22.8669V11.1985a7.1615 7.1615 0 016.31-7.1653 6.9607 6.9607 0 014.4643 1.0706l7.9688 4.9807a6.98 6.98 0 01-.6885 12.19l-10.88 5.2285A4.9765 4.9765 0 019 28zM11.002 6q-.2484 0-.5005.0241A5.1463 5.1463 0 006 11.1985V22.8669a3.0839 3.0839 0 002.5435 3.1 3.0266 3.0266 0 001.7622-.2649l10.8828-5.23a4.9807 4.9807 0 00.4887-8.6958L13.7046 6.7935A4.9687 4.9687 0 0011.002 6zM26 7H22a4.0045 4.0045 0 01-4-4V2h2V3a2.0021 2.0021 0 002 2h4z"}}],name:"strawberry",size:16}},"./node_modules/@carbon/icons/es/subtract--alt/16.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>_16});var _16={elem:"svg",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",width:16,height:16},content:[{elem:"path",attrs:{d:"M16,4c6.6,0,12,5.4,12,12s-5.4,12-12,12S4,22.6,4,16S9.4,4,16,4 M16,2C8.3,2,2,8.3,2,16s6.3,14,14,14s14-6.3,14-14\tS23.7,2,16,2z"}},{elem:"path",attrs:{d:"M8 15H24V17H8z"}}],name:"subtract--alt",size:16}},"./node_modules/@carbon/icons/es/wheat/16.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>_16});var _16={elem:"svg",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",width:16,height:16},content:[{elem:"path",attrs:{d:"M21,3V5.5857l-4,4V1H15V9.5857l-4-4V3H9V19a7.004,7.004,0,0,0,6,6.92V30h2V25.92A7.004,7.004,0,0,0,23,19V3ZM15,23.8987A5.008,5.008,0,0,1,11,19v-2.586l4,4Zm0-6.313-4-4V8.4138l4,4Zm2-5.1719,4-4v5.1719l-4,4Zm0,11.4849V20.4138l4-4V19A5.008,5.008,0,0,1,17,23.8987Z"}}],name:"wheat",size:16}},"./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/layer/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>LayerDirective,D:()=>LayerModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let LayerDirective=class LayerDirective{set ibmLayer(level){this.cdsLayer=level}set cdsLayer(level){"number"==typeof level&&(this._passedLevel=level,this.layer=level)}get cdsLayer(){return this._passedLevel}set layer(level){"number"==typeof level&&(this._level=Math.max(0,Math.min(level,2)),this.layerChildren&&this.layerChildren.forEach((layer=>{layer!==this&&(layer.layer="number"==typeof layer._passedLevel?layer._passedLevel:this.layer+1)})))}get layer(){return this._level}get layerOneClass(){return 0===this.layer}get layerTwoClass(){return 1===this.layer}get layerThreeClass(){return 2===this.layer}ngAfterContentInit(){"number"!=typeof this.cdsLayer&&(this.layer=1)}};LayerDirective.propDecorators={ibmLayer:[{type:core.Input}],cdsLayer:[{type:core.Input}],layerOneClass:[{type:core.HostBinding,args:["class.cds--layer-one"]}],layerTwoClass:[{type:core.HostBinding,args:["class.cds--layer-two"]}],layerThreeClass:[{type:core.HostBinding,args:["class.cds--layer-three"]}],layerChildren:[{type:core.ContentChildren,args:[LayerDirective,{descendants:!1}]}]},LayerDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsLayer], [ibmLayer]",exportAs:"layer"})],LayerDirective);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let LayerModule=class LayerModule{};LayerModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[LayerDirective],exports:[LayerDirective],imports:[common.CommonModule]})],LayerModule)},"./src/layout/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{x:()=>LayoutModule,s:()=>StackDirective});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");let StackDirective=class StackDirective{constructor(render,hostElement){this.render=render,this.hostElement=hostElement,this.cdsStack="vertical"}get isHorizontal(){return"horizontal"===this.cdsStack}get isVertical(){return"vertical"===this.cdsStack||!this.cdsStack}set ibmStack(type){this.cdsStack=type}set gap(num){void 0!==num&&(this.render.removeClass(this.hostElement.nativeElement,`cds--stack-scale-${this._gap}`),this.render.addClass(this.hostElement.nativeElement,`cds--stack-scale-${num}`),this._gap=num)}};StackDirective.ctorParameters=()=>[{type:core.Renderer2},{type:core.ElementRef}],StackDirective.propDecorators={isHorizontal:[{type:core.HostBinding,args:["class.cds--stack-horizontal"]}],isVertical:[{type:core.HostBinding,args:["class.cds--stack-vertical"]}],ibmStack:[{type:core.Input}],cdsStack:[{type:core.Input}],gap:[{type:core.Input}]},StackDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsStack], [ibmStack]"})],StackDirective);let LayoutModule=class LayoutModule{};LayoutModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[StackDirective],exports:[StackDirective],imports:[common.CommonModule]})],LayoutModule)},"./src/search/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{o:()=>Search,t:()=>SearchModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),search_componentngResource=__webpack_require__("./src/search/search.component.html?ngResource"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),i18n=__webpack_require__("./src/i18n/index.ts");let Search=class Search{constructor(elementRef,i18n){this.elementRef=elementRef,this.i18n=i18n,this.theme="dark",this.size="md",this.disabled=!1,this.toolbar=!1,this.expandable=!1,this.skeleton=!1,this.active=!1,this.tableSearch=!1,this.id=`search-${Search.searchCount}`,this.value="",this.autocomplete="on",this.label=this.i18n.get().SEARCH.LABEL,this.placeholder=this.i18n.get().SEARCH.PLACEHOLDER,this.clearButtonTitle=this.i18n.get().SEARCH.CLEAR_BUTTON,this.searchTitle="",this.fluid=!1,this.valueChange=new core.EventEmitter,this.open=new core.EventEmitter,this.clear=new core.EventEmitter,this.search=new core.EventEmitter,this.isComposing=!1,this.onTouched=()=>{},this.propagateChange=_=>{},Search.searchCount++}get containerClass(){return!(this.toolbar||this.expandable)}get fluidSkeletonClass(){return this.skeleton&&this.fluid}writeValue(value){this.value=value}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouched=fn}onSearch(search){this.isComposing||(this.value=search,this.doValueChange())}onEnter(){this.search.emit(this.value)}clearSearch(){this.value="",this.clear.emit(),this.propagateChange(this.value)}doValueChange(){this.valueChange.emit(this.value),this.propagateChange(this.value)}openSearch(){this.active=!0,this.open.emit(this.active),setTimeout((()=>this.inputRef.nativeElement.focus()))}keyDown(event){(this.toolbar||this.expandable)&&("Escape"===event.key?""===this.value&&(this.active=!1,this.open.emit(this.active)):"Enter"===event.key&&this.openSearch()),"Escape"===event.key&&""!==this.value&&this.clearSearch()}focusOut(event){this.onTouched(),(this.expandable||this.toolbar)&&this.inputRef&&""===this.inputRef.nativeElement.value&&!this.elementRef.nativeElement.contains(event.relatedTarget)&&(this.active=!1,this.open.emit(this.active))}focusIn(event){this.onTouched(),!this.expandable&&!this.toolbar||!this.inputRef||event.relatedTarget||this.elementRef.nativeElement.contains(event.relatedTarget)||this.openSearch()}compositionStart(event){this.isComposing=!0}compositionEnd(event){this.isComposing=!1,this.onSearch(this.value+event.data)}};Search.searchCount=0,Search.ctorParameters=()=>[{type:core.ElementRef},{type:i18n.oc}],Search.propDecorators={containerClass:[{type:core.HostBinding,args:["class.cds--form-item"]}],fluidSkeletonClass:[{type:core.HostBinding,args:["class.cds--text-input--fluid__skeleton"]}],theme:[{type:core.Input}],size:[{type:core.Input}],disabled:[{type:core.Input}],toolbar:[{type:core.Input}],expandable:[{type:core.Input}],skeleton:[{type:core.Input}],active:[{type:core.Input}],tableSearch:[{type:core.Input}],name:[{type:core.Input}],id:[{type:core.Input}],required:[{type:core.Input}],value:[{type:core.Input}],autocomplete:[{type:core.Input}],label:[{type:core.Input}],placeholder:[{type:core.Input}],clearButtonTitle:[{type:core.Input}],searchTitle:[{type:core.Input}],ariaLabel:[{type:core.Input}],fluid:[{type:core.Input}],valueChange:[{type:core.Output}],open:[{type:core.Output}],clear:[{type:core.Output}],search:[{type:core.Output}],inputRef:[{type:core.ViewChild,args:["input"]}],keyDown:[{type:core.HostListener,args:["keydown",["$event"]]}],focusOut:[{type:core.HostListener,args:["focusout",["$event"]]}],focusIn:[{type:core.HostListener,args:["focusin",["$event"]]}],compositionStart:[{type:core.HostListener,args:["compositionstart",["$event"]]}],compositionEnd:[{type:core.HostListener,args:["compositionend",["$event"]]}]},Search=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-search, ibm-search",template:search_componentngResource,providers:[{provide:fesm2020_forms.JU,useExisting:Search,multi:!0}]})],Search);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let SearchModule=class SearchModule{};SearchModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Search],exports:[Search],imports:[fesm2020_forms.u5,common.CommonModule,i18n.LU,icon.QX]})],SearchModule)},"./src/tag/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Vp:()=>Tag,Wh:()=>TagModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let Tag=class Tag{constructor(){this.type="gray",this.size="md",this.class="",this.skeleton=!1}get attrClass(){const skeletonClass=this.skeleton?"cds--skeleton":"",sizeClass=`cds--tag--${this.size} cds--layout--size-${this.size}`;return`cds--tag cds--tag--${this.type} ${sizeClass} ${skeletonClass} ${this.class}`}};Tag.propDecorators={type:[{type:core.Input}],size:[{type:core.Input}],class:[{type:core.Input}],skeleton:[{type:core.Input}],attrClass:[{type:core.HostBinding,args:["attr.class"]}]},Tag=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tag, ibm-tag",template:'\n\t\t<ng-container *ngIf="!skeleton">\n\t\t\t<ng-content select="[cdsTagIcon],[ibmTagIcon]"></ng-content>\n\t\t\t<span class="cds--tag__label">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t</ng-container>\n\t'})],Tag);let TagFilter=class TagFilter extends Tag{constructor(){super(...arguments),this.closeButtonLabel="Clear Filter",this.disabled=!1,this.close=new core.EventEmitter,this.click=new core.EventEmitter}onClick(event){event.stopImmediatePropagation(),this.disabled||this.click.emit({action:"click"})}onClose(event){event.stopImmediatePropagation(),this.click.emit({action:"close"}),this.close.emit()}get attrClass(){const disabledClass=this.disabled?"cds--tag--disabled":"",sizeClass=`cds--tag--${this.size} cds--layout--size-${this.size}`,skeletonClass=this.skeleton?"cds--skeleton":"";return`cds--tag cds--tag--filter cds--tag--${this.type} ${disabledClass} ${sizeClass} ${skeletonClass} ${this.class}`}get attrAriaLabel(){return`${this.title||""} ${this.closeButtonLabel}`.trim()}};TagFilter.propDecorators={closeButtonLabel:[{type:core.Input}],disabled:[{type:core.Input}],title:[{type:core.Input}],close:[{type:core.Output}],click:[{type:core.Output}],attrClass:[{type:core.HostBinding,args:["attr.class"]}],attrAriaLabel:[{type:core.HostBinding,args:["attr.aria-label"]}]},TagFilter=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tag-filter, ibm-tag-filter",template:'\n\t\t<ng-container *ngIf="!skeleton">\n\t\t\t<ng-content select="[cdsTagIcon],[ibmTagIcon]"></ng-content>\n\t\t\t<span\n\t\t\t\tclass="cds--tag__label"\n\t\t\t\t[attr.title]="title ? title : null"\n\t\t\t\t(click)="onClick($event)">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t\t<button\n\t\t\t\tclass="cds--tag__close-icon"\n\t\t\t\t(click)="onClose($event)"\n\t\t\t\t[disabled]="disabled"\n\t\t\t\t[title]="closeButtonLabel">\n\t\t\t\t<span class="cds--visually-hidden">{{closeButtonLabel}}</span>\n\t\t\t\t<svg cdsIcon="close" size="16"></svg>\n\t\t\t</button>\n\t\t</ng-container>\n\t'})],TagFilter);let TagIconDirective=class TagIconDirective{constructor(){this.tagIcon=!0}};TagIconDirective.propDecorators={tagIcon:[{type:core.HostBinding,args:["class.cds--tag__custom-icon"]}]},TagIconDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsTagIcon], [ibmTagIcon]"})],TagIconDirective);let TagSelectableComponent=class TagSelectableComponent{constructor(){this.role="button",this.buttonType="button",this.tabIndex=0,this.size="md",this.skeleton=!1,this.disabled=!1,this.class="",this.selected=!1,this.selectedChange=new core.EventEmitter}get ariaPressed(){return this.selected}onClick(){this.selected=!this.selected,this.selectedChange.emit(this.selected)}get attrClass(){const disabledClass=this.disabled?"cds--tag--disabled":"",sizeClass=`cds--tag--${this.size} cds--layout--size-${this.size}`,skeletonClass=this.skeleton?"cds--skeleton":"";return`cds--tag cds--tag--selectable ${this.selected?"cds--tag--selectable-selected":""} ${disabledClass} ${sizeClass} ${skeletonClass} ${this.class}`}};TagSelectableComponent.propDecorators={role:[{type:core.HostBinding,args:["attr.role"]}],buttonType:[{type:core.HostBinding,args:["attr.type"]}],tabIndex:[{type:core.HostBinding,args:["attr.tabindex"]}],ariaPressed:[{type:core.HostBinding,args:["attr.aria-pressed"]}],size:[{type:core.Input}],skeleton:[{type:core.Input}],disabled:[{type:core.Input}],class:[{type:core.Input}],selected:[{type:core.Input}],selectedChange:[{type:core.Output}],onClick:[{type:core.HostListener,args:["click"]}],attrClass:[{type:core.HostBinding,args:["attr.class"]}]},TagSelectableComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tag-selectable, ibm-tag-selectable",template:'\n\t\t<ng-container *ngIf="!skeleton">\n\t\t\t<ng-content select="[cdsTagIcon],[ibmTagIcon]"></ng-content>\n\t\t\t<span class="cds--tag__label">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t</ng-container>\n\t',changeDetection:core.ChangeDetectionStrategy.OnPush})],TagSelectableComponent);let TagOperationalComponent=class TagOperationalComponent extends Tag{constructor(){super(...arguments),this.role="button",this.buttonType="button",this.tabIndex=0,this.disabled=!1}get attrClass(){const disabledClass=this.disabled?"cds--tag--disabled":"",sizeClass=`cds--tag--${this.size} cds--layout--size-${this.size}`,skeletonClass=this.skeleton?"cds--skeleton":"";return`cds--tag cds--tag--operational cds--tag--${this.type} ${disabledClass} ${sizeClass} ${skeletonClass} ${this.class}`}};TagOperationalComponent.propDecorators={role:[{type:core.HostBinding,args:["attr.role"]}],buttonType:[{type:core.HostBinding,args:["attr.type"]}],tabIndex:[{type:core.HostBinding,args:["attr.tabindex"]}],disabled:[{type:core.Input}],attrClass:[{type:core.HostBinding,args:["attr.class"]}]},TagOperationalComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tag-operational, ibm-tag-operational",template:'\n\t\t<ng-container *ngIf="!skeleton">\n\t\t\t<ng-content select="[cdsTagIcon],[ibmTagIcon]"></ng-content>\n\t\t\t<span class="cds--tag__label">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t</ng-container>\n\t',changeDetection:core.ChangeDetectionStrategy.OnPush})],TagOperationalComponent);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let TagModule=class TagModule{};TagModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Tag,TagFilter,TagIconDirective,TagSelectableComponent,TagOperationalComponent],exports:[Tag,TagFilter,TagIconDirective,TagSelectableComponent,TagOperationalComponent],imports:[common.CommonModule,icon.QX]})],TagModule)},"./src/contained-list/contained-list.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,basic:()=>basic,default:()=>contained_list_stories,disclosed:()=>disclosed,usageExamples:()=>usageExamples,withActions:()=>withActions,withActionsAndContextData:()=>withActionsAndContextData,withIcons:()=>withIcons,withInteractiveItems:()=>withInteractiveItems,withInteractiveItemsAndActions:()=>withInteractiveItemsAndActions,withLayer:()=>withLayer,withListTitleDecorators:()=>withListTitleDecorators});var ContainedListSize,ContainedListKind,dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");!function(ContainedListSize){ContainedListSize.Small="sm",ContainedListSize.Medium="md",ContainedListSize.Large="lg",ContainedListSize.ExtraLarge="xl"}(ContainedListSize||(ContainedListSize={})),function(ContainedListKind){ContainedListKind.OnPage="on-page",ContainedListKind.Disclosed="disclosed"}(ContainedListKind||(ContainedListKind={}));let ContainedList=class ContainedList{constructor(){this.isInset=!1,this.kind=ContainedListKind.OnPage,this.size=ContainedListSize.Large,this.labelId=`contained-list-${ContainedList.count++}-header`,this.ContainedListSize=ContainedListSize,this.ContainedListKind=ContainedListKind}isTemplate(value){return value instanceof core.TemplateRef}};ContainedList.count=0,ContainedList.propDecorators={action:[{type:core.Input}],actionData:[{type:core.Input}],isInset:[{type:core.Input}],kind:[{type:core.Input}],label:[{type:core.Input}],size:[{type:core.Input}],labelId:[{type:core.Input}]},ContainedList=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-contained-list, ibm-contained-list",template:'\n\t\t<div\n\t\t\tclass="cds--contained-list"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--contained-list--inset-rulers\': isInset,\n\t\t\t\t\'cds--contained-list--on-page\': kind === ContainedListKind.OnPage,\n\t\t\t\t\'cds--contained-list--disclosed\': kind === ContainedListKind.Disclosed,\n\t\t\t\t\'cds--contained-list--sm\': size === ContainedListSize.Small,\n\t\t\t\t\'cds--contained-list--md\': size === ContainedListSize.Medium,\n\t\t\t\t\'cds--contained-list--lg\': size === ContainedListSize.Large,\n\t\t\t\t\'cds--contained-list--xl\': size === ContainedListSize.ExtraLarge,\n\t\t\t\t\'cds--layout--size-sm\': size === ContainedListSize.Small,\n\t\t\t\t\'cds--layout--size-md\': size === ContainedListSize.Medium,\n\t\t\t\t\'cds--layout--size-lg\': size === ContainedListSize.Large,\n\t\t\t\t\'cds--layout--size-xl\': size === ContainedListSize.ExtraLarge\n\t\t\t}">\n\t\t\t<div class="cds--contained-list__header">\n\t\t\t\t<div [id]="labelId" class="cds--contained-list__label">\n\t\t\t\t\t<ng-container *ngIf="!isTemplate(label)">{{ label }}</ng-container>\n\t\t\t\t\t<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>\n\t\t\t\t</div>\n\n\t\t\t\t<div class="cds--contained-list__action" *ngIf="action">\n\t\t\t\t\t<ng-template [ngTemplateOutlet]="action" [ngTemplateOutletContext]="{ $implicit: actionData }"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div role="list" [attr.aria-labelledby]="labelId">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</div>\n\t',changeDetection:core.ChangeDetectionStrategy.OnPush})],ContainedList);let ContainedListItem=class ContainedListItem{constructor(){this.disabled=!1,this.click=new core.EventEmitter,this.itemClass=!0,this.role="listitem"}get itemClickableClass(){return this.clickable}get itemWithIconClass(){return!!this.icon}onClick(){this.click.emit()}isTemplate(value){return value instanceof core.TemplateRef}};ContainedListItem.propDecorators={action:[{type:core.Input}],actionData:[{type:core.Input}],disabled:[{type:core.Input}],clickable:[{type:core.Input}],icon:[{type:core.Input}],click:[{type:core.Output}],itemClass:[{type:core.HostBinding,args:["class.cds--contained-list-item"]}],role:[{type:core.HostBinding,args:["attr.role"]}],itemClickableClass:[{type:core.HostBinding,args:["class.cds--contained-list-item--clickable"]}],itemWithIconClass:[{type:core.HostBinding,args:["class.cds--contained-list-item--with-icon"]}]},ContainedListItem=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-contained-list-item, ibm-contained-list-item",template:'\n\t\t<ng-container *ngIf="clickable">\n\t\t\t<button\n\t\t\t\tclass="cds--contained-list-item__content"\n\t\t\t\ttype="button"\n\t\t\t\t[disabled]="disabled"\n\t\t\t\t(click)="onClick()">\n\t\t\t\t<ng-content select="[cdsContainedListItemButton],[ibmContainedListItemButton]"></ng-content>\n\t\t\t</button>\n\t\t</ng-container>\n\t\t<ng-container *ngIf="!clickable">\n\t\t\t<div class="cds--contained-list-item__content">\n\t\t\t\t<div *ngIf="icon" class="cds--contained-list-item__icon">\n\t\t\t\t\t<ng-container *ngIf="!isTemplate(icon)"><svg [ibmIcon]="icon" size="16"></svg></ng-container>\n\t\t\t\t\t<ng-template *ngIf="isTemplate(icon)" [ngTemplateOutlet]="icon"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</ng-container>\n\t\t<div class="cds--contained-list-item__action" *ngIf="action">\n\t\t\t<ng-template [ngTemplateOutlet]="action" [ngTemplateOutletContext]="{ $implicit: actionData }"></ng-template>\n\t\t</div>\n\t',changeDetection:core.ChangeDetectionStrategy.OnPush})],ContainedListItem);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let ContainedListModule=class ContainedListModule{};ContainedListModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[ContainedList,ContainedListItem],exports:[ContainedList,ContainedListItem],imports:[common.CommonModule,icon.QX]})],ContainedListModule);var src_button=__webpack_require__("./src/button/index.ts"),src_layer=__webpack_require__("./src/layer/index.ts"),layout=__webpack_require__("./src/layout/index.ts"),tag=__webpack_require__("./src/tag/index.ts"),dialog=__webpack_require__("./src/dialog/index.ts"),tooltip=__webpack_require__("./src/tooltip/index.ts"),search=__webpack_require__("./src/search/index.ts"),icon_service=__webpack_require__("./src/icon/icon.service.ts"),_16=__webpack_require__("./node_modules/@carbon/icons/es/apple/16.js"),fish_16=__webpack_require__("./node_modules/@carbon/icons/es/fish/16.js"),strawberry_16=__webpack_require__("./node_modules/@carbon/icons/es/strawberry/16.js"),subtract_alt_16=__webpack_require__("./node_modules/@carbon/icons/es/subtract--alt/16.js"),wheat_16=__webpack_require__("./node_modules/@carbon/icons/es/wheat/16.js");let ContainedListStoryModule=class ContainedListStoryModule{constructor(iconService){this.iconService=iconService,this.iconService.registerAll([_16.Z,fish_16.Z,strawberry_16.Z,subtract_alt_16.Z,wheat_16.Z])}};ContainedListStoryModule.ctorParameters=()=>[{type:icon_service.C6}],ContainedListStoryModule=(0,tslib_es6.gn)([(0,core.NgModule)({imports:[common.CommonModule]})],ContainedListStoryModule);const contained_list_stories={title:"Components/Contained List",decorators:[(0,dist.moduleMetadata)({imports:[ContainedListModule,ContainedListStoryModule,src_button.hJ,icon.QX,src_layer.D,layout.x,tag.Wh,dialog.Su,tooltip.z8,search.t]})],component:ContainedList,subcomponents:{ContainedListItem},args:{isInset:!1,kind:ContainedListKind.OnPage,label:"List title",size:ContainedListSize.Large},argTypes:{label:{type:{name:"string",required:!0}},action:{table:{disable:!0}}}},basic=(()=>({template:'\n <cds-contained-list label="List title">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n <cds-contained-list label="List title">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n '})).bind({}),usageExamples=(()=>({template:'\n <ng-template #add let-item>\n <ibm-icon-button\n type="button"\n kind="primary"\n align="left"\n description="Add">\n <svg class="cds--btn__icon" ibmIcon="add" size="16"></svg>\n </ibm-icon-button>\n </ng-template>\n <ng-template #overflowMenu let-item>\n <ibm-tooltip class="cds--icon-tooltip" description="Options" align="left">\n <ibm-overflow-menu [flip]="true" [customTrigger]="customTrigger" triggerClass="cds--toolbar-action" [offset]="{ x: 0, y: 0 }">\n <ibm-overflow-menu-option>View details</ibm-overflow-menu-option>\n <ibm-overflow-menu-option>Edit</ibm-overflow-menu-option>\n <ibm-overflow-menu-option [divider]="true" type="danger">Remove</ibm-overflow-menu-option>\n </ibm-overflow-menu>\n </ibm-tooltip>\n </ng-template>\n <cds-contained-list label="List title" [action]="add">\n <cds-contained-list-item [action]="overflowMenu">List item</cds-contained-list-item>\n <cds-contained-list-item [action]="overflowMenu">List item</cds-contained-list-item>\n <cds-contained-list-item [action]="overflowMenu">List item</cds-contained-list-item>\n </cds-contained-list>\n\n <ng-template #addGhost let-item>\n <ibm-icon-button\n type="button"\n kind="ghost"\n align="left"\n description="Add">\n <svg class="cds--btn__icon" ibmIcon="add" size="16"></svg>\n </ibm-icon-button>\n </ng-template>\n <cds-contained-list label="List title" [action]="addGhost">\n <cds-contained-list-item>\n List item\n <br />\n <span class="cds--label cds--label--no-margin">\n Description text\n </span>\n </cds-contained-list-item>\n <cds-contained-list-item>\n List item\n <br />\n <span class="cds--label cds--label--no-margin">\n Description text\n </span>\n </cds-contained-list-item>\n <cds-contained-list-item>\n List item\n <br />\n <span class="cds--label cds--label--no-margin">\n Description text\n </span>\n </cds-contained-list-item>\n </cds-contained-list>\n\n <cds-contained-list label="List title">\n <cds-contained-list-item>\n <div style="display: \'grid\'; gridTemplateColumns: repeat(3, 1fr); columnGap: 1rem">\n <span>List item</span>\n <span>List item details</span>\n <span>List item details</span>\n </div>\n </cds-contained-list-item>\n <cds-contained-list-item>\n <div style="display: \'grid\'; gridTemplateColumns: repeat(3, 1fr); columnGap: 1rem">\n <span>List item</span>\n <span>List item details</span>\n <span>List item details</span>\n </div>\n </cds-contained-list-item>\n <cds-contained-list-item>\n <div style="display: \'grid\'; gridTemplateColumns: repeat(3, 1fr); columnGap: 1rem">\n <span>List item</span>\n <span>List item details</span>\n <span>List item details</span>\n </div>\n </cds-contained-list-item>\n </cds-contained-list>\n '})).bind({}),disclosed=(()=>({template:'\n <cds-contained-list label="List title" kind="disclosed">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n <cds-contained-list label="List title" kind="disclosed">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n '})).bind({}),withActions=(()=>({template:'\n <ng-template #action let-item>\n <button\n ibmButton="ghost"\n aria-label="Action"\n iconOnly="true">\n <svg ibmIcon="subtract--alt" size="16" class="cds--btn__icon"></svg>\n </button>\n </ng-template>\n\n <cds-contained-list label="List title" [size]="size">\n <cds-contained-list-item [action]="action">List item</cds-contained-list-item>\n <cds-contained-list-item [action]="action">List item</cds-contained-list-item>\n <cds-contained-list-item [action]="action">List item</cds-contained-list-item>\n <cds-contained-list-item [action]="action">List item</cds-contained-list-item>\n </cds-contained-list>\n '})).bind({}),withActionsAndContextData=args=>({props:args={...args,items:[{id:1,label:"List Item"},{id:2,label:"List Item"},{id:3,label:"List Item"},{id:4,label:"List Item"}],onActionClick:item=>{alert(`${item.label} ${item.id} action click triggered`)}},template:'\n <ng-template #actionWithClick let-actionData>\n <button\n ibmButton="ghost"\n aria-label="Action"\n iconOnly="true"\n (click)="onActionClick(actionData)">\n <svg ibmIcon="add" size="16" class="cds--btn__icon"></svg>\n </button>\n </ng-template>\n <cds-contained-list label="List title" [size]="size">\n <cds-contained-list-item\n *ngFor="let item of items"\n [action]="actionWithClick"\n [actionData]="item">\n {{ item.label }} {{ item.id }}\n </cds-contained-list-item>\n </cds-contained-list>\n '}),withIcons=(()=>({template:'\n <ng-template #apple let-icon>\n <svg ibmIcon="apple" size="16"></svg>\n </ng-template>\n\n <ng-template #wheat let-icon>\n <svg ibmIcon="wheat" size="16"></svg>\n </ng-template>\n\n <cds-contained-list label="List title">\n <cds-contained-list-item [icon]="apple">List item</cds-contained-list-item>\n <cds-contained-list-item [icon]="wheat">List item</cds-contained-list-item>\n <cds-contained-list-item icon="strawberry">List item</cds-contained-list-item>\n <cds-contained-list-item icon="fish">List item</cds-contained-list-item>\n </cds-contained-list>\n '})).bind({}),withInteractiveItems=(()=>({template:'\n <cds-contained-list label="List title">\n <cds-contained-list-item [clickable]="true">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true" [disabled]="true">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n </cds-contained-list>\n '})).bind({}),withInteractiveItemsAndActions=(()=>({template:'\n <ng-template #action let-item>\n <button\n aria-label="Action"\n ibmButton="ghost"\n iconOnly="true">\n <svg ibmIcon="subtract--alt" size="16" class="cds--btn__icon"></svg>\n </button>\n </ng-template>\n <ng-template #search>\n <cds-search [expandable]="true" size="lg"></cds-search>\n </ng-template>\n <cds-contained-list label="List title" [action]="search">\n <cds-contained-list-item [clickable]="true" [action]="action">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true" [action]="action">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true" [action]="action">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true" [action]="action">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n </cds-contained-list>\n '})).bind({}),withLayer=(()=>({template:'\n <div ibmStack="vertical" [gap]="5">\n <cds-contained-list label="List title">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n <div [ibmLayer]="1">\n <div ibmStack="vertical" [gap]="5">\n <cds-contained-list label="List title">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n <div [ibmLayer]="2">\n <cds-contained-list label="List title">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n </div>\n </div>\n </div>\n </div>\n '})).bind({}),withListTitleDecorators=(()=>({template:'\n <ng-template #label let-item>\n <div style="display: flex; alignItems: center; justifyContent: space-between">\n <span>List title</span>\n <ibm-tag size="sm">4</ibm-tag>\n </div>\n </ng-template>\n <cds-contained-list [label]="label">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n '})).bind({});basic.parameters={...basic.parameters,docs:{...basic.parameters?.docs,source:{originalSource:'() => ({\n template: `\n <cds-contained-list label="List title">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n <cds-contained-list label="List title">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n `\n})',...basic.parameters?.docs?.source}}},usageExamples.parameters={...usageExamples.parameters,docs:{...usageExamples.parameters?.docs,source:{originalSource:'() => ({\n template: `\n <ng-template #add let-item>\n <ibm-icon-button\n type="button"\n kind="primary"\n align="left"\n description="Add">\n <svg class="cds--btn__icon" ibmIcon="add" size="16"></svg>\n </ibm-icon-button>\n </ng-template>\n <ng-template #overflowMenu let-item>\n <ibm-tooltip class="cds--icon-tooltip" description="Options" align="left">\n <ibm-overflow-menu [flip]="true" [customTrigger]="customTrigger" triggerClass="cds--toolbar-action" [offset]="{ x: 0, y: 0 }">\n <ibm-overflow-menu-option>View details</ibm-overflow-menu-option>\n <ibm-overflow-menu-option>Edit</ibm-overflow-menu-option>\n <ibm-overflow-menu-option [divider]="true" type="danger">Remove</ibm-overflow-menu-option>\n </ibm-overflow-menu>\n </ibm-tooltip>\n </ng-template>\n <cds-contained-list label="List title" [action]="add">\n <cds-contained-list-item [action]="overflowMenu">List item</cds-contained-list-item>\n <cds-contained-list-item [action]="overflowMenu">List item</cds-contained-list-item>\n <cds-contained-list-item [action]="overflowMenu">List item</cds-contained-list-item>\n </cds-contained-list>\n\n <ng-template #addGhost let-item>\n <ibm-icon-button\n type="button"\n kind="ghost"\n align="left"\n description="Add">\n <svg class="cds--btn__icon" ibmIcon="add" size="16"></svg>\n </ibm-icon-button>\n </ng-template>\n <cds-contained-list label="List title" [action]="addGhost">\n <cds-contained-list-item>\n List item\n <br />\n <span class="cds--label cds--label--no-margin">\n Description text\n </span>\n </cds-contained-list-item>\n <cds-contained-list-item>\n List item\n <br />\n <span class="cds--label cds--label--no-margin">\n Description text\n </span>\n </cds-contained-list-item>\n <cds-contained-list-item>\n List item\n <br />\n <span class="cds--label cds--label--no-margin">\n Description text\n </span>\n </cds-contained-list-item>\n </cds-contained-list>\n\n <cds-contained-list label="List title">\n <cds-contained-list-item>\n <div style="display: \'grid\'; gridTemplateColumns: repeat(3, 1fr); columnGap: 1rem">\n <span>List item</span>\n <span>List item details</span>\n <span>List item details</span>\n </div>\n </cds-contained-list-item>\n <cds-contained-list-item>\n <div style="display: \'grid\'; gridTemplateColumns: repeat(3, 1fr); columnGap: 1rem">\n <span>List item</span>\n <span>List item details</span>\n <span>List item details</span>\n </div>\n </cds-contained-list-item>\n <cds-contained-list-item>\n <div style="display: \'grid\'; gridTemplateColumns: repeat(3, 1fr); columnGap: 1rem">\n <span>List item</span>\n <span>List item details</span>\n <span>List item details</span>\n </div>\n </cds-contained-list-item>\n </cds-contained-list>\n `\n})',...usageExamples.parameters?.docs?.source}}},disclosed.parameters={...disclosed.parameters,docs:{...disclosed.parameters?.docs,source:{originalSource:'() => ({\n template: `\n <cds-contained-list label="List title" kind="disclosed">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n <cds-contained-list label="List title" kind="disclosed">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n `\n})',...disclosed.parameters?.docs?.source}}},withActions.parameters={...withActions.parameters,docs:{...withActions.parameters?.docs,source:{originalSource:'() => ({\n template: `\n <ng-template #action let-item>\n <button\n ibmButton="ghost"\n aria-label="Action"\n iconOnly="true">\n <svg ibmIcon="subtract--alt" size="16" class="cds--btn__icon"></svg>\n </button>\n </ng-template>\n\n <cds-contained-list label="List title" [size]="size">\n <cds-contained-list-item [action]="action">List item</cds-contained-list-item>\n <cds-contained-list-item [action]="action">List item</cds-contained-list-item>\n <cds-contained-list-item [action]="action">List item</cds-contained-list-item>\n <cds-contained-list-item [action]="action">List item</cds-contained-list-item>\n </cds-contained-list>\n `\n})',...withActions.parameters?.docs?.source}}},withActionsAndContextData.parameters={...withActionsAndContextData.parameters,docs:{...withActionsAndContextData.parameters?.docs,source:{originalSource:'args => {\n args = {\n ...args,\n items: [{\n id: 1,\n label: "List Item"\n }, {\n id: 2,\n label: "List Item"\n }, {\n id: 3,\n label: "List Item"\n }, {\n id: 4,\n label: "List Item"\n }],\n onActionClick: (item: any) => {\n alert(`${item.label} ${item.id} action click triggered`);\n }\n };\n return {\n props: args,\n template: `\n <ng-template #actionWithClick let-actionData>\n <button\n ibmButton="ghost"\n aria-label="Action"\n iconOnly="true"\n (click)="onActionClick(actionData)">\n <svg ibmIcon="add" size="16" class="cds--btn__icon"></svg>\n </button>\n </ng-template>\n <cds-contained-list label="List title" [size]="size">\n <cds-contained-list-item\n *ngFor="let item of items"\n [action]="actionWithClick"\n [actionData]="item">\n {{ item.label }} {{ item.id }}\n </cds-contained-list-item>\n </cds-contained-list>\n `\n };\n}',...withActionsAndContextData.parameters?.docs?.source}}},withIcons.parameters={...withIcons.parameters,docs:{...withIcons.parameters?.docs,source:{originalSource:'() => ({\n template: `\n <ng-template #apple let-icon>\n <svg ibmIcon="apple" size="16"></svg>\n </ng-template>\n\n <ng-template #wheat let-icon>\n <svg ibmIcon="wheat" size="16"></svg>\n </ng-template>\n\n <cds-contained-list label="List title">\n <cds-contained-list-item [icon]="apple">List item</cds-contained-list-item>\n <cds-contained-list-item [icon]="wheat">List item</cds-contained-list-item>\n <cds-contained-list-item icon="strawberry">List item</cds-contained-list-item>\n <cds-contained-list-item icon="fish">List item</cds-contained-list-item>\n </cds-contained-list>\n `\n})',...withIcons.parameters?.docs?.source}}},withInteractiveItems.parameters={...withInteractiveItems.parameters,docs:{...withInteractiveItems.parameters?.docs,source:{originalSource:'() => ({\n template: `\n <cds-contained-list label="List title">\n <cds-contained-list-item [clickable]="true">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true" [disabled]="true">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n </cds-contained-list>\n `\n})',...withInteractiveItems.parameters?.docs?.source}}},withInteractiveItemsAndActions.parameters={...withInteractiveItemsAndActions.parameters,docs:{...withInteractiveItemsAndActions.parameters?.docs,source:{originalSource:'() => ({\n template: `\n <ng-template #action let-item>\n <button\n aria-label="Action"\n ibmButton="ghost"\n iconOnly="true">\n <svg ibmIcon="subtract--alt" size="16" class="cds--btn__icon"></svg>\n </button>\n </ng-template>\n <ng-template #search>\n <cds-search [expandable]="true" size="lg"></cds-search>\n </ng-template>\n <cds-contained-list label="List title" [action]="search">\n <cds-contained-list-item [clickable]="true" [action]="action">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true" [action]="action">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true" [action]="action">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n <cds-contained-list-item [clickable]="true" [action]="action">\n <ng-container ibmContainedListItemButton>List item</ng-container>\n </cds-contained-list-item>\n </cds-contained-list>\n `\n})',...withInteractiveItemsAndActions.parameters?.docs?.source}}},withLayer.parameters={...withLayer.parameters,docs:{...withLayer.parameters?.docs,source:{originalSource:'() => ({\n template: `\n <div ibmStack="vertical" [gap]="5">\n <cds-contained-list label="List title">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n <div [ibmLayer]="1">\n <div ibmStack="vertical" [gap]="5">\n <cds-contained-list label="List title">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n <div [ibmLayer]="2">\n <cds-contained-list label="List title">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n </div>\n </div>\n </div>\n </div>\n `\n})',...withLayer.parameters?.docs?.source}}},withListTitleDecorators.parameters={...withListTitleDecorators.parameters,docs:{...withListTitleDecorators.parameters?.docs,source:{originalSource:'() => ({\n template: `\n <ng-template #label let-item>\n <div style="display: flex; alignItems: center; justifyContent: space-between">\n <span>List title</span>\n <ibm-tag size="sm">4</ibm-tag>\n </div>\n </ng-template>\n <cds-contained-list [label]="label">\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n <cds-contained-list-item>List item</cds-contained-list-item>\n </cds-contained-list>\n `\n})',...withListTitleDecorators.parameters?.docs?.source}}};const __namedExportsOrder=["basic","usageExamples","disclosed","withActions","withActionsAndContextData","withIcons","withInteractiveItems","withInteractiveItemsAndActions","withLayer","withListTitleDecorators"]},"./src/search/search.component.html?ngResource":module=>{module.exports='<div\n\tclass="cds--search"\n\t[ngClass]="{\n\t\t\'cds--search--sm\': size === \'sm\',\n\t\t\'cds--search--md\': size === \'md\',\n\t\t\'cds--search--lg\': size === \'lg\',\n\t\t\'cds--search--light\': theme === \'light\',\n\t\t\'cds--skeleton\': skeleton && !fluid,\n\t\t\'cds--search--expandable\': expandable && !tableSearch,\n\t\t\'cds--search--expanded\': expandable && !tableSearch && active,\n\t\t\'cds--toolbar-search\': toolbar && !expandable,\n\t\t\'cds--toolbar-search--active\': toolbar && !expandable && active,\n\t\t\'cds--toolbar-search-container-persistent\': tableSearch && !expandable,\n\t\t\'cds--toolbar-search-container-expandable\': tableSearch && expandable,\n\t\t\'cds--toolbar-search-container-active\': tableSearch && expandable && active,\n\t\t\'cds--search--fluid\': fluid,\n\t\t\'cds--search--disabled\': disabled\n\t}"\n\trole="search"\n\t[attr.aria-label]="ariaLabel"\n\t(click)="openSearch()">\n\t<label\n\t\tclass="cds--label"\n\t\t[for]="id"\n\t\t[ngClass]="{ \'cds--skeleton\': skeleton && fluid }">\n\t\t{{ !skeleton ? label : \'\'}}\n\t</label>\n\n\t<div *ngIf="skeleton; else enableInput" class="cds--text-input cds--skeleton"></div>\n\t<ng-template #enableInput>\n\t\t<input\n\t\t\t#input\n\t\t\tclass="cds--search-input"\n\t\t\t[type]="tableSearch || !toolbar ? \'text\' : \'search\'"\n\t\t\t[id]="id"\n\t\t\t[value]="value"\n\t\t\t[autocomplete]="autocomplete"\n\t\t\t[placeholder]="placeholder"\n\t\t\t[disabled]="disabled"\n\t\t\t[required]="required"\n\t\t\t(input)="onSearch($event.target.value)"\n\t\t\t(keyup.enter)="onEnter()"/>\n\t\t<button\n\t\t\t*ngIf="!tableSearch && toolbar"\n\t\t\tclass="cds--toolbar-search__btn"\n\t\t\t(click)="openSearch()"\n\t\t\taria-label="Open search">\n\t\t\t<svg cdsIcon="search" size="16" class="cds--search-magnifier-icon"></svg>\n\t\t</button>\n\t\t<svg\n\t\t\tcdsIcon="search"\n\t\t\t*ngIf="tableSearch || !toolbar"\n\t\t\tclass="cds--search-magnifier-icon"\n\t\t\tsize="16">\n\t\t</svg>\n\t</ng-template>\n\n\t<button\n\t\t*ngIf="tableSearch || !toolbar"\n\t\tclass="cds--search-close"\n\t\t[ngClass]="{\n\t\t\t\'cds--search-close--hidden\': !value || value.length === 0\n\t\t}"\n\t\t[title]="clearButtonTitle"\n\t\t(click)="clearSearch()">\n\t\t<span class="cds--visually-hidden">{{ clearButtonTitle }}</span>\n\t\t<svg cdsIcon="close" size="16"></svg>\n\t</button>\n</div>\n'}}]);

package/docs/storybook/iframe.html CHANGED Viewed

@@ -348,8 +348,8 @@
             window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":true};</script><script type="module">import './sb-preview/runtime.js';
-      import './runtime~main.9e428f42.iframe.bundle.js';
+      import './runtime~main.530d4cf0.iframe.bundle.js';
       import './5478.5fc19af5.iframe.bundle.js';
-      import './main.23328ef9.iframe.bundle.js';</script></body></html>
+      import './main.c0bb6f79.iframe.bundle.js';</script></body></html>