carbon-components-angular 5.22.1 → 5.23.1

package/docs/storybook/toggletip-toggletip-stories.7265233d.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[703],{"./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)},"./node_modules/@storybook/angular/dist/client/argsToTemplate.js":(__unused_webpack_module,exports)=>{Object.defineProperty(exports,"__esModule",{value:!0}),exports.argsToTemplate=void 0,exports.argsToTemplate=function argsToTemplate(args,options={}){const includeSet=options.include?new Set(options.include):null,excludeSet=options.exclude?new Set(options.exclude):null;return Object.entries(args).filter((([key])=>void 0!==args[key])).filter((([key])=>includeSet?includeSet.has(key):!excludeSet||!excludeSet.has(key))).map((([key,value])=>"function"==typeof value?`(${key})="${key}($event)"`:`[${key}]="${key}"`)).join(" ")}},"./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.argsToTemplate=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}});var argsToTemplate_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/argsToTemplate.js");Object.defineProperty(exports,"argsToTemplate",{enumerable:!0,get:function(){return argsToTemplate_1.argsToTemplate}})},"./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 preview_api_1=__webpack_require__("@storybook/preview-api"),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,preview_api_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__,"applicationConfig")&&__webpack_require__.d(__webpack_exports__,{applicationConfig:function(){return _client_index__WEBPACK_IMPORTED_MODULE_0__.applicationConfig}}),__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}})},"./src/toggletip/toggletip.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,WithAutoAlign:()=>WithAutoAlign,__namedExportsOrder:()=>__namedExportsOrder,default:()=>toggletip_stories});var dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),src_link=__webpack_require__("./src/link/index.ts"),src_button=__webpack_require__("./src/button/index.ts"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let ToggletipAction=class ToggletipAction{constructor(){this.toggleTipActions=!0}};ToggletipAction.propDecorators={toggleTipActions:[{type:core.HostBinding,args:["class.cds--toggletip-actions"]}]},ToggletipAction=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsToggletipAction], [ibmToggletipAction]"})],ToggletipAction);let ToggletipButton=class ToggletipButton{constructor(){this.toggletipButton=!0,this.toggletipButtonType="button",this.ariaLabel="Show information"}};ToggletipButton.propDecorators={toggletipButton:[{type:core.HostBinding,args:["class.cds--toggletip-button"]}],toggletipButtonType:[{type:core.HostBinding,args:["attr.type"]}],ariaLabel:[{type:core.HostBinding,args:["attr.aria-label"]},{type:core.Input}]},ToggletipButton=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsToggletipButton], [ibmToggletipButton]"})],ToggletipButton);let ToggletipContent=class ToggletipContent{constructor(){this.toggletipContent=!0}};ToggletipContent.propDecorators={toggletipContent:[{type:core.HostBinding,args:["class.cds--toggletip-content"]}]},ToggletipContent=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsToggletipContent], [ibmToggletipContent]"})],ToggletipContent);let ToggletipLabel=class ToggletipLabel{constructor(){this.toggleTipLabel=!0}};ToggletipLabel.propDecorators={toggleTipLabel:[{type:core.HostBinding,args:["class.cds--toggletip-label"]}]},ToggletipLabel=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsToggletipLabel], [ibmToggletipLabel]"})],ToggletipLabel);var fromEvent=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/observable/fromEvent.js"),popover=__webpack_require__("./src/popover/index.ts");let Toggletip=class Toggletip extends popover.OI{constructor(hostElement,ngZone,renderer,changeDetectorRef){super(hostElement,ngZone,renderer,changeDetectorRef),this.hostElement=hostElement,this.ngZone=ngZone,this.renderer=renderer,this.changeDetectorRef=changeDetectorRef,this.id="tooltip-"+Toggletip.toggletipCounter++,this.toggletipClass=!0,this.isOpen=!1,this.documentClick=this.handleFocusOut.bind(this),this.highContrast=!0,this.dropShadow=!1}ngAfterViewInit(){this.initializeReferences(),(0,fromEvent.R)(this.btn.nativeElement,"click").subscribe((event=>{this.isOpen?document.removeEventListener("click",this.documentClick):document.addEventListener("click",this.documentClick),this.handleExpansion(!this.isOpen,event)})),this.isOpen&&document.addEventListener("click",this.documentClick),this.btn&&this.renderer.setAttribute(this.btn.nativeElement,"aria-controls",this.id)}hostkeys(event){open&&"Escape"===event.key&&(event.stopPropagation(),this.handleExpansion(!1,event))}handleFocusOut(event){this.hostElement.nativeElement.contains(event.target)||this.handleExpansion(!1,event)}handleExpansion(state=!1,event){this.handleChange(state,event),this.btn&&this.renderer.setAttribute(this.btn.nativeElement,"aria-expanded",this.isOpen.toString())}};Toggletip.toggletipCounter=0,Toggletip.ctorParameters=()=>[{type:core.ElementRef},{type:core.NgZone},{type:core.Renderer2},{type:core.ChangeDetectorRef}],Toggletip.propDecorators={id:[{type:core.Input}],toggletipClass:[{type:core.HostBinding,args:["class.cds--toggletip"]}],isOpen:[{type:core.HostBinding,args:["class.cds--toggletip--open"]},{type:core.Input}],btn:[{type:core.ContentChild,args:[ToggletipButton,{read:core.ElementRef}]}],hostkeys:[{type:core.HostListener,args:["keyup",["$event"]]}]},Toggletip=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-toggletip, ibm-toggletip",changeDetection:core.ChangeDetectionStrategy.OnPush,template:'\n\t\t<ng-content select="[cdsToggletipButton]"></ng-content>\n\t\t<cds-popover-content>\n\t\t\t<ng-content select="[cdsToggletipContent]"></ng-content>\n\t\t</cds-popover-content>\n\t'})],Toggletip);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let ToggletipModule=class ToggletipModule{};ToggletipModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Toggletip,ToggletipLabel,ToggletipAction,ToggletipButton,ToggletipContent],exports:[Toggletip,ToggletipLabel,ToggletipAction,ToggletipButton,ToggletipContent],imports:[common.CommonModule,popover.UU]})],ToggletipModule);const toggletip_stories={title:"Components/Toggletip",decorators:[(0,dist.moduleMetadata)({imports:[ToggletipModule,src_link.L,src_button.hJ]})],args:{isOpen:!0,align:"bottom",autoAlign:!1},argTypes:{autoAlign:{control:!1},onOpen:{control:"Opened!"},onClose:{control:"Closed!"},isOpenChange:{control:"Is Open Change!"},align:{options:["top","bottom","left","right"],control:"select"}},component:Toggletip,subcomponents:{ToggletipAction,ToggletipButton,ToggletipContent,ToggletipLabel}},Basic=(args=>({props:args,template:'\n        <span cdsToggletipLabel>Toggletip label</span>\n        <cds-toggletip\n            [isOpen]="isOpen"\n            [align]="align"\n            (isOpenChange)="isOpenChange($event)"\n            (onClose)="onClose($event)"\n            (onOpen)="onOpen($event)">\n            <button cdsToggletipButton>\n                <svg preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32">\n                    <path d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z"></path>\n                </svg>\n            </button>\n            <div cdsToggletipContent>\n                <p>\n                    Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n                    do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n                </p>\n                <div cdsToggletipAction>\n                    <a href="#" cdsLink>Link action</a>\n                    <button cdsButton size="sm">Some button</button>\n                </div>\n            </div>\n        </cds-toggletip>\n    ',styles:["\n        .tooltip-trigger {\n            box-sizing: border-box;\n            margin: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 2rem;\n            height: 2rem;\n            background: white;\n            border: 1px solid var(--cds-border-subtle);\n            cursor: pointer;\n        }\n        svg { fill: var(--cds-background-inverse); }\n    "]})).bind({});Basic.parameters={docs:{story:{inline:!1,height:"30rem"}},layout:"centered"};const WithAutoAlign=(args=>({props:args,template:'\n        <div style="height:3000px">\n            Scrolling will update the position of the popover:\n            <div style="position: absolute; top: 500px; left: 500px;">\n            <span cdsToggletipLabel>Toggletip label</span>\n                <cds-toggletip\n                    [isOpen]="isOpen"\n                    [align]="align"\n                    [autoAlign]="true"\n                    (isOpenChange)="isOpenChange($event)"\n                    (onClose)="onClose($event)"\n                    (onOpen)="onOpen($event)">\n                    <button cdsToggletipButton>\n                        <svg preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32">\n                            <path d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z"></path>\n                        </svg>\n                    </button>\n                    <div cdsToggletipContent>\n                        <p>\n                            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n                            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n                        </p>\n                        <div cdsToggletipAction>\n                            <a href="#" cdsLink>Link action</a>\n                            <button cdsButton size="sm">Some button</button>\n                        </div>\n                    </div>\n                </cds-toggletip>\n            </div>\n        </div>\n    ',styles:["\n        .tooltip-trigger {\n            box-sizing: border-box;\n            margin: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 2rem;\n            height: 2rem;\n            background: white;\n            border: 1px solid var(--cds-border-subtle);\n            cursor: pointer;\n        }\n        svg { fill: var(--cds-background-inverse); }\n    "]})).bind({});WithAutoAlign.args={autoAlign:!0,align:"top"},Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <span cdsToggletipLabel>Toggletip label</span>\n        <cds-toggletip\n            [isOpen]="isOpen"\n            [align]="align"\n            (isOpenChange)="isOpenChange($event)"\n            (onClose)="onClose($event)"\n            (onOpen)="onOpen($event)">\n            <button cdsToggletipButton>\n                <svg preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32">\n                    <path d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z"></path>\n                </svg>\n            </button>\n            <div cdsToggletipContent>\n                <p>\n                    Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n                    do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n                </p>\n                <div cdsToggletipAction>\n                    <a href="#" cdsLink>Link action</a>\n                    <button cdsButton size="sm">Some button</button>\n                </div>\n            </div>\n        </cds-toggletip>\n    `,\n  styles: [`\n        .tooltip-trigger {\n            box-sizing: border-box;\n            margin: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 2rem;\n            height: 2rem;\n            background: white;\n            border: 1px solid var(--cds-border-subtle);\n            cursor: pointer;\n        }\n        svg { fill: var(--cds-background-inverse); }\n    `]\n})',...Basic.parameters?.docs?.source}}},WithAutoAlign.parameters={...WithAutoAlign.parameters,docs:{...WithAutoAlign.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div style="height:3000px">\n            Scrolling will update the position of the popover:\n            <div style="position: absolute; top: 500px; left: 500px;">\n            <span cdsToggletipLabel>Toggletip label</span>\n                <cds-toggletip\n                    [isOpen]="isOpen"\n                    [align]="align"\n                    [autoAlign]="true"\n                    (isOpenChange)="isOpenChange($event)"\n                    (onClose)="onClose($event)"\n                    (onOpen)="onOpen($event)">\n                    <button cdsToggletipButton>\n                        <svg preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32">\n                            <path d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z"></path>\n                        </svg>\n                    </button>\n                    <div cdsToggletipContent>\n                        <p>\n                            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n                            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n                        </p>\n                        <div cdsToggletipAction>\n                            <a href="#" cdsLink>Link action</a>\n                            <button cdsButton size="sm">Some button</button>\n                        </div>\n                    </div>\n                </cds-toggletip>\n            </div>\n        </div>\n    `,\n  styles: [`\n        .tooltip-trigger {\n            box-sizing: border-box;\n            margin: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 2rem;\n            height: 2rem;\n            background: white;\n            border: 1px solid var(--cds-border-subtle);\n            cursor: pointer;\n        }\n        svg { fill: var(--cds-background-inverse); }\n    `]\n})',...WithAutoAlign.parameters?.docs?.source}}};const __namedExportsOrder=["Basic","WithAutoAlign"]}}]);

