carbon-components-angular/docs/storybook/ai-label-ai-label-stories.83ed183b.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[8667],{"./src/ai-label/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{zb:()=>AILabelActions,UD:()=>AILabelComponent,q:()=>AILabelContent,uV:()=>AILabelModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let AILabelActions=class AILabelActions{constructor(){this.toggletipActions=!0,this.aiLabelActions=!0}};AILabelActions.propDecorators={toggletipActions:[{type:core.HostBinding,args:["class.cds--toggletip-actions"]}],aiLabelActions:[{type:core.HostBinding,args:["class.cds--ai-label-actions"]}]},AILabelActions=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsAILabelActions], [ibmAILabelActions]"})],AILabelActions);let AILabelContent=class AILabelContent{};AILabelContent=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsAILabelContent], [ibmAILabelContent]"})],AILabelContent);var popover=__webpack_require__("./src/popover/index.ts");let AILabelPopoverDirective=class AILabelPopoverDirective 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.highContrast=!0,this.dropShadow=!1}initializeReferences(){this.updateAlignmentClass(this._align),this.bindPopoverRefs(),this.handleChange(this.isOpen)}ngOnChanges(changes){const originalState=this.isOpen;this.handleChange(!1),changes.autoAlign&&!changes.autoAlign.firstChange&&(this.popoverContentRef?.setAttribute("style",""),this.bindPopoverRefs()),this.handleChange(originalState)}bindPopoverRefs(){const panel=this.elementRef.nativeElement.querySelector(":scope > span.cds--popover");panel&&(this.popoverContentRef=panel.querySelector(":scope > span.cds--popover-content"),this.caretRef=this.resolveCaretRef(panel))}resolveCaretRef(panel){return this.autoAlign?panel.querySelector("span.cds--popover-content > span.cds--popover-caret.cds--popover--auto-align"):panel.querySelector(":scope > span.cds--popover-caret")}};AILabelPopoverDirective.ctorParameters=()=>[{type:core.ElementRef},{type:core.NgZone},{type:core.Renderer2},{type:core.ChangeDetectorRef}],AILabelPopoverDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsAILabelPopover]"})],AILabelPopoverDirective);let AILabelComponent=class AILabelComponent{constructor(elementRef){this.elementRef=elementRef,this.aiLabelClass=!0,this.caret=!0,this.dropShadow=!1,this.highContrast=!0,this.autoAlign=!1,this.isOpen=!1,this.onClose=new core.EventEmitter,this.onOpen=new core.EventEmitter,this.isOpenChange=new core.EventEmitter,this.id="ai-label-"+AILabelComponent.labelCounter++,this.aiText="AI",this.kind="default",this.size="xs",this.revertActive=!1,this.revertLabel="Revert to AI input",this.ariaLabel="Show information",this.revertClick=new core.EventEmitter,this.documentClick=this.handleOutsideClick.bind(this)}get revertClass(){return this.revertActive}get alignmentAxisOffset(){return["mini","2xs","xs"].includes(this.size)?-24:0}onPopoverIsOpenChange(open){this.isOpen=open,this.isOpenChange.emit(open)}get triggerClasses(){return{"cds--toggletip-button":!0,"cds--ai-label__button":!0,[`cds--ai-label__button--${this.size}`]:!0,[`cds--ai-label__button--${this.kind}`]:!0,"cds--ai-label__button--inline-with-content":"inline"===this.kind&&!!this.textLabel}}get computedAriaLabel(){const suffix="inline"===this.kind&&this.textLabel?this.textLabel:this.ariaLabel;return`${this.aiText} ${suffix}`}ngAfterViewInit(){this.isOpen&&document.addEventListener("click",this.documentClick)}ngOnChanges(changes){changes.revertActive&&!changes.revertActive.firstChange&&changes.revertActive.currentValue&&(this.isOpen=!1,document.removeEventListener("click",this.documentClick))}ngOnDestroy(){document.removeEventListener("click",this.documentClick)}onTriggerClick(event){const opening=!this.isOpen;opening?document.addEventListener("click",this.documentClick):document.removeEventListener("click",this.documentClick),this.aiLabelPopover?.handleChange(opening,event)}onRevertButtonClick(event){this.revertClick.emit(event)}hostkeys(event){this.isOpen&&"Escape"===event.key&&(event.stopPropagation(),document.removeEventListener("click",this.documentClick),this.aiLabelPopover?.handleChange(!1,event))}handleOutsideClick(event){this.elementRef.nativeElement.contains(event.target)||(this.aiLabelPopover?.handleChange(!1,event),document.removeEventListener("click",this.documentClick))}};AILabelComponent.labelCounter=0,AILabelComponent.ctorParameters=()=>[{type:core.ElementRef}],AILabelComponent.propDecorators={aiLabelClass:[{type:core.HostBinding,args:["class.cds--ai-label"]}],revertClass:[{type:core.HostBinding,args:["class.cds--ai-label--revert"]}],align:[{type:core.Input}],caret:[{type:core.Input}],dropShadow:[{type:core.Input}],highContrast:[{type:core.Input}],autoAlign:[{type:core.Input}],isOpen:[{type:core.Input}],onClose:[{type:core.Output}],onOpen:[{type:core.Output}],isOpenChange:[{type:core.Output}],id:[{type:core.Input}],aiText:[{type:core.Input}],textLabel:[{type:core.Input}],kind:[{type:core.Input}],size:[{type:core.Input}],revertActive:[{type:core.Input}],revertLabel:[{type:core.Input}],ariaLabel:[{type:core.Input}],revertClick:[{type:core.Output}],aiLabelPopover:[{type:core.ViewChild,args:["aiLabelPopoverHost",{read:AILabelPopoverDirective}]}],hostkeys:[{type:core.HostListener,args:["keyup",["$event"]]}]},AILabelComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-ai-label, ibm-ai-label",changeDetection:core.ChangeDetectionStrategy.OnPush,template:'\n\t\t<ng-container *ngIf="!revertActive">\n\t\t\t<span\n\t\t\t\t#aiLabelPopoverHost\n\t\t\t\tcdsAILabelPopover\n\t\t\t\tclass="cds--toggletip"\n\t\t\t\t[isOpen]="isOpen"\n\t\t\t\t(isOpenChange)="onPopoverIsOpenChange($event)"\n\t\t\t\t(onOpen)="onOpen.emit($event)"\n\t\t\t\t(onClose)="onClose.emit($event)"\n\t\t\t\t[align]="align"\n\t\t\t\t[caret]="caret"\n\t\t\t\t[dropShadow]="dropShadow"\n\t\t\t\t[highContrast]="highContrast"\n\t\t\t\t[autoAlign]="autoAlign"\n\t\t\t\t[alignmentAxisOffset]="alignmentAxisOffset">\n\t\t\t\t<button\n\t\t\t\t\ttype="button"\n\t\t\t\t\t[attr.aria-label]="computedAriaLabel"\n\t\t\t\t\t[attr.aria-expanded]="isOpen"\n\t\t\t\t\t[attr.aria-controls]="id"\n\t\t\t\t\t[ngClass]="triggerClasses"\n\t\t\t\t\t(click)="onTriggerClick($event)">\n\t\t\t\t\t<span class="cds--ai-label__text">{{aiText}}</span>\n\t\t\t\t\t<span *ngIf="kind === \'inline\' && textLabel" class="cds--ai-label__additional-text">{{textLabel}}</span>\n\t\t\t\t</button>\n\n\t\t\t\t<span\n\t\t\t\t\t[id]="id"\n\t\t\t\t\tclass="cds--popover"\n\t\t\t\t\taria-live="polite">\n\t\t\t\t\t<span class="cds--popover-content cds--ai-label-content">\n\t\t\t\t\t\t<div class="cds--toggletip-content">\n\t\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span *ngIf="autoAlign" class="cds--popover-caret cds--popover--auto-align"></span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf="!autoAlign" class="cds--popover-caret"></span>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t</ng-container>\n\n\t\t<cds-icon-button\n\t\t\t*ngIf="revertActive"\n\t\t\tkind="ghost"\n\t\t\tsize="sm"\n\t\t\t[description]="revertLabel"\n\t\t\t[autoAlign]="autoAlign"\n\t\t\t[buttonAttributes]="{ \'aria-label\': revertLabel }"\n\t\t\t(click)="onRevertButtonClick($event)">\n\t\t\t<svg cdsIcon="undo" size="16"></svg>\n\t\t</cds-icon-button>\n\t'})],AILabelComponent);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),src_button=__webpack_require__("./src/button/index.ts"),icon=__webpack_require__("./src/icon/index.ts");let AILabelModule=class AILabelModule{};AILabelModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[AILabelComponent,AILabelPopoverDirective,AILabelContent,AILabelActions],exports:[AILabelComponent,AILabelContent,AILabelActions],imports:[common.CommonModule,src_button.hJ,icon.QX,popover.UU]})],AILabelModule)},"./src/link/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{rU:()=>Link,LO:()=>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,this.visited=!1}get sizeSm(){return"sm"===this.size}get sizeMd(){return"md"===this.size}get sizeLg(){return"lg"===this.size}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"]}],size:[{type:core.Input}],sizeSm:[{type:core.HostBinding,args:["class.cds--link--sm"]}],sizeMd:[{type:core.HostBinding,args:["class.cds--link--md"]}],sizeLg:[{type:core.HostBinding,args:["class.cds--link--lg"]}],visited:[{type:core.Input},{type:core.HostBinding,args:["class.cds--link--visited"]}],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);let LinkIconDirective=class LinkIconDirective{constructor(){this.iconClass=!0}};LinkIconDirective.propDecorators={iconClass:[{type:core.HostBinding,args:["class.cds--link__icon"]}]},LinkIconDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[ibmLinkIcon], [cdsLinkIcon]"})],LinkIconDirective);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,LinkIconDirective],exports:[Link,LinkIconDirective],imports:[common.CommonModule]})],LinkModule)},"./src/ai-label/ai-label.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,Inline:()=>Inline,InlineWithContent:()=>InlineWithContent,Revert:()=>Revert,WithAutoAlign:()=>WithAutoAlign,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _storybook_angular__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),_button__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/button/index.ts"),_icon__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/icon/index.ts"),_link__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/link/index.ts"),_storybook_ai_label_story_shared__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/storybook/ai-label-story-shared.ts"),___WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/ai-label/index.ts");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/AILabel",decorators:[(0,_storybook_angular__WEBPACK_IMPORTED_MODULE_0__.moduleMetadata)({imports:[___WEBPACK_IMPORTED_MODULE_5__.uV,_button__WEBPACK_IMPORTED_MODULE_1__.hJ,_icon__WEBPACK_IMPORTED_MODULE_2__.QX,_link__WEBPACK_IMPORTED_MODULE_3__.LO]})],args:{aiText:"AI",textLabel:"",kind:"default",size:"md",align:"bottom",autoAlign:!0,revertActive:!1,revertLabel:"Revert to AI input",ariaLabel:"Show information",isOpen:!1},argTypes:{kind:{options:["default","inline"],control:"select"},size:{options:["mini","2xs","xs","sm","md","lg","xl"],control:"select"},align:{options:["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"],control:"select"},autoAlign:{control:"boolean"},revertClick:{action:"revertClick"},onOpen:{action:"onOpen"},onClose:{action:"onClose"},isOpenChange:{action:"isOpenChange"}},component:___WEBPACK_IMPORTED_MODULE_5__.UD,subcomponents:{AILabelContent:___WEBPACK_IMPORTED_MODULE_5__.q,AILabelActions:___WEBPACK_IMPORTED_MODULE_5__.zb}},Default=(args=>({props:args,template:'\n        <div class="ai-label-container">\n            <cds-ai-label\n                [aiText]="aiText"\n                [kind]="kind"\n                [size]="size"\n                [align]="align"\n                [isOpen]="isOpen"\n                [autoAlign]="autoAlign"\n                [ariaLabel]="ariaLabel"\n                [revertActive]="revertActive"\n                [revertLabel]="revertLabel"\n                (revertClick)="revertClick($event)"\n                (onOpen)="onOpen($event)"\n                (onClose)="onClose($event)"\n                (isOpenChange)="isOpenChange($event)">\n                    <div>\n                        <p class="secondary">AI Explained</p>\n                        <h2 class="ai-label-heading">84%</h2>\n                        <p class="secondary bold">Confidence score</p>\n                        <p class="secondary">\n                            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do\n                            eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n                        </p>\n                        <hr />\n                        <p class="secondary">Model type</p>\n                        <p class="bold">Foundation model</p>\n                    </div>\n\n                    <div cdsAILabelActions>\n                        <cds-icon-button kind="ghost" align="top" description="View">\n                            <svg cdsIcon="view" size="16"></svg>\n                        </cds-icon-button>\n                        <cds-icon-button kind="ghost" align="top" description="Download">\n                            <svg cdsIcon="download" size="16"></svg>\n                        </cds-icon-button>\n                        <cds-icon-button kind="ghost" align="top" description="Folders">\n                            <svg cdsIcon="folder" size="16"></svg>\n                        </cds-icon-button>\n                        <button cdsButton type="button">View details</button>\n                    </div>\n            </cds-ai-label>\n        </div>\n    ',styles:_storybook_ai_label_story_shared__WEBPACK_IMPORTED_MODULE_4__.J6})).bind({});Default.parameters={docs:{story:{inline:!1,height:"30rem"}},layout:"centered"};const Inline=(args=>({props:args,template:'\n        <div class="ai-label-container">\n            <cds-ai-label\n                [aiText]="aiText"\n                kind="inline"\n                [size]="size"\n                [align]="align"\n                [isOpen]="isOpen"\n                [autoAlign]="autoAlign"\n                [ariaLabel]="ariaLabel"\n                [revertActive]="revertActive"\n                [revertLabel]="revertLabel"\n                (revertClick)="revertClick($event)"\n                (onOpen)="onOpen($event)"\n                (onClose)="onClose($event)"\n                (isOpenChange)="isOpenChange($event)">\n                    <div>\n                        <p class="secondary">AI Explained</p>\n                        <h2 class="ai-label-heading">84%</h2>\n                        <p class="secondary bold">Confidence score</p>\n                        <p class="secondary">\n                            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do\n                            eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n                        </p>\n                        <hr />\n                        <p class="secondary">Model type</p>\n                        <p class="bold">Foundation model</p>\n                    </div>\n\n                    <div cdsAILabelActions>\n                        <cds-icon-button kind="ghost" align="top" description="View">\n                            <svg cdsIcon="view" size="16"></svg>\n                        </cds-icon-button>\n                        <cds-icon-button kind="ghost" align="top" description="Download">\n                            <svg cdsIcon="download" size="16"></svg>\n                        </cds-icon-button>\n                        <cds-icon-button kind="ghost" align="top" description="Folders">\n                            <svg cdsIcon="folder" size="16"></svg>\n                        </cds-icon-button>\n                        <button cdsButton type="button">View details</button>\n                    </div>\n            </cds-ai-label>\n        </div>\n    ',styles:_storybook_ai_label_story_shared__WEBPACK_IMPORTED_MODULE_4__.J6})).bind({});Inline.args={kind:"inline",size:"md"},Inline.argTypes={size:{options:["sm","md","lg"],control:"select"}},Inline.parameters={docs:{story:{inline:!1,height:"30rem"}},layout:"centered"};const InlineWithContent=(args=>({props:args,template:'\n        <div class="ai-label-container">\n            <cds-ai-label\n                [aiText]="aiText"\n                kind="inline"\n                [textLabel]="textLabel"\n                [size]="size"\n                [align]="align"\n                [isOpen]="isOpen"\n                [autoAlign]="autoAlign"\n                [ariaLabel]="ariaLabel"\n                [revertActive]="revertActive"\n                [revertLabel]="revertLabel"\n                (revertClick)="revertClick($event)"\n                (onOpen)="onOpen($event)"\n                (onClose)="onClose($event)"\n                (isOpenChange)="isOpenChange($event)">\n                    <div>\n                        <p class="secondary">AI Explained</p>\n                        <h2 class="ai-label-heading">84%</h2>\n                        <p class="secondary bold">Confidence score</p>\n                        <p class="secondary">\n                            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do\n                            eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n                        </p>\n                        <hr />\n                        <p class="secondary">Model type</p>\n                        <p class="bold">Foundation model</p>\n                    </div>\n\n                    <div cdsAILabelActions>\n                        <cds-icon-button kind="ghost" align="top" description="View">\n                            <svg cdsIcon="view" size="16"></svg>\n                        </cds-icon-button>\n                        <cds-icon-button kind="ghost" align="top" description="Download">\n                            <svg cdsIcon="download" size="16"></svg>\n                        </cds-icon-button>\n                        <cds-icon-button kind="ghost" align="top" description="Folders">\n                            <svg cdsIcon="folder" size="16"></svg>\n                        </cds-icon-button>\n                        <button cdsButton type="button">View details</button>\n                    </div>\n            </cds-ai-label>\n        </div>\n    ',styles:_storybook_ai_label_story_shared__WEBPACK_IMPORTED_MODULE_4__.J6})).bind({});InlineWithContent.args={kind:"inline",textLabel:"Text goes here",size:"md"},InlineWithContent.argTypes={size:{options:["sm","md","lg"],control:"select"}},InlineWithContent.parameters={docs:{story:{inline:!1,height:"30rem"}},layout:"centered"};const Revert=(args=>({props:args,template:'\n        <div class="ai-label-container">\n            <cds-ai-label\n                [aiText]="aiText"\n                [size]="size"\n                [revertActive]="revertActive"\n                [revertLabel]="revertLabel"\n                (revertClick)="revertClick($event)">\n                    <div>\n                        <p class="secondary">AI Explained</p>\n                        <h2 class="ai-label-heading">84%</h2>\n                        <p class="secondary bold">Confidence score</p>\n                        <p class="secondary">\n                            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do\n                            eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n                        </p>\n                        <hr />\n                        <p class="secondary">Model type</p>\n                        <p class="bold">Foundation model</p>\n                    </div>\n\n                    <div cdsAILabelActions>\n                        <cds-icon-button kind="ghost" align="top" description="View">\n                            <svg cdsIcon="view" size="16"></svg>\n                        </cds-icon-button>\n                        <cds-icon-button kind="ghost" align="top" description="Download">\n                            <svg cdsIcon="download" size="16"></svg>\n                        </cds-icon-button>\n                        <cds-icon-button kind="ghost" align="top" description="Folders">\n                            <svg cdsIcon="folder" size="16"></svg>\n                        </cds-icon-button>\n                        <button cdsButton type="button">View details</button>\n                    </div>\n            </cds-ai-label>\n        </div>\n    ',styles:_storybook_ai_label_story_shared__WEBPACK_IMPORTED_MODULE_4__.J6})).bind({});Revert.args={revertActive:!0,revertLabel:"Revert to AI input"},Revert.parameters={docs:{story:{inline:!1,height:"12rem"}},layout:"centered"};const WithAutoAlign=(args=>({props:args,template:'\n        <div style="height: 3000px;">\n            <p style="padding: 1rem;">Scroll down — the popover repositions automatically.</p>\n            <div style="position: absolute; top: 700px; left: 700px;">\n                <div class="ai-label-container">\n                    <cds-ai-label\n                        [aiText]="aiText"\n                        [kind]="kind"\n                        [size]="size"\n                        align="top"\n                        [autoAlign]="true"\n                        [isOpen]="isOpen"\n                        [ariaLabel]="ariaLabel"\n                        (onOpen)="onOpen($event)"\n                        (onClose)="onClose($event)"\n                        (isOpenChange)="isOpenChange($event)">\n                        <div>\n                            <p class="secondary">AI Explained</p>\n                            <h2 class="ai-label-heading">84%</h2>\n                            <p class="secondary bold">Confidence score</p>\n                            <p class="secondary">\n                                Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do\n                                eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n                            </p>\n                            <hr />\n                            <p class="secondary">Model type</p>\n                            <p class="bold">Foundation model</p>\n                        </div>\n\n                        <div cdsAILabelActions>\n                            <cds-icon-button kind="ghost" align="top" description="View">\n                                <svg cdsIcon="view" size="16"></svg>\n                            </cds-icon-button>\n                            <cds-icon-button kind="ghost" align="top" description="Download">\n                                <svg cdsIcon="download" size="16"></svg>\n                            </cds-icon-button>\n                            <cds-icon-button kind="ghost" align="top" description="Folders">\n                                <svg cdsIcon="folder" size="16"></svg>\n                            </cds-icon-button>\n                            <button cdsButton type="button">View details</button>\n                        </div>\n                    </cds-ai-label>\n                </div>\n            </div>\n        </div>\n    ',styles:_storybook_ai_label_story_shared__WEBPACK_IMPORTED_MODULE_4__.J6})).bind({});WithAutoAlign.args={autoAlign:!0,align:"top",isOpen:!0},Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div class="ai-label-container">\n            <cds-ai-label\n                [aiText]="aiText"\n                [kind]="kind"\n                [size]="size"\n                [align]="align"\n                [isOpen]="isOpen"\n                [autoAlign]="autoAlign"\n                [ariaLabel]="ariaLabel"\n                [revertActive]="revertActive"\n                [revertLabel]="revertLabel"\n                (revertClick)="revertClick($event)"\n                (onOpen)="onOpen($event)"\n                (onClose)="onClose($event)"\n                (isOpenChange)="isOpenChange($event)">\n                    <div>\n                        <p class="secondary">AI Explained</p>\n                        <h2 class="ai-label-heading">84%</h2>\n                        <p class="secondary bold">Confidence score</p>\n                        <p class="secondary">\n                            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do\n                            eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n                        </p>\n                        <hr />\n                        <p class="secondary">Model type</p>\n                        <p class="bold">Foundation model</p>\n                    </div>\n\n                    <div cdsAILabelActions>\n                        <cds-icon-button kind="ghost" align="top" description="View">\n                            <svg cdsIcon="view" size="16"></svg>\n                        </cds-icon-button>\n                        <cds-icon-button kind="ghost" align="top" description="Download">\n                            <svg cdsIcon="download" size="16"></svg>\n                        </cds-icon-button>\n                        <cds-icon-button kind="ghost" align="top" description="Folders">\n                            <svg cdsIcon="folder" size="16"></svg>\n                        </cds-icon-button>\n                        <button cdsButton type="button">View details</button>\n                    </div>\n            </cds-ai-label>\n        </div>\n    `,\n  styles: AI_LABEL_STORY_STYLES\n})',...Default.parameters?.docs?.source}}},Inline.parameters={...Inline.parameters,docs:{...Inline.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div class="ai-label-container">\n            <cds-ai-label\n                [aiText]="aiText"\n                kind="inline"\n                [size]="size"\n                [align]="align"\n                [isOpen]="isOpen"\n                [autoAlign]="autoAlign"\n                [ariaLabel]="ariaLabel"\n                [revertActive]="revertActive"\n                [revertLabel]="revertLabel"\n                (revertClick)="revertClick($event)"\n                (onOpen)="onOpen($event)"\n                (onClose)="onClose($event)"\n                (isOpenChange)="isOpenChange($event)">\n                    <div>\n                        <p class="secondary">AI Explained</p>\n                        <h2 class="ai-label-heading">84%</h2>\n                        <p class="secondary bold">Confidence score</p>\n                        <p class="secondary">\n                            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do\n                            eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n                        </p>\n                        <hr />\n                        <p class="secondary">Model type</p>\n                        <p class="bold">Foundation model</p>\n                    </div>\n\n                    <div cdsAILabelActions>\n                        <cds-icon-button kind="ghost" align="top" description="View">\n                            <svg cdsIcon="view" size="16"></svg>\n                        </cds-icon-button>\n                        <cds-icon-button kind="ghost" align="top" description="Download">\n                            <svg cdsIcon="download" size="16"></svg>\n                        </cds-icon-button>\n                        <cds-icon-button kind="ghost" align="top" description="Folders">\n                            <svg cdsIcon="folder" size="16"></svg>\n                        </cds-icon-button>\n                        <button cdsButton type="button">View details</button>\n                    </div>\n            </cds-ai-label>\n        </div>\n    `,\n  styles: AI_LABEL_STORY_STYLES\n})',...Inline.parameters?.docs?.source}}},InlineWithContent.parameters={...InlineWithContent.parameters,docs:{...InlineWithContent.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div class="ai-label-container">\n            <cds-ai-label\n                [aiText]="aiText"\n                kind="inline"\n                [textLabel]="textLabel"\n                [size]="size"\n                [align]="align"\n                [isOpen]="isOpen"\n                [autoAlign]="autoAlign"\n                [ariaLabel]="ariaLabel"\n                [revertActive]="revertActive"\n                [revertLabel]="revertLabel"\n                (revertClick)="revertClick($event)"\n                (onOpen)="onOpen($event)"\n                (onClose)="onClose($event)"\n                (isOpenChange)="isOpenChange($event)">\n                    <div>\n                        <p class="secondary">AI Explained</p>\n                        <h2 class="ai-label-heading">84%</h2>\n                        <p class="secondary bold">Confidence score</p>\n                        <p class="secondary">\n                            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do\n                            eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n                        </p>\n                        <hr />\n                        <p class="secondary">Model type</p>\n                        <p class="bold">Foundation model</p>\n                    </div>\n\n                    <div cdsAILabelActions>\n                        <cds-icon-button kind="ghost" align="top" description="View">\n                            <svg cdsIcon="view" size="16"></svg>\n                        </cds-icon-button>\n                        <cds-icon-button kind="ghost" align="top" description="Download">\n                            <svg cdsIcon="download" size="16"></svg>\n                        </cds-icon-button>\n                        <cds-icon-button kind="ghost" align="top" description="Folders">\n                            <svg cdsIcon="folder" size="16"></svg>\n                        </cds-icon-button>\n                        <button cdsButton type="button">View details</button>\n                    </div>\n            </cds-ai-label>\n        </div>\n    `,\n  styles: AI_LABEL_STORY_STYLES\n})',...InlineWithContent.parameters?.docs?.source}}},Revert.parameters={...Revert.parameters,docs:{...Revert.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div class="ai-label-container">\n            <cds-ai-label\n                [aiText]="aiText"\n                [size]="size"\n                [revertActive]="revertActive"\n                [revertLabel]="revertLabel"\n                (revertClick)="revertClick($event)">\n                    <div>\n                        <p class="secondary">AI Explained</p>\n                        <h2 class="ai-label-heading">84%</h2>\n                        <p class="secondary bold">Confidence score</p>\n                        <p class="secondary">\n                            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do\n                            eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n                        </p>\n                        <hr />\n                        <p class="secondary">Model type</p>\n                        <p class="bold">Foundation model</p>\n                    </div>\n\n                    <div cdsAILabelActions>\n                        <cds-icon-button kind="ghost" align="top" description="View">\n                            <svg cdsIcon="view" size="16"></svg>\n                        </cds-icon-button>\n                        <cds-icon-button kind="ghost" align="top" description="Download">\n                            <svg cdsIcon="download" size="16"></svg>\n                        </cds-icon-button>\n                        <cds-icon-button kind="ghost" align="top" description="Folders">\n                            <svg cdsIcon="folder" size="16"></svg>\n                        </cds-icon-button>\n                        <button cdsButton type="button">View details</button>\n                    </div>\n            </cds-ai-label>\n        </div>\n    `,\n  styles: AI_LABEL_STORY_STYLES\n})',...Revert.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            <p style="padding: 1rem;">Scroll down — the popover repositions automatically.</p>\n            <div style="position: absolute; top: 700px; left: 700px;">\n                <div class="ai-label-container">\n                    <cds-ai-label\n                        [aiText]="aiText"\n                        [kind]="kind"\n                        [size]="size"\n                        align="top"\n                        [autoAlign]="true"\n                        [isOpen]="isOpen"\n                        [ariaLabel]="ariaLabel"\n                        (onOpen)="onOpen($event)"\n                        (onClose)="onClose($event)"\n                        (isOpenChange)="isOpenChange($event)">\n                        <div>\n                            <p class="secondary">AI Explained</p>\n                            <h2 class="ai-label-heading">84%</h2>\n                            <p class="secondary bold">Confidence score</p>\n                            <p class="secondary">\n                                Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do\n                                eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n                            </p>\n                            <hr />\n                            <p class="secondary">Model type</p>\n                            <p class="bold">Foundation model</p>\n                        </div>\n\n                        <div cdsAILabelActions>\n                            <cds-icon-button kind="ghost" align="top" description="View">\n                                <svg cdsIcon="view" size="16"></svg>\n                            </cds-icon-button>\n                            <cds-icon-button kind="ghost" align="top" description="Download">\n                                <svg cdsIcon="download" size="16"></svg>\n                            </cds-icon-button>\n                            <cds-icon-button kind="ghost" align="top" description="Folders">\n                                <svg cdsIcon="folder" size="16"></svg>\n                            </cds-icon-button>\n                            <button cdsButton type="button">View details</button>\n                        </div>\n                    </cds-ai-label>\n                </div>\n            </div>\n        </div>\n    `,\n  styles: AI_LABEL_STORY_STYLES\n})',...WithAutoAlign.parameters?.docs?.source}}};const __namedExportsOrder=["Default","Inline","InlineWithContent","Revert","WithAutoAlign"]}}]);