carbon-components-angular/docs/storybook/notification-notification-stories.624c3d04.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[7931],{"./node_modules/@carbon/utils-position/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{var _a,PLACEMENTS;__webpack_require__.d(__webpack_exports__,{FK:()=>position,ZP:()=>__WEBPACK_DEFAULT_EXPORT__}),function(PLACEMENTS){PLACEMENTS.LEFT="left",PLACEMENTS.RIGHT="right",PLACEMENTS.TOP="top",PLACEMENTS.BOTTOM="bottom"}(PLACEMENTS||(PLACEMENTS={}));var defaultPositions=((_a={})[PLACEMENTS.LEFT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left-target.offsetWidth)}},_a[PLACEMENTS.RIGHT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left+referenceRect.width)}},_a[PLACEMENTS.TOP]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top-target.offsetHeight),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a[PLACEMENTS.BOTTOM]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top+referenceRect.height),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a),windowRef="undefined"!=typeof window?window:{innerHeight:0,scrollY:0,innerWidth:0,scrollX:0},Position=function(){function Position(positions){void 0===positions&&(positions={}),this.positions=defaultPositions,this.positions=Object.assign({},defaultPositions,positions)}return Position.prototype.getRelativeOffset=function(target){for(var offsets={left:target.offsetLeft,top:target.offsetTop};target.offsetParent&&"static"===getComputedStyle(target.offsetParent).position;)offsets.left+=target.offsetLeft,offsets.top+=target.offsetTop,target=target.offsetParent;return offsets},Position.prototype.getAbsoluteOffset=function(target){for(var currentNode=target,margins={top:0,left:0};currentNode.offsetParent;){var computed=getComputedStyle(currentNode.offsetParent);"static"===computed.position&&computed.marginLeft&&computed.marginTop&&(parseInt(computed.marginTop,10)&&(margins.top+=parseInt(computed.marginTop,10)),parseInt(computed.marginLeft,10)&&(margins.left+=parseInt(computed.marginLeft,10))),currentNode=currentNode.offsetParent}var targetRect=target.getBoundingClientRect(),relativeRect=document.body.getBoundingClientRect();return{top:targetRect.top-relativeRect.top+margins.top,left:targetRect.left-relativeRect.left+margins.left}},Position.prototype.findRelative=function(reference,target,placement){var referenceOffset=this.getRelativeOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findAbsolute=function(reference,target,placement){var referenceOffset=this.getAbsoluteOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPosition=function(reference,target,placement,offsetFunction){void 0===offsetFunction&&(offsetFunction=this.getAbsoluteOffset.bind(this));var referenceOffset=offsetFunction(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPositionAt=function(offset,target,placement){return this.calculatePosition(offset,{top:0,left:0,height:0,width:0},target,placement)},Position.prototype.getPlacementBox=function(target,position){var targetBottom=target.offsetHeight+position.top,targetRight=target.offsetWidth+position.left;return{top:position.top,bottom:targetBottom,left:position.left,right:targetRight}},Position.prototype.addOffset=function(position,top,left){return void 0===top&&(top=0),void 0===left&&(left=0),Object.assign({},position,{top:position.top+top,left:position.left+left})},Position.prototype.setElement=function(element,position){element.style.top=position.top+"px",element.style.left=position.left+"px"},Position.prototype.findBestPlacement=function(reference,target,placements,containerFunction,positionFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this)),void 0===positionFunction&&(positionFunction=this.findPosition.bind(this));var weightedPlacements=placements.map((function(placement){var pos=positionFunction(reference,target,placement),box=_this.getPlacementBox(target,pos),hiddenHeight=0,hiddenWidth=0,container=containerFunction();box.top<container.top?hiddenHeight=container.top-box.top:box.bottom>container.height&&(hiddenHeight=box.bottom-container.height),box.left<container.left?hiddenWidth=container.left-box.left:box.right>container.width&&(hiddenWidth=box.right-container.width),hiddenHeight&&!hiddenWidth?hiddenWidth=1:hiddenWidth&&!hiddenHeight&&(hiddenHeight=1);var area=target.offsetHeight*target.offsetWidth;return{placement,weight:(area-hiddenHeight*hiddenWidth)/area}}));return weightedPlacements.sort((function(a,b){return b.weight-a.weight})),weightedPlacements[0].placement},Position.prototype.findBestPlacementAt=function(offset,target,placements,containerFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this));return this.findBestPlacement(null,target,placements,containerFunction,(function(_,target,placement){return _this.findPositionAt(offset,target,placement)}))},Position.prototype.defaultContainerFunction=function(){return{top:0,left:0,height:windowRef.innerHeight,width:windowRef.innerWidth}},Position.prototype.calculatePosition=function(referenceOffset,referenceRect,target,placement){return this.positions[placement]?this.positions[placement](referenceOffset,target,referenceRect):(console.error("No function found for placement, defaulting to 0,0"),{left:0,top:0})},Position}(),position=new Position;const __WEBPACK_DEFAULT_EXPORT__=Position},"./src/notification/notification.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Actionable:()=>Actionable,CustomContent:()=>CustomContent,DynamicActionable:()=>DynamicActionable,DynamicInline:()=>DynamicInline,DynamicToast:()=>DynamicToast,InlineNotification:()=>InlineNotification,Toast:()=>Toast,__namedExportsOrder:()=>__namedExportsOrder,default:()=>notification_stories});var core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),Subject=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subject.js"),dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),src_button=__webpack_require__("./src/button/index.ts"),notification=__webpack_require__("./src/notification/index.ts"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js");let DyanmicActionableStory=class DyanmicActionableStory{constructor(notificationService){this.notificationService=notificationService,this.actionSubject=new Subject.x}showNotification(){this.notificationService.showActionable({type:"info",title:"Actionable notification",message:"Sample info message",target:".notification-container",actions:[{text:"Action",click:this.actionSubject}]})}};DyanmicActionableStory.ctorParameters=()=>[{type:notification.gq}],DyanmicActionableStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-dynamic-actionable-story",template:'\n\t\t<button class="cds--btn cds--btn--primary" (click)="showNotification()">Show info notification</button>\n\t\t<div class="notification-container"></div>\n\t',providers:[notification.gq]})],DyanmicActionableStory);let NotificationStory=class NotificationStory{constructor(notificationService){this.notificationService=notificationService}showNotification(){this.notificationService.showNotification({type:"info",title:"Sample notification",message:"Sample info message",target:".notification-container"})}};NotificationStory.ctorParameters=()=>[{type:notification.gq}],NotificationStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-notification-story",template:'\n\t\t<button class="cds--btn cds--btn--primary" (click)="showNotification()">Show info notification</button>\n\t\t<div class="notification-container"></div>\n\t',providers:[notification.gq]})],NotificationStory);let ToastStory=class ToastStory{constructor(notificationService){this.notificationService=notificationService}showToast(){this.notificationService.showToast({type:"info",title:"Sample toast",subtitle:"Sample subtitle message",caption:"Sample caption",target:".notification-container",message:"message"})}};ToastStory.ctorParameters=()=>[{type:notification.gq}],ToastStory=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-toast-story",template:'\n\t\t<button class="cds--btn cds--btn--primary" (click)="showToast()">Show info toast</button>\n\t\t<div class="notification-container"></div>\n\t',providers:[notification.gq]})],ToastStory);const notification_stories={title:"Components/Notification",decorators:[(0,dist.moduleMetadata)({declarations:[DyanmicActionableStory,NotificationStory,ToastStory],imports:[notification.PQ,src_button.hJ]})],component:notification.Yj},InlineNotification=(args=>({props:args,template:"\n        <cds-inline-notification [notificationObj]=\"{\n            type: type,\n            title: 'Sample notification',\n            message: 'Sample error message',\n            showClose: showClose,\n            lowContrast: lowContrast}\">\n        </cds-inline-notification>\n    "})).bind({});InlineNotification.args={showClose:!0,lowContrast:!1,type:"info"},InlineNotification.argTypes={type:{options:["error","info","info-square","success","warning","warning-alt"],control:"select"}};const Toast=(args=>({props:args,template:"\n        <cds-toast [notificationObj]=\"{\n            type: type,\n            title: 'Sample toast',\n            subtitle: 'Sample subtitle message',\n            caption: 'Sample caption',\n            lowContrast: lowContrast,\n            showClose: showClose\n        }\"></cds-toast>\n    "})).bind({});Toast.args={...InlineNotification.args},Toast.argTypes={...InlineNotification.argTypes};const Actionable=(args=>({props:args,template:"\n        <cds-actionable-notification\n            [notificationObj]=\"{\n                type: type,\n                title: 'Sample notification',\n                message: 'Sample error message',\n                showClose: showClose,\n                lowContrast: lowContrast,\n                actions: actions,\n                variant: variant\n            }\">\n        </cds-actionable-notification>\n    "})).bind({});Actionable.args={...InlineNotification.args,variant:"inline"},Actionable.argTypes={...InlineNotification.argTypes,variant:{options:["toast","inline"],control:"radio"},actions:{control:"object",defaultValue:[{text:"Action",click:new Subject.x}]}};const DynamicActionable=(args=>({props:args,template:"\n        \x3c!--\n        app-* components are for demo purposes only.\n        You can create your own implementation by using the component source found at:\n        https://github.com/IBM/carbon-components-angular/tree/master/src/notification/stories/dynamic-actionable.component.ts\n        --\x3e\n        <app-dynamic-actionable-story></app-dynamic-actionable-story>\n    "})).bind({}),DynamicToast=(args=>({props:args,template:"\n        \x3c!--\n        app-* components are for demo purposes only.\n        You can create your own implementation by using the component source found at:\n        https://github.com/IBM/carbon-components-angular/tree/master/src/notification/stories/toast.component.ts\n        --\x3e\n        <app-toast-story></app-toast-story>\n    "})).bind({}),DynamicInline=(args=>({props:args,template:"\n        \x3c!--\n        app-* components are for demo purposes only.\n        You can create your own implementation by using the component source found at:\n        https://github.com/IBM/carbon-components-angular/tree/master/src/notification/stories/notification.component.ts\n        --\x3e\n        <app-notification-story></app-notification-story>\n    "})).bind({}),CustomContent=(args=>({props:args,template:"\n        <cds-toast [notificationObj]=\"{\n            type: 'error',\n            template: customToastContent,\n            title: 'Sample title',\n            myData: {\n                subtitle: 'Sample custom subtitle'\n            },\n            myCaption: 'Sample custom caption',\n            showClose: showClose\n        }\">\n        </cds-toast>\n        <cds-notification [notificationObj]=\"{\n            type: 'warning',\n            template: customNotificationContent,\n            title: 'Sample notification',\n            myData: {\n                subtitle: 'Sample custom subtitle'\n            },\n            showClose: showClose\n        }\">\n        </cds-notification>\n        <cds-actionable-notification [notificationObj]=\"{\n            type: 'success',\n            template: customActionableContent,\n            actionsTemplate: customActionableTrigger,\n            title: 'Sample notification',\n            myData: {\n                subtitle: 'Sample custom subtitle'\n            },\n            showClose: showClose\n        }\">\n        </cds-actionable-notification>\n        <ng-template #customToastContent let-data>\n            <h3 cdsToastTitle>{{data.title}}</h3>\n            <p cdsToastSubtitle>{{data.myData.subtitle}}</p>\n            <p cdsToastCaption>{{data.myCaption}}</p>\n        </ng-template>\n        <ng-template #customNotificationContent let-data>\n            <p cdsNotificationTitle>{{data.title}}</p>\n            <p cdsNotificationSubtitle>{{data.myData.subtitle}}</p>\n        </ng-template>\n        <ng-template #customActionableContent let-data>\n            <p cdsActionableTitle>{{data.title}}</p>\n            <p cdsActionableSubtitle>{{data.myData.subtitle}}</p>\n        </ng-template>\n        <ng-template #customActionableTrigger>\n            <button\n                cdsActionableButton\n                cdsButton=\"ghost\"\n                size=\"sm\">\n                Action\n            </button>\n        </ng-template>\n    ",encapsulation:core.ViewEncapsulation.None,styles:["\n        cds-toast {\n            width: 450px;\n            margin-bottom: 1rem;\n        }\n\n        cds-notification {\n            margin-bottom: 1rem;\n        }\n\n        .secondary-toast-button {\n            margin-right: 10px;\n        }\n\n        .actions {\n            margin-bottom: 25px;\n            display: flex;\n            justify-content: flex-end;\n        }\n    "]})).bind({});CustomContent.args={showClose:!0},InlineNotification.parameters={...InlineNotification.parameters,docs:{...InlineNotification.parameters?.docs,source:{originalSource:"args => ({\n  props: args,\n  template: `\n        <cds-inline-notification [notificationObj]=\"{\n            type: type,\n            title: 'Sample notification',\n            message: 'Sample error message',\n            showClose: showClose,\n            lowContrast: lowContrast}\">\n        </cds-inline-notification>\n    `\n})",...InlineNotification.parameters?.docs?.source}}},Toast.parameters={...Toast.parameters,docs:{...Toast.parameters?.docs,source:{originalSource:"args => ({\n  props: args,\n  template: `\n        <cds-toast [notificationObj]=\"{\n            type: type,\n            title: 'Sample toast',\n            subtitle: 'Sample subtitle message',\n            caption: 'Sample caption',\n            lowContrast: lowContrast,\n            showClose: showClose\n        }\"></cds-toast>\n    `\n})",...Toast.parameters?.docs?.source}}},Actionable.parameters={...Actionable.parameters,docs:{...Actionable.parameters?.docs,source:{originalSource:"args => ({\n  props: args,\n  template: `\n        <cds-actionable-notification\n            [notificationObj]=\"{\n                type: type,\n                title: 'Sample notification',\n                message: 'Sample error message',\n                showClose: showClose,\n                lowContrast: lowContrast,\n                actions: actions,\n                variant: variant\n            }\">\n        </cds-actionable-notification>\n    `\n})",...Actionable.parameters?.docs?.source}}},DynamicActionable.parameters={...DynamicActionable.parameters,docs:{...DynamicActionable.parameters?.docs,source:{originalSource:"args => ({\n  props: args,\n  template: `\n        \x3c!--\n        app-* components are for demo purposes only.\n        You can create your own implementation by using the component source found at:\n        https://github.com/IBM/carbon-components-angular/tree/master/src/notification/stories/dynamic-actionable.component.ts\n        --\x3e\n        <app-dynamic-actionable-story></app-dynamic-actionable-story>\n    `\n})",...DynamicActionable.parameters?.docs?.source}}},DynamicToast.parameters={...DynamicToast.parameters,docs:{...DynamicToast.parameters?.docs,source:{originalSource:"args => ({\n  props: args,\n  template: `\n        \x3c!--\n        app-* components are for demo purposes only.\n        You can create your own implementation by using the component source found at:\n        https://github.com/IBM/carbon-components-angular/tree/master/src/notification/stories/toast.component.ts\n        --\x3e\n        <app-toast-story></app-toast-story>\n    `\n})",...DynamicToast.parameters?.docs?.source}}},DynamicInline.parameters={...DynamicInline.parameters,docs:{...DynamicInline.parameters?.docs,source:{originalSource:"args => ({\n  props: args,\n  template: `\n        \x3c!--\n        app-* components are for demo purposes only.\n        You can create your own implementation by using the component source found at:\n        https://github.com/IBM/carbon-components-angular/tree/master/src/notification/stories/notification.component.ts\n        --\x3e\n        <app-notification-story></app-notification-story>\n    `\n})",...DynamicInline.parameters?.docs?.source}}},CustomContent.parameters={...CustomContent.parameters,docs:{...CustomContent.parameters?.docs,source:{originalSource:"args => ({\n  props: args,\n  template: `\n        <cds-toast [notificationObj]=\"{\n            type: 'error',\n            template: customToastContent,\n            title: 'Sample title',\n            myData: {\n                subtitle: 'Sample custom subtitle'\n            },\n            myCaption: 'Sample custom caption',\n            showClose: showClose\n        }\">\n        </cds-toast>\n        <cds-notification [notificationObj]=\"{\n            type: 'warning',\n            template: customNotificationContent,\n            title: 'Sample notification',\n            myData: {\n                subtitle: 'Sample custom subtitle'\n            },\n            showClose: showClose\n        }\">\n        </cds-notification>\n        <cds-actionable-notification [notificationObj]=\"{\n            type: 'success',\n            template: customActionableContent,\n            actionsTemplate: customActionableTrigger,\n            title: 'Sample notification',\n            myData: {\n                subtitle: 'Sample custom subtitle'\n            },\n            showClose: showClose\n        }\">\n        </cds-actionable-notification>\n        <ng-template #customToastContent let-data>\n            <h3 cdsToastTitle>{{data.title}}</h3>\n            <p cdsToastSubtitle>{{data.myData.subtitle}}</p>\n            <p cdsToastCaption>{{data.myCaption}}</p>\n        </ng-template>\n        <ng-template #customNotificationContent let-data>\n            <p cdsNotificationTitle>{{data.title}}</p>\n            <p cdsNotificationSubtitle>{{data.myData.subtitle}}</p>\n        </ng-template>\n        <ng-template #customActionableContent let-data>\n            <p cdsActionableTitle>{{data.title}}</p>\n            <p cdsActionableSubtitle>{{data.myData.subtitle}}</p>\n        </ng-template>\n        <ng-template #customActionableTrigger>\n            <button\n                cdsActionableButton\n                cdsButton=\"ghost\"\n                size=\"sm\">\n                Action\n            </button>\n        </ng-template>\n    `,\n  encapsulation: ViewEncapsulation.None,\n  styles: [`\n        cds-toast {\n            width: 450px;\n            margin-bottom: 1rem;\n        }\n\n        cds-notification {\n            margin-bottom: 1rem;\n        }\n\n        .secondary-toast-button {\n            margin-right: 10px;\n        }\n\n        .actions {\n            margin-bottom: 25px;\n            display: flex;\n            justify-content: flex-end;\n        }\n    `]\n})",...CustomContent.parameters?.docs?.source}}};const __namedExportsOrder=["InlineNotification","Toast","Actionable","DynamicActionable","DynamicToast","DynamicInline","CustomContent"]}}]);