package/docs/storybook/tooltip-definition-tooptip-stories.af07fda0.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[6274],{"./src/popover/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{OI:()=>PopoverContainer,yk:()=>PopoverContent,UU:()=>PopoverModule});var asyncToGenerator=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),floating_ui_dom=__webpack_require__("./node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs"),floating_ui_core=__webpack_require__("./node_modules/@floating-ui/core/dist/floating-ui.core.mjs");let PopoverContainer=class PopoverContainer{constructor(elementRef,ngZone,renderer,changeDetectorRef){this.elementRef=elementRef,this.ngZone=ngZone,this.renderer=renderer,this.changeDetectorRef=changeDetectorRef,this._align="bottom",this.alignmentClassPrefix="cds--popover--",this.onClose=new core.EventEmitter,this.onOpen=new core.EventEmitter,this.isOpenChange=new core.EventEmitter,this.caret=!0,this.dropShadow=!0,this.highContrast=!1,this.autoAlign=!1,this.containerClass=!0,this.isOpen=!1}set align(alignment){if(!alignment)return;const previousAlignment=this._align;switch(alignment){case"top-left":this._align="top-start";break;case"top-right":this._align="top-end";break;case"bottom-left":this._align="bottom-start";break;case"bottom-right":this._align="bottom-end";break;case"left-top":this._align="left-start";break;case"left-bottom":this._align="left-end";break;case"right-top":this._align="right-start";break;case"right-bottom":this._align="right-end";break;default:this._align=alignment}this.updateAlignmentClass(this._align,previousAlignment)}handleChange(open,event){if(this.isOpen!==open&&event&&this.isOpenChange.emit(open),open){if(event&&this.onOpen.emit(event),this.autoAlign){if(this.caretRef){const computedStyle=getComputedStyle(this.caretRef),offset=computedStyle.getPropertyValue("--cds-popover-offset"),height=computedStyle.getPropertyValue("--cds-popover-caret-height");this.caretOffset=(offset?.includes("px")?Number(offset.split("px",1)[0]):16*Number(offset.split("rem",1)[0]))||10,this.caretHeight=(height?.includes("px")?Number(height.split("px",1)[0]):16*Number(height.split("rem",1)[0]))||6}this.elementRef.nativeElement&&this.popoverContentRef&&(this.unmountFloatingElement=(0,floating_ui_dom.Me)(this.elementRef.nativeElement,this.popoverContentRef,this.recomputePosition.bind(this)))}}else this.cleanUp(),event&&this.onClose.emit(event);this.isOpen=open,this.changeDetectorRef.markForCheck()}roundByDPR(value){const dpr=window.devicePixelRatio||1;return Math.round(value*dpr)/dpr}recomputePosition(){var _this=this;this.ngZone.runOutsideAngular((0,asyncToGenerator.Z)((function*(){const{x,y,placement,middlewareData}=yield(0,floating_ui_dom.oo)(_this.elementRef.nativeElement,_this.popoverContentRef,{placement:_this._align,strategy:"fixed",middleware:[(0,floating_ui_core.cv)(_this.caretOffset),(0,floating_ui_dom.RR)({fallbackAxisSideDirection:"start"}),(0,floating_ui_dom.x7)({element:_this.caretRef})]}),previousAlignment=_this._align;if(_this._align=placement,_this.updateAlignmentClass(_this._align,previousAlignment),Object.assign(_this.popoverContentRef.style,{position:"fixed",top:"0",left:"0",transform:`translate(${_this.roundByDPR(x)}px,${_this.roundByDPR(y)}px)`}),middlewareData.arrow){const{x:arrowX,y:arrowY}=middlewareData.arrow,staticSide={top:"bottom",right:"left",bottom:"top",left:"right"}[placement.split("-")[0]];_this.caretRef.style.left=null!=arrowX?`${arrowX}px`:"",_this.caretRef.style.top=null!=arrowY?`${arrowY}px`:"",_this.caretRef.style.right="",_this.caretRef.style.bottom="",staticSide&&(_this.caretRef.style[staticSide]=-_this.caretHeight+"px")}})))}ngOnChanges(changes){const originalState=this.isOpen;this.handleChange(!1),changes.autoAlign&&!changes.autoAlign.firstChange&&(this.popoverContentRef=this.elementRef.nativeElement.querySelector(".cds--popover-content"),this.popoverContentRef.setAttribute("style",""),this.caretRef=this.elementRef.nativeElement.querySelector("span.cds--popover-caret")),this.handleChange(originalState)}ngAfterViewInit(){this.initializeReferences()}initializeReferences(){this.updateAlignmentClass(this._align),this.popoverContentRef=this.elementRef.nativeElement.querySelector(".cds--popover-content"),this.caretRef=this.elementRef.nativeElement.querySelector("span.cds--popover-caret"),this.handleChange(this.isOpen)}ngOnDestroy(){this.cleanUp()}cleanUp(){this.unmountFloatingElement&&this.unmountFloatingElement(),this.unmountFloatingElement=void 0}updateAlignmentClass(newAlignment,previousAlignment){if(this.elementRef.nativeElement&&previousAlignment!==newAlignment){const regexp=new RegExp("right|top|left|bottom");this.elementRef.nativeElement.classList.forEach((className=>{regexp.test(className)&&this.renderer.removeClass(this.elementRef.nativeElement,`${className}`)})),this.renderer.addClass(this.elementRef.nativeElement,`${this.alignmentClassPrefix}${newAlignment}`)}}};PopoverContainer.ctorParameters=()=>[{type:core.ElementRef},{type:core.NgZone},{type:core.Renderer2},{type:core.ChangeDetectorRef}],PopoverContainer.propDecorators={align:[{type:core.Input}],onClose:[{type:core.Output}],onOpen:[{type:core.Output}],isOpenChange:[{type:core.Output}],caret:[{type:core.HostBinding,args:["class.cds--popover--caret"]},{type:core.Input}],dropShadow:[{type:core.HostBinding,args:["class.cds--popover--drop-shadow"]},{type:core.Input}],highContrast:[{type:core.HostBinding,args:["class.cds--popover--high-contrast"]},{type:core.Input}],autoAlign:[{type:core.HostBinding,args:["class.cds--popover--auto-align"]},{type:core.Input}],containerClass:[{type:core.HostBinding,args:["class.cds--popover-container"]}],isOpen:[{type:core.Input},{type:core.HostBinding,args:["class.cds--popover--open"]}]},PopoverContainer=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsPopover], [ibmPopover]"})],PopoverContainer);let PopoverContent=class PopoverContent{constructor(changeDetectorRef){this.changeDetectorRef=changeDetectorRef,this.popoverClass=!0,this.autoAlign=!1}ngAfterViewInit(){this.popoverContent&&(this.autoAlign=!!this.popoverContent.nativeElement.closest(".cds--popover--auto-align"),this.changeDetectorRef.detectChanges())}};PopoverContent.ctorParameters=()=>[{type:core.ChangeDetectorRef}],PopoverContent.propDecorators={popoverClass:[{type:core.HostBinding,args:["class.cds--popover"]}],popoverContent:[{type:core.ViewChild,args:["content"]}]},PopoverContent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-popover-content, ibm-popover-content",template:'\n\t\t<span class="cds--popover-content" #content>\n\t\t\t<div>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t\t<span *ngIf="autoAlign" class="cds--popover-caret cds--popover--auto-align"></span>\n\t\t</span>\n\t\t<span *ngIf="!autoAlign" class="cds--popover-caret"></span>\n\t'})],PopoverContent);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let PopoverModule=class PopoverModule{};PopoverModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[PopoverContainer,PopoverContent],exports:[PopoverContainer,PopoverContent],imports:[common.CommonModule]})],PopoverModule)},"./src/tooltip/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{u:()=>Tooltip,vD:()=>TooltipDefinition,z8:()=>TooltipModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),popover=__webpack_require__("./src/popover/index.ts");let Tooltip=class Tooltip extends popover.OI{constructor(elementRef,ngZone,renderer,changeDetectorRef){super(elementRef,ngZone,renderer,changeDetectorRef),this.elementRef=elementRef,this.ngZone=ngZone,this.renderer=renderer,this.changeDetectorRef=changeDetectorRef,this.tooltipClass=!0,this.id="tooltip-"+Tooltip.tooltipCount++,this.enterDelayMs=100,this.leaveDelayMs=300,this.disabled=!1,this.highContrast=!0,this.dropShadow=!1}mouseenter(event){setTimeout((()=>{this.handleChange(!0,event)}),this.enterDelayMs)}mouseleave(event){setTimeout((()=>{this.handleChange(!1,event)}),this.leaveDelayMs)}hostkeys(event){open&&"Escape"===event.key&&(event.stopPropagation(),this.handleChange(!1,event))}handleFocus(event){this.handleChange(!0,event)}handleFocusOut(event){this.handleChange(!1,event)}isTemplate(value){return value instanceof core.TemplateRef}ngAfterContentChecked(){if(this.wrapper){const buttonElement=this.wrapper.nativeElement.querySelector("button");buttonElement&&!buttonElement.getAttribute("aria-labelledby")&&buttonElement.setAttribute("aria-labelledby",this.id)}}};Tooltip.tooltipCount=0,Tooltip.ctorParameters=()=>[{type:core.ElementRef},{type:core.NgZone},{type:core.Renderer2},{type:core.ChangeDetectorRef}],Tooltip.propDecorators={tooltipClass:[{type:core.HostBinding,args:["class.cds--tooltip"]}],id:[{type:core.Input}],enterDelayMs:[{type:core.Input}],leaveDelayMs:[{type:core.Input}],disabled:[{type:core.Input}],description:[{type:core.Input}],wrapper:[{type:core.ViewChild,args:["contentWrapper"]}],mouseenter:[{type:core.HostListener,args:["mouseenter",["$event"]]}],mouseleave:[{type:core.HostListener,args:["mouseleave",["$event"]]}],hostkeys:[{type:core.HostListener,args:["keyup",["$event"]]}],handleFocus:[{type:core.HostListener,args:["focusin",["$event"]]}],handleFocusOut:[{type:core.HostListener,args:["focusout",["$event"]]}]},Tooltip=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tooltip, ibm-tooltip",changeDetection:core.ChangeDetectionStrategy.OnPush,template:'\n\t\t<span #contentWrapper>\n\t\t\t<ng-content></ng-content>\n\t\t</span>\n\t\t<span\n\t\t\t*ngIf="description"\n\t\t\tclass="cds--popover"\n\t\t\t[id]="id"\n\t\t\t[attr.aria-hidden]="!isOpen"\n\t\t\trole="tooltip">\n\t\t\t<ng-container *ngIf="!disabled">\n\t\t\t\t<span class="cds--popover-content cds--tooltip-content">\n\t\t\t\t\t<ng-container *ngIf="!isTemplate(description)">{{description}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf="isTemplate(description)" [ngTemplateOutlet]="description"></ng-template>\n\t\t\t\t\t<span *ngIf="autoAlign" class="cds--popover-caret cds--popover--auto-align"></span>\n\t\t\t\t</span>\n\t\t\t\t<span *ngIf="!autoAlign" class="cds--popover-caret"></span>\n\t\t\t</ng-container>\n\t\t</span>\n\t'})],Tooltip);let TooltipDefinition=class TooltipDefinition extends popover.OI{constructor(elementRef,ngZone,renderer,changeDetectorRef){super(elementRef,ngZone,renderer,changeDetectorRef),this.elementRef=elementRef,this.ngZone=ngZone,this.renderer=renderer,this.changeDetectorRef=changeDetectorRef,this.id="tooltip-definition-"+TooltipDefinition.tooltipCount++,this.highContrast=!0,this.dropShadow=!1}onBlur(event){this.handleChange(!1,event)}onClick(event){this.handleChange(!this.isOpen,event)}hostkeys(event){this.isOpen&&"Escape"===event.key&&(event.stopPropagation(),this.handleChange(!1,event))}mouseleave(event){this.handleChange(!1,event)}isTemplate(value){return value instanceof core.TemplateRef}};TooltipDefinition.tooltipCount=0,TooltipDefinition.ctorParameters=()=>[{type:core.ElementRef},{type:core.NgZone},{type:core.Renderer2},{type:core.ChangeDetectorRef}],TooltipDefinition.propDecorators={id:[{type:core.Input}],description:[{type:core.Input}],hostkeys:[{type:core.HostListener,args:["keyup",["$event"]]}],mouseleave:[{type:core.HostListener,args:["mouseleave",["$event"]]}]},TooltipDefinition=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tooltip-definition, ibm-tooltip-definition",changeDetection:core.ChangeDetectionStrategy.OnPush,template:'\n\t\t<button\n\t\t\tclass="cds--definition-term"\n\t\t\t[attr.aria-controls]="id"\n\t\t\t[attr.aria-expanded]="isOpen"\n\t\t\t(blur)="onBlur($event)"\n\t\t\t(click)="onClick($event)"\n\t\t\ttype="button">\n\t\t\t<ng-content></ng-content>\n\t\t</button>\n\t\t<span\n\t\t\t*ngIf="description"\n\t\t\tclass="cds--popover"\n\t\t\t[id]="id"\n\t\t\t[attr.aria-hidden]="isOpen"\n\t\t\trole="tooltip">\n\t\t\t<span class="cds--popover-content cds--definition-tooltip">\n\t\t\t\t<ng-container *ngIf="!isTemplate(description)">{{description}}</ng-container>\n\t\t\t\t<ng-template *ngIf="isTemplate(description)" [ngTemplateOutlet]="description"></ng-template>\n\t\t\t\t<span *ngIf="autoAlign" class="cds--popover-caret cds--popover--auto-align"></span>\n\t\t\t</span>\n\t\t\t<span *ngIf="!autoAlign" class="cds--popover-caret"></span>\n\t\t</span>\n\t'})],TooltipDefinition);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let TooltipModule=class TooltipModule{};TooltipModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Tooltip,TooltipDefinition],exports:[Tooltip,TooltipDefinition],imports:[common.CommonModule,popover.UU]})],TooltipModule)},"./node_modules/@storybook/angular/dist/client/argsToTemplate.js":(__unused_webpack_module,exports)=>{Object.defineProperty(exports,"__esModule",{value:!0}),exports.argsToTemplate=void 0,exports.argsToTemplate=function argsToTemplate(args,options={}){const includeSet=options.include?new Set(options.include):null,excludeSet=options.exclude?new Set(options.exclude):null;return Object.entries(args).filter((([key])=>void 0!==args[key])).filter((([key])=>includeSet?includeSet.has(key):!excludeSet||!excludeSet.has(key))).map((([key,value])=>"function"==typeof value?`(${key})="${key}($event)"`:`[${key}]="${key}"`)).join(" ")}},"./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.argsToTemplate=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}});var argsToTemplate_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/argsToTemplate.js");Object.defineProperty(exports,"argsToTemplate",{enumerable:!0,get:function(){return argsToTemplate_1.argsToTemplate}})},"./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 preview_api_1=__webpack_require__("@storybook/preview-api"),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,preview_api_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__,"applicationConfig")&&__webpack_require__.d(__webpack_exports__,{applicationConfig:function(){return _client_index__WEBPACK_IMPORTED_MODULE_0__.applicationConfig}}),__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}})},"./src/tooltip/definition-tooptip.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,WithAutoAlign:()=>WithAutoAlign,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _storybook_angular__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),___WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/tooltip/index.ts");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Definition Tooltip",decorators:[(0,_storybook_angular__WEBPACK_IMPORTED_MODULE_0__.moduleMetadata)({imports:[___WEBPACK_IMPORTED_MODULE_1__.z8]})],parameters:{docs:{story:{inline:!1,iframeHeight:"18rem"}}},args:{isOpen:!0,caret:!0,description:"Uniform Resource Locator; the address of a resource (such as a document or website) on the Internet.",align:"bottom",autoAlign:!1},argTypes:{autoAlign:{control:!1},onOpen:{control:"Opened!"},onClose:{control:"Closed!"},isOpenChange:{control:"Is Open Change!"},align:{options:["top","top-left","top-right","bottom","bottom-left","bottom-right"],control:"select"}},component:___WEBPACK_IMPORTED_MODULE_1__.vD},Basic=(args=>({props:args,template:'\n        <div style="height:3000px">\n            Scrolling will update the position of the popover:\n            <div style="position: absolute; top: 500px; left: 500px;">\n                <p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n                <cds-tooltip-definition\n                    [isOpen]="isOpen"\n                    [caret]="caret"\n                    [align]="align"\n                    (onOpen)="onOpen($event)"\n                    (onClose)="onClose($event)"\n                    (isOpenChange)="isOpenChange($event)"\n                    [description]="description">\n                    URL\n                </cds-tooltip-definition>\n                that you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n            </div>\n        </div>\n    ',styles:["\n        .tooltip-trigger {\n            box-sizing: border-box;\n            margin: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 2rem;\n            height: 2rem;\n            background: white;\n            border: 1px solid var(--cds-border-subtle);\n            cursor: pointer;\n        }\n        svg { fill: var(--cds-background-inverse); }\n    "]})).bind({}),WithAutoAlign=(args=>({props:args,template:'\n        <div style="height:3000px">\n            Scrolling will update the position of the popover:\n            <div style="position: absolute; top: 500px; left: 500px;">\n                <p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n                <cds-tooltip-definition\n                    [isOpen]="isOpen"\n                    [caret]="caret"\n                    [align]="align"\n                    [autoAlign]="true"\n                    (onOpen)="onOpen($event)"\n                    (onClose)="onClose($event)"\n                    (isOpenChange)="isOpenChange($event)"\n                    [description]="description">\n                    URL\n                </cds-tooltip-definition>\n                that you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n            </div>\n        </div>\n    ',styles:["\n        .tooltip-trigger {\n            box-sizing: border-box;\n            margin: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 2rem;\n            height: 2rem;\n            background: white;\n            border: 1px solid var(--cds-border-subtle);\n            cursor: pointer;\n        }\n        svg { fill: var(--cds-background-inverse); }\n    "]})).bind({});WithAutoAlign.args={autoAlign:!0,align:"top"},Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div style="height:3000px">\n            Scrolling will update the position of the popover:\n            <div style="position: absolute; top: 500px; left: 500px;">\n                <p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n                <cds-tooltip-definition\n                    [isOpen]="isOpen"\n                    [caret]="caret"\n                    [align]="align"\n                    (onOpen)="onOpen($event)"\n                    (onClose)="onClose($event)"\n                    (isOpenChange)="isOpenChange($event)"\n                    [description]="description">\n                    URL\n                </cds-tooltip-definition>\n                that you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n            </div>\n        </div>\n    `,\n  styles: [`\n        .tooltip-trigger {\n            box-sizing: border-box;\n            margin: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 2rem;\n            height: 2rem;\n            background: white;\n            border: 1px solid var(--cds-border-subtle);\n            cursor: pointer;\n        }\n        svg { fill: var(--cds-background-inverse); }\n    `]\n})',...Basic.parameters?.docs?.source}}},WithAutoAlign.parameters={...WithAutoAlign.parameters,docs:{...WithAutoAlign.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div style="height:3000px">\n            Scrolling will update the position of the popover:\n            <div style="position: absolute; top: 500px; left: 500px;">\n                <p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n                <cds-tooltip-definition\n                    [isOpen]="isOpen"\n                    [caret]="caret"\n                    [align]="align"\n                    [autoAlign]="true"\n                    (onOpen)="onOpen($event)"\n                    (onClose)="onClose($event)"\n                    (isOpenChange)="isOpenChange($event)"\n                    [description]="description">\n                    URL\n                </cds-tooltip-definition>\n                that you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n            </div>\n        </div>\n    `,\n  styles: [`\n        .tooltip-trigger {\n            box-sizing: border-box;\n            margin: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 2rem;\n            height: 2rem;\n            background: white;\n            border: 1px solid var(--cds-border-subtle);\n            cursor: pointer;\n        }\n        svg { fill: var(--cds-background-inverse); }\n    `]\n})',...WithAutoAlign.parameters?.docs?.source}}};const __namedExportsOrder=["Basic","WithAutoAlign"]}}]);

