npm - carbon-components-angular - Versions diffs - 5.64.0 → 5.64.1 - Mend

carbon-components-angular 5.64.0 → 5.64.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/docs/documentation.json CHANGED Viewed

@@ -11645,12 +11645,12 @@
         },
         {
             "name": "ColumnDirective",
-            "id": "directive-ColumnDirective-16fe516e9b51bd48ec634b2af4811ab3d25003cf401d48dd723538b3d00d673c939688b9109e099ab2fc8c0271c9b5acdae62fb614c2d1eab7c24d65341dde38",
+            "id": "directive-ColumnDirective-90851bddf3f3cd7fe0640185c575f22cdd7ea0d8ac808cf112fec94941155c05e9610b805ddde8454defcd2ecb88e3d02d38b9ba98876ef63079d519fe58f434",
             "file": "src/grid/column.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import {\n\tDirective,\n\tHostBinding,\n\tInput,\n\tOnChanges,\n\tOnDestroy,\n\tOnInit,\n\tOptional\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { GridService } from \"./grid.service\";\n\n@Directive({\n\tselector: \"[cdsCol], [ibmCol]\"\n})\nexport class ColumnDirective implements OnInit, OnChanges, OnDestroy {\n\t@HostBinding(\"class\")\n\tget columnClasses(): string {\n\t\treturn this._columnClasses.join(\" \");\n\t}\n\tset columnClasses(classes: string) {\n\t\tthis._columnClasses = classes.split(\" \");\n\t}\n\n\t@Input() class = \"\";\n\n\t/**\n\t * Defines columns width for specified breakpoint\n\t * Accepts the following formats:\n\t * - {[breakpoint]: number}\n\t * - {[breakpoint]: \"auto\"} - css only\n\t * - {[breakpoint]: {[start|end]: number}} - css only\n\t *\n\t * Example:\n\t * <div cdsCol [columnNumbers]={md: 3, lg: 4}></div>\n\t */\n\t@Input() columnNumbers = {};\n\n\t/**\n\t * Defines columns offset, which increases the left margin of the column.\n\t * This field will only work with flexbox grid.\n\t *\n\t * Accepts the following formats:\n\t * - {[breakpoint]: number}\n\t *\n\t * Example:\n\t * <div cdsCol [offsets]={md: 3, lg: 4}></div>\n\t */\n\t@Input() offsets = {};\n\n\t/**\n\t * Set to `true` to use css grid column hang class\n\t * This will only work when `isCss` property is set to true\n\t *\n\t * Useful when trying to align content across css grid/subgrid\n\t */\n\t@Input() columnHang = false;\n\n\tprotected _columnClasses: string[] = [];\n\n\tprivate isCssGrid = false;\n\tprivate subscription = new Subscription();\n\n\tconstructor(@Optional() private gridService: GridService) {}\n\n\tngOnInit() {\n\t\tif (this.gridService) {\n\t\t\tthis.subscription = this.gridService.gridObservable.subscribe((isCssGrid: boolean) => {\n\t\t\t\tthis.isCssGrid = isCssGrid;\n\t\t\t\tthis.updateColumnClasses();\n\t\t\t});\n\t\t} else {\n\t\t\tthis.updateColumnClasses();\n\t\t}\n\t}\n\n\tngOnChanges() {\n\t\tthis.updateColumnClasses();\n\t}\n\n\t/**\n\t * Unsubscribe from subscription\n\t */\n\tngOnDestroy() {\n\t\tthis.subscription.unsubscribe();\n\t}\n\n\tprivate updateColumnClasses() {\n\t\ttry {\n\t\t\tthis._columnClasses = [];\n\t\t\tconst columnKeys = Object.keys(this.columnNumbers);\n\n\t\t\t// Assign classes based on the type of grid used.\n\t\t\tif (this.isCssGrid) {\n\t\t\t\t// Default css grid class\n\t\t\t\tthis._columnClasses.push(\"cds--css-grid-column\");\n\t\t\t\tif (this.columnHang) {\n\t\t\t\t\tthis._columnClasses.push(\"cds--grid-column-hang\");\n\t\t\t\t}\n\n\t\t\t\tcolumnKeys.forEach(key => {\n\t\t\t\t\t/**\n\t\t\t\t\t * Passing in `auto` to a breakpoint as such: {'md': 'auto'}\n\t\t\t\t\t * will assign the element which will automatically determine the width of the column\n\t\t\t\t\t * for the breakpoint passed\n\t\t\t\t\t */\n\t\t\t\t\tif (this.columnNumbers[key] === \"auto\") {\n\t\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-span-auto`);\n\t\t\t\t\t} else if (typeof this.columnNumbers[key] === \"object\") {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * In css grid, objects can be passed to the keys in the following format:\n\t\t\t\t\t\t * {'md': {'start': 3}}\n\t\t\t\t\t\t *\n\t\t\t\t\t\t * These objects are used to position the column\n\t\t\t\t\t\t */\n\t\t\t\t\t\tif (this.columnNumbers[key][\"start\"]) {\n\t\t\t\t\t\t\t// col-start is simular equivalent of flex offset\n\t\t\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-start-${this.columnNumbers[key].start}`);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (this.columnNumbers[key][\"end\"]) {\n\t\t\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-end-${this.columnNumbers[key].end}`);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (this.columnNumbers[key][\"span\"]) {\n\t\t\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-span-${this.columnNumbers[key].span}`);\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-span-${this.columnNumbers[key]}`);\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\tObject.keys(this.offsets).forEach(key => {\n\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-start${this.offsets[key] + 1}`);\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\t// Set column classes for flex grid\n\t\t\t\tif (columnKeys.length <= 0) {\n\t\t\t\t\tthis._columnClasses.push(\"cds--col\");\n\t\t\t\t}\n\n\t\t\t\tcolumnKeys.forEach(key => {\n\t\t\t\t\tif (this.columnNumbers[key] === \"nobreak\") {\n\t\t\t\t\t\tthis._columnClasses.push(`cds--col-${key}`);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis._columnClasses.push(`cds--col-${key}-${this.columnNumbers[key]}`);\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\tObject.keys(this.offsets).forEach(key => {\n\t\t\t\t\tthis._columnClasses.push(`cds--offset-${key}-${this.offsets[key]}`);\n\t\t\t\t});\n\t\t\t}\n\t\t} catch (err) {\n\t\t\tconsole.error(`Malformed \\`offsets\\` or \\`columnNumbers\\`: ${err}`);\n\t\t}\n\n\t\t/**\n\t\t * Append the classes passed so they aren't overriden when we set the column classes\n\t\t * from host binding\n\t\t */\n\t\tif (this.class) {\n\t\t\tthis._columnClasses.push(this.class);\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tDirective,\n\tHostBinding,\n\tInput,\n\tOnChanges,\n\tOnDestroy,\n\tOnInit,\n\tOptional\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { GridService } from \"./grid.service\";\n\n@Directive({\n\tselector: \"[cdsCol], [ibmCol]\"\n})\nexport class ColumnDirective implements OnInit, OnChanges, OnDestroy {\n\t@HostBinding(\"class\")\n\tget columnClasses(): string {\n\t\treturn this._columnClasses.join(\" \");\n\t}\n\tset columnClasses(classes: string) {\n\t\tthis._columnClasses = classes.split(\" \");\n\t}\n\n\t@Input() class = \"\";\n\n\t/**\n\t * Defines columns width for specified breakpoint\n\t * Accepts the following formats:\n\t * - {[breakpoint]: number}\n\t * - {[breakpoint]: \"auto\"} - css only\n\t * - {[breakpoint]: {[start|end]: number}} - css only\n\t *\n\t * Example:\n\t * <div cdsCol [columnNumbers]={md: 3, lg: 4}></div>\n\t */\n\t@Input() columnNumbers = {};\n\n\t/**\n\t * Defines columns offset, which increases the left margin of the column.\n\t * This field will only work with flexbox grid.\n\t *\n\t * Accepts the following formats:\n\t * - {[breakpoint]: number}\n\t *\n\t * Example:\n\t * <div cdsCol [offsets]={md: 3, lg: 4}></div>\n\t */\n\t@Input() offsets = {};\n\n\t/**\n\t * Set to `true` to use css grid column hang class\n\t * This will only work when `isCss` property is set to true\n\t *\n\t * Useful when trying to align content across css grid/subgrid\n\t */\n\t@Input() columnHang = false;\n\n\tprotected _columnClasses: string[] = [];\n\n\tprivate isCssGrid = false;\n\tprivate subscription = new Subscription();\n\n\tconstructor(@Optional() private gridService: GridService) {}\n\n\tngOnInit() {\n\t\tif (this.gridService) {\n\t\t\tthis.subscription = this.gridService.gridObservable.subscribe((isCssGrid: boolean) => {\n\t\t\t\tthis.isCssGrid = isCssGrid;\n\t\t\t\tthis.updateColumnClasses();\n\t\t\t});\n\t\t} else {\n\t\t\tthis.updateColumnClasses();\n\t\t}\n\t}\n\n\tngOnChanges() {\n\t\tthis.updateColumnClasses();\n\t}\n\n\t/**\n\t * Unsubscribe from subscription\n\t */\n\tngOnDestroy() {\n\t\tthis.subscription.unsubscribe();\n\t}\n\n\tprivate updateColumnClasses() {\n\t\ttry {\n\t\t\tthis._columnClasses = [];\n\t\t\tconst columnKeys = Object.keys(this.columnNumbers);\n\n\t\t\t// Assign classes based on the type of grid used.\n\t\t\tif (this.isCssGrid) {\n\t\t\t\t// Default css grid class\n\t\t\t\tthis._columnClasses.push(\"cds--css-grid-column\");\n\t\t\t\tif (this.columnHang) {\n\t\t\t\t\tthis._columnClasses.push(\"cds--grid-column-hang\");\n\t\t\t\t}\n\n\t\t\t\tcolumnKeys.forEach(key => {\n\t\t\t\t\t/**\n\t\t\t\t\t * Passing in `auto` to a breakpoint as such: {'md': 'auto'}\n\t\t\t\t\t * will assign the element which will automatically determine the width of the column\n\t\t\t\t\t * for the breakpoint passed\n\t\t\t\t\t */\n\t\t\t\t\tif (this.columnNumbers[key] === \"auto\") {\n\t\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-span-auto`);\n\t\t\t\t\t} else if (typeof this.columnNumbers[key] === \"object\") {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * In css grid, objects can be passed to the keys in the following format:\n\t\t\t\t\t\t * {'md': {'start': 3}}\n\t\t\t\t\t\t *\n\t\t\t\t\t\t * These objects are used to position the column\n\t\t\t\t\t\t */\n\t\t\t\t\t\tif (this.columnNumbers[key][\"start\"]) {\n\t\t\t\t\t\t\t// col-start is simular equivalent of flex offset\n\t\t\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-start-${this.columnNumbers[key].start}`);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (this.columnNumbers[key][\"end\"]) {\n\t\t\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-end-${this.columnNumbers[key].end}`);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (this.columnNumbers[key][\"span\"]) {\n\t\t\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-span-${this.columnNumbers[key].span}`);\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-span-${this.columnNumbers[key]}`);\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\tObject.keys(this.offsets).forEach(key => {\n\t\t\t\t\tthis._columnClasses.push(`cds--${key}:col-start-${this.offsets[key]}`);\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\t// Set column classes for flex grid\n\t\t\t\tif (columnKeys.length <= 0) {\n\t\t\t\t\tthis._columnClasses.push(\"cds--col\");\n\t\t\t\t}\n\n\t\t\t\tcolumnKeys.forEach(key => {\n\t\t\t\t\tif (this.columnNumbers[key] === \"nobreak\") {\n\t\t\t\t\t\tthis._columnClasses.push(`cds--col-${key}`);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis._columnClasses.push(`cds--col-${key}-${this.columnNumbers[key]}`);\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\tObject.keys(this.offsets).forEach(key => {\n\t\t\t\t\tthis._columnClasses.push(`cds--offset-${key}-${this.offsets[key]}`);\n\t\t\t\t});\n\t\t\t}\n\t\t} catch (err) {\n\t\t\tconsole.error(`Malformed \\`offsets\\` or \\`columnNumbers\\`: ${err}`);\n\t\t}\n\n\t\t/**\n\t\t * Append the classes passed so they aren't overriden when we set the column classes\n\t\t * from host binding\n\t\t */\n\t\tif (this.class) {\n\t\t\tthis._columnClasses.push(this.class);\n\t\t}\n\t}\n}\n",
             "selector": "[cdsCol], [ibmCol]",
             "providers": [],
             "hostDirectives": [],
@@ -75528,7 +75528,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button-set.stories.ts",
+                "file": "src/breadcrumb/breadcrumb.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75538,7 +75538,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button.stories.ts",
+                "file": "src/button/button-set.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75548,7 +75548,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/icon-button.stories.ts",
+                "file": "src/button/button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75558,7 +75558,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/breadcrumb/breadcrumb.stories.ts",
+                "file": "src/button/icon-button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -78440,41 +78440,41 @@
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button-set.stories.ts",
+                "file": "src/breadcrumb/breadcrumb.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button.stories.ts",
+                "file": "src/button/button-set.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/icon-button.stories.ts",
+                "file": "src/button/button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-icon-button\n\t\t\tbuttonId=\"icon-btn1\"\n\t\t\ttype=\"button\"\n\t\t\t[kind]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[align]=\"align\"\n\t\t\t[buttonNgClass]=\"buttonNgClass\"\n\t\t\t[buttonAttributes]=\"buttonAttributes\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[showTooltipWhenDisabled]=\"showTooltipWhenDisabled\"\n\t\t\tdescription=\"Icon Description\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"copy\" size=\"16\"></svg>\n\t\t</cds-icon-button>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/breadcrumb/breadcrumb.stories.ts",
+                "file": "src/button/icon-button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-icon-button\n\t\t\tbuttonId=\"icon-btn1\"\n\t\t\ttype=\"button\"\n\t\t\t[kind]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[align]=\"align\"\n\t\t\t[buttonNgClass]=\"buttonNgClass\"\n\t\t\t[buttonAttributes]=\"buttonAttributes\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[showTooltipWhenDisabled]=\"showTooltipWhenDisabled\"\n\t\t\tdescription=\"Icon Description\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"copy\" size=\"16\"></svg>\n\t\t</cds-icon-button>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -82302,199 +82302,199 @@
                     "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"width: 500px\">\n\t\t\t<cds-accordion>\n\t\t\t\t<cds-accordion-item [title]=\"title\" (selected)=\"selected($event)\">\n\t\t\t\t\tLorem ipsum dolor sit amet, \\\n\t\t\t\t\tconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \\\n\t\t\t\t\tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \\\n\t\t\t\t\tullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t\t</cds-accordion-item>\n\t\t\t\t<cds-accordion-item [title]=\"titleWithContext\" [context]=\"{ index: 2 }\" (selected)=\"selected($event)\">\n\t\t\t\t\tLorem ipsum dolor sit amet, \\\n\t\t\t\t\tconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \\\n\t\t\t\t\tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \\\n\t\t\t\t\tullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t\t</cds-accordion-item>\n\t\t\t</cds-accordion>\n\t\t</div>\n\t\t<ng-template #title>\n\t\t\t<p class=\"cds--accordion__title\">Section 1 title</p>\n\t\t</ng-template>\n\t\t<ng-template #titleWithContext let-index=\"index\">\n\t\t\t<p class=\"cds--accordion__title\">Section {{ index }} title</p>\n\t\t</ng-template>\n\t`\n})"
                 }
             ],
