carbon-components-angular/docs/storybook/tiles-expandable-tile-stories.97c48cb1.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3402],{"./src/button/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{HL:()=>BaseIconButton,zx:()=>Button,hJ:()=>ButtonModule,uV:()=>ButtonSet,hU:()=>IconButton});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let Button=class Button{constructor(){this.cdsButton="primary",this.skeleton=!1,this.iconOnly=!1,this.isExpressive=!1,this.baseClass=!0}set ibmButton(type){this.cdsButton=type}get primaryButton(){return"primary"===this.cdsButton||!this.cdsButton}get secondaryButton(){return"secondary"===this.cdsButton}get tertiaryButton(){return"tertiary"===this.cdsButton}get ghostButton(){return"ghost"===this.cdsButton}get dangerButton(){return"danger"===this.cdsButton||"danger--primary"===this.cdsButton}get dangerTertiary(){return"danger--tertiary"===this.cdsButton}get dangerGhost(){return"danger--ghost"===this.cdsButton}get smallSize(){return"sm"===this.size&&!this.isExpressive}get mediumSize(){return"md"===this.size&&!this.isExpressive}get largeSize(){return"lg"===this.size}get extraLargeSize(){return"xl"===this.size}get twoExtraLargeSize(){return"2xl"===this.size}get smallLayoutSize(){return"sm"===this.size&&!this.isExpressive}get mediumLayoutSize(){return"md"===this.size&&!this.isExpressive}get largeLayoutSize(){return"lg"===this.size}get extraLargeLayoutSize(){return"xl"===this.size}get twoExtraLargeLayoutSize(){return"2xl"===this.size}};Button.propDecorators={ibmButton:[{type:core.Input}],cdsButton:[{type:core.Input}],size:[{type:core.Input}],skeleton:[{type:core.HostBinding,args:["class.cds--skeleton"]},{type:core.Input}],iconOnly:[{type:core.HostBinding,args:["class.cds--btn--icon-only"]},{type:core.Input}],isExpressive:[{type:core.HostBinding,args:["class.cds--btn--expressive"]},{type:core.Input}],baseClass:[{type:core.HostBinding,args:["class.cds--btn"]}],primaryButton:[{type:core.HostBinding,args:["class.cds--btn--primary"]}],secondaryButton:[{type:core.HostBinding,args:["class.cds--btn--secondary"]}],tertiaryButton:[{type:core.HostBinding,args:["class.cds--btn--tertiary"]}],ghostButton:[{type:core.HostBinding,args:["class.cds--btn--ghost"]}],dangerButton:[{type:core.HostBinding,args:["class.cds--btn--danger"]}],dangerTertiary:[{type:core.HostBinding,args:["class.cds--btn--danger--tertiary"]}],dangerGhost:[{type:core.HostBinding,args:["class.cds--btn--danger--ghost"]}],smallSize:[{type:core.HostBinding,args:["class.cds--btn--sm"]}],mediumSize:[{type:core.HostBinding,args:["class.cds--btn--md"]}],largeSize:[{type:core.HostBinding,args:["class.cds--btn--lg"]}],extraLargeSize:[{type:core.HostBinding,args:["class.cds--btn--xl"]}],twoExtraLargeSize:[{type:core.HostBinding,args:["class.cds--btn--2xl"]}],smallLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-sm"]}],mediumLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-md"]}],largeLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-lg"]}],extraLargeLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-xl"]}],twoExtraLargeLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-2xl"]}]},Button=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsButton], [ibmButton]"})],Button);let ButtonSet=class ButtonSet{constructor(){this.buttonSetClass=!0}};ButtonSet.propDecorators={buttonSetClass:[{type:core.HostBinding,args:["class.cds--btn-set"]}]},ButtonSet=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-button-set, ibm-button-set",template:"<ng-content></ng-content>"})],ButtonSet);let BaseIconButton=class BaseIconButton{constructor(){this.caret=!0,this.dropShadow=!0,this.highContrast=!0,this.isOpen=!1,this.align="bottom",this.autoAlign=!1,this.enterDelayMs=100,this.leaveDelayMs=300}};BaseIconButton.propDecorators={caret:[{type:core.Input}],dropShadow:[{type:core.Input}],highContrast:[{type:core.Input}],isOpen:[{type:core.Input}],align:[{type:core.Input}],autoAlign:[{type:core.Input}],enterDelayMs:[{type:core.Input}],leaveDelayMs:[{type:core.Input}]},BaseIconButton=(0,tslib_es6.gn)([(0,core.Component)({template:""})],BaseIconButton);let IconButton=class IconButton extends BaseIconButton{constructor(renderer){super(),this.renderer=renderer,this.buttonId="icon-btn-"+IconButton.iconButtonCounter++,this.kind="primary",this.size="lg",this.type="button",this.isExpressive=!1,this.disabled=!1,this.click=new core.EventEmitter,this.focus=new core.EventEmitter,this.blur=new core.EventEmitter,this.tooltipClick=new core.EventEmitter,this.classList={},this.attributeList={}}set buttonNgClass(obj){this.classList=Object.assign({"cds--btn--disabled":this.disabled},obj)}get buttonNgClass(){return this.classList}set buttonAttributes(obj){this.button&&(Object.keys(this.attributeList).forEach((key=>{this.renderer.removeAttribute(this.button.nativeElement,key)})),Object.keys(obj).forEach((key=>{this.renderer.setAttribute(this.button.nativeElement,key,obj[key])}))),this.attributeList=obj}get buttonAttributes(){return this.buttonAttributes}ngAfterViewInit(){this.buttonAttributes=this.attributeList}emitClickEvent(event,element="button"){event.preventDefault(),event.stopPropagation(),"tooltip"!==element?this.click.emit(event):this.tooltipClick.emit(event)}};IconButton.iconButtonCounter=0,IconButton.ctorParameters=()=>[{type:core.Renderer2}],IconButton.propDecorators={buttonNgClass:[{type:core.Input}],buttonAttributes:[{type:core.Input}],button:[{type:core.ViewChild,args:["button"]}],buttonId:[{type:core.Input}],kind:[{type:core.Input}],size:[{type:core.Input}],type:[{type:core.Input}],isExpressive:[{type:core.Input}],disabled:[{type:core.Input}],description:[{type:core.Input}],click:[{type:core.Output}],focus:[{type:core.Output}],blur:[{type:core.Output}],tooltipClick:[{type:core.Output}]},IconButton=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-icon-button, ibm-icon-button",template:'\n\t<cds-tooltip\n\t\tclass="cds--icon-tooltip"\n\t\t[description]="description"\n\t\t[disabled]="disabled"\n\t\t[caret]="caret"\n\t\t[dropShadow]="dropShadow"\n\t\t[highContrast]="highContrast"\n\t\t[isOpen]="isOpen"\n\t\t[align]="align"\n\t\t[autoAlign]="autoAlign"\n\t\t[enterDelayMs]="enterDelayMs"\n\t\t[leaveDelayMs]="leaveDelayMs"\n\t\t(click)="emitClickEvent($event, \'tooltip\')">\n\t\t<button\n\t\t\t#button\n\t\t\t[id]="buttonId"\n\t\t\t[disabled]="disabled"\n\t\t\t[attr.type]="type"\n\t\t\t[iconOnly]="true"\n\t\t\t[ngClass]="buttonNgClass"\n\t\t\t[cdsButton]="kind"\n\t\t\t[size]="size"\n\t\t\t[isExpressive]="isExpressive"\n\t\t\t(click)="emitClickEvent($event)"\n\t\t\t(focus)="focus.emit($event)"\n\t\t\t(blur)="blur.emit($event)">\n\t\t\t<ng-content></ng-content>\n\t\t</button>\n\t</cds-tooltip>\n\t'})],IconButton);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),tooltip=__webpack_require__("./src/tooltip/index.ts");let ButtonModule=class ButtonModule{};ButtonModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Button,ButtonSet,BaseIconButton,IconButton],exports:[Button,ButtonSet,IconButton],imports:[common.CommonModule,tooltip.z8]})],ButtonModule)},"./src/tiles/expandable-tile.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,Interactive:()=>Interactive,WithLayers:()=>WithLayers,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _storybook_angular__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),_layer__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/layer/index.ts"),_button__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/button/index.ts"),___WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/tiles/index.ts");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Tiles/Expandable",decorators:[(0,_storybook_angular__WEBPACK_IMPORTED_MODULE_0__.moduleMetadata)({imports:[_button__WEBPACK_IMPORTED_MODULE_2__.hJ,_layer__WEBPACK_IMPORTED_MODULE_1__.D,___WEBPACK_IMPORTED_MODULE_3__.i$]})],component:___WEBPACK_IMPORTED_MODULE_3__.wN},Basic=(args=>({props:args,template:'\n        <cds-expandable-tile>\n            <span cdsAboveFold style="height: 200px">Above the fold content here</span>\n            <span cdsBelowFold style="height: 400px">Below the fold content here</span>\n        </cds-expandable-tile>\n    '})).bind({}),Interactive=(args=>({props:args,template:'\n        <cds-expandable-tile [interactive]="true">\n            <span cdsAboveFold style="height: 200px">\n                Above the fold content\n                <button ibmButton>Click me!</button>\n            </span>\n            <span cdsBelowFold style="height: 400px">\n                Below the fold content here\n                <button ibmButton>No me!</button>\n            </span>\n        </cds-expandable-tile>\n    '})).bind({}),WithLayers=(args=>({props:args,template:'\n        <cds-expandable-tile>\n            <span cdsAboveFold style="height: 200px">\n                First Layer, above the fold content here\n            </span>\n            <span cdsBelowFold style="height: 400px">\n                First Layer, below the fold content here\n            </span>\n        </cds-expandable-tile>\n        <div cdsLayer>\n            <cds-expandable-tile>\n                <span cdsAboveFold style="height: 200px">\n                    Second layer, above the fold content here\n                </span>\n                <span cdsBelowFold style="height: 400px">\n                    Second layer, below the fold content here\n                </span>\n            </cds-expandable-tile>\n            <div cdsLayer>\n                <cds-expandable-tile>\n                    <span cdsAboveFold style="height: 200px">\n                        Third layer, above the fold content here\n                    </span>\n                    <span cdsBelowFold style="height: 400px">\n                        Third layer, below the fold content here\n                    </span>\n                </cds-expandable-tile>\n            </div>\n        </div>\n    '})).bind({});WithLayers.parameters={controls:{disable:!0}},Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-expandable-tile>\n            <span cdsAboveFold style="height: 200px">Above the fold content here</span>\n            <span cdsBelowFold style="height: 400px">Below the fold content here</span>\n        </cds-expandable-tile>\n    `\n})',...Basic.parameters?.docs?.source}}},Interactive.parameters={...Interactive.parameters,docs:{...Interactive.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-expandable-tile [interactive]="true">\n            <span cdsAboveFold style="height: 200px">\n                Above the fold content\n                <button ibmButton>Click me!</button>\n            </span>\n            <span cdsBelowFold style="height: 400px">\n                Below the fold content here\n                <button ibmButton>No me!</button>\n            </span>\n        </cds-expandable-tile>\n    `\n})',...Interactive.parameters?.docs?.source}}},WithLayers.parameters={...WithLayers.parameters,docs:{...WithLayers.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-expandable-tile>\n            <span cdsAboveFold style="height: 200px">\n                First Layer, above the fold content here\n            </span>\n            <span cdsBelowFold style="height: 400px">\n                First Layer, below the fold content here\n            </span>\n        </cds-expandable-tile>\n        <div cdsLayer>\n            <cds-expandable-tile>\n                <span cdsAboveFold style="height: 200px">\n                    Second layer, above the fold content here\n                </span>\n                <span cdsBelowFold style="height: 400px">\n                    Second layer, below the fold content here\n                </span>\n            </cds-expandable-tile>\n            <div cdsLayer>\n                <cds-expandable-tile>\n                    <span cdsAboveFold style="height: 200px">\n                        Third layer, above the fold content here\n                    </span>\n                    <span cdsBelowFold style="height: 400px">\n                        Third layer, below the fold content here\n                    </span>\n                </cds-expandable-tile>\n            </div>\n        </div>\n    `\n})',...WithLayers.parameters?.docs?.source}}};const __namedExportsOrder=["Basic","Interactive","WithLayers"]}}]);