package/docs/storybook/tooltip-tooltip-stories.18664f1b.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[4253],{"./src/popover/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{OI:()=>PopoverContainer,yk:()=>PopoverContent,UU:()=>PopoverModule});var asyncToGenerator=__webpack_require__("./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),floating_ui_dom=__webpack_require__("./node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs"),floating_ui_core=__webpack_require__("./node_modules/@floating-ui/core/dist/floating-ui.core.mjs");let PopoverContainer=class PopoverContainer{constructor(elementRef,ngZone,renderer,changeDetectorRef){this.elementRef=elementRef,this.ngZone=ngZone,this.renderer=renderer,this.changeDetectorRef=changeDetectorRef,this._align="bottom",this.alignmentClassPrefix="cds--popover--",this.onClose=new core.EventEmitter,this.onOpen=new core.EventEmitter,this.isOpenChange=new core.EventEmitter,this.caret=!0,this.dropShadow=!0,this.highContrast=!1,this.autoAlign=!1,this.containerClass=!0,this.isOpen=!1}set align(alignment){if(!alignment)return;const previousAlignment=this._align;switch(alignment){case"top-left":this._align="top-start";break;case"top-right":this._align="top-end";break;case"bottom-left":this._align="bottom-start";break;case"bottom-right":this._align="bottom-end";break;case"left-top":this._align="left-start";break;case"left-bottom":this._align="left-end";break;case"right-top":this._align="right-start";break;case"right-bottom":this._align="right-end";break;default:this._align=alignment}this.updateAlignmentClass(this._align,previousAlignment)}handleChange(open,event){if(this.isOpen!==open&&event&&this.isOpenChange.emit(open),open){if(event&&this.onOpen.emit(event),this.autoAlign){if(this.caretRef){const computedStyle=getComputedStyle(this.caretRef),offset=computedStyle.getPropertyValue("--cds-popover-offset"),height=computedStyle.getPropertyValue("--cds-popover-caret-height");this.caretOffset=(offset?.includes("px")?Number(offset.split("px",1)[0]):16*Number(offset.split("rem",1)[0]))||10,this.caretHeight=(height?.includes("px")?Number(height.split("px",1)[0]):16*Number(height.split("rem",1)[0]))||6}this.elementRef.nativeElement&&this.popoverContentRef&&(this.unmountFloatingElement=(0,floating_ui_dom.Me)(this.elementRef.nativeElement,this.popoverContentRef,this.recomputePosition.bind(this)))}}else this.cleanUp(),event&&this.onClose.emit(event);this.isOpen=open,this.changeDetectorRef.markForCheck()}roundByDPR(value){const dpr=window.devicePixelRatio||1;return Math.round(value*dpr)/dpr}recomputePosition(){var _this=this;this.ngZone.runOutsideAngular((0,asyncToGenerator.Z)((function*(){const{x,y,placement,middlewareData}=yield(0,floating_ui_dom.oo)(_this.elementRef.nativeElement,_this.popoverContentRef,{placement:_this._align,strategy:"fixed",middleware:[(0,floating_ui_core.cv)(_this.caretOffset),(0,floating_ui_dom.RR)({fallbackAxisSideDirection:"start"}),(0,floating_ui_dom.x7)({element:_this.caretRef})]}),previousAlignment=_this._align;if(_this._align=placement,_this.updateAlignmentClass(_this._align,previousAlignment),Object.assign(_this.popoverContentRef.style,{position:"fixed",top:"0",left:"0",transform:`translate(${_this.roundByDPR(x)}px,${_this.roundByDPR(y)}px)`}),middlewareData.arrow){const{x:arrowX,y:arrowY}=middlewareData.arrow,staticSide={top:"bottom",right:"left",bottom:"top",left:"right"}[placement.split("-")[0]];_this.caretRef.style.left=null!=arrowX?`${arrowX}px`:"",_this.caretRef.style.top=null!=arrowY?`${arrowY}px`:"",_this.caretRef.style.right="",_this.caretRef.style.bottom="",staticSide&&(_this.caretRef.style[staticSide]=-_this.caretHeight+"px")}})))}ngOnChanges(changes){const originalState=this.isOpen;this.handleChange(!1),changes.autoAlign&&!changes.autoAlign.firstChange&&(this.popoverContentRef=this.elementRef.nativeElement.querySelector(".cds--popover-content"),this.popoverContentRef.setAttribute("style",""),this.caretRef=this.elementRef.nativeElement.querySelector("span.cds--popover-caret")),this.handleChange(originalState)}ngAfterViewInit(){this.initializeReferences()}initializeReferences(){this.updateAlignmentClass(this._align),this.popoverContentRef=this.elementRef.nativeElement.querySelector(".cds--popover-content"),this.caretRef=this.elementRef.nativeElement.querySelector("span.cds--popover-caret"),this.handleChange(this.isOpen)}ngOnDestroy(){this.cleanUp()}cleanUp(){this.unmountFloatingElement&&this.unmountFloatingElement(),this.unmountFloatingElement=void 0}updateAlignmentClass(newAlignment,previousAlignment){if(this.elementRef.nativeElement&&previousAlignment!==newAlignment){const regexp=new RegExp("right|top|left|bottom");this.elementRef.nativeElement.classList.forEach((className=>{regexp.test(className)&&this.renderer.removeClass(this.elementRef.nativeElement,`${className}`)})),this.renderer.addClass(this.elementRef.nativeElement,`${this.alignmentClassPrefix}${newAlignment}`)}}};PopoverContainer.ctorParameters=()=>[{type:core.ElementRef},{type:core.NgZone},{type:core.Renderer2},{type:core.ChangeDetectorRef}],PopoverContainer.propDecorators={align:[{type:core.Input}],onClose:[{type:core.Output}],onOpen:[{type:core.Output}],isOpenChange:[{type:core.Output}],caret:[{type:core.HostBinding,args:["class.cds--popover--caret"]},{type:core.Input}],dropShadow:[{type:core.HostBinding,args:["class.cds--popover--drop-shadow"]},{type:core.Input}],highContrast:[{type:core.HostBinding,args:["class.cds--popover--high-contrast"]},{type:core.Input}],autoAlign:[{type:core.HostBinding,args:["class.cds--popover--auto-align"]},{type:core.Input}],containerClass:[{type:core.HostBinding,args:["class.cds--popover-container"]}],isOpen:[{type:core.Input},{type:core.HostBinding,args:["class.cds--popover--open"]}]},PopoverContainer=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsPopover], [ibmPopover]"})],PopoverContainer);let PopoverContent=class PopoverContent{constructor(changeDetectorRef){this.changeDetectorRef=changeDetectorRef,this.popoverClass=!0,this.autoAlign=!1}ngAfterViewInit(){this.popoverContent&&(this.autoAlign=!!this.popoverContent.nativeElement.closest(".cds--popover--auto-align"),this.changeDetectorRef.detectChanges())}};PopoverContent.ctorParameters=()=>[{type:core.ChangeDetectorRef}],PopoverContent.propDecorators={popoverClass:[{type:core.HostBinding,args:["class.cds--popover"]}],popoverContent:[{type:core.ViewChild,args:["content"]}]},PopoverContent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-popover-content, ibm-popover-content",template:'\n\t\t<span class="cds--popover-content" #content>\n\t\t\t<div>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t\t<span *ngIf="autoAlign" class="cds--popover-caret cds--popover--auto-align"></span>\n\t\t</span>\n\t\t<span *ngIf="!autoAlign" class="cds--popover-caret"></span>\n\t'})],PopoverContent);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let PopoverModule=class PopoverModule{};PopoverModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[PopoverContainer,PopoverContent],exports:[PopoverContainer,PopoverContent],imports:[common.CommonModule]})],PopoverModule)},"./src/tooltip/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{u:()=>Tooltip,vD:()=>TooltipDefinition,z8:()=>TooltipModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),popover=__webpack_require__("./src/popover/index.ts");let Tooltip=class Tooltip extends popover.OI{constructor(elementRef,ngZone,renderer,changeDetectorRef){super(elementRef,ngZone,renderer,changeDetectorRef),this.elementRef=elementRef,this.ngZone=ngZone,this.renderer=renderer,this.changeDetectorRef=changeDetectorRef,this.tooltipClass=!0,this.id="tooltip-"+Tooltip.tooltipCount++,this.enterDelayMs=100,this.leaveDelayMs=300,this.disabled=!1,this.highContrast=!0,this.dropShadow=!1}mouseenter(event){setTimeout((()=>{this.handleChange(!0,event)}),this.enterDelayMs)}mouseleave(event){setTimeout((()=>{this.handleChange(!1,event)}),this.leaveDelayMs)}hostkeys(event){open&&"Escape"===event.key&&(event.stopPropagation(),this.handleChange(!1,event))}handleFocus(event){this.handleChange(!0,event)}handleFocusOut(event){this.handleChange(!1,event)}isTemplate(value){return value instanceof core.TemplateRef}ngAfterContentChecked(){if(this.wrapper){const buttonElement=this.wrapper.nativeElement.querySelector("button");buttonElement&&!buttonElement.getAttribute("aria-labelledby")&&buttonElement.setAttribute("aria-labelledby",this.id)}}};Tooltip.tooltipCount=0,Tooltip.ctorParameters=()=>[{type:core.ElementRef},{type:core.NgZone},{type:core.Renderer2},{type:core.ChangeDetectorRef}],Tooltip.propDecorators={tooltipClass:[{type:core.HostBinding,args:["class.cds--tooltip"]}],id:[{type:core.Input}],enterDelayMs:[{type:core.Input}],leaveDelayMs:[{type:core.Input}],disabled:[{type:core.Input}],description:[{type:core.Input}],wrapper:[{type:core.ViewChild,args:["contentWrapper"]}],mouseenter:[{type:core.HostListener,args:["mouseenter",["$event"]]}],mouseleave:[{type:core.HostListener,args:["mouseleave",["$event"]]}],hostkeys:[{type:core.HostListener,args:["keyup",["$event"]]}],handleFocus:[{type:core.HostListener,args:["focusin",["$event"]]}],handleFocusOut:[{type:core.HostListener,args:["focusout",["$event"]]}]},Tooltip=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tooltip, ibm-tooltip",changeDetection:core.ChangeDetectionStrategy.OnPush,template:'\n\t\t<span #contentWrapper>\n\t\t\t<ng-content></ng-content>\n\t\t</span>\n\t\t<span\n\t\t\t*ngIf="description"\n\t\t\tclass="cds--popover"\n\t\t\t[id]="id"\n\t\t\t[attr.aria-hidden]="!isOpen"\n\t\t\trole="tooltip">\n\t\t\t<ng-container *ngIf="!disabled">\n\t\t\t\t<span class="cds--popover-content cds--tooltip-content">\n\t\t\t\t\t<ng-container *ngIf="!isTemplate(description)">{{description}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf="isTemplate(description)" [ngTemplateOutlet]="description"></ng-template>\n\t\t\t\t\t<span *ngIf="autoAlign" class="cds--popover-caret cds--popover--auto-align"></span>\n\t\t\t\t</span>\n\t\t\t\t<span *ngIf="!autoAlign" class="cds--popover-caret"></span>\n\t\t\t</ng-container>\n\t\t</span>\n\t'})],Tooltip);let TooltipDefinition=class TooltipDefinition extends popover.OI{constructor(elementRef,ngZone,renderer,changeDetectorRef){super(elementRef,ngZone,renderer,changeDetectorRef),this.elementRef=elementRef,this.ngZone=ngZone,this.renderer=renderer,this.changeDetectorRef=changeDetectorRef,this.id="tooltip-definition-"+TooltipDefinition.tooltipCount++,this.highContrast=!0,this.dropShadow=!1}onBlur(event){this.handleChange(!1,event)}onClick(event){this.handleChange(!this.isOpen,event)}hostkeys(event){this.isOpen&&"Escape"===event.key&&(event.stopPropagation(),this.handleChange(!1,event))}mouseleave(event){this.handleChange(!1,event)}isTemplate(value){return value instanceof core.TemplateRef}};TooltipDefinition.tooltipCount=0,TooltipDefinition.ctorParameters=()=>[{type:core.ElementRef},{type:core.NgZone},{type:core.Renderer2},{type:core.ChangeDetectorRef}],TooltipDefinition.propDecorators={id:[{type:core.Input}],description:[{type:core.Input}],hostkeys:[{type:core.HostListener,args:["keyup",["$event"]]}],mouseleave:[{type:core.HostListener,args:["mouseleave",["$event"]]}]},TooltipDefinition=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-tooltip-definition, ibm-tooltip-definition",changeDetection:core.ChangeDetectionStrategy.OnPush,template:'\n\t\t<button\n\t\t\tclass="cds--definition-term"\n\t\t\t[attr.aria-controls]="id"\n\t\t\t[attr.aria-expanded]="isOpen"\n\t\t\t(blur)="onBlur($event)"\n\t\t\t(click)="onClick($event)"\n\t\t\ttype="button">\n\t\t\t<ng-content></ng-content>\n\t\t</button>\n\t\t<span\n\t\t\t*ngIf="description"\n\t\t\tclass="cds--popover"\n\t\t\t[id]="id"\n\t\t\t[attr.aria-hidden]="isOpen"\n\t\t\trole="tooltip">\n\t\t\t<span class="cds--popover-content cds--definition-tooltip">\n\t\t\t\t<ng-container *ngIf="!isTemplate(description)">{{description}}</ng-container>\n\t\t\t\t<ng-template *ngIf="isTemplate(description)" [ngTemplateOutlet]="description"></ng-template>\n\t\t\t\t<span *ngIf="autoAlign" class="cds--popover-caret cds--popover--auto-align"></span>\n\t\t\t</span>\n\t\t\t<span *ngIf="!autoAlign" class="cds--popover-caret"></span>\n\t\t</span>\n\t'})],TooltipDefinition);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let TooltipModule=class TooltipModule{};TooltipModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Tooltip,TooltipDefinition],exports:[Tooltip,TooltipDefinition],imports:[common.CommonModule,popover.UU]})],TooltipModule)},"./node_modules/@storybook/angular/dist/client/argsToTemplate.js":(__unused_webpack_module,exports)=>{Object.defineProperty(exports,"__esModule",{value:!0}),exports.argsToTemplate=void 0,exports.argsToTemplate=function argsToTemplate(args,options={}){const includeSet=options.include?new Set(options.include):null,excludeSet=options.exclude?new Set(options.exclude):null;return Object.entries(args).filter((([key])=>void 0!==args[key])).filter((([key])=>includeSet?includeSet.has(key):!excludeSet||!excludeSet.has(key))).map((([key,value])=>"function"==typeof value?`(${key})="${key}($event)"`:`[${key}]="${key}"`)).join(" ")}},"./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.argsToTemplate=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}});var argsToTemplate_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/argsToTemplate.js");Object.defineProperty(exports,"argsToTemplate",{enumerable:!0,get:function(){return argsToTemplate_1.argsToTemplate}})},"./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 preview_api_1=__webpack_require__("@storybook/preview-api"),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,preview_api_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__,"applicationConfig")&&__webpack_require__.d(__webpack_exports__,{applicationConfig:function(){return _client_index__WEBPACK_IMPORTED_MODULE_0__.applicationConfig}}),__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}})},"./src/tooltip/tooltip.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,Ellipses:()=>Ellipses,WithAutoAlign:()=>WithAutoAlign,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _storybook_angular__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),___WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/tooltip/index.ts");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Tooltip",decorators:[(0,_storybook_angular__WEBPACK_IMPORTED_MODULE_0__.moduleMetadata)({imports:[___WEBPACK_IMPORTED_MODULE_1__.z8]})],args:{isOpen:!0,caret:!0,description:"Occassionally, services are updated in a specified time window to ensure no down time for customers.",align:"bottom",autoAlign:!1},argTypes:{autoAlign:{control:!1},onOpen:{control:"Opened!"},onClose:{control:"Closed!"},isOpenChange:{control:"Is Open Change!"},align:{options:["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"],control:"select"}},component:___WEBPACK_IMPORTED_MODULE_1__.u},Basic=(args=>({props:args,template:'\n        <cds-tooltip\n            [isOpen]="isOpen"\n            [caret]="caret"\n            [align]="align"\n            (onOpen)="onOpen($event)"\n            (onClose)="onClose($event)"\n            (isOpenChange)="isOpenChange($event)"\n            [description]="description">\n            <button type="button" class="tooltip-trigger">\n                <svg preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32">\n                    <path d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z"></path>\n                </svg>\n            </button>\n        </cds-tooltip>\n    ',styles:["\n        .tooltip-trigger {\n            box-sizing: border-box;\n            margin: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 2rem;\n            height: 2rem;\n            background: white;\n            border: 1px solid var(--cds-border-subtle);\n            cursor: pointer;\n        }\n        svg { fill: var(--cds-background-inverse); }\n    "]})).bind({});Basic.parameters={docs:{story:{inline:!1,iframeHeight:"18rem"}},layout:"centered"};const Ellipses=(args=>({props:args,template:'\n        <cds-tooltip\n            [isOpen]="isOpen"\n            [caret]="caret"\n            [align]="align"\n            description="Tooltip for ellipsis because I can and I am really really long">\n            <span class="overflowText">\n                Tooltip for ellipsis because I can and I am really really long\n            </span>\n        </cds-tooltip>\n    ',styles:["\n        .overflowText {\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            width: 100px;\n            display: inline-block;\n        }\n    "]})).bind({});Ellipses.argTypes={description:{control:!1}},Ellipses.parameters={docs:{story:{inline:!1,iframeHeight:"18rem"}},layout:"centered"};const WithAutoAlign=(args=>({props:args,template:'\n        <div style="height:3000px">\n            Scrolling will update the position of the popover:\n            <div style="position: absolute; top: 500px; left: 500px;">\n                <cds-tooltip\n                    [isOpen]="isOpen"\n                    [caret]="caret"\n                    [align]="align"\n                    [autoAlign]="true"\n                    (onOpen)="onOpen($event)"\n                    (onClose)="onClose($event)"\n                    (isOpenChange)="isOpenChange($event)"\n                    [description]="description">\n                    <button type="button" class="tooltip-trigger">\n                        <svg preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32">\n                            <path d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z"></path>\n                        </svg>\n                    </button>\n                </cds-tooltip>\n            </div>\n        </div>\n    ',styles:["\n        .tooltip-trigger {\n            box-sizing: border-box;\n            margin: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 2rem;\n            height: 2rem;\n            background: white;\n            border: 1px solid var(--cds-border-subtle);\n            cursor: pointer;\n        }\n        svg { fill: var(--cds-background-inverse); }\n    "]})).bind({});WithAutoAlign.args={autoAlign:!0,align:"top"},Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-tooltip\n            [isOpen]="isOpen"\n            [caret]="caret"\n            [align]="align"\n            (onOpen)="onOpen($event)"\n            (onClose)="onClose($event)"\n            (isOpenChange)="isOpenChange($event)"\n            [description]="description">\n            <button type="button" class="tooltip-trigger">\n                <svg preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32">\n                    <path d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z"></path>\n                </svg>\n            </button>\n        </cds-tooltip>\n    `,\n  styles: [`\n        .tooltip-trigger {\n            box-sizing: border-box;\n            margin: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 2rem;\n            height: 2rem;\n            background: white;\n            border: 1px solid var(--cds-border-subtle);\n            cursor: pointer;\n        }\n        svg { fill: var(--cds-background-inverse); }\n    `]\n})',...Basic.parameters?.docs?.source}}},Ellipses.parameters={...Ellipses.parameters,docs:{...Ellipses.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-tooltip\n            [isOpen]="isOpen"\n            [caret]="caret"\n            [align]="align"\n            description="Tooltip for ellipsis because I can and I am really really long">\n            <span class="overflowText">\n                Tooltip for ellipsis because I can and I am really really long\n            </span>\n        </cds-tooltip>\n    `,\n  styles: [`\n        .overflowText {\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            width: 100px;\n            display: inline-block;\n        }\n    `]\n})',...Ellipses.parameters?.docs?.source}}},WithAutoAlign.parameters={...WithAutoAlign.parameters,docs:{...WithAutoAlign.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div style="height:3000px">\n            Scrolling will update the position of the popover:\n            <div style="position: absolute; top: 500px; left: 500px;">\n                <cds-tooltip\n                    [isOpen]="isOpen"\n                    [caret]="caret"\n                    [align]="align"\n                    [autoAlign]="true"\n                    (onOpen)="onOpen($event)"\n                    (onClose)="onClose($event)"\n                    (isOpenChange)="isOpenChange($event)"\n                    [description]="description">\n                    <button type="button" class="tooltip-trigger">\n                        <svg preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32">\n                            <path d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z"></path>\n                        </svg>\n                    </button>\n                </cds-tooltip>\n            </div>\n        </div>\n    `,\n  styles: [`\n        .tooltip-trigger {\n            box-sizing: border-box;\n            margin: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 2rem;\n            height: 2rem;\n            background: white;\n            border: 1px solid var(--cds-border-subtle);\n            cursor: pointer;\n        }\n        svg { fill: var(--cds-background-inverse); }\n    `]\n})',...WithAutoAlign.parameters?.docs?.source}}};const __namedExportsOrder=["Basic","Ellipses","WithAutoAlign"]}}]);

package/esm2020/popover/popover-content.component.mjs

@@ -1,33 +1,53 @@
-import { Component, HostBinding } from "@angular/core";
+import { Component, HostBinding, ViewChild } from "@angular/core";
 import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
 /**
  * [See demo](../../?path=/story/components-popover--basic)
  */
 export class PopoverContent {
-    constructor() {
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
         this.popoverClass = true;
+        this.autoAlign = false;
+    }
+    ngAfterViewInit() {
+        if (this.popoverContent) {
+            // Check we are in a popover with autoAlign enabled
+            this.autoAlign = !!this.popoverContent.nativeElement.closest(".cds--popover--auto-align");
+            // Run change detection manually to resolve ExpressionHasChanged
+            this.changeDetectorRef.detectChanges();
+        }
     }
 }
-PopoverContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PopoverContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PopoverContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PopoverContent, selector: "cds-popover-content, ibm-popover-content", host: { properties: { "class.cds--popover": "this.popoverClass" } }, ngImport: i0, template: `
-		<span class="cds--popover-content">
-			<ng-content></ng-content>
+PopoverContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PopoverContent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PopoverContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PopoverContent, selector: "cds-popover-content, ibm-popover-content", host: { properties: { "class.cds--popover": "this.popoverClass" } }, viewQueries: [{ propertyName: "popoverContent", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: `
+		<span class="cds--popover-content" #content>
+			<div>
+				<ng-content></ng-content>
+			</div>
+			<span *ngIf="autoAlign" class="cds--popover-caret cds--popover--auto-align"></span>
 		</span>
-		<span class="cds--popover-caret"></span>
-	`, isInline: true });
+		<span *ngIf="!autoAlign" class="cds--popover-caret"></span>
+	`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PopoverContent, decorators: [{
             type: Component,
             args: [{
                     selector: "cds-popover-content, ibm-popover-content",
                     template: `
-		<span class="cds--popover-content">
-			<ng-content></ng-content>
+		<span class="cds--popover-content" #content>
+			<div>
+				<ng-content></ng-content>
+			</div>
+			<span *ngIf="autoAlign" class="cds--popover-caret cds--popover--auto-align"></span>
 		</span>
-		<span class="cds--popover-caret"></span>
+		<span *ngIf="!autoAlign" class="cds--popover-caret"></span>
 	`
                 }]
-        }], propDecorators: { popoverClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { popoverClass: [{
                 type: HostBinding,
                 args: ["class.cds--popover"]
+            }], popoverContent: [{
+                type: ViewChild,
+                args: ["content"]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wb3Zlci1jb250ZW50LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wb3BvdmVyL3BvcG92ZXItY29udGVudC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBRXZEOztHQUVHO0FBVUgsTUFBTSxPQUFPLGNBQWM7SUFUM0I7UUFVb0MsaUJBQVksR0FBRyxJQUFJLENBQUM7S0FDdkQ7OzJHQUZZLGNBQWM7K0ZBQWQsY0FBYyxxSkFQaEI7Ozs7O0VBS1Q7MkZBRVcsY0FBYztrQkFUMUIsU0FBUzttQkFBQztvQkFDVixRQUFRLEVBQUUsMENBQTBDO29CQUNwRCxRQUFRLEVBQUU7Ozs7O0VBS1Q7aUJBQ0Q7OEJBRW1DLFlBQVk7c0JBQTlDLFdBQVc7dUJBQUMsb0JBQW9CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBIb3N0QmluZGluZyB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbi8qKlxuICogW1NlZSBkZW1vXSguLi8uLi8/cGF0aD0vc3RvcnkvY29tcG9uZW50cy1wb3BvdmVyLS1iYXNpYylcbiAqL1xuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiBcImNkcy1wb3BvdmVyLWNvbnRlbnQsIGlibS1wb3BvdmVyLWNvbnRlbnRcIixcblx0dGVtcGxhdGU6IGBcblx0XHQ8c3BhbiBjbGFzcz1cImNkcy0tcG9wb3Zlci1jb250ZW50XCI+XG5cdFx0XHQ8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG5cdFx0PC9zcGFuPlxuXHRcdDxzcGFuIGNsYXNzPVwiY2RzLS1wb3BvdmVyLWNhcmV0XCI+PC9zcGFuPlxuXHRgXG59KVxuZXhwb3J0IGNsYXNzIFBvcG92ZXJDb250ZW50IHtcblx0QEhvc3RCaW5kaW5nKFwiY2xhc3MuY2RzLS1wb3BvdmVyXCIpIHBvcG92ZXJDbGFzcyA9IHRydWU7XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wb3Zlci1jb250ZW50LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wb3BvdmVyL3BvcG92ZXItY29udGVudC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNOLFNBQVMsRUFDVCxXQUFXLEVBQ1gsU0FBUyxFQUlULE1BQU0sZUFBZSxDQUFDOzs7QUFFdkI7O0dBRUc7QUFhSCxNQUFNLE9BQU8sY0FBYztJQUsxQixZQUFvQixpQkFBb0M7UUFBcEMsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFtQjtRQUpyQixpQkFBWSxHQUFHLElBQUksQ0FBQztRQUV2RCxjQUFTLEdBQUcsS0FBSyxDQUFDO0lBRXlDLENBQUM7SUFFNUQsZUFBZTtRQUNkLElBQUksSUFBSSxDQUFDLGNBQWMsRUFBRTtZQUN4QixtREFBbUQ7WUFDbkQsSUFBSSxDQUFDLFNBQVMsR0FBRyxDQUFDLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLDJCQUEyQixDQUFDLENBQUM7WUFDMUYsZ0VBQWdFO1lBQ2hFLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLEVBQUUsQ0FBQztTQUN2QztJQUNGLENBQUM7OzJHQWRXLGNBQWM7K0ZBQWQsY0FBYyxnUUFWaEI7Ozs7Ozs7O0VBUVQ7MkZBRVcsY0FBYztrQkFaMUIsU0FBUzttQkFBQztvQkFDVixRQUFRLEVBQUUsMENBQTBDO29CQUNwRCxRQUFRLEVBQUU7Ozs7Ozs7O0VBUVQ7aUJBQ0Q7d0dBRW1DLFlBQVk7c0JBQTlDLFdBQVc7dUJBQUMsb0JBQW9CO2dCQUNYLGNBQWM7c0JBQW5DLFNBQVM7dUJBQUMsU0FBUyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG5cdENvbXBvbmVudCxcblx0SG9zdEJpbmRpbmcsXG5cdFZpZXdDaGlsZCxcblx0RWxlbWVudFJlZixcblx0QWZ0ZXJWaWV3SW5pdCxcblx0Q2hhbmdlRGV0ZWN0b3JSZWZcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuLyoqXG4gKiBbU2VlIGRlbW9dKC4uLy4uLz9wYXRoPS9zdG9yeS9jb21wb25lbnRzLXBvcG92ZXItLWJhc2ljKVxuICovXG5AQ29tcG9uZW50KHtcblx0c2VsZWN0b3I6IFwiY2RzLXBvcG92ZXItY29udGVudCwgaWJtLXBvcG92ZXItY29udGVudFwiLFxuXHR0ZW1wbGF0ZTogYFxuXHRcdDxzcGFuIGNsYXNzPVwiY2RzLS1wb3BvdmVyLWNvbnRlbnRcIiAjY29udGVudD5cblx0XHRcdDxkaXY+XG5cdFx0XHRcdDxuZy1jb250ZW50PjwvbmctY29udGVudD5cblx0XHRcdDwvZGl2PlxuXHRcdFx0PHNwYW4gKm5nSWY9XCJhdXRvQWxpZ25cIiBjbGFzcz1cImNkcy0tcG9wb3Zlci1jYXJldCBjZHMtLXBvcG92ZXItLWF1dG8tYWxpZ25cIj48L3NwYW4+XG5cdFx0PC9zcGFuPlxuXHRcdDxzcGFuICpuZ0lmPVwiIWF1dG9BbGlnblwiIGNsYXNzPVwiY2RzLS1wb3BvdmVyLWNhcmV0XCI+PC9zcGFuPlxuXHRgXG59KVxuZXhwb3J0IGNsYXNzIFBvcG92ZXJDb250ZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tcG9wb3ZlclwiKSBwb3BvdmVyQ2xhc3MgPSB0cnVlO1xuXHRAVmlld0NoaWxkKFwiY29udGVudFwiKSBwb3BvdmVyQ29udGVudDogRWxlbWVudFJlZjtcblx0YXV0b0FsaWduID0gZmFsc2U7XG5cblx0Y29uc3RydWN0b3IocHJpdmF0ZSBjaGFuZ2VEZXRlY3RvclJlZjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHt9XG5cblx0bmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuXHRcdGlmICh0aGlzLnBvcG92ZXJDb250ZW50KSB7XG5cdFx0XHQvLyBDaGVjayB3ZSBhcmUgaW4gYSBwb3BvdmVyIHdpdGggYXV0b0FsaWduIGVuYWJsZWRcblx0XHRcdHRoaXMuYXV0b0FsaWduID0gISF0aGlzLnBvcG92ZXJDb250ZW50Lm5hdGl2ZUVsZW1lbnQuY2xvc2VzdChcIi5jZHMtLXBvcG92ZXItLWF1dG8tYWxpZ25cIik7XG5cdFx0XHQvLyBSdW4gY2hhbmdlIGRldGVjdGlvbiBtYW51YWxseSB0byByZXNvbHZlIEV4cHJlc3Npb25IYXNDaGFuZ2VkXG5cdFx0XHR0aGlzLmNoYW5nZURldGVjdG9yUmVmLmRldGVjdENoYW5nZXMoKTtcblx0XHR9XG5cdH1cbn1cbiJdfQ==