-            "src/button/button-set.stories.ts": [
+            "src/breadcrumb/breadcrumb.stories.ts": [
                 {
                     "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button-set.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "Template",
+                    "name": "breadcrumbItems",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button-set.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
-                }
-            ],
-            "src/button/button.stories.ts": [
+                    "type": ""
+                },
                 {
-                    "name": "Basic",
+                    "name": "createBreadcrumbItems",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "Template.bind({})"
+                    "defaultValue": "(count: number, content = \"Breadcrumb\"): Array<BreadcrumbItem> => {\n\tif (breadcrumbItems && count === breadcrumbItems.length) {\n\t\treturn breadcrumbItems;\n\t}\n\tbreadcrumbItems = Array(count).fill(0).map((x, i) => ({\n\t\tcontent: `${content} ${i + 1}`,\n\t\thref: \"#\" + (i + 1)\n\t}));\n\treturn breadcrumbItems;\n}"
                 },
                 {
-                    "name": "Template",
+                    "name": "CurrentPage",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
+                    "defaultValue": "CurrentPageTemplate.bind({})"
                 },
                 {
-                    "name": "WithIcon",
+                    "name": "CurrentPageTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "WithIconTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb>\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item current=\"true\" href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
                 },
                 {
-                    "name": "WithIconTemplate",
+                    "name": "Model",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseleave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tWith icon\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n\t\t</button>\n\t`\n})"
-                }
-            ],
-            "src/breadcrumb/breadcrumb.stories.ts": [
+                    "defaultValue": "ModelTemplate.bind({})"
+                },
                 {
-                    "name": "Basic",
+                    "name": "ModelTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "Template.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: {\n\t\t...args,\n\t\tcreateBreadcrumbItems\n\t},\n\ttemplate: `\n\t\t<cds-breadcrumb\n\t\t\t[noTrailingSlash]=\"noTrailingSlash\"\n\t\t\t[threshold]=\"threshold\"\n\t\t\t[items]=\"createBreadcrumbItems(itemCount, content)\">\n\t\t</cds-breadcrumb>\n\t`\n})"
                 },
                 {
-                    "name": "breadcrumbItems",
+                    "name": "ModelWithTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": ""
+                    "type": "",
+                    "defaultValue": "ModelWTemplate.bind({})"
                 },
                 {
-                    "name": "createBreadcrumbItems",
+                    "name": "ModelWTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(count: number, content = \"Breadcrumb\"): Array<BreadcrumbItem> => {\n\tif (breadcrumbItems && count === breadcrumbItems.length) {\n\t\treturn breadcrumbItems;\n\t}\n\tbreadcrumbItems = Array(count).fill(0).map((x, i) => ({\n\t\tcontent: `${content} ${i + 1}`,\n\t\thref: \"#\" + (i + 1)\n\t}));\n\treturn breadcrumbItems;\n}"
+                    "defaultValue": "(args) => ({\n\tprops: {\n\t\t...args,\n\t\tcreateBreadcrumbItems,\n\t\twithTemplate\n\t},\n\ttemplate: `\n\t\t<ng-template #breadcrumbTemplate let-item>\n\t\t\t{{ templateContent }}{{ item.content }}\n\t\t</ng-template>\n\t\t<cds-breadcrumb\n\t\t\t[noTrailingSlash]=\"noTrailingSlash\"\n\t\t\t[threshold]=\"threshold\"\n\t\t\t[items]=\"withTemplate(breadcrumbTemplate, createBreadcrumbItems(itemCount, content))\">\n\t\t</cds-breadcrumb>\n\t`\n})"
                 },
                 {
-                    "name": "CurrentPage",
+                    "name": "Skeleton",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "CurrentPageTemplate.bind({})"
+                    "defaultValue": "WithSkeleton.bind({})"
                 },
                 {
-                    "name": "CurrentPageTemplate",
+                    "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb>\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item current=\"true\" href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
                 },
                 {
-                    "name": "Model",
+                    "name": "WithSkeleton",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "ModelTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb skeleton=\"true\" [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
                 },
                 {
-                    "name": "ModelTemplate",
+                    "name": "withTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: {\n\t\t...args,\n\t\tcreateBreadcrumbItems\n\t},\n\ttemplate: `\n\t\t<cds-breadcrumb\n\t\t\t[noTrailingSlash]=\"noTrailingSlash\"\n\t\t\t[threshold]=\"threshold\"\n\t\t\t[items]=\"createBreadcrumbItems(itemCount, content)\">\n\t\t</cds-breadcrumb>\n\t`\n})"
-                },
+                    "defaultValue": "(templateRef, items) => items.map(item => Object.assign(item, { template: templateRef }))"
+                }
+            ],
+            "src/button/button-set.stories.ts": [
                 {
-                    "name": "ModelWithTemplate",
+                    "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button-set.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "ModelWTemplate.bind({})"
+                    "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "ModelWTemplate",
+                    "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button-set.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: {\n\t\t...args,\n\t\tcreateBreadcrumbItems,\n\t\twithTemplate\n\t},\n\ttemplate: `\n\t\t<ng-template #breadcrumbTemplate let-item>\n\t\t\t{{ templateContent }}{{ item.content }}\n\t\t</ng-template>\n\t\t<cds-breadcrumb\n\t\t\t[noTrailingSlash]=\"noTrailingSlash\"\n\t\t\t[threshold]=\"threshold\"\n\t\t\t[items]=\"withTemplate(breadcrumbTemplate, createBreadcrumbItems(itemCount, content))\">\n\t\t</cds-breadcrumb>\n\t`\n})"
-                },
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
+                }
+            ],
+            "src/button/button.stories.ts": [
                 {
-                    "name": "Skeleton",
+                    "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "WithSkeleton.bind({})"
+                    "defaultValue": "Template.bind({})"
                 },
                 {
                     "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
                 },
                 {
-                    "name": "WithSkeleton",
+                    "name": "WithIcon",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb skeleton=\"true\" [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
+                    "defaultValue": "WithIconTemplate.bind({})"
                 },
                 {
-                    "name": "withTemplate",
+                    "name": "WithIconTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(templateRef, items) => items.map(item => Object.assign(item, { template: templateRef }))"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseleave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tWith icon\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n\t\t</button>\n\t`\n})"
                 }
             ],
             "src/checkbox/checkbox.stories.ts": [