carbon-components-angular/docs/storybook/breadcrumb-breadcrumb-stories.17ad5997.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[6842],{"./src/breadcrumb/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{aG:()=>Breadcrumb,UN:()=>BreadcrumbItemComponent,wH:()=>BreadcrumbModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),platform_browser=__webpack_require__("./node_modules/@angular/platform-browser/fesm2020/platform-browser.mjs"),router=__webpack_require__("./node_modules/@angular/router/fesm2020/router.mjs");let BreadcrumbItemComponent=class BreadcrumbItemComponent{constructor(domSanitizer,router){this.domSanitizer=domSanitizer,this.router=router,this.navigation=new core.EventEmitter,this.skeleton=!1,this.ariaCurrent="page",this.current=!1,this.itemClass=!0}set href(v){this._href=v}get href(){return this.domSanitizer.bypassSecurityTrustUrl(this._href)}useTemplate(){return this.skeleton||this._href||this.route}navigate(event){if(this.router&&this.route){event.preventDefault();const status=this.router.navigate(this.route,this.routeExtras);this.navigation.emit(status)}}};BreadcrumbItemComponent.ctorParameters=()=>[{type:platform_browser.DomSanitizer},{type:router.F0,decorators:[{type:core.Optional}]}],BreadcrumbItemComponent.propDecorators={href:[{type:core.Input}],route:[{type:core.Input}],routeExtras:[{type:core.Input}],navigation:[{type:core.Output}],skeleton:[{type:core.Input}],ariaCurrent:[{type:core.Input}],current:[{type:core.HostBinding,args:["class.cds--breadcrumb-item--current"]},{type:core.Input}],itemClass:[{type:core.HostBinding,args:["class.cds--breadcrumb-item"]}]},BreadcrumbItemComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-breadcrumb-item, ibm-breadcrumb-item",template:'\n\t<a\n\t\tclass="cds--link"\n\t\t[href]="(skeleton ? \'/#\' : href)"\n\t\t(click)="navigate($event)"\n\t\t[attr.aria-current]="(current ? ariaCurrent : null)"\n\t\t*ngIf="useTemplate(); else content">\n\t\t<ng-container *ngTemplateOutlet="content"></ng-container>\n\t</a>\n\t<ng-template #content>\n\t\t<ng-content></ng-content>\n\t</ng-template>'})],BreadcrumbItemComponent);var i18n=__webpack_require__("./src/i18n/index.ts");let Breadcrumb=class Breadcrumb{constructor(i18n,router){this.i18n=i18n,this.router=router,this.noTrailingSlash=!1,this.ariaLabel=this.i18n.get().BREADCRUMB.LABEL,this.autoAlign=!1,this.description=this.i18n.get().BREADCRUMB.OVERFLOW_MENU_DESCRIPTION,this.navigation=new core.EventEmitter,this._skeleton=!1}set skeleton(value){this._skeleton=value,this.updateChildren()}get skeleton(){return this._skeleton}set threshold(threshold){this._threshold=threshold,(isNaN(threshold)||threshold<4)&&(this._threshold=4)}get threshold(){return this._threshold}get shouldShowContent(){return!this.items}get shouldShowOverflow(){return!!this.items&&this.items.length>this.threshold}get first(){return this.shouldShowOverflow?this.items[0]:null}get overflowItems(){return this.shouldShowOverflow?this.items.slice(1,this.items.length-2):[]}get secondLast(){return this.shouldShowOverflow?this.items[this.items.length-2]:null}get last(){return this.shouldShowOverflow?this.items[this.items.length-1]:null}ngAfterContentInit(){this.updateChildren()}navigate(event,item){if(this.router&&item.route){event.preventDefault();const status=this.router.navigate(item.route,item.routeExtras);this.navigation.emit(status)}}updateChildren(){this.children&&this.children.toArray().forEach((child=>child.skeleton=this.skeleton))}};Breadcrumb.ctorParameters=()=>[{type:i18n.oc},{type:router.F0,decorators:[{type:core.Optional}]}],Breadcrumb.propDecorators={children:[{type:core.ContentChildren,args:[BreadcrumbItemComponent]}],items:[{type:core.Input}],noTrailingSlash:[{type:core.Input}],ariaLabel:[{type:core.Input}],skeleton:[{type:core.Input}],threshold:[{type:core.Input}],autoAlign:[{type:core.Input}],description:[{type:core.Input}],navigation:[{type:core.Output}]},Breadcrumb=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-breadcrumb, ibm-breadcrumb",template:'\n\t<nav #nav class="cds--breadcrumb"\n\t\t[ngClass]="{\n\t\t\t\'cds--skeleton\' : skeleton,\n\t\t\t\'cds--breadcrumb--no-trailing-slash\' : noTrailingSlash\n\t\t}"\n\t\t[attr.aria-label]="ariaLabel">\n\t\t<ng-template [ngIf]="shouldShowContent">\n\t\t\t<ng-content></ng-content>\n\t\t</ng-template>\n\t\t<ng-template [ngIf]="!shouldShowOverflow">\n\t\t\t<cds-breadcrumb-item\n\t\t\t\t*ngFor="let item of items"\n\t\t\t\t[href]="item.href"\n\t\t\t\t[route]="item.route"\n\t\t\t\t[routeExtras]="item.routeExtras"\n\t\t\t\t[current]="item.current"\n\t\t\t\t[ariaCurrent]="item.ariaCurrent"\n\t\t\t\t(navigation)="navigation.emit($event)">\n\t\t\t\t<ng-container *ngIf="!item.template">{{item.content}}</ng-container>\n\t\t\t\t<ng-template\n\t\t\t\t\t*ngIf="item.template"\n\t\t\t\t\t[ngTemplateOutlet]="item.template"\n\t\t\t\t\t[ngTemplateOutletContext]="{ $implicit: item }">\n\t\t\t\t</ng-template>\n\t\t\t</cds-breadcrumb-item>\n\t\t</ng-template>\n\t\t<ng-template [ngIf]="shouldShowOverflow">\n\t\t\t<cds-breadcrumb-item\n\t\t\t\t[href]="first?.href"\n\t\t\t\t[route]="first?.route"\n\t\t\t\t[routeExtras]="first?.routeExtras"\n\t\t\t\t[current]="first?.current"\n\t\t\t\t[ariaCurrent]="first?.ariaCurrent"\n\t\t\t\t(navigation)="navigation.emit($event)">\n\t\t\t\t<ng-container *ngIf="!first?.template">{{first?.content}}</ng-container>\n\t\t\t\t<ng-template\n\t\t\t\t\t*ngIf="first?.template"\n\t\t\t\t\t[ngTemplateOutlet]="first?.template"\n\t\t\t\t\t[ngTemplateOutletContext]="{ $implicit: first }">\n\t\t\t\t</ng-template>\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item>\n\t\t\t\t<ng-template #overflowMenuTrigger>\n\t\t\t\t\t<svg class="cds--overflow-menu__icon" cdsIcon="overflow-menu--horizontal" size="16"></svg>\n\t\t\t\t</ng-template>\n\t\t\t\t<cds-overflow-menu\n\t\t\t\t\t[customTrigger]="overflowMenuTrigger"\n\t\t\t\t\ttriggerClass="cds--btn--icon-only"\n\t\t\t\t\t[description]="description"\n\t\t\t\t\t[autoAlign]="autoAlign">\n\t\t\t\t\t<li class="cds--overflow-menu-options__option"\n\t\t\t\t\t\t*ngFor="let item of overflowItems">\n\t\t\t\t\t\t<a class="cds--overflow-menu-options__btn"\n\t\t\t\t\t\t\thref="{{item?.href}}"\n\t\t\t\t\t\t\t(click)="navigate($event, item)"\n\t\t\t\t\t\t\tstyle="text-decoration: none;">\n\t\t\t\t\t\t\t<ng-container *ngIf="!item?.template">{{item?.content}}</ng-container>\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\t*ngIf="item?.template"\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]="item?.template"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]="{ $implicit: item }">\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t</cds-overflow-menu>\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item\n\t\t\t\t[href]="secondLast?.href"\n\t\t\t\t[route]="secondLast?.route"\n\t\t\t\t[routeExtras]="secondLast?.routeExtras"\n\t\t\t\t[current]="secondLast?.current"\n\t\t\t\t[ariaCurrent]="secondLast?.ariaCurrent"\n\t\t\t\t(navigation)="navigation.emit($event)">\n\t\t\t\t<ng-container *ngIf="!secondLast?.template">{{secondLast?.content}}</ng-container>\n\t\t\t\t<ng-template\n\t\t\t\t\t*ngIf="secondLast?.template"\n\t\t\t\t\t[ngTemplateOutlet]="secondLast?.template"\n\t\t\t\t\t[ngTemplateOutletContext]="{ $implicit: secondLast }">\n\t\t\t\t</ng-template>\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item\n\t\t\t\t[href]="last?.href"\n\t\t\t\t[route]="last?.route"\n\t\t\t\t[routeExtras]="last?.routeExtras"\n\t\t\t\t[current]="last?.current"\n\t\t\t\t[ariaCurrent]="last?.ariaCurrent"\n\t\t\t\t(navigation)="navigation.emit($event)">\n\t\t\t\t<ng-container *ngIf="!last?.template">{{last?.content}}</ng-container>\n\t\t\t\t<ng-template\n\t\t\t\t\t*ngIf="last?.template"\n\t\t\t\t\t[ngTemplateOutlet]="last?.template"\n\t\t\t\t\t[ngTemplateOutletContext]="{ $implicit: last }">\n\t\t\t\t</ng-template>\n\t\t\t</cds-breadcrumb-item>\n\t\t</ng-template>\n\t</nav>'})],Breadcrumb);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),dialog=__webpack_require__("./src/dialog/index.ts"),src_button=__webpack_require__("./src/button/index.ts"),icon=__webpack_require__("./src/icon/index.ts");let BreadcrumbModule=class BreadcrumbModule{};BreadcrumbModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Breadcrumb,BreadcrumbItemComponent],exports:[Breadcrumb,BreadcrumbItemComponent],imports:[common.CommonModule,src_button.hJ,dialog.Su,i18n.LU,icon.QX]})],BreadcrumbModule)},"./src/breadcrumb/breadcrumb.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,CurrentPage:()=>CurrentPage,Model:()=>Model,ModelWithTemplate:()=>ModelWithTemplate,Skeleton:()=>Skeleton,__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/breadcrumb/index.ts");let breadcrumbItems;const createBreadcrumbItems=(count,content="Breadcrumb")=>(breadcrumbItems&&count===breadcrumbItems.length||(breadcrumbItems=Array(count).fill(0).map(((x,i)=>({content:`${content} ${i+1}`,href:"#"+(i+1)})))),breadcrumbItems),withTemplate=(templateRef,items)=>items.map((item=>Object.assign(item,{template:templateRef}))),__WEBPACK_DEFAULT_EXPORT__={title:"Components/Breadcrumb",decorators:[(0,_storybook_angular__WEBPACK_IMPORTED_MODULE_0__.moduleMetadata)({imports:[___WEBPACK_IMPORTED_MODULE_1__.wH]})],args:{noTrailingSlash:!0,skeleton:!1},argTypes:{noTrailingSlash:{type:"boolean"},skeleton:{type:"boolean",control:!1}},component:___WEBPACK_IMPORTED_MODULE_1__.aG,subcomponents:{BreadcrumbItemComponent:___WEBPACK_IMPORTED_MODULE_1__.UN}},Basic=(args=>({props:args,template:'\n        <cds-breadcrumb [noTrailingSlash]="noTrailingSlash">\n            <cds-breadcrumb-item href="#1">\n                Breadcrumb 1\n            </cds-breadcrumb-item>\n            <cds-breadcrumb-item href="#2">\n                Breadcrumb 2\n            </cds-breadcrumb-item>\n            <cds-breadcrumb-item href="#3">\n                Breadcrumb 3\n            </cds-breadcrumb-item>\n        </cds-breadcrumb>\n    '})).bind({}),CurrentPage=(args=>({props:args,template:'\n        <cds-breadcrumb>\n            <cds-breadcrumb-item href="#1">\n                Breadcrumb 1\n            </cds-breadcrumb-item>\n            <cds-breadcrumb-item href="#2">\n                Breadcrumb 2\n            </cds-breadcrumb-item>\n            <cds-breadcrumb-item current="true" href="#3">\n                Breadcrumb 3\n            </cds-breadcrumb-item>\n        </cds-breadcrumb>\n    '})).bind({});CurrentPage.parameters={controls:{disable:!0}};const Model=(args=>({props:{...args,createBreadcrumbItems},template:'\n        <cds-breadcrumb\n            [noTrailingSlash]="noTrailingSlash"\n            [threshold]="threshold"\n            [items]="createBreadcrumbItems(itemCount, content)">\n        </cds-breadcrumb>\n    '})).bind({});Model.args={itemCount:10,threshold:4,templateContent:"Hello",content:"breadcrumb"};const ModelWithTemplate=(args=>({props:{...args,createBreadcrumbItems,withTemplate},template:'\n        <ng-template #breadcrumbTemplate let-item>\n            {{ templateContent }}{{ item.content }}\n        </ng-template>\n        <cds-breadcrumb\n            [noTrailingSlash]="noTrailingSlash"\n            [threshold]="threshold"\n            [items]="withTemplate(breadcrumbTemplate, createBreadcrumbItems(itemCount, content))">\n        </cds-breadcrumb>\n    '})).bind({});ModelWithTemplate.args={itemCount:10,threshold:4,templateContent:"Hello",content:"breadcrumb"};const Skeleton=(args=>({props:args,template:'\n        <cds-breadcrumb skeleton="true" [noTrailingSlash]="noTrailingSlash">\n            <cds-breadcrumb-item></cds-breadcrumb-item>\n            <cds-breadcrumb-item></cds-breadcrumb-item>\n            <cds-breadcrumb-item></cds-breadcrumb-item>\n            <cds-breadcrumb-item></cds-breadcrumb-item>\n        </cds-breadcrumb>\n    '})).bind({});Skeleton.parameters={controls:{disable:!0}},Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-breadcrumb [noTrailingSlash]="noTrailingSlash">\n            <cds-breadcrumb-item href="#1">\n                Breadcrumb 1\n            </cds-breadcrumb-item>\n            <cds-breadcrumb-item href="#2">\n                Breadcrumb 2\n            </cds-breadcrumb-item>\n            <cds-breadcrumb-item href="#3">\n                Breadcrumb 3\n            </cds-breadcrumb-item>\n        </cds-breadcrumb>\n    `\n})',...Basic.parameters?.docs?.source}}},CurrentPage.parameters={...CurrentPage.parameters,docs:{...CurrentPage.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-breadcrumb>\n            <cds-breadcrumb-item href="#1">\n                Breadcrumb 1\n            </cds-breadcrumb-item>\n            <cds-breadcrumb-item href="#2">\n                Breadcrumb 2\n            </cds-breadcrumb-item>\n            <cds-breadcrumb-item current="true" href="#3">\n                Breadcrumb 3\n            </cds-breadcrumb-item>\n        </cds-breadcrumb>\n    `\n})',...CurrentPage.parameters?.docs?.source}}},Model.parameters={...Model.parameters,docs:{...Model.parameters?.docs,source:{originalSource:'args => ({\n  props: {\n    ...args,\n    createBreadcrumbItems\n  },\n  template: `\n        <cds-breadcrumb\n            [noTrailingSlash]="noTrailingSlash"\n            [threshold]="threshold"\n            [items]="createBreadcrumbItems(itemCount, content)">\n        </cds-breadcrumb>\n    `\n})',...Model.parameters?.docs?.source}}},ModelWithTemplate.parameters={...ModelWithTemplate.parameters,docs:{...ModelWithTemplate.parameters?.docs,source:{originalSource:'args => ({\n  props: {\n    ...args,\n    createBreadcrumbItems,\n    withTemplate\n  },\n  template: `\n        <ng-template #breadcrumbTemplate let-item>\n            {{ templateContent }}{{ item.content }}\n        </ng-template>\n        <cds-breadcrumb\n            [noTrailingSlash]="noTrailingSlash"\n            [threshold]="threshold"\n            [items]="withTemplate(breadcrumbTemplate, createBreadcrumbItems(itemCount, content))">\n        </cds-breadcrumb>\n    `\n})',...ModelWithTemplate.parameters?.docs?.source}}},Skeleton.parameters={...Skeleton.parameters,docs:{...Skeleton.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-breadcrumb skeleton="true" [noTrailingSlash]="noTrailingSlash">\n            <cds-breadcrumb-item></cds-breadcrumb-item>\n            <cds-breadcrumb-item></cds-breadcrumb-item>\n            <cds-breadcrumb-item></cds-breadcrumb-item>\n            <cds-breadcrumb-item></cds-breadcrumb-item>\n        </cds-breadcrumb>\n    `\n})',...Skeleton.parameters?.docs?.source}}};const __namedExportsOrder=["Basic","CurrentPage","Model","ModelWithTemplate","Skeleton"]}}]);