carbon-components-angular
Version:
Next generation components
1 lines • 15.8 kB
JavaScript
;(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[4253],{"./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"]}